Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts

    getElementsByTagName and parent/child relationships

    I thought I had this done but something else came up. I have the javascript to take the height of the child span and apply it to to be the line-height of the parent h2 so the text will vertically center no matter the heitght of the span. cool yeah. but it only applies to the first h2 on a page.

    This si my first time working with the parent child in javascript so i'm not sure really where to go from here. after hours just getting this to work I'm coming here to see if there is an easy fix to the issue.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ggg</title>
    <style type="text/css" media="screen">
    h2 {
    padding: 0 10px;
    float: left;
    font: 1.6em tahoma;
    color: #99d;
    border-bottom: 1px solid #99d;
    background-color: #ffd;
    }
    h2 span {
    font: .5em tahoma;
    width: 200px;
    padding: 10px;
    margin: 0;
    border: solid #99d;
    border-width: 1px 0 0 0;
    float: right;
    color: #000;
    text-align: justify;
    
    }
    </style>
    
    
    <script type="text/javascript"> 
    function foo() {
    if(document.getElementsByTagName) {
    document.getElementsByTagName('h2')[0];
    var ss=document.getElementsByTagName('h2')[0].getElementsByTagName('span')[0].offsetHeight;
    document.getElementsByTagName('h2')[0].style.lineHeight=ss+"px";
    }
    }
    window.onload=foo;
    </script> 
    
    </head>
    <body>
    <h2>
    <span>Not for me the cold calm kiss of a virgins' bloodless love nor for me the saint's white bliss nor the heart of a spotless dove.
    </span>
    Open Season
    </h2>
    <h2>
    <span>Not for me the cold calm kiss of a virgins' bloodless love nor for me the saint's white bliss nor the heart of a spotless dove.
    </span>
    Open Season
    </h2>
    
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you want it to work with all h2 tags on the page, right?

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here it works with both. I just put a loop around it really.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ggg</title>
    <style type="text/css" media="screen">
    h2 {
    padding: 0 10px;
    float: left;
    font: 1.6em tahoma;
    color: #99d;
    border-bottom: 1px solid #99d;
    background-color: #ffd;
    }
    h2 span {
    font: .5em tahoma;
    width: 200px;
    padding: 10px;
    margin: 0;
    border: solid #99d;
    border-width: 1px 0 0 0;
    float: right;
    color: #000;
    text-align: justify;
    
    }
    </style>
    
    
    <script type="text/javascript"> 
    /* <![CDATA[ */
    function foo() {
      if(document.getElementsByTagName) {
        var h2s = document.getElementsByTagName('h2');
        for (var i = 0; i < h2s.length; i++) {
          var ss=document.getElementsByTagName('h2')[i].getElementsByTagName('span')[0].offsetHeight;
          document.getElementsByTagName('h2')[i].style.lineHeight=ss+"px";
        }
      }
    }
    window.onload=foo;
    /* ]]> */
    </script> 
    
    </head>
    <body>
    <h2>
    <span>Not for me the cold calm kiss of a virgins' bloodless love nor for me the saint's white bliss nor the heart of a spotless dove.
    </span>
    
    Open Season
    </h2>
    <h2>
    <span>Not for me the cold calm kiss of a virgins' bloodless love nor for me the saint's white bliss nor the heart of a spotless dove.
    </span>
    Open Season
    </h2>
    
    </body>
    </html>
    david_kw

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    thank you david.

    i can find things i can understand easily enough in it, i guess it's this line:
    Code:
        for (var i = 0; i < h2s.length; i++) {
    that's causing me questions. Being really only the only totally new line in the code i would assume this is the loop.

    so lets see if I cant learn somethig from this instead of just using the code you wrote

    Code:
        var h2s = document.getElementsByTagName('h2');
    that's just getting the h2 and defining the variable
    Code:
        for (var i = 0; i < h2s.length; i++) {
    this is where im lost. you're setting i to be 0. then your setting i to be the h2 length(?). and then setting to be i to be both of them combined? doesnt make sense to me. I really need a crash course in this so the 'simple' terms make sense.
    Code:
          var ss=document.getElementsByTagName('h2')[i].getElementsByTagName('span')[0].offsetHeight;
    here's where we set the variable and get the height of the span in an h2
    Code:
          document.getElementsByTagName('h2')[i].style.lineHeight=ss+"px";
    and here's where we append the h2 to have the line-height equal to the height of the span nested within
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It depends on what do you mean by "it works for both", david_kw. For the beginning the harbingerOTV's code brings 3 absolutely different layouts on IE, Moz and Opera... I guess that in fact the harbingerOTV's CSS is not quite finished.

    I am not sure what could be the final aim, but I guess that the header tag H2 must not have a float left.

    Thus the code might be:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ggg</title>
    <style type="text/css" media="screen">
    h2 {
    padding: 0 10px;
    font: 1.6em tahoma;
    color: #99d;
    border-bottom: 1px solid #99d;
    background-color: #ffd;
    }
    h2 span {
    font: .5em tahoma;
    width: 200px;
    padding: 10px;
    border: solid #99d;
    border-width: 1px 0 0 0;
    margin:0;
    float: right;
    color: #000;
    text-align: justify;
    
    }
    </style>
    <script type="text/javascript"> 
    function foo() {
    if(document.getElementsByTagName) {
    var heads=document.getElementsByTagName('h2');
    var i=0, h, s
    while(h=heads[i++]){
    s=h.getElementsByTagName('span')[0].offsetHeight;
    h.style.lineHeight=s+'px';
    }
    }
    }
    window.onload=foo;
    </script> 
    
    </head>
    <body>
    <h2>
    <span>Not for me the cold calm kiss of a virgins' bloodless love nor for me the saint's white bliss nor the heart of a spotless dove.
    </span>
    Open Season
    </h2>
    <h2>
    <span>Not for me the cold calm kiss of a virgins' bloodless love nor for me the saint's white bliss nor the heart of a spotless dove.
    </span>
    Open Season
    </h2>
    
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote:

    i can find things i can understand easily enough in it, i guess it's this line:
    Code:
        for (var i = 0; i < h2s.length; i++) {
    that's causing me questions. Being really only the only totally new line in the code i would assume this is the loop.

    so lets see if I cant learn somethig from this instead of just using the code you wrote ;)

    Code:
        var h2s = document.getElementsByTagName('h2');
    that's just getting the h2 and defining the variable

    This gets all the h2 elements in an array called h2s such that each h2 can be accessed by calling

    h2s[0] (for the first one)
    h2s[1] (for the second one, etc)


    Code:
        for (var i = 0; i < h2s.length; i++) {
    this is where im lost. you're setting i to be 0. then your setting i to be the h2 length(?). and then setting to be i to be both of them combined? doesnt make sense to me. I really need a crash course in this so the 'simple' terms make sense.


    This is a for-loop in javascript. There are tons of pages out there that explain for loops like this one:

    http://www.w3schools.com/js/js_loop_for.asp

    But it is basically a loop where it starts with i = 0. Then it loops while i is less than the number of h2 elements in your code. At the end of each loop it adds one to i which points it to the next h2 element. It could be written as

    var i = 0;

    while (i < h2s.length) {
    // do stuff here
    i++;
    }

    That would be the same thing.


    Code:
          var ss=document.getElementsByTagName('h2')[i].getElementsByTagName('span')[0].offsetHeight;
    here's where we set the variable and get the height of the span in an h2


    Yep, this takes the i-th h2 element and finds out what the height of the first span it has and stores it in the variable ss.


    Code:
          document.getElementsByTagName('h2')[i].style.lineHeight=ss+"px";
    and here's where we append the h2 to have the line-height equal to the height of the span nested within


    This is the same as your code except instead of looking at the 0-th element (the first one in the document) it looks at the i-th element (loops through them all).


    I don't know if that helps, but hopefully it does. :)

    david_kw

  • #7
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    It depends on what do you mean by "it works for both", david_kw.
    Actually I meant it works for both h2 elements. :)

    I only tried it in FF1.5 since FireBug rocks. Not to mention I'm a CSS newb.

    david_kw

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    @Kor - yeah it wasnt done by far. really just an expiriment to see what could be done. My Mom gets a lot of magazines and i try to replicate thier layout on the web sometimes. this was one of them. The thing about not floating the h2 is that w/o javascript the text fails misserably but it should be easy enough to write a rule in the js to say float none. I'm gulity. being a 'quickie' i didnt test on anything but FF. the original before js was ie and ff and had it 'working' enough to play with. the IE mishap is doable but damn...opera chewed it up. I looked at your code for the js and will play with it as well. I need to play with it to find the differnces between the two and drive myself nuts about it before it will stick.

    @david - many thanks. your explination is great really. looking at the W3 site and thier example sometimes leaves me lost as I think i need real life working models to learn from. im more of a css/html guy rather than scripting. seeing what i wrote and what you wrote and then an explination works wonders for me.


    many thanks to the both of you.
    -alan
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    There is no significant difference between my javascript code and david_kw code, which is correct as well. He uses a for loop, I use a while loop. The result is the same.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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