Here's what I want to achieve:
When an HTML link is clicked, I want to animate it before leaving the page
If the link is opened in a new window/tab, the animation should not take place
How on earth do I achieve this?
You could use javascript
$(function(){
$(".btn").bind("click",function(){
$(this).animate({'left': '100px'}, 100, function(){
window.location.href = index.html
})
})
})
But you'll have to stop the default action if your button is a link.
You'll need to capture the click event, prevent the default action, do the animation, then load the new page.
If using jquery (Available as a jsfiddle):
$('a').click(function (event) {
event.preventDefault();
$(this).animate({
//whatever
}, function() {
location.href = $(this).attr("href");
});
});
Update: Here's the new jsfiddle that accounts for the situation mentioned in the comments, go there for the updated code. The trick is to look for the keypress of ctrl or command, and abort the newly defined animated click handler if either key is pressed.
Note: The window needs focus before it can detect a keypress, in jsfiddle, that means the frame needs focus before it'll work.
Related
I have big upload form, user can drag and drop images here. But when images are loaded, i'm showing button, which on click should link to some page. But this element instead of loading next page, opens file chose window (its parent default behaviour)
So I'm checking, if event has class, if it's true, I'm using e.preventDefault().
And this works better (I don't have image choose window on link click, but also this link will not work - every event is disabled) My question is, how i can enable linking now?
// jFiler is a parent - upload form, with event - on click it opens window for file choose - like input field.
$(document).on('click', '.jFiler', function(e) {
if ($(event.target).hasClass("jFiler-input-done-btn")) {
e.stopPropagation();
e.preventDefault();
}
});
$('.jFiler-input-done-btn').on('click',function(e) {
// Test works, but this is a link, and it cannot link to another page now...
alert ('test')
});
You break the link execution with e.stopPropagation() and e.preventDefault() in the parent click event. You have to just return true there.
$(document).on('click', '.jFiler', function(e) {
if( $(event.target).hasClass("jFiler-input-done-btn") ) {
return true;
}
});
Just redirect to the other page inside the click event you already attach :
$('.jFiler-input-done-btn').on('click',function(e) {
windows.location.href = $(this).attr('href');
});
//OR also
$('.jFiler-input-done-btn').on('click',function(e) {
e.stopPropagation();
});
Hope this helps.
I have a link on am image that I include dynamically with this jQuery:
//Add back button code onclick
$("#backLocation").replaceWith(" ");
I then set the onCLikc event for the link with:
$("#backClick").on('click', function (e) {
//go back a page
parent.history.back();
});
But it does not go to the previous page.
I am not sure if its because its a locally hosted web app or what, or If I have just structured something wrong. In the adress bar the page just changes from:
page.html to page.html# when I click the back image link I cerated.
Proper .on structure is $(document).on(action, selector, function() {});
Also, you are click an href, which will tell the browser to navigate to a page, then move back a page, resulting in no action being taken. Try adding preventDefault.
I would also suggest accessing the window to go backward in history.
$(document).on('click', "#backClick", function (e) {
e = e || window.event;
e.preventDefault();
window.history.back();
});
Adding window.event will allow for support on IE 8 and older browsers.
You need to update your click binding to following
$(document).on('click', "#backClick", function (e) {
//go back a page
parent.history.back();
});
How do I unbind the window when clicking an anchor tag with a unique ID? I am trying to use beforeunload so that when a user tries to navigate away from the page, they get a prompt asking to confirm they want to do so, but there is an anchor tag on the page that I would like to have not make this occur when clicked. It currently pops up the alert box because of navigating away from the page, but I want to create an exception for this anchor tag. How would I do this? I have tried unbinding onbeforeunload when a user clicks the anchor tag, but I believe my code might be wrong. any suggestions as to a fix for this? I do not understand binding and unbinding very well, so please be patient with me.
Thanks.
this is the code for what I am trying to do:
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
Rest of the jQuery:
$(window).bind('click', function(event) {
if(event.target.href) $(window).unbind('beforeunload');
});
$(window).bind('beforeunload', function(event) {
$('div.offerWindow').css("visibility", "visible");
return 'Press "Stay on Page" and get a special offer!';
});
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
It should be $(window).unbind('beforeunload');.
So something like this:
$(function() {
$(window).bind('beforeunload', function() {
return 'Press "Stay on Page" and get a special offer!';
});
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
});
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});
What I want to happen is, when you click a link (id="dontFollow"), it triggers a click on a different link(id="follow") and stops you from following the original link.
This is how I thought it should be done-
$("#dontFollow").click(function(e){
$("#follow").click();
e.preventDefault();
});
... but it's not working. Whats wrong with my code?
UPDATE:
This is a little more tricky than I originally explained. It appears that I need to "click" on the other link to trigger some other events to cause my page to slide to the anchor. Your suggestions for "window.location" does change the window location but it's not triggering my slide events.
$("#dontFollow").click(function(){
window.open($("#follow").attr('href'));
return false;
});
just return false
Simply have the function return false;
I don't think you can "click a link" programmatically, you can however navigate by setting window.location.href
$('#dontFollow').attr('href','#').click(function(){
window.location.href = $('#follow').attr('href');
});
Your code is correct. Using e.preventDefault() will prevent you from following the link being clicked.
You have't stated what specifically isn't working, but if you're trying to visit the href of the other link, then do this:
$("#dontFollow").click(function(e){
window.location = $("#follow").attr('href');
e.preventDefault();
});