Grow your CSS skills. Land your dream job.

AnythingSlider – Cannot reproduce results from CodePen.

  • # January 31, 2013 at 8:55 pm

    Trying to link directly to a specific slide using static links, using code found [here](http://css-tricks.com/anythingslider-jquery-plugin/ “code”).

    > $(“#slide-jump1″).click(function(e){ $(‘#slider’).anythingSlider(1); e.preventDefault(); });

    Works perfectly fine in this [CodePen](http://codepen.io/mdroidian/pen/xifgh “codepen link”).
    (above code found at bottom of JS in CodePen)

    Copied and pasted html to index.htm, css to css.css, and js to js.js but cannot reproduce results [here](http://cattire.com/codepen “link to problem”).

    What am I missing?

    # January 31, 2013 at 10:55 pm

    Hi mdroidian!

    The problem is that the `$(‘#slide-jump’).click()` code was incorrectly added INSIDE of the AnythingSlider plugin code. This is only a problem because your `js.js` file is loaded and executed in the `` of your page, which happens before the `` has completed loading. So `#slide-jump` and `#slide-jump1` don’t exist yet.

    So you have two options:

    1) Remove the code from inside of the AnythingSlider code, then move it to where AnythingSlider is initialized (preferred method):

    $(function(){
    $(‘#slider’).anythingSlider(); // add any non-default options here

    $(“#slide-jump”).click(function(e){ $(‘#slider’).anythingSlider(2); e.preventDefault(); });
    $(“#slide-jump1″).click(function(e){ $(‘#slider’).anythingSlider(1); e.preventDefault(); });
    });

    2) Move where you load the `js.js` file to the bottom of the page. This method is suggested by the authors of [HTML5 boilerplate](http://html5boilerplate.com/). It would work just like this, but you still really need to move the code out from inside the plugin code.

    # January 31, 2013 at 11:11 pm

    Thank you Mottie!!

    In the many things I tried, I swear I tried option 1 already. Tried it again, no luck.
    Then I copied and pasted your code, and IT WORKED.
    Finally realized exactly what I did wrong because of this post.

    I quite enjoy this place. :)

    **TLDR; Option 1 works great. I need to learn JS.**

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".