Topic awaiting preservation: Vertical Resizing (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21768" title="Pages that link to Topic awaiting preservation: Vertical Resizing (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Vertical Resizing <span class="small">(Page 1 of 1)</span>\$

Blaise Nervous Wreck (II) Inmate From: Insane since: Jun 2003	posted 05-12-2004 10:45 Hi guys, I've got a tricky one here, and so far hacen't found any clues out on the big bad WWW, so if you have any, I'd much appreciate it! I've got a page that contains a fixed footer, which basically holds a drop shadow for the content area which has a left and right border set. I've got my footer fixed in both Moz and IE6 with standards mode on, and what I'd like is that when the user resizes the window, the content div always fills up the verticle space towards the footer, thus not breaking the box. I hope I've explained that correctly, anyway, any links or suggestions, I'm listening! Cheers, Blaise
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 05-12-2004 12:50 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
Blaise Nervous Wreck (II) Inmate From: Insane since: Jun 2003	posted 05-13-2004 15:02 Ok, I've been doing something else for a bit, but now I've come back to this little gem, here's what I've got so far... code: #main { margin: 0px; width: 100%; height: 400px; background-color: yellow; } That's my CSS right there! Now my Javascript... code: function resizeMe(myDiv){ var d=document.getElementById(myDiv) //if(d.style.height<300){d.style.height=300) alert(d.style.height) } Now you can see here I've commented out a bit of code, but the if statement is what I intend to use. Finally my HTML... code: <body> <div id="main"> Content is King Content is King Content is King Content is King <a href="javascript:resizeMe('main')">Click Me!!</a> </div> </body> Right so That's all pretty straight forward, however when I click the link my alert pops up but with no value In my real example the content in the div will vary greatly in size, and I won't have a height (or min-height) specified. Any clues? Cheers, Blaise. EDIT I've modified the alert in my javaScript functio to use offsetHeight instead of height, and I get 'Undefined' I thought that might work (Edited by Blaise on 05-13-2004 16:29)
Blaise Nervous Wreck (II) Inmate From: Insane since: Jun 2003	posted 05-13-2004 16:41 Ok, I've finally done it!! here's the final function, it took me ages to find anything on the web so hopefully putting it here might be helpful to somebody else So here's my final javascript function, it checks the height of the div, then resizes it if necessary... code: function resizeMe(myDiv){ var d=document.getElementById(myDiv) if(d.offsetHeight<300){d.style.height=300} } it turns out that to use offsetHeight, you don't need to put 'style.' infront of it. Cheers, Blaise.

Topic awaiting preservation: Vertical Resizing (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21768" title="Pages that link to Topic awaiting preservation: Vertical Resizing (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Vertical Resizing <span class="small">(Page 1 of 1)</span>\$

Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

posted 05-12-2004 10:45

Hi guys,

I've got a tricky one here, and so far hacen't found any clues out on the big bad WWW, so if you have any, I'd much appreciate it!

I've got a page that contains a fixed footer, which basically holds a drop shadow for the content area which has a left and right border set.

I've got my footer fixed in both Moz and IE6 with standards mode on, and what I'd like is that when the user resizes the window, the content div always fills up the verticle space towards the footer, thus not breaking the box.

I hope I've explained that correctly, anyway, any links or suggestions, I'm listening!

Cheers,

Blaise

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 05-12-2004 12:50

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

posted 05-13-2004 15:02

Ok, I've been doing something else for a bit, but now I've come back to this little gem, here's what I've got so far...

code:

#main {

  margin: 0px;

  width: 100%;

  height: 400px;

  background-color: yellow;

}

That's my CSS right there!

Now my Javascript...

code:

function resizeMe(myDiv){

  var d=document.getElementById(myDiv)

  

  //if(d.style.height<300){d.style.height=300)

  alert(d.style.height)

}

Now you can see here I've commented out a bit of code, but the if statement is what I intend to use.

Finally my HTML...

code:

<body>

  <div id="main">

    Content is King Content is King Content is King Content is King

    <a href="javascript:resizeMe('main')">Click Me!!</a>

  </div>

</body>

Right so That's all pretty straight forward, however when I click the link my alert pops up but with no value

In my real example the content in the div will vary greatly in size, and I won't have a height (or min-height) specified.

Any clues?

Cheers,

Blaise.

*EDIT*
I've modified the alert in my javaScript functio to use offsetHeight instead of height, and I get 'Undefined' I thought that might work

(Edited by Blaise on 05-13-2004 16:29)

Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

posted 05-13-2004 16:41

Ok, I've finally done it!!

here's the final function, it took me ages to find anything on the web so hopefully putting it here might be helpful to somebody else

So here's my final javascript function, it checks the height of the div, then resizes it if necessary...

code:

function resizeMe(myDiv){

  var d=document.getElementById(myDiv)



  if(d.offsetHeight<300){d.style.height=300}

}

it turns out that to use offsetHeight, you don't need to put 'style.' infront of it.

Cheers,

Blaise.