One image SS problems

[caseybaggz]

Hey dudes and dudettes,
I’m pretty much a programming noob, so please have mercy. I am trying to create a one image SS that when you click one of the nav links, causes the img to change to a different location. I can get the page to scroll, but when I try and alter the code for only the img to scroll, nothing happens? WHYYYY?!

Please help!

Here is the site: http://mindhandle.com/UMCsite_v2/

[CrocoDillon]

Since you use margin to position the image, why not use jQuery animation on the margin?

[caseybaggz]

Hey Croco,
Thanks so much for the comment.
I have just updated the site with JQuery trying to animate the margin, it’s still not working? :/ Check it out. Right now, only “media” is targeted for the animation. THIS IS SO FRUSTRATING!!!

http://mindhandle.com/UMCsite_v2/#

[CrocoDillon]

For starters, you need to load your script after you load jQuery.

Unrelated to that issue, you have some invalid html. Your anchor elements should be inside the `li` elements, not the other way around. Width and height on the `img` should be integers.

[caseybaggz]

Wow, thanks for the quick lesson (I can’t believe I did all that stuff. :P). I appreciate you keeping your patience with me. I have fixed all that stuff and it is still not working? This is dumb…

[CrocoDillon]

Browsers are too forgiving :P

[caseybaggz]

Yeah. SO! I figured out the code. I re-arranged the nav above the img and declared a variable of the nav tab which was used to create a function that had the .click to the proper position. what a freaking journey!

Here it is:
$(document).ready(function(){

// create buttons to move to specific slide
var $mediaButton = $(‘nav ul #media a’);
var $connectButton = $(‘nav ul #connect a’);
var $contactButton = $(‘nav ul #contact a’);
var $manageButton = $(‘nav ul #manage a’);
var $marketingButton = $(‘nav ul #marketing a’);
var $researchButton = $(‘nav ul #research a’);

$mediaButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “-=1400px”}, “slow”);
});
$connectButton.click(function(){
$(“div .slide img”).animate({“marginTop”: “+=1400px”}, “slow”);
});
$contactButton.click(function(){
$(“div .slide img”).animate({“marginTop”: “-=1400px”}, “slow”);
});
$manageButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “+=1400px”}, “slow”);
});
$marketingButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “-=700px”, “marginTop”: “-=700px”}, “slow”);
});
$researchButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “+=700px”, “marginTop”: “+=700px”}, “slow”);
});
});

[caseybaggz]

$(document).ready(function(){

// create buttons to move to specific slide
var $mediaButton = $(‘nav ul #media a’);
var $connectButton = $(‘nav ul #connect a’);
var $contactButton = $(‘nav ul #contact a’);
var $manageButton = $(‘nav ul #manage a’);
var $marketingButton = $(‘nav ul #marketing a’);
var $researchButton = $(‘nav ul #research a’);

$mediaButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “-=1400px”}, “slow”);
});
$connectButton.click(function(){
$(“div .slide img”).animate({“marginTop”: “+=1400px”}, “slow”);
});
$contactButton.click(function(){
$(“div .slide img”).animate({“marginTop”: “-=1400px”}, “slow”);
});
$manageButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “+=1400px”}, “slow”);
});
$marketingButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “-=700px”, “marginTop”: “-=700px”}, “slow”);
});
$researchButton.click(function(){
$(“div .slide img”).animate({“marginLeft”: “+=700px”, “marginTop”: “+=700px”}, “slow”);
});
});

[CrocoDillon]

Did it work?

Edit: It’s marked as solved so I guess it did :)

[caseybaggz]

Yeah man! Thanks for hanging with me on this thread!

[Author]

Posts