SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot php.net's Avatar
    Join Date
    Oct 2003
    Location
    php.net
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question screen width and height by js in HTML code

    Hello,

    I need small thing here

    i have a js code for screen width and height

    Code:
    <script language="JavaScript">
    document.write( + screen.width + 'x' + screen.height + ' pixels');
    </script>
    i need to put screen.width and screen.height in html like that :

    Code:
    <img src="images/mypic.gif" width="468" height="60" />
    
    <img src="images/mypic.gif" width="screen.width" height="screen.height" />
    any one can tell me how to do that

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    use javascript to write the entire line.

  3. #3
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there php.net,

    no need for javascript, this can be achieved with css, as in the following example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>full page image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        padding:0;
        border:0 solid;
        overflow:hidden;
     }
    #myImage{
        height:100%;
     }
    #myImage img{
        width:100%;
        height:100%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="myImage">
    <img src="http://mysite.orange.co.uk/azygous/images/clouds.jpg" alt="clouds"/>
    </div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The CSS version is better than the javascript one because

    1. It will still work if Javascript is disabled
    2. It makes the image fit the browser window rather than making it extend beyond the window (the space in the browser window is always less than the screen since even maximized you lose the space taken up by the browser chrome and any fixed toolbars on the desktop).
    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
  •