SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically calculate a div width

    Hi,

    Here are sample divisions:

    Code:
    <style type="text/css">
    #grandparent {width:100px;}
    #parent {overflow:auto; height:100px; }
    .child {overflow:hidden; margin-left:10px;}
    </style>
    
    <div id="grandparent">
    
    <div id="parent">
    
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    
    </div>
    
    </div>
    The <div class="child"> width value is always 10 pixels less than <div id="parent"> width value. How can it be calculated so any width value is given to <div id="parent">, its child gets 10 pixels less than that?

    Any help is very much appreciated!
    Mike

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not certain about javascript however this can be done very easily in jQuery:

    Code:
    $(document).ready(function(){
    
         var gWidth = 100,
              pWidth = giwdth - 10,
              cWidth = pWidth - 10;
    
         $('#grandparent').css('height', gWidth+'px');
         $('#parent').css('height', pWidth+'px');
         $('.child').css('height', cWidth+'px');
    
    }
    This is basically dynamically setting the parent and child width to be 10px less than their parent respectively.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sd_javascript View Post
    I'm not certain about javascript however this can be done very easily in jQuery
    Thanks for the answer, but I'm looking for a basic JavaScript solution.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    Thanks for the answer, but I'm looking for a basic JavaScript solution.
    Ah I see.

    Hmm... well, off the top of my head, I don't recall any way that you can directly control the values of a css attribute like width. It has been a while since I've used straight javascript, though.

    best of luck in finding your answer.

  5. #5
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a script that does the job. You need to create a style element and then append the rule to the element. In IE browsers the rule becomes the cssText. In non-IE browsers it is the innerHTML. I have added the new style element to the head of the document, although it works equally well in the body.

    You will notice that the child class is no longer shown. This is because I applied your styles to all of the child divs in the id=parent div by using the selector #parent div (any div within div id=parent). This avoids repetition in the script.

    You can change the base width of the divs by altering the setWidth in the top of the script, marked "<<<< SET WIDTH HERE".


    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Append Style Rule</title>
    <script type="text/javascript">
    <!--
    var gObj, pObj; setWidth=250; // global <<<< SET WIDTH HERE 
    window.onload=function(){
    // set style width on page load
     gObj=document.getElementById("grandparent");
     pObj=document.getElementById("parent");
     gObj.style.width=(setWidth+20)+"px";
     pObj.style.width=(setWidth-20)+"px";
    // append new style rule to document 
     var setStyle = document.createElement('style');
     setStyle.setAttribute("type","text/css");
    // this is the new rule 
     var cssNewTxt='#parent div { overflow:auto; clip:auto; color:#F00; width:'+(setWidth-50)+"px;"+' border:1px solid #0FF; }';
    // 
     if( typeof setStyle.styleSheet !="undefined")      // IE
         { setStyle.styleSheet.cssText=cssNewTxt; }
     else
         { setStyle.innerHTML=cssNewTxt;  }             // NON IE
     // 
    // put new style element in head of document 
     document.getElementsByTagName("head")[0].appendChild(setStyle); 
     }
    //-->
    </script>
    <style type="text/css">
    <!--
    body         { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    #grandparent { position:relative; top:0px; left:0px; margin-left:100px; height:500px; border:1px solid #F00; text-align:left;  }
    #parent      {overflow:auto; height:100px; border:1px solid #00F; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="grandparent">
      <div id="parent">
        <div>
          100000000000000000</div>
        <div>
          1000000000000000000000000</div>
        <div>
          10000000000</div>
        <div>
          1000000000000000000000000</div>
        <div>
          1000000000000000000000000</div>
        <div>
          1000000000000000000000000</div>
        <div>
          1000000000000000000000000</div>
      </div>
      <!-- end parent -->
    </div>
    <!-- end grandparent -->
     
    </body>
     
    </html>

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Allan!


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
  •