Having a little hang up with jQuery addClass. I have a #story div in my markup that shrinks down when it acquires the "away" class, and then pops back up when it looses that class.
Here's the snag:
$('#story div.x').on('click', function () {
if (!$('#story').hasClass('away')) {
$('#story').addClass('away');
}
});
The code above simply adds a blank class="" to my story element, but...
$('#story div.x').on('click', function () {
if (!$('#story').hasClass('away')) {
setTimeout(function () {
$('#story').addClass('away');
}, 1000);
}
});
That code adds the appropriate class="away" attribute.
What gives?
It sounds like there is another event updating the class, or perhaps the element is not yet ready but becomes available after 1 second, perhaps after an ajax call or when the DOM is ready.
Could that be it?
Related
Here is extremely basic code:
$('.myDiv').click(function() {
$('.anotherDiv').hide();
alert('pause the ui');
$('.anotherDiv').show();
});
When I do the above, and the alert shows, the .anotherDiv still shows. I am expecting it to be hidden.
If I remove the line: $('.anotherDiv').show(); then that div does hide. So I know that jQuery knows his div exists.
I am expecting an alert to pause the UI before it re-shows the div. Is this not how JavaScript/jQuery works?
.hide can take a callback to be run after the element has been hidden:
$('.myDiv').click(function() {
$('.anotherDiv').hide(function() {
alert('pause the ui');
$('.anotherDiv').show();
});
});
The issue is basically that, although the element has been told to hide itself, the browser hasn't repainted, and the alert halts all other execution.
As Barmar says, you can force repainting by returning from the function. You are able to do so using setTimeout, like this:
$('.myDiv').click(function() {
$('.anotherDiv').hide();
setTimeout(
function(){
alert('pause the ui');
$('.anotherDiv').show();
},
0
);
});
I'm making a greasemonkey script for this website: http://tinyurl.com/websiteasdasd and I want to remove the element rodape-ao-vivo, problem is that doing $("#rodape-ao-vivo").remove(); is not working, however, if I do something like
setInterval(function() {
$("#rodape-ao-vivo").remove();
}, 1000);
it works just fine, so I'm basically asking you to help me understand what's going on here. Maybe it's just a small stupid thing but I'm sleepless and really want to get this done.
This DIV is dynamically generated by script, to remove it, you need to wait until this element is availabe in DOM, e.g if for some reason other answers don't work: {or use DOM ready handler}
$(window).on('load', function () {
var interval = setInterval(function () {
if ($("#rodape-ao-vivo").length) {
$("#rodape-ao-vivo").remove();
clearInterval(interval);
}
}, 100);
});
Please make sure that all the elements gets loaded before your use them.So wrap your code inside function which will ensure your elements has been attached to DOM
$("#rodape-ao-vivo").remove(); //will probably will give you an error.
$(function() {
$("#rodape-ao-vivo").remove();
}
Or ,
$( document ).ready(function() {
$("#rodape-ao-vivo").remove();
})
Or,
jQuery( document ).ready(function( $ ) {
$("#rodape-ao-vivo").remove();
});
Or,
window.onload = function() {
$("#rodape-ao-vivo").remove();
}
But when you do ,
setInterval(function() {
$("#rodape-ao-vivo").remove();
}, 1000);
This will give an element time to get load in your DOM.So It working fine.But instead of using setInterval you can use function listed above
Hmm, perhaps you are trying to remove the element before it's created? (The delay helps because in that time the element gets created and you can remove it)
You probably try to remove the element before it even exists. Adding one second delay gives the browser enough time to render the element, so you can remove it then. But it's not guaranteed to work, because one second may not be enough to render that element (slow connection, for example).
So you should make sure the document is ready, jQuery's way to do this is:
$(function() {
$("#rodape-ao-vivo").remove();
});
Or you can wait for the whole document to load:
window.onload = function() {
$("#rodape-ao-vivo").remove();
}
if your doing this when the page is loading then wrap your code use document.ready();
$(document).ready(function(){$("#rodape-ao-vivo").remove();});
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!
Right, I'm getting quite aggitated with this. I'm probably doing something wrong, but here's what I'm doing:
$(document).ready(function () {
$('#somebutton').click(function () {
openPage1();
});
$('#someotherbutton').click(function () {
openPage2();
});
});
var openPage1 = function () {
$('#iframe').attr('src', 'someurl');
$('#iframe').load(function () {
$('#button').click();
});
};
var openPage2 = function () {
$('#iframe').attr('src', 'anotherurl');
$('#iframe').load(function () {
$('#anotherbutton').click();
});
}
Whenever I click somebutton everything goes as expected. However when I click someotherbutton. The .load() from openPage1() is called first and I can't find a way to stop that. The .load() from openPage1() has a button with the same name, however on openPage2() I need to modify the contents before clicking the buttons.
I need to use .load() because I can't click the buttons before the document is ready.
Basically what I need is two seperate .load() instances on the same iframe, that don't fire off on each other.
Besides that, maybe my understanding of jQuery/JS is wrong, but shouldn't the .load() events only be listening after clicking the corresponding button?
Can someone help me out, this has been keeping me busy all afternoon.
Try using on, and once loaded, unbind
$("#iframe").on("load", function(){
$(this).off("load");
$('#button').click();
});
That way you remove the handler you put up before the second button is clicked?
By writing : $('#iframe').load(function (){ $('#button').click(); });, you are adding a listener on the load event, which will stay and be re-executed on each subsequent reload of the iframe.
Here is a jsfiddle to demonstrate this : click on the "reload" button, and see how many times the "loaded" message appears in your console.
in your case, if you click on #somebutton, then on #someotherbutton, after the second click, you will have two handlers bound on the load event, and both will be triggered.
If you click 5 times on #somebutton, you should end up calling 5 times $('#button').click().
If you want to execute it once, you can follow Fred's suggestion, or use jQuery .one() binder :
$('#iframe').one('load', function(){ $('#button').click() });
Here is the updated jsfiddle : 'loaded' should be displayed only once per click.
Maybe try and replace the lines in both functions like this:
$('#iframe').load(function() {
$('#anotherbutton').click();
};
$('#iframe').attr('src', 'anotherurl');
Otherwise it might be firing the event before the new event-handler has been set.
This isn't really an answer to your problem Now it is an answer, but I think utilizing functions as they were intended could be beneficial here, i.e.:
//Utilize a single function that takes arguments
var openPage = function (frame, src, eventEl) {
frame.attr('src', src); // If you pass frame as a jQuery object, you don't
frame.on("load", function(){ // need to do it again
$(this).off("load");
evEl.click(); //Same for your buttons
});
}
//Simplify other code
$(document).ready(function () {
$('#somebutton').click(function () {
openPage($("#iframe"),somehref,$("#buttonelement"));
});
$('#someotherbutton').click(function () {
openPage($("#iframe"),anotherhref,$("#someotherbuttonelement"));
});
});
Is there a way to check if jQuery fired the page load events yet, or do you have to roll your own? I need to alter the behavior of links, but I don't want to wait until the page finishes loading because the user could conceivably click on a link on, say, the top half of the page before the page finishes loading. Right now I'm doing it like this:
var pageLoaded = false;
$(function() {
pageLoaded = true;
});
function changeLinks() {
$("a[data-set-already!='true']").each(function() {
$(this).attr("data-set-already", "true").click(...);
});
// Is there something along the lines of jQuery.pageWasLoaded that I can
// use instead?
if (!pageLoaded) {
window.setTimeout(changeLinks, 100);
}
}
changeLinks(); // Added per #jondavidjohn's question
Since you are using the document ready shorthand, I'm guessing you mean when the dom is loaded. For this:
$.isReady
You could use setInterval and clear the interval on domready:
var changeLinksInterval = setInterval(function () {
$("a[data-set-already!='true']").each(function() {
$(this).attr("data-set-already", "true").click(...);
});
}, 100);
$(function () {
clearInterval(changeLinksInterval);
});
By the way, in your code example, you shouldn't need .each() - you should be able to call .attr() and .click() directly and let jQuery do the looping. Unless there is more to your .each() code that you didn't post.
$("a[data-set-already!='true']").attr("data-set-already", "true").click(...);
you could use .live() to initiate a click event that needs additional work when binding.
$("a[data-set-already!='true']").live(function(){
// since this event will only fire once per anchor tag, you
// can safely bind click events within it without worrying
// about getting duplicate bound click events.
var $this = $(this);
$this
.data("dataSetAlready",true)
.click(myClickHandler);
});
this is also a useful technique for late-initializing plugins on elements that may not exist at domReady.