dzhax Posted April 3, 2013 Share Posted April 3, 2013 I am using some JS to resize objects using slidersI have the following html <div id="header"> <div style="display:inline; position:absolute;bottom:0px;"> <table style="border-collapse:collapse;"> <tr> <td id="headLeft" class="header"> </td> <td id="headCenter" class="header"> </td> <td id="headRight" class="header"> </td> </tr> </table> </div></div> Also I have the following CSS: #header{position:fixed;top:0px;left:0px;right:0px;vertical-align: bottom;text-align:center;color:silver;z-index:1000;}.header{padding:0 0 0 0; margin:0 0 0 0;}#headLeft{background:url('../img/topleft.png') transparent no-repeat bottom left;width:30px;height:1000px;}#headCenter{background:url('../img/topcenter.png') transparent repeat-x bottom center;height:1000px;width:200px;}#headRight{background:url('../img/topright.png') transparent no-repeat bottom right;width:30px;height:1000px;}#header table{margin:auto;} And then I am using the following JS: function updateSlider(amt){ adjustHeight = screen.height - amt; $('#header').css('bottom', adjustHeight+'px'); $('#header').css('height', amt+'px'); $('#sliderValue').text(amt);} function loadHeader(){ hwidth = screen.availWidth - 60+"px"; $('#headerCenter').css('width', hwidth); updateSlider(15);} function updateSlider2(amt){ $('#headerCenter').css('width', amt+'px'); $('#sliderValue2').text(amt);} updateSlider() works fineupdateSlider2() doesn't re-size the width at all.also loadHead() is also not re-sizing the width either. Can anyone see a mistake i'm making... I have been staring at this for like 2 hours now. Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2013 Share Posted April 3, 2013 Try using parseInt() before using the value. $('#headerCenter').css('width', parseInt(amt)+'px'); The reason you don't need parseInt in the updateSlider() function is because it is automatically done during the subtraction operation. The + operator has two meanings, though, so it is what causes trouble if you haven't applied parseInt() first.As for loadHeader(), the precedence of the operation might be a problem. Use parentheses. hwidth = (screen.availWidth - 60) +"px"; Link to comment Share on other sites More sharing options...
dzhax Posted April 3, 2013 Author Share Posted April 3, 2013 (edited) I modified the JS with your suggestion and its still not working function updateSlider(amt){ adjustHeight = screen.height - amt; $('#header').css('bottom', adjustHeight+'px'); $('#header').css('height', amt+'px'); $('#sliderValue').text(amt);} function loadHeader(){ hwidth = screen.availWidth - 60; $('#headerCenter').css('width', parseInt(hwidth)+'px'); updateSlider(15);} function updateSlider2(amt){ $('#headerCenter').css('width', parseInt(amt)+'px'); $('#sliderValue2').text(amt);} if your want to see the actual page: www.watchtbr.com/rizeup the getHeader button calls loadHeader()and the top slider does the heightthe bottom slider does the width. I am using chrome to test. Edited April 3, 2013 by dzhax Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2013 Share Posted April 3, 2013 This doesn't seem compatible with Firefox. I tested in Chrome. I'm looking for the #headerCenter element but there doesn't seem to be one. Link to comment Share on other sites More sharing options...
dzhax Posted April 3, 2013 Author Share Posted April 3, 2013 (edited) oh wow... i just realized its called headCenter not headerCenter. I knew it was something like a typo. I'll change that bit of code and see. yea its working now. thanks for the help. Edited April 3, 2013 by dzhax Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now