How do I get the image to repeat the correct height?

Discussion in 'Javascript' started by damezumari, May 12, 2008.

  1. damezumari

    damezumari Guest

    I have three div blocks defined like this:

    #left1
    {
    float: left;
    background-color: white;
    width: 184px;
    margin-right: 4px;
    text-align: left;
    }

    #left2
    {
    float: left;
    background: url(images/barrav.gif) repeat;
    width: 23px;
    }

    #left3
    {
    float: left;
    background-color: white;
    width: 573px;
    margin-left: 4px;
    }

    The idea is to have the blocks displayed side by side. I do not know
    the height of left1 and left3, but I want the image in left2 to be
    repeated for the max height of left1 and left3. If I set the height in
    left2 it will either be too short or too long.

    Kind regards,

    Jan Nordgreen
     
    damezumari, May 12, 2008
    #1
    1. Advertising

  2. damezumari

    SAM Guest

    damezumari a écrit :
    > I have three div blocks defined like this:
    >
    > #left1
    > {
    > float: left;
    > background-color: white;
    > width: 184px;
    > margin-right: 4px;
    > text-align: left;
    > }
    >
    > #left2
    > {
    > float: left;
    > background: url(images/barrav.gif) repeat;
    > width: 23px;
    > }
    >
    > #left3
    > {
    > float: left;
    > background-color: white;
    > width: 573px;
    > margin-left: 4px;
    > }
    >
    > The idea is to have the blocks displayed side by side. I do not know
    > the height of left1 and left3, but I want the image in left2 to be
    > repeated for the max height of left1 and left3. If I set the height in
    > left2 it will either be too short or too long.



    <script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    function maxHeightDivs(divs) {
    divs = divs.split(',');
    var H = 0, ok=false;
    for(var i=0; i<divs.length; i++)
    if($(divs) &&
    $(divs).offsetHeight &&
    $(divs).offsetHeight>H ) {
    H = $(divs).offsetHeight;
    ok = true;
    }
    if(ok) {
    for(var i=0; i<divs.length; i++) $(divs).style.height = H+'px';
    }
    else alert('this script is out :-(');
    }
    window.onload = function() {
    maxHeightDivs('left1,left2,left3');
    }
    </script>



    Variante :

    <script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    function maxHeightDivs() {
    var H = 0, ok=false;
    for(var i=0; i<arguments.length; i++)
    if($(arguments) &&
    $(arguments).offsetHeight &&
    $(arguments).offsetHeight>H ) {
    H = $(arguments).offsetHeight;
    ok = true;
    }
    if(ok) {
    for(var i=0; i<arguments.length; i++)
    $(arguments).style.height = H+'px';
    }
    else alert('this script is out :-(');
    }
    window.onload = function() {
    maxHeightDivs('left1', 'left2', 'left3');
    }
    </script>


    not tested with IE

    --
    sm
     
    SAM, May 12, 2008
    #2
    1. Advertising

  3. damezumari

    damezumari Guest

    Thank you!

    I put your code just before </body> and it worked like a charm!

    Kind regards,

    Jan Nordgreen
     
    damezumari, May 13, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VK

    Repeat an ASP:Image button

    VK, Apr 25, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    1,096
    Lucas Tam
    Apr 25, 2005
  2. Replies:
    0
    Views:
    575
  3. jc
    Replies:
    3
    Views:
    1,769
  4. jc
    Replies:
    1
    Views:
    1,396
    Neredbojias
    Mar 19, 2008
  5. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    884
    muggslab
    Feb 1, 2010
Loading...

Share This Page