Reputation: 489
Not sure how to title this but the problem is... I have some jQuery lines that work ok, they are activated first when the page is loaded and then at the click inside a div.
I'm now trying to have the same code running on time intervals but it doesn't work at all nor outputs any error....
Any idea? the website is built on WordPress and the script is running over a picture "slideshow" you can check on http://demo.lavenderwp.com/nowland/
The code I used for time intervals is:
setInterval("myFunc()",100);
function myFunc()
{
$('#slider, .leftNav, .rightNav, .bottomNav').click(function()
{
$(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex <= 100;
}).find('img').wrap('<div class="blue" />') .css({opacity: 0.75, border: "0px white solid"});
$(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex <= 100;
}).find('div.car').css({display: "none"});
$(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex >= 100;
}).find('img').css("background-color","") .css({opacity: 1, border: "15px white solid"});
$(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex >= 100;
}).find('div.car').css({display: "block"});
});
}
Upvotes: 1
Views: 124
Reputation: 489
Amazing guys! Got it working, thanks a lot!
Final code is:
jQuery(function(){
setInterval(myFunc,100);
});
function myFunc()
{
jQuery(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex <= 100;
}).find('img').wrap('<div class="blue" />') .css({opacity: 0.75, border: "0px white solid"});
jQuery(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex <= 100;
}).find('div.car').css({display: "none"});
jQuery(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex >= 100;
}).find('img').css("background-color","") .css({opacity: 1, border: "15px white solid"});
jQuery(".contentHolderUnit").filter(function(i, el)
{
return el.style.zIndex >= 100;
}).find('div.car').css({display: "block"});
}
Upvotes: 0
Reputation: 28880
The answer is: don't do this!
Why are you repeatedly attaching click event listeners ten times a second?!? This will rapidly run out of memory, unless jQuery is clever enough to attach them only once..
You should only have to attach the click events once. If the reason you're doing this is that the DOM elements you're attaching the listeners to are replaced during the slideshow, then use event delegation instead.
Or if the problem is simply that the event listeners don't get attached when the page is first loaded, then as others suggested, use $(document).ready(myFunc);
or $(myFunc);
.
Show more of your code - in particular the relevant HTML - and someone can give more specific suggestions.
Looking at your myInit
code in more detail, the code in that function has a bit of repetition that would be best removed, and also there's an off-by-one error. What happens if one of your elements has a z-index
of exactly 100? It passes all the .filter()
tests. And also the indentation is a bit confusing.
Here's an example of how you could clean up that code:
function myFunc() {
$('#slider, .leftNav, .rightNav, .bottomNav').click(function() {
var $all = $(".contentHolderUnit");
var $lower = $all.filter(function(i, el) {
return el.style.zIndex <= 100; // or should it be < 100 ?
});
var $upper = $all.not( $lower );
$lower.find('img').wrap('<div class="blue" />').css({
opacity: 0.75,
border: "0px white solid"
});
$lower.find('div.car').css({
display: "none"
});
$upper.find('img').css({
backgroundColor: "",
opacity: 1,
border: "15px white solid"
});
$upper.find('div.car').css({
display: "block"
});
});
}
Upvotes: 1
Reputation: 27638
Put your setInterval
(and any jQuery related code) within $(function(){ });
so it only starts when the document is loaded. And as @tymeJV points out, you should pass the function without brackets.
Also, you do realise that the interval time is in milliseconds? Your myFunc
runs 10 times a second. You also don't need to re-bind the click
event. Just do it once and it'll be OK.
Upvotes: 2
Reputation: 69
I believe you may want to wrap your code in $(document).ready()
You can read more about it here: http://learn.jquery.com/using-jquery-core/document-ready/
Hopefully that helps.
Upvotes: 0
Reputation: 104805
Remove the quotes around your function as well as ()
:
setInterval(myFunc , 100);
Also, be sure to include this function after the DOM is ready.
Upvotes: 0