I'm using the jQuery Superslides plugin here: http://dougalpaterson.com.s69396.gridserver.com
And I want to redirect the user to the main website on the 4th click of the .next arrow (after the last slide), rather than looping through the slideshow again.
I've managed to add the address to the href using this js:
$('#slides').superslides({
animation: 'fade'
});
var clicked=0;
$('a.next').on('click', function (e) {
clicked++;
if (clicked >= 3) {
clicked = 0;
$("a.next").attr("href", "http://www.google.com/");
} else {
e.preventDefault();
}
});
But when I click on the arrow, it doesn't send the user to the URL. I think this may be because of the:
e.preventDefault();
In the original plugin.
How can I remove the preventDefault, so that I send the user to my desired URL?
Thanks in advance!!
Just as you suspect it's the preventDefault() method which prevents the default behaviour of the link (which would be to send the user to the href). So what you could do (if sending the user to some URL is all you want on the fourth click) is just change:
$("a.next").attr("href", "http://www.google.com/");
to:
window.location = "http://www.google.com/";
This would redirect the user instead of setting the href of the link.
This would work if you pressed the .next-link four times in a row. It would also work if you pushed this sequence though: .next->.prev->.next->.prev->.next->.prev->.next which might not be what you'd want (as it counts any clicks on the .next-link no matter where in the slideshow the user actually is).
So a better solution might be to actually check if the user is actually on the last slide when clicking the .next-link, and if so: redirect the user.
Related
I have a website where the subscription form will appear when user click on a subscribe button and will add # to the url(http://signature-bravo.dev/#subscribe_form).
My question is how to make the page reload (usually when user click back button on browser) without showing the subscription form even the url is still http://signature-bravo.dev/#subscribe_form. It just appear when user click on a subscribe button.
How to archive this?
Thanks in advance!
If you are using jQuery this should work:
$(window).on('unload', function(){
window.location.hash = '';
});
It still leaves the '#', but nothing after.
If you don't want to use jQuery, you can use this code:
window.onunload=function(){
window.location.hash = '';
}
I have 4 pages within my JQM main HTML file. When I switch to one using changepage it's fine the first time, but I use a data-rel=back button to go back and this switches to the previous page but then bounces back to the page that has the back button. Should I just not use data-rel=back? If not what alternative is there?
Using JQM 1.3.1
$("#listView").on("vclick","li", function(e) {
//ajax call to get results for second page
$.mobile.changePage('#second');
}
Button on second page
Back
To go to previous page programmatically, use the below code. You need also to use stopImmediatePropagation(); to stop jQuery Mobile from jumping twice, which will result showing the same page.
Edit: I tested it on iPad, preventDefault() is required too.
Demo
$(document).on('vclick', '[data-rel=back]', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var back = $.mobile.activePage.prev('[data-role=page]');
$.mobile.changePage(back, {
transition: 'slide',
reverse: true });
});
Use this one. You can redirect between pages using location.hash=" " with page id in it.
DEMO http://jsfiddle.net/yeyene/uJz3E/7/
$("#listView").on("vclick","li", function(e) {
// second is the page you want to redirect on click.
location.hash = "second";
});
I have a application where i have disabled the back button of IE8 by using the following code.
window.history.forward();
function noBack() {
window.history.forward();
}
I know this code takes the page back and again moves the page forward. i have called a function onload of the page which makes a textbox read only. i have used the following code to make it read only.
$("#IDofTheTextBox").attr('readonly',true);
but if i select the textbox and try to edit by pressing "BackSpace" button, IE back button is getting invoked and the textbox which was readonly is not readonly anymore. Can anyone help me how to solve this issue?
The answer is simply "NO"
If you're trying to prevent the user from losing their work, try something like:
window.onbeforeunload = function() { return "Are you sure want to leave this page?."; };
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
You add the above javascript functions in the js file and onload call the function changeHashOnLoad().
its working fine in IE8. i just tested it.
I dont know what your page is trying to do... but this is what we do:
We have an assessment where we do not want the browser buttons enabled... because we run ajax/logic when the user hits next/back etc (to determine what to display next based on their inputs). Back and forward buttons can muddy that process up.
So..... we have users open our assessments in A NEW WINDOW so the back button is already disabled...(there is no prior history in a new window). Then, Our next/back buttons use window.location.replace(url); This will prevent a history item from being created. Therefore, the back/forward buttons are never enabled and they must use the next/prev buttons to navigate our tool.
I would not try to muck with the buttons outside of something like the example I provided.
I am trying to handle browser back button event but i could not find any solution.
I want to ask user if he clicks on browser back button using "confirm box" if he chooses ok i have to allow back button action else i have to stop back button action.
Can any one help me in implementing this.
Warn/confirm User if Back button is Pressed is as below.
window.onbeforeunload = function() { return "Your work will be lost."; };
You can get more information using below mentioned links.
Disable Back Button in Browser using JavaScript
I hope this will help to you.
You can also add hash when page is loading:
location.hash = "noBack";
Then just handle location hash change to add another hash:
$(window).on('hashchange', function() {
location.hash = "noBack";
});
That makes hash always present and back button tries to remove hash at first. Hash is then added again by "hashchange" handler - so page would never actually can be changed to previous one.
I want to use onbeforeunload to give a message to users before leaving certain pages.
Is it possible to know which url they are supposed to jump to at the onbeforeunload event?
Thanks
Is it possible to know which url they are supposed to jump to at the onbeforeunload event?
No, definitely not. The onbeforeunload event tells you only that the page is about to be unloaded, but not why.
It depends on how the user is leaving the page.
If they are typing an url in the address bar - then you're out of luck. As far a I know there's no way to capture the url of an address bar jump.
If they are clicking on a link contained somewhere on the page - that you can use the click event to capture the url and then decide how you want to handle things.
I posed a similar question
How can i get the destination url of a link on the web page in the javascript onbeforeunload event?
because I had a project to fix a wholesale order form. During the process of filling out an order my client's customers would go back to the catalog to check on a product's detail page and loose the current information on their order form.
By using the code below (which uses JQuery though I'm sure you could create the same thing in pure Javascript if you had to) I could tell when the user clicked a link that would leave the order form and then give them the option of opening the link in a new window/tab or loading the url in the current window and loosing their form data, or just returning to the form. This code works with all of the major browsers, at least their more recent versions.
$('body a').click(function(e) {
//if link references a page element
if ($(this).attr('href').charAt(0)=="#") {
return;
}
//check if link is to same window
var pathname = window.location.pathname;
var pathname2 = $(this).attr('href');
pathname2 = pathname2.replace(/^.+\.\//, '');
if (pathname.indexOf(pathname2) >= 0) {
//link clicked is contained on same page
//prevent page from getting reloaded & losing data
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return;
}
//link clicked on is another page
if (hasMerchandise) { //var to indicate user has items on order form
//give user options: leave page, open link in other page, stay, etc.
// $('.popupForm-handleExitRequest').click(); //roll your own code
//prevent page from getting reloaded & losing data
//in case user wants to cancel page change or open link in another window
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
} else {
//load new page
$(this).removeAttr('target');
}
});