setting the width frm javascript

[svibuk]

i have a javascript which give a value
i want to set that value as the width of a html element

how do i set it
i have a html element <div> and want to set the width of div as per the value obtained frm script

[AutisticCuckoo]

Give the <div> an ID, e.g.,

<div id="my-div">...</div>

Then set the width with JavaScript,

document.getElementById("my-div").style.width = "30em";

[svibuk]

the width is not fixed

i will get the width value from javascript in a variable

and that varaible value will be the width of div

[JimmyP]

Just replace "30em" with a variable then...

function setWidth(element, width) {
    return element.style.width = width;
}
 
setWidth(document.getElementById('divId'), '200px'); // Replace number with whatever

[AutisticCuckoo]

Just replace "30em" with a variable then...

Precisely. Just remember that the width needs to include a unit. Don't try to set it to an integer number.

For instance, if your function computes the width in pixels,

document.getElementById("my-div").style.width = computeWidth() + "px";

[svibuk]

i am using the following and want to set the width of the div accordingly

<script language="javascript" type="text/javascript">

var w =screen.availWidth;
var h =screen.availHeight;
document.getElementById("gdiv").style.width = w+ "px";
</script>

getting error object expected
though the gdiv object is there

[paul_wilkins]

Are you running the script from the head section? If so then then document doesn't exist yet.

Put the script at the end of the body, just before the </body> tag and the script will be able to see and work with the body contents.

[svibuk]

thanks

set it before</body>
its working

[felgall]

Why are you testing the screen.availwidth. The browser viewport is almost always narrower than that particularly on larger screens where there is room to display several windows side by side. You should test the viewport size for setting sizes within your web page not the size of the screen.

[svibuk]

hi

whts the view port size. how do i use it?
i want to set the div size as per the screen resoultion ie the actual screen

and one more prblm with teh above used code is i need to refresh my page after its loaded for the sizing to take effect
how do i use it on page load??

[svibuk]

function WindowManager()
{

this.isIE = false;
this.isMozilla = false;
this.isOldIE = false;

if (window.innerHeight)
this.isMozilla = true;
// IE
else if (document.documentElement && document.documentElement.clientHeight)
this.isIE = true;
// IE 4
else if (document.body.clientHeight)
this.isOldIE = true;
}
WindowManager.prototype.getHeight = function()
{
var height;
// Mozilla
if (this.isMozilla)
height = window.innerHeight;
// IE
else if (this.isIE)
height = document.documentElement.clientHeight;
// IE 4
else if (this.isOldIE)
height = document.body.style.height ;

return height;
};
WindowManager.prototype.getWidth = function()
{
var width;
// Mozilla
if (this.isMozilla)
width = window.innerWidth;

// IE
else if (this.isIE)
// width = document.documentElement.clientWidth;
width = document.documentElement.clientWidth;
// IE 4
else if (this.isOldIE)
width = document.body.clientWidth;

return width;
};


var mgr = new WindowManager();
var width = mgr.getWidth();


var height = mgr.getHeight();



i have used to following javascript for getting the width/height and setting it to the div

document.getElementById("div").style.width = width + "px";


its working fine aslong as the browser window is maximized but if the browser is not maximised than the div doesnt fit as per the size. i need to refresh the browser and than it works fine . how do i set when the page is loaded


and secondaly how do i find or get and write javascript for the same for all the browsers

[paul_wilkins]

http://www.quirksmode.org/dom/w3c_cssom.html lists the range of window and screen properties that are available, and charts the browsers that support each one.

[svibuk]

checked the site and set accrodingly but still

if the browser is not opened in maximized state the grid appears shifted below
but when refreshed it appears top '0' position

how do i rectify it
whtever the browser start up position iy shld appear at top 0 positio
i have set the position to top 0 but

[paul_wilkins]

If you're wanting it to fill the entire screen, then just use css to position it absolutely and set the top, right, bottom and left to 0.

That's much better than trying to control it via javascript.

body {
	margin: 0;
}
#gdiv {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: grey;
}

If however you still want to do things via javascript, then a look at what you currently have, and some direction from you as to what you're wanting to aim for will go a long way towards achieving success.

[svibuk]

i have set the top and left to o ussing css
if the browser window is maxmizzed when statred its fits in perfectly
but if its not in a maxmiised state than there is the prblm . the div element appears moved frm its position somwht in centre of screen
but if page refreshed it appears poperly

how to resize the div as per the window size

[paul_wilkins]

That sounds like something non-intuitive is occurring there, warranting an investigation of a test page that demonstrates the problem.

[tictike]

Why are you testing the screen.availwidth. The browser viewport is almost always narrower than that particularly on larger screens where there is room to display several windows side by side. You should test the viewport size for setting sizes within your web page not the size of the screen.

Hypothetically speaking, if I design a site specifically for a minimum resolution of 1024 x 768, would it be wrong to run:

if(screen.width < 1024 || screen.height < 768){
alert("You're resolution is too low.");
}

In this case is it also better to check the viewport size?

[SoulScratch]

Maybe some other property like clientHeight/clientWidth on document.documentElement - there's probably a more compatible cross browser function that does this.

[tictike]

oh ok. but it wouldn't be necessary to check to viewport size in this case, correct?

[SoulScratch]

Huh? document.documentElement is the viewport.

[paul_wilkins]

Even if the element you're sizing is a bit larger than the screen, you can prevent scrollbars from occurring by setting the following css on that element:

overflow: hidden;

[tictike]

I think I've confused myself about how viewport and resolution relate to each other. Right now I'm thinking if I designed a site for a minimum resolution of 1024 x 768 than I should still check the viewport size to make sure its not smaller than that.

[paul_wilkins]

I myself think that you may be putting too much effort into stopping people from viewing your site.

I would be bitterly disappointed if I was on an older computer that could do only 800x600. Others who normally use that size of resolution will also be used to using the scroll bar to view pages designed for larger resolutions.

[svibuk]

i have the following script for getting viewport
<script type="text/javascript">
<!--
var viewportwidth; var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth;
viewportheight = window.innerHeight }
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{

viewportwidth = document.documentElement.clientWidth;
viewportheight = document.documentElement.clientHeight }
// older versions of IE
else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
// viewportleft = document.getElementsByTagName('body')[0].pageXOffset;

}


var width= viewportwidth;
var height=viewportheight;



document.getElementById("pageBlock").style.width =width + "px";
document.getElementById("pageBlock").style.height = height + "px";






and the following css

#pageBlock {
/* Set the presentation style */
background-color: gray;
border:1px solid #add8e6;
position: static;
overflow:hidden;
or
overflow:auto;

with the above javascript i getthe size and the div fits in

but problem occusrs when window is resized(maxmized , minimized

if i use overflow : hidden i loose scrollbars and if i use auto i do get scroll bars but the div position is lost

how doi come out of this tricky loop

[paul_wilkins]

What is it that you need to achieve with the pageBlock, is it literally to prevent people from clicking on the page?