Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > Client Side Scripting
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 01-22-2005, 12:42 PM
  #1
biannucci
Novice (Level 1)
 
Join Date: Jan 2005
Posts: 2
iTrader: (0)
biannucci is on a distinguished road
Changing div height with Javascript

Is there a way to control the size of a <div> element with Javascript based on the size of the browser window? I know how to find the size of a browser window, I just don't know how to change the height of a <div> element with Javascript...

I'm thinking it would be something like this

<div id="divName">
</div>

<script>
document.divName.height = windowHeight-100;
</script>

Am I on the right track here?
biannucci is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 01-22-2005, 01:39 PM
  #2
IKLOP
Deity (Level 17)
 
Join Date: Mar 2002
Location: Charlottesville, VA
Posts: 869
iTrader: (0)
IKLOP is on a distinguished road
try document.getElementById("divName").style.height = windowHeight - 100;
__________________
Tabbed Source: firefox extension to open page source in a new tab instead of a new window
HTMexceL: display your mysql tables with excel style scrolling

"Some of us are trying to do work...hypothetically." -Wally - Dilbert
IKLOP is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 01-22-2005, 02:25 PM
  #3
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 13,139
iTrader: (0)
coothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond repute
Hi there biannucci,

and a warm welcome to these forums

IIKLOP's reply is almost OK. Assuming that windowHeight is a variable, it should be...
Code:
document.getElementById("divName").style.height = windowHeight - 100+"px";
Here is an example...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div size according to browser</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

#divName {
     border:solid 1px #000;
     text-align:center;
 }

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
  
  var windowWidth=screen.availWidth/2+"px";
  var windowHeight=screen.availHeight/4*3+"px"

function sniffer() {
    var el=document.getElementById("divName"); 
if(screen.width==1280) {
                   el.style.width=windowWidth;
                   el.style.height= windowHeight;
                   el.style.margin="auto";               
 } 
else {
if(screen.width==1024) {
                   el.style.width=windowWidth;
                   el.style.height= windowHeight;
                   el.style.margin="auto";  
 } 
else { 
if(screen.width==800) {
                   el.style.width=windowWidth;
                   el.style.height= windowHeight;
                   el.style.margin="auto";  
    }   
   }
  }
 }
onload=sniffer;
//]]>
</script>

</head>
<body>

<div id="divName"></div>

</body>
</html>
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 01-22-2005, 05:03 PM
  #4
biannucci
Novice (Level 1)
 
Join Date: Jan 2005
Posts: 2
iTrader: (0)
biannucci is on a distinguished road
Thank you SO much, that works beautifully!!!!
biannucci is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 01-22-2005, 05:26 PM
  #5
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 13,139
iTrader: (0)
coothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond repute
no problem, you're welcome
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 01-21-2006, 12:02 PM
  #6
GreyBoy
Lord (Level 16)
 
Join Date: Jun 2003
Location: Evergreen, Colorado
Posts: 684
iTrader: (0)
GreyBoy is on a distinguished road
Need help with this...

Sorry ment to post a new thread
__________________
My latest work: [ Mobile Shred Inc ] [ Wise Habitat Resources ]

My crappy portfolio:
http://splinterfreelance.carbonmade.com/
GreyBoy is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-14-2009, 05:36 PM
  #7
propunere
Novice (Level 1)
 
Join Date: Jun 2009
Posts: 1
iTrader: (0)
propunere is an unknown quantity at this point
Smile

Hello, coothead.

I'm new here. I've created an account just to contact you. I really need your help. I've been searching for a solution to my problem for days, and finally found you giving an answer to a similar problem that somebody had back in 2005, but tried it and doesn't work as I need.

Please help me, it's becoming over-frustrating for me to keep searching... I'm a newbie, and that makes my inquiry even more difficult.

Thank you!

ISSUE:

Java scroll. When "go to bottom" is clicked I know that top-left corner is scrolled, thus can't control what will end up displayed on the bottom line.

1. Is there a way to scroll to down to a pixel and have it displayed NOT on the top line, but on the bottom line?

IF NOT...

My idea is to place an anchor that "go to bottom" links to. That anchor is inside a div (or table) with that has no fixed height, but variable height.

The height of the div (or table) should be set right on page load, and has to be the the result of either:

a) some pixel number minus viewer's available display height (not resolution).

b) viewer's display height minus some pixels.

Both ways, I can control where the anchor is placed depending on viewer's browser and the (non)existance of toolbars.

That way, on down scroll, I can have on viewer's bottom display line what I want.

Well... How do I set that table height?... And how do I make it to automatically set on page load? And... is it possible for it to change after user's each click on page? - as he might minimize the window now'n then?

Thank you very much.
I'm hoping you get to read this and be able to reply. Looking forward to it.

Have a fine evening.

Last edited by propunere : 06-14-2009 at 05:39 PM. Reason: Forgot to ask.
propunere is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-27-2010, 04:45 AM
  #8
edodidi
Novice (Level 1)
 
Join Date: Dec 2009
Posts: 3
iTrader: (0)
edodidi is an unknown quantity at this point
Hi,

Did you ever find a solution?
I'm having the same issue,

Thanks
edodidi is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-27-2010, 05:37 AM
  #9
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 13,139
iTrader: (0)
coothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond repute
Hi there edodidi,

and a warm welcome to these forums.

As this thread is very old I would suggest that you start a new one.

Make sure that you state the nature of your problem and provide a link to page in question or at least supply the page code.
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-29-2010, 06:13 AM
  #10
ebbenezer66
Catapulted
 
Join Date: Jul 2010
Posts: 4
iTrader: (0)
ebbenezer66 has a little shameless behaviour in the past
Currently Im using this div as follows


DIV STYLE="overflow: auto; height=500" width="100%">
We used this around a table to be able to get scroll bars to show
up when the data was larger than what is defined here. Well
our users use different resolutions and because of this sometimes either our buttons at the bottom of the table are hidden or there is too much space after the buttons. So I tried
using height="15%" but for some reason percent doesnt work in this Div with overflow set to auto. So now we are thinking is there a way to make the height a variable and somehow set it
dynamically depending on the availheight type of thing if so how
would this be done as far as code is concerned.

DIV STYLE="overflow: auto; height="15%" width="100%">
The other possibility is could we set a frame here instead and we dont want to use an iframe but something within our form that we could give a percentage to and it would resize depending on what the user has set. Any help would be appreciated. thanks


______________________________________


Used Auto Parts
Used Car Parts
ebbenezer66 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 11:36 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.