SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Screen resolution and resizing some input text or option select

    Hi,

    please con you tell me how can I resize (width, height in pixel or percentage) an input text or an option select considering the current screen resolution?

    for istance if I have a resolution of 800x600 set the width of a particular input text with a given value, if 1024x768 or 1152x864 other measures etc.....
    And also is it possible to resize them in percentage or in em with javascript?

    i have tried something like this but it doesn't go!
    And in the html code I have specified the id name.

    Code JavaScript:
    window.onload = function(){
          detect();
    }
    function detect() {
     
          if ((screen.width==800)&&(screen.height==600)) {
             var html_element = document.getElementById("id_option_select");
             html_element.style.width = "10px";
     
          }
    }


    many thanks.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Screen resolution has nothing to do with the browser viewport area. When positioning things within the web page the screen resolution is irrelevant because you can't position things outside the viewport. These functions will give you the size of the viewport.

    Code:
    function vpWidth() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    }
    function vpHeight() {
    return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
    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="^$">

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but still I haven't obtained any result.....
    Where is the error?

    Code JavaScript:
    <script type="text/javascript">
    <!--
       window.onload = function(){
          detect();
       }
     
       function vpWidth() {
          return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
       }
     
       function vpHeight() {
          return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
       }
     
       function detect() {
          var html_element = document.getElementById("id_option_select");
          bvpWidth = vpWidth();
          document.Write(html_element);
          if (bvpWidth == 1152) {
             html_element.style.width = 20 + "px";
          }
       }  
    //-->
    </script>

    I have added also document.Write(html_element); for verifying the value retrieved from the vpWidth function but in the screen doesn't appear anything.
    So in what way can I do?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    One error is that you are calling document.write after the page has loaded when it is only valid to call it before the page finishes loading.
    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="^$">


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
  •