SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 30
Thread: setting the width frm javascript
-
Jan 15, 2009, 06:26 #1
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
setting the width frm javascript
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
-
Jan 15, 2009, 06:38 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Give the <div> an ID, e.g.,
Code HTML4Strict:<div id="my-div">...</div>
Then set the width with JavaScript,
Code JavaScript:document.getElementById("my-div").style.width = "30em";
Birnam wood is come to Dunsinane
-
Jan 15, 2009, 06:43 #3
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 15, 2009, 07:18 #4
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just replace "30em" with a variable then...
Code JavaScript:function setWidth(element, width) { return element.style.width = width; } setWidth(document.getElementById('divId'), '200px'); // Replace number with whatever
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Jan 15, 2009, 07:53 #5
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Birnam wood is come to Dunsinane
-
Jan 16, 2009, 00:11 #6
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 16, 2009, 00:26 #7
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 16, 2009, 01:33 #8
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks
set it before</body>
its working
-
Jan 16, 2009, 03:11 #9
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Jan 16, 2009, 03:35 #10
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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??
-
Jan 16, 2009, 23:53 #11
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 17, 2009, 00:32 #12
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 17, 2009, 01:39 #13
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 17, 2009, 03:06 #14
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.
Code css: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.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 17, 2009, 05:57 #15
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 17, 2009, 06:09 #16
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
That sounds like something non-intuitive is occurring there, warranting an investigation of a test page that demonstrates the problem.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 17, 2009, 09:47 #17
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?
-
Jan 17, 2009, 14:07 #18
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Maybe some other property like clientHeight/clientWidth on document.documentElement - there's probably a more compatible cross browser function that does this.
-
Jan 17, 2009, 15:20 #19
oh ok. but it wouldn't be necessary to check to viewport size in this case, correct?
-
Jan 17, 2009, 18:09 #20
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Huh? document.documentElement is the viewport.
-
Jan 17, 2009, 18:34 #21
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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:
Code css:overflow: hidden;
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 17, 2009, 21:39 #22
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.
-
Jan 17, 2009, 21:58 #23
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.Last edited by paul_wilkins; Jan 17, 2009 at 22:31.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 19, 2009, 04:57 #24
- Join Date
- Dec 2008
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 19, 2009, 05:55 #25
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
What is it that you need to achieve with the pageBlock, is it literally to prevent people from clicking on the page?
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
Bookmarks