trouble resizing objects

[dzhax]

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.

[Ingolme]

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"; 

[dzhax]

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

[Ingolme]

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.

[dzhax]

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