SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Guru
    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

  2. #2
    SitePoint Author silver trophybronze trophy

    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

  3. #3
    SitePoint Guru
    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

  4. #4
    Function Curry'er JimmyP's Avatar
    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)

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    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,
    Code JavaScript:
    document.getElementById("my-div").style.width = computeWidth() + "px";
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Guru
    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

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  8. #8
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

    set it before</body>
    its working

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    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="^$">

  10. #10
    SitePoint Guru
    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??

  11. #11
    SitePoint Guru
    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

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  13. #13
    SitePoint Guru
    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

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  15. #15
    SitePoint Guru
    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

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  17. #17
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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?

  18. #18
    Guru in training bronze trophy SoulScratch's Avatar
    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.
    Cross browser css bugs

    Dan Schulz you will be missed

  19. #19
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok. but it wouldn't be necessary to check to viewport size in this case, correct?

  20. #20
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh? document.documentElement is the viewport.
    Cross browser css bugs

    Dan Schulz you will be missed

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  22. #22
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  24. #24
    SitePoint Guru
    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

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •