Home › Forums › JavaScript › Start/Stop Slider is oversliding to the left…
- This topic is empty.
-
AuthorPosts
-
June 9, 2009 at 5:35 pm #25100pjiMember
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 #59013Mr KiTT3NMember"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
attaching the onmouseout / onmouseover on the element is generally bad practice specially for just rollovers
try just writing it in cssa#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 elementJune 15, 2009 at 12:29 am #59087pjiMemberThanks 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…
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.