Reputation: 489

javascript not running jquery

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

Answers (5)

Pedro

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

Michael Geary

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

Prisoner

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