SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Use clientheight to style innerhtml div?

    Hi, I've read that clientheight is read only so I'm wondering if you can style the div within the 'client' to match it's height and width properties so that no scrollbars appear when the screen is smaller.
    HTML Code:
    <div id="div1">//clientheight and clientwidth I want to match
    <div id="div2"></div>//height and width needs to match parent div
    </div>
    Then have something like this
    External.js
    Code:
    var div1=document.getElementById('div1').clientHeight;
    var y=div1
    var div2=document.getElementById('div2').clientHeight=div1;

    Ok. object dosen't suport that property!!!!!!!!!
    How about a parent node child node thing like this
    External.js
    Code:
    function changeDiv2(){
    var div2=document.getElementById('div2');
    var y=div2.paretNode.getAtribute.height;
    div2.style.height=y;
    }
    window.onload=changeDiv2();
    I'm guessing everybody can see what I'm trying to do. Please let me know if there is a way to do this.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The first thing to note would be:
    clientHeight is a non-standard, HTML-specific property introduced in the Internet Explorer object model.
    This would probably be much better suited to CSS rather than JavaScript:

    e.g.:

    Code HTML4Strict:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Testing</title>
        <style>
    		html,body, #div1 { height:100%; margin:0; padding:0; }
    		#div1 { overflow:hidden; }
    		p { border:1px solid blue; margin:50px 0; font-size:20px; }
        </style>
    </head>
    <body>
    <div id="div1">
    	<p>Testing overflow 1</p>
    	<p>Testing overflow 2</p>
    	<p>Testing overflow 3</p>
    	<p>Testing overflow 4</p>
    	<p>Testing overflow 5</p>
    	<p>Testing overflow 6</p>
    	<p>Testing overflow 7</p>
    	<p>Testing overflow 8</p>
    	<p>Testing overflow 9</p>
    	<p>Testing overflow 10</p>
    	<p>Testing overflow 11</p>
    	<p>Testing overflow 12</p>
    	<p>Testing overflow 13</p>
    	<p>Testing overflow 14</p>
    	<p>Testing overflow 15</p>
    </div>
    </body>
    </html>

    I think this is effectively what you are trying to achieve, no?

    One thing to keep in mind, no matter what technique you end up using, is that if there is too much content to fit on someone's screen they will not be able to get to it without scrollbars. (i.e. if they have their browser maximised and your content it still to long to fit on their screen, _and_ you're hiding the scrollbars by setting "overflow:hidden;" they will not have access to all the content.)


    Alternatively, you could add another div to surround the paragraphs:

    Code HTML4Strict:
    <div id="div1">
    	<div id="div2">
    		<p>Testing overflow 1</p>
    		<p>Testing overflow 2</p>
    		... 
    		<p>Testing overflow 15</p>
    	</div>
    </div>

    With the following styles:

    Code CSS:
    html,body { height:100%; margin:0; padding:0; }
    #div1 { width:800px; height:600px; margin:0 auto; padding:10px;border:1px solid red; overflow:hidden;}
    #div2 { width:100%; background-color:#ccc;}
    p { border:1px solid blue; margin:50px 0; font-size:20px; }

    The last part will give you a small area that contains your content. If you would change "overflow:hidden;" to "overflow:auto;" on #div1 you would end up with a small scrollable area in the middle of the page.

    Hope this helps.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AussieJohn Thanks for the responce. I guess the answer to my question was a no. You can't even use the attribute height of one element and pass it off to a variable y lets say and then use it on another element, forget the fact that the elements attribute would have to be written in the html tag itself IE8 won't list all the attributes anyway.
    HTML Code:
    <div id="dog" class="animal" width="100%" height="50%">dog</div>
    Width and Height attributes return null and the length of dog . attribute . length returns 3 as the browser generates a name= attribute equal to the id. I was acctually amazed that it reported the class attribute.

    In any case what you said was correct. Use CSS.
    HTML Code:
    <style>
    #div1{width:100%; height:10%; overflow-x:hidden;}//force scroll y vertical
    #div2{width:100%; height:10%;}//width 99.5% if any borders etc. in IE8??
    #div3{width:100%; height:10%;}// DITO
    #div4{width:100%; height:10%;}// DITO
    .WIDTH{width:100%;}//avoid using every divs id
    </style>
    </head>
    <body>
    <div id="div1">
    <div id="div2" class="WIDTH">seen item</div>
    <div id="div3" class="WIDTH">not seen untill scrolled</div>
    <div id="div4" class="WIDTH">not seen untill scrolled</div>
    </div>
    The problem I was trying to overcome was the IE8 99.5% WIDTH of div within a div especialy those that have scrollbars or inner divs that have borders etc.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    One thing to note is that <div>'s do not have a width and height attribute (in fact, most HTML elements do not have a direct width/height), which is why you can't access those directly.
    If you want to access the width or height of a HTML element you'll need to generally use the style property, e.g.

    Code JavaScript:
    document.getElementById("whatever").style.width;
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved!!!!!!!!!!!!!!!!!!!!!!!


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
  •