javascript not running jquery

Question

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"});
        });
}

You may need to delay running this code until the DOM finishes loading, unless you're calling this from some event on the page. — PinnyM
– PinnyM, Commented Jun 6, 2013 at 16:03

Prisoner · Accepted Answer · 2013-06-06 16:10:11Z

2

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.

edited Jun 6, 2013 at 16:10

answered Jun 6, 2013 at 16:04

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

WhyMe Over a year ago

you can also use, $(document).ready(...) to initialize the interval.

Ian Over a year ago

$(function(){ }); so it only starts when jQuery is loaded - you mean "so it only starts when the DOM is loaded", right?

Prisoner Over a year ago

@Ian yes I did. I typed my answer too quickly it seems.

Pedro Over a year ago

my mistake for copying the click event, I'll try that

Michael Geary · Accepted Answer · 2013-06-06 16:21:02Z

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"
        });
    });
}

tymeJV · Accepted Answer · 2013-06-06 16:05:13Z

0

Remove the quotes around your function as well as ():

setInterval(myFunc , 100);

Also, be sure to include this function after the DOM is ready.

answered Jun 6, 2013 at 16:05

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

Bibhas Debnath · Accepted Answer · 2013-06-06 16:07:47Z

0

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.

edited Jun 6, 2013 at 16:07

Bibhas Debnath

15k18 gold badges70 silver badges96 bronze badges

answered Jun 6, 2013 at 16:07

GreedFeed

697 bronze badges

Comments

Pedro · Accepted Answer · 2013-06-07 03:36:25Z

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"});
        }

Collectives™ on Stack Overflow

javascript not running jquery

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related