Grow your CSS skills. Land your dream job.

One image SS problems

  • # April 4, 2013 at 6:26 pm

    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/

    # April 4, 2013 at 6:30 pm

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

    # April 5, 2013 at 5:53 pm

    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/#

    # April 6, 2013 at 5:47 am

    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.

    # April 8, 2013 at 10:34 am

    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…

    # April 8, 2013 at 2:42 pm

    Browsers are too forgiving :P

    # April 8, 2013 at 2:49 pm

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

    # April 8, 2013 at 2:50 pm

    $(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”);
    });
    });

    # April 8, 2013 at 2:54 pm

    Did it work?

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

    # April 9, 2013 at 4:16 pm

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

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

You must be logged in to reply to this topic.

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