I am using the jQuery plugin, scrollTo, to navigate through my webpage. When I click on the button, there seems to be a quick flicker and then resumes to continue scrolling normally. I saw other solutions where they call the preventDefault() method, but I don't know how I would implement it in my case. Here is my method that is called when a link is clicked.
function btn_Pressed(goTo){
$(goTo).ScrollTo({
duration: 1200
});
}
It is a generic method that will scroll to whatever anchor is passed as an argument. What am I doing wrong. THIS FLICKER IS SO UGLY!
I did find a solution, however, I don't know if it is the most efficient one. I made a function that handles each button click so I could explicitly call and handle each scroll all while calling preventDefault(). Here is a sample...
$(function(){
$("#btn_home").click(function(e) {
$('#myAffix').ScrollTo({
duration: 1200,
});
e.preventDefault();
});
$("#aboutUs").click(function(e) {
$('#anchorOne').ScrollTo({
duration: 1200,
});
e.preventDefault();
});
$("#btn_home").click(function(e) {
$('#myAffix').ScrollTo({
duration: 1200,
});
e.preventDefault();
});
});
Related
On this page I have a jQuery popup window and thumbnail resizable images. If I mouse over on the thumbnails, the images are resizing perfectly. Also, when I click on the big yellow TV button "QuickBook TV" in the footer, the popup appears perfectly as I want it to.
However, when I click on the "Next" or "Prev" buttons, AJAX is used to load the new content and my jQuery no longer functions for the popup or thumbnail images. I have searched a number of forums looking for information on this issue, but due to having limited knowledge of jQuery I've been unable to understand what I need to do.
Following is the popup jQuery
$(document).ready(function() {
$(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" });
$(".inline").colorbox({ inline: true, width: "50%" });
$(".callbacks").colorbox({
onOpen: function() { alert('onOpen: colorbox is about to open'); },
onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function() { alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function() {
$('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
return false;
});
});
And this is the thumbnails jQuery
$(function() {
var xwidth = ($('.image-popout img').width())/1;
var xheight = ($('.image-popout img').height())/1;
$('.image-popout img').css(
{'width': xwidth, 'height': xheight}
); //By default set the width and height of the image.
$('.image-popout img').parent().css(
{'width': xwidth, 'height': xheight}
);
$('.image-popout img').hover(
function() {
$(this).stop().animate( {
width : xwidth * 3,
height : xheight * 3,
margin : -(xwidth/3)
}, 200
); //END FUNCTION
$(this).addClass('image-popout-shadow');
}, //END HOVER IN
function() {
$(this).stop().animate( {
width : xwidth,
height : xheight,
margin : 0
}, 200, function() {
$(this).removeClass('image-popout-shadow');
}); //END FUNCTION
}
);
});
jQuery selectors select matching elements that exist in the DOM when the code is executed, and don't dynamically update. When you call a function, such as .hover() to add event handler(s), it only adds them to those elements. When you do an AJAX call, and replace a section of your page, you're removing those elements with the event handlers bound to them and replacing them with new elements. Even if those elements would now match that selector they don't get the event handler bound because the code to do that has already executed.
Event handlers
Specifically for event handlers (i.e. .click()) you can use event delegation to get around this. The basic principle is that you bind an event handler to a static (exists when the page loads, doesn't ever get replaced) element which will contain all of your dynamic (AJAX loaded) content. You can read more about event delegation in the jQuery documentation.
For your click event handler, the updated code would look like this:
$(document).on('click', "#click", function () {
$('#click').css({
"background-color": "#f00",
"color": "#fff",
"cursor": "inherit"
}).text("Open this window again and this message will still be here.");
return false;
});
That would bind an event handler to the entire document (so will never get removed until the page unloads), which will react to click events on an element with the id property of click. Ideally you'd use something closer to your dynamic elements in the DOM (perhaps a <div> on your page that is always there and contains all of your page content), since that will improve the efficiency a bit.
The issue comes when you need to handle .hover(), though. There's no actual hover event in JavaScript, jQuery just provides that function as a convenient shorthand for binding event handlers to the mouseenter and mouseleave events. You can, however, use event delegation:
$(document).on({
mouseenter: function () {
$(this).stop().animate({
width: xwidth * 3,
height: xheight * 3,
margin: -(xwidth / 3)
}, 200); //END FUNCTION
$(this).addClass('image-popout-shadow');
},
mouseleave: function () {
$(this).stop().animate({
width: xwidth,
height: xheight,
margin: 0
}, 200, function () {
$(this).removeClass('image-popout-shadow');
}); //END FUNCTION
}
}, '.image-popout img');
jQuery plugins
That covers the event handler bindings. However, that's not all you're doing. You also initialise a jQuery plugin (colorbox), and there's no way to delegate those to elements. You're going to have to simply call those lines again when you've loaded your AJAX content; the simplest way would be to move those into a separate named function that you can then call in both places (on page load and in your AJAX requests success callback):
function initialiseColorbox() {
$(".iframe").colorbox({
iframe: true,
width: "1000px",
height: "500px"
});
$(".inline").colorbox({
inline: true,
width: "50%"
});
$(".callbacks").colorbox({
onOpen: function () {
alert('onOpen: colorbox is about to open');
},
onLoad: function () {
alert('onLoad: colorbox has started to load the targeted content');
},
onComplete: function () {
alert('onComplete: colorbox has displayed the loaded content');
},
onCleanup: function () {
alert('onCleanup: colorbox has begun the close process');
},
onClosed: function () {
alert('onClosed: colorbox has completely closed');
}
});
}
Had the same problem before I was able to found the solution which worked for me.
So if anyone in future can give it a shot and let me know if it was right since all of the solutions I was able to find were a little more complicated than this.
So as said by Tamer Durgun, we will also place your code inside ajaxStop, so your code will be reinstated each time any event is completed by ajax.
$( document ).ajaxStop(function() {
//your code
}
Worked for me :)
// EXAMPLE FOR JQUERY AJAX COMPLETE FUNC.
$.ajax({
// get a form template first
url: "../FPFU/templates/yeni-workout-form.html",
type: "get",
success: function(data){
// insert this template into your container
$(".content").html(data);
},
error: function(){
alert_fail.removeClass("gizle");
alert_fail.addClass("goster");
alert_fail.html("Template getirilemedi.");
},
complete: function(){
// after all done you can manupulate here your new content
// tinymce yükleme
tinymce.init({
selector: '#workout-aciklama'
});
}
Your event handlers are being lost when you replace the content. When you set you hover events, jQuery is setting them on the events on the page currently. So when you replace them with ajax, the events are not associated with those elements because they are new.
To fix this you can either call the function that binds them again or you can instead set the event handler on the document as in this answer using $(document).on
That way the event is set on the document and any new elements will get the event called.
You Can User jQuery's delegate() method which Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.In my case it's working as expected
this $(selector).click(function(e){}
become this after Using delegate() method
$( "body" ).delegate( "selector", "click", function(e) {}
Hope this will help ;)
You can use jQuery ajax's complete function after retrieving data form somewhere, it will see updated elements after ajax complete
This worked for me,
instead of:
$(document).ready(function(){
//code
});
I did:
$(document).on('mouseenter', function(){
//code
});
I'm late to the party but I would combine two of the answers. What worked for my specific needs was to incorporate the ajaxstop within the complete
complete: function () {
$( document ).ajaxStop(function() {
//now that all have been added to the dom, you can put in some code for your needs.
console.log($(".subareafilterActive").get().length)
})
}
Just an alternative.
$(window).on('load', _ => {
// some jQuery code ..
})
This binds any delegated handler to the window. It will fire once the window is fully loaded including all graphics/includes/hooks/requests not just the DOM.
$(document).ready(_ => ... preserves events to be fired after only the DOM is ready which does not apply on dynamically loaded content by AJAX. Either you can run a function or any event when a specific element is fully loaded by defining it as #Anthony Grist explained in his answer or bind your load event to the window as shown above.
https://api.jquery.com/load-event/
https://api.jquery.com/on/#on-events-selector-data-handler
Having some problems with JavaScript / jQuery.
We're currently using a "shortcode" from Visual Composer (WordPress plugin) that creates (horizontal) tabs. We'we made some custom changes, but only visually (images/css).
We're trying to make it so that when you click on a tab you automatically scroll down to the content.
I've tried wrapping the script in
jQuery(document).ready( function({});
jQuery(window).ready( function({});
and also tried replacing .ready() with .load()
jQuery(".pws_tabs_controlls_item").children().click(function(){
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
However! If you copy the entire script and paste it in the Console in Chrome/Firefox it will work as intended, based on that I'd say that the script it self works, it feels like it's not loading or registering or w/e.
Is there any (obvious) problem/mistake we've made?
I'd be happy to provide additional information if neccessary (e.g. the website address)
Any help would be greatly appreciated!
The VisualComposer plugin renders only after the document is ready, and that's why it's not working.
The best way to solve your problem is by using jQuery's event delegation, e.g:
jQuery(document).on('click', '.pws_tabs_controlls_item > a', function() {
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
UPDATE
After your comment, I can see that the anchor tags inside your .pws_tabs_controlls_item elements already have a click event listener, and it also uses event.stopPropagation(), so my code above will never be executed.
The other way to solve your problem, is by dirty-checking when the element is available, e.g:
function waitForAvailability(selector, callback) {
if (jQuery('selector').length === 0) {
callback();
}
else {
setTimeout(function() {
waitForAvailability(selector, callback);
}, 0);
}
}
And then, you can use the code you were already using, something like that:
waitForAvailability('.pws_tabs_controlls_item', function() {
jQuery(".pws_tabs_controlls_item").children().click(function(){
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
});
I load a page with AJAX. That page contains the following code (for div' movement animation, #1 moves it to the left and #2 moves it back again)
#1
$('#flipper').click(function () {
$(".l-l").animate({ "left": -267 }, 600, function () {
$('#flipper').addClass('flipper-h');
});
});
#2
$('#flipper.flipper-h').die(); //to prevent .live() event bubbling. I guess
$('#flipper.flipper-h').live('click', function () {
$(".l-l").animate({ "left": 0 }, 600, function () {
$('#flipper').removeClass('flipper-h');
});
});
with that code I have some problems:
1) after first page load, the code #2 has a little freeze before the animation starts
2) after second (and more) page load the #2 code doesn't fire. Why ?
EDIT
I've noticed that the code #2 is being invoked unlimited times (which's weird). But, I've fixed the 1) case by the code:
$('#flipper').click(function () {
if(!$(this).hasClass('flipper-h')) {
$(".l-l").animate({ "left": -267 }, 600, function () {
$('#flipper').addClass('flipper-h');
});
} else {
$(".l-l").animate({ "left": 0 }, 600, function () {
$('#flipper').removeClass('flipper-h');
});
}
});
but the problem 2) is still unsolved. Any ideas ?
EDIT3: Consider these two codes:
http://jsfiddle.net/2zEZT/2/
http://jsfiddle.net/2zEZT/3/
In first example, when you use remove button, elements are removed with elements that looks like same, but they are not. Events are lost.
In second one, elements are removed but click event is binded again after that...
EDIT2: Based on your edit, try to use this function instead. It could behaves better...
$('#flipper').click(function () {
if ($(this).hasClass('flipper-h')) {
$(this).removeClass('flipper-h');
$(".l-l").animate({
"left": 0
}, 600);
} else {
$(this).addClass('flipper-h');
$(".l-l").animate({
"left": -267
}, 600);
}
});
EDIT: I suggest that you still use jQuery 1.7 so I did a little investigation.
At first, you put event onclick on the #flipper.
Then you call die on #flipper.flipper-h element. Which should destroy all live events.
After that, you made a live event on #flipper.flipper-h element, which means that all elementes that exists and will exists will have this event.
Now first click:
animation left: -267 happens,
then callback does #flipper becomes #flipper.flipper-h,
then live event is binded to new #flipper.flipper-h,
Second click:
animation left: -267 happens, but it was already there, so nothing happens at all
then callback does #flipper becomes #flipper.flipper-h, so nothing happens again,
now event is still bubbling, so second animation left: 0 is triggered after 600ms (this is probably your freeze)
now callback removes .flipper-h
Now I dont know how exactly does your ajax works, but it seems that die function removes live event from #flipper forever. So it can't be triggered anymore...
die function doesnt prevent bubbling. It removes live events.
return false or event.stopPropagation does
I'm not that great with jQuery but basically, I have a jQuery that displays when scrolling down, new content.
But that new content has div that are under effect of another jQuery function that is called by ready.
So not it only the content that is loaded first when the page loads is working but when the new content is showing is not working on it to.
So I'm thinking maybe I can link the two jQuerys like a trigger when the second jQuery loads to execute the first one, is it possible? How?
Thanks!
UPDATE:
$(document).ready(function($){
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
};
Try using Jquery .trigger() to trigger an event and then have something listen for that event
$(document).ready(function($){
//your event handler
$('body').on('event', function() {
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
});
};
//when your inifinite scroll finishes trigger the event
$('body').trigger('event');
If all you're doing is attaching a hover event to that class you might also want to think about event delegation, still not sure what your intention is based on your question.
What I understood from your question is that you want a hover event on a div which works well when the page is loaded but it doesn't work when a new div renders. If this is so then try the following code.
$(document).ready(function($){
$('.wrapper-hover').on("mouseenter", function() {
$(this).animate({opacity: '0'}, 1000,
function() {
$(this).animate({opacity: '1'});
});
});
});
I resolved the issue with callback of the infinite scroll jquery. Thanks all!
I'm loading a jQuery UI dialog window, which has some thumbnail images in. On click of an image, I want to return the id of the selected image.
I think I can achieve that using data attributes quite easily. The problem I'm having is that due to the thumbnails being loaded from an external page, I can't capture the click (.image-select) due to the DOM already being loaded. I think this is the case anyway. Correct me if I'm wrong.
Here's the code currently:
(function($) {
$('#opener').click(function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').load('/account/images/thumbnails/').dialog({
autoOpen: false,
height: 560,
width: 670
});
$('.image-select').click(function(e) {
e.preventDefault();
console.log($(this).data('id'));
});
})(jQuery);
Any tips or alternative methods of achieving this will be appreciated.
The load function accepts a callback to be executed after load.
(function($) {
$('#opener').click(function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').load('/account/images/thumbnails/', function(){
$('.image-select').click(function(e) {
e.preventDefault();
console.log($(this).data('id'));
}); //function added in callback
}).dialog({
autoOpen: false,
height: 560,
width: 670
});
})(jQuery);
delegate the on() click event to document or closest static parent present in the document or call the click event inside the callback of load().
$(document).on('click','.image-select',function(e) {
e.preventDefault();
console.log($(this).data('id'));
});
links to read more about on delegates