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 divs, , put border around #slider see doing.

if understand question correctly, code want to. check out: http://jsfiddle.net/nn4sj/3/


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -