SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)

    Simple JS question

    Say I had a <div>. I want it to be the exact height of from the top lft corner of the screen to the bottom right. Not 100% height, but top left to bottom right. That distance. It has to work for all resolutions so is there some formula for that? I remember something like this in geometry class with triangles-anyone able to help me out?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Look up Pythagoras' theorem. You should pay more attention in maths class - it's one of the most basic things in mathematics and geometry. Or, you could have tried to look it up yourself.

    This page will help you work out which two dimensions to use with the theorem.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I took geometry in freshman year-I'm a senior. Too long loll. + I sucked at math so much. Thanks for the link.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Head...hurts...

    a squared+b squared=c squared? a and b = the width and height?

    PS: Just trying to get a simple thing working
    Code:
    document.getElementByID('one').style.height=client.height+"px";
    
    ..
    
    <div id="one"></div>
    Not doing anything (I am newbbbish so don't yell)

    Edit: Googled so much yet every time I tried to get an element to just be the height of the screen it wouldn't do anything. I tried many code variiations such as document.body.clientHeight, etc.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    a squared+b squared=c squared? a and b = the width and height?
    Yeah...
    Code:
    document.getElementByID('one').style.height=client.height+"px";
    Check the page I linked to - no such thing as "client.height". Also, if you want the dimensions of the viewport (area visible to user where website is displayed), you'll want something else (but not supported in IE). So to make it cross-browser, you'll also need document.documentElement.clientWidth, an odd object in the hierarchy where the window is at the top and lowly text objects are arguably at the bottom. documentElement only works properly if IE is not in quirks mode, so you'll need a proper doctype.

    Eventually you'll need JavaScript's Math.sqrt() method.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
    #one{background:black;width:30px;height:30px;}
    
    }
    </style>
    <script type="text/javascript">
    document.getElementByID('one').style.height=document.documentElement.clientWidth+'px';
    </script>
    </head>
    
    <body>
    
     <div id="one">d</div>
    
    </body>
    </html>
    Not working...? I know your explaining good but this stuff is japanese to me. I know what viewport is and that's exactly what I want-the height of the viewport (and width eventually, but I can get it once I know how to get height).
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    For a start, you're using clientWidth, which is obviously not going to refer to the height.

    Once you sort that out, you need to sort out getElementById, which is case sensitive.

    Then you need to understand that your script will still fail because when the browser parses the javascript, #one does not exist yet (later on in markup). Therefore you need to tell the browser to wait (using window.onload) or put the JavaScript elsewhere (at the end of the BODY preferably).

    This page will help a bit more at making it cross-browser. Remember, the documentElement bit is only needed for IE. Decent browsers can use the more sensible option that is a property of the window object rather than the document object.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh I just changed that on a whim-it was Height. Ahh I thought it looked wack (the document.getelementbyid)

    More japanese. Here is the updated code
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
    #one{background:black;width:30px;height:30px;}
    
    }
    </style>
    <script type="text/javascript">
    document.getElementById('one').style.height=document.documentElement.clientHeight+'px';
    </script>
    </head>
    
    <body>
    
     <div id="one">d</div>
    
    </body>
    </html>
    PS: So document.documentElement is just to force feed IE? Or the other way around?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you actually take the time to read and absorb the material I point you towards, instead of doing everything too quickly (therefore missing a lot of useful and important information), you will actually learn what is going on and understand it. This is why I'm reluctant to spoon-feed you the answer.

    Yes, document.documentElement.clientWidth and document.documentElement.clientHeight are used for IE. All the other browsers support it as well, but they also support the more useful property of the window object that I'm trying to get you to find and use.

    You also have ignored what I said about the browser parsing JavaScript before the markup, which is why your script will still fail as it is.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok I have this
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
    #one{background:black;width:30px;height:30px;}
    
    }
    </style>
    
    </head>
    
    <body>
    
     <div id="one">d</div>
    <script type="text/javascript">
    document.getElementById('one').style.height=window.clientHeight+'px';
    </script>
    </body>
    </html>
    I don't want a spoon fed answer and I go fast by default-can't help it. window has the clientHeight property correct? Makes sense about JS after markup....ergh not working.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, it's not window.clientHeight!

    Read
    the page I linked to (the last one). It's all there, you can find the answer without even scrolling down!!! (obviously if you can, it's worth reading the whole thing).

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Amazing I love you Raffles. Sorry I'm a bit hard to get through. Let me try the theorm..
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  13. #13
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I read you correctly, screen.availHeight/Width might be useful. It gives a measure of the viewable area of the browser window, minus the chrome and does not have to wait for the page to load. Here's a quick example:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Work in Progress</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    </style>
    <script type="text/javascript">
    var ah = window.screen.availHeight.valueOf();
    var aw = window.screen.availWidth.valueOf();
    var hyp = Math.sqrt((ah * ah) + (aw * aw));
    alert("Height: " + ah + " pixels \nWidth: " + aw + " pixels \nHypotenuse: " + hyp + " pixels");
    </script>
    </head>
    <body>
    </body>
    </html>
    I sympathize with your plight; being the victim of a modern American education it's almost surprising that you've mastered addition and subtraction.

  14. #14
    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)
    The screen properties of the window should not be used for this, because for this we need the height and width of the viewport as Rafael mentioned ( resize, anyone? ), not the dimensions of the browser minus the chrome.

    And availHeight will return a number by default, there isn't really a need to use valueOf.. availHeight.valueOf() would be similar to the expression (5).valueOf() where it's already a number.
    Cross browser css bugs

    Dan Schulz you will be missed

  15. #15
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right on both counts. I was just talkin' off the top of my head. I was thinking availHeight/Width returned a string, but of course with JS duck-typing it wouldn't matter anyway. I was just being careful. It could be written screen.availHeight, as well, as window is assumed.

    Actually, the original poster asked about deriving the measurements of an element, I believe, which would be gotten from offsetHeight and offsetWidth of the element, not the viewport size.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Gave up on the idea since I was going ot use this as a quiz-an element from corner to corner but the rotation CSS3 property won't work properly in my present condition so I gave up on the idea-thanks for the help Raffles I feel sorry for you for having to help me .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  17. #17
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's OK Ryan, in future just look before you leap!


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
  •