Forums

pji

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:


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

Mr KiTT3N

"pji" said:

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:


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

 $(\"#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

<a onmouseout=\"document.signup.src='./templates/drivelocker/images/signup.png'\" onmouseover=\"this.style.padding='0px 0px 0px 1px';document.signup.src='./templates/drivelocker/images/signup-mo.png'\" href=\"./corporate/howitworks/howitworks.php\" style=\"padding: 0px 0px 0px 1px;\">

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

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

treehouse : what would you like to learn today?

Forums

Start/Stop Slider is oversliding to the left...