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 <head> of your page, which happens before the <body> 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. It would work just like this, but you still really need to move the code out from inside the plugin code.
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.
Trying to link directly to a specific slide using static links, using code found here.
Works perfectly fine in this CodePen. (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.
What am I missing?
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 yourjs.jsfile is loaded and executed in the<head>of your page, which happens before the<body>has completed loading. So#slide-jumpand#slide-jump1don'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):
2) Move where you load the
js.jsfile to the bottom of the page. This method is suggested by the authors of HTML5 boilerplate. It would work just like this, but you still really need to move the code out from inside the plugin code.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.