width - jQuery animate horizontal stretch left issues -
i'm trying stretch div aligned right side of page 30px 100% of page width. javascript moving 30px bar across page.. wrong :(
thank you!
html:
<div id="header"> <div id="logo"> <h1>deetra</h1> </div> </div> <div id="main"> <div id="trigger_left"> <img class="arrow_small" id="main_arrow" src="images/left_small.png" alt="slide menu out" /> </div> <div id="trigger_right"> <img class="arrow_small" id="main_arrow" src="images/right_small.png" alt="slide menu in" /> </div> <div id="slider"> <div class="trans" id="overlay"></div> <div id="content"> <div id="main_nav"> <div class="nav" style="float:left;"> <h3>campaigns</h3> <p>sed enim risus, congue non, tristique in, commodo eu, metus.</p> </div> <div class="nav" style="float:right;"> <h3>contact</h3> <p>sed enim risus, congue non, tristique in, commodo eu, metus.</p> </div> <div class="nav" style="margin:0 auto;"> <h3>collections</h3> <p>sed enim risus, congue non, tristique in, commodo eu, metus.</p> </div> </div> </div> </div> </div>
css:
* { margin:0; } body { width:100%; height:100%; background:url(../images/one.jpg) no-repeat; background-size:100%; padding:0px; font-family:futurastdlight, futura, helvetica, arial, sans-serif; font-size:14px; color:#fff; line-height:120%; } .trans { background-color:#000; -ms-filter:"progid:dximagetransform.microsoft.alpha(opacity=70)"; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70; opacity:0.70; } #logo { width:213px; height:105px; position:relative; background:url(../images/logo.png) no-repeat 0 0; white-space:nowrap; text-indent:9999px; overflow:hidden; } #main { width:100%; height:306px; top:50%; margin-top:-153px; position:absolute; overflow: hidden; } #trigger_left { width:30px; height:100%; float:right; position:relative; z-index:2; } #trigger_right { width:30px; height:100%; float:left; position:relative; z-index:2; } .arrow_small { left:50%; top:50%; margin-left:-6px; margin-top:-12px; position:absolute; } #slider { width:inherit; height:inherit; top:0; right:0; float:right; position:absolute; } #overlay { width:inherit; height:inherit; position:absolute; } #content { width:inherit; height:inherit; position:relative; z-index:1; } #main_nav { width:744px; margin:0 auto; padding:0px 30px 0px 30px; } .nav{ width:208px; padding:20px 10px 20px 10px; text-align:center; } #footer { height:12px; position:absolute; bottom:0; right:0; padding:0px 40px 40px 0px; z-index:1; }
javascript:
$(document).ready(function(){ // hide functions $('#slider').css({width: '30px'}); // navigation drop down menu $('#trigger_left').click(function (){ $('#slider').animate({ width: '100%' }, 1500 ); }); $('#trigger_right').click(function (){ $('#slider').animate({ width: '30px',}, 1500 ); }); });
daniel, put question jsfiddle, changed images blue div
s, , put border around #slider
see doing.
if understand question correctly, code want to. check out: http://jsfiddle.net/nn4sj/3/
Comments
Post a Comment