Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Start/Stop Slider is oversliding to the left…

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25100
    pji
    Member

    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.

    #59013
    Mr KiTT3N
    Member
    "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

    #59087
    pji
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.