Grow your CSS skills. Land your dream job.

Start/Stop Slider is oversliding to the left…

  • pji
    # June 9, 2009 at 5:35 pm

    I made adjustments to the widths in the css to fit in my mockup: http://www.drivelocker.com/newdesign.php and I can’t figure out why, if it is supposed to auto calculate the value, it slides nearly 400px too far. I tried to hardcode the width in the slider.js but I just made it worse… I don’t know anything about javascript, which doesn’t help :)

    The css:

    Code:
    #page-wrap { width: 850px; margin: 0 auto; padding: 10px 0; }

    #slider { background: url(../images/sliderbg.png) repeat-x scroll left bottom; height: 250px; overflow: hidden;
    position: relative; margin: 10px 0; }

    /* DEFAULT is for three panels in width, adjust as needed
    This only matters if JS is OFF, otherwise JS sets this. */
    #mover { width:2880px; position: relative; }

    .slide { padding: 20px 20px; width: 800px; float:left; position: relative; }
    .slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; }
    .slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
    .slide img { position: absolute; top: 20px; left: 400px; }
    #slider-stopper { position: absolute; bottom: 1px; right: 20px; background: #ac0000; color: white;
    padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

    The divs are cut and paste from the example.

    Any help would be appreciated.

    # June 12, 2009 at 5:55 am
    "pji" wrote:
    I made adjustments to the widths in the css to fit in my mockup: http://www.drivelocker.com/newdesign.php and I can’t figure out why, if it is supposed to auto calculate the value, it slides nearly 400px too far. I tried to hardcode the width in the slider.js but I just made it worse… I don’t know anything about javascript, which doesn’t help :)

    The css:

    Code:
    #page-wrap { width: 850px; margin: 0 auto; padding: 10px 0; }

    #slider { background: url(../images/sliderbg.png) repeat-x scroll left bottom; height: 250px; overflow: hidden;
    position: relative; margin: 10px 0; }

    /* DEFAULT is for three panels in width, adjust as needed
    This only matters if JS is OFF, otherwise JS sets this. */
    #mover { width:2880px; position: relative; }

    .slide { padding: 20px 20px; width: 800px; float:left; position: relative; }
    .slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; }
    .slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
    .slide img { position: absolute; top: 20px; left: 400px; }
    #slider-stopper { position: absolute; bottom: 1px; right: 20px; background: #ac0000; color: white;
    padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

    The divs are cut and paste from the example.

    Any help would be appreciated.

    )

    first thing is first… always call your css before javascript…. js reads/changes the dom and the css defines the style of the dom…. (just good practice)

    Code:
    $(“#slider-stopper”).click(function(){
    if ($(this).text() == “Pause”) {
    clearInterval(sliderIntervalID);
    $(this).text(“Start”);
    }
    else {
    sliderIntervalID = setInterval(function(){
    doMove(panelWidth, tooFar);
    }, delayLength);
    $(this).text(“Pause”);
    }
    /* add me at line 77*/
    return false;
    });

    id recommend you adding the return false on the click event of the slider stopper so it doesnt jump to the top of the page every time

    and finally

    Code:

    attaching the onmouseout / onmouseover on the element is generally bad practice specially for just rollovers
    try just writing it in css

    a#home {background: url(…) 0px 0px top left; width: 0px; height: 0px;}
    a#home:hover {background: url(…) 0px 0px top left;} // change background photo of the element

    pji
    # June 15, 2009 at 12:29 am

    Thanks for the advice.

    I tried the return false and other adjustments to the css and it made it better but did not fix the problem. I ditched the mockup and started over.

    Now the start/stop slider works perfectly. I’ve also moved away from the onmouseover setup to css with a color background. CSS is listed before the javascript.

    Nice and clean…

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".