www.webdeveloper.com
Results 1 to 11 of 11

Thread: Get the size of div's content

Hybrid View

  1. #1
    Join Date
    Apr 2010
    Posts
    6

    Get the size of div's content

    My question is, can I get the actual size of a div's content when div's width is 'auto' and the content is small enough to fit without resizing.


    I know there is a way to find the div's actual size after it's loaded - divObj.offsetWidth/Height.

    The problem is that this only works for content which is bigger than the div.

    For example,
    Code:
    <div style="width:30px;">A text that will exceed 30px in width</div>
    In this case, when the content is loaded the div will be resized and get a new offsetWidth/Height.
    There will be lots of new lines after the resizement which posses another problem. After loading, the above example will look like this:
    Code:
    A
    text
    that
    will
    exceed
    30px
    in
    width
    Now the example has offsetWidth little more than 30px (~50) and MUCH greater height.

    This is not the desired effect. I want the width/height of the content when the div is not resized by the content.


    Thanks in advance

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    I think i understand what you're asking
    Code:
    <div style="width:30px;">A text that will exceed 30px in width</div>
    assuming you want the width of that div BEFORE the text is collapsed to fit the 30px.

    add this to the div's styles
    Code:
    white-space:nowrap
    That will prevent the text from breaking into multiple lines, so when you grab divObj.offsetWidth/Height it will give the correct width.

    -aPeg

  3. #3
    Join Date
    Apr 2010
    Posts
    6
    Well, this works as intended and is really what I needed (thank you for which)
    but there seems to be a problem -
    div's width remains unchanged although content goes out.

    Try it with a border...
    Code:
    <div id="myobj" style="border:red solid 1px;">Some Text</div>
    <script type="text/javascript">
    var elem = document.getElementById("myobj");
    elem.style.width='1'; // Garantee that the div will be resized (since anything will be > 1px)
    elem.style.whiteSpace='nowrap';
    
    alert(elem.offsetWidth);
    </script>
    alerts "3"



    Btw, I have another question which might offer a solution.

    If we use <span> instead of <div> we have all we wanted above -
    span automaticly takes the content's width and resizes correctly.

    But I'll need it to maintain that initial width at all time. That sounds easy if it wasn't the following problem:

    In Firefox this does not work:
    Code:
    <span style="width: 200px">Some text < 200px </span>
    style.width is just ignored.
    In IE it works fine.

  4. #4
    Join Date
    Sep 2009
    Posts
    146
    Can you give me more detail about what you're looking to get from this div? how come you need the initial width?

    I dont think an inline element is the key (span) but first i have to hear more about what you need this div 2 do

    -aPeg

  5. #5
    Join Date
    Apr 2010
    Posts
    6
    If you'd really like to see what I've done I can send you the source (it's about some decorations - effects via javascript)

    An element
    (which can be any but I'd like to make all usable (the script to work with all))
    has an initial text.
    That text is then "poured" letter by letter at a set intervals.
    Since the element currently changes it's width with each interval, if the element is inline it really makes it bad for the eyes and impossible to read.

    Example:
    Code:
    <div decoration="pour" flags="time:3">Some text</div>
    
    A text with <span decoration="pour" flags="time:2"> only some words</span> being "poured"
    In the example above, the second paragraph will be unreadable and confusing for 2 seconds (or other set time). If the element retains it's initial width, this won't be a problem


    Anyway, why would in IE span sizing work and not in Firefox

  6. #6
    Join Date
    Apr 2010
    Posts
    6

    Thumbs up

    Sorry for double posting...

    I found a workaround, using the properties of spans.

    Code:
    <html>
    <head>
       <title>Test</title>
       <script type="text/javascript">
       function getContentSize(ele){
          document.write('<span id="test_obj"></span>');
    
          var elem     = document.getElementById(ele);
          var test_obj = document.getElementById("test_obj");
    
          test_obj.innerHTML = elem.innerHTML;
    
          var width = test_obj.offsetWidth;
          var height= test_obj.offsetHeight;
    
          test_obj.parentNode.removeChild(test_obj);
          return [width,height];
       }
       </script>
    </head>
    <body>
       <div id="element" style="border:red solid 1px;">Some Text</div>
    
       <script type="text/javascript">
          alert(getContentSize('element'));
          document.getElementById('element').style.width = getContentSize('element')[0]+2; //+2 for the border
       </script>
    </body>
    </html>
    Yet I hope there is a solution to the div prob.

  7. #7
    Join Date
    Sep 2009
    Posts
    146
    No need to send the source to me, just trying to get a better idea what you need from this Div so i can offer some better suggestions.

    Let see if i am understanding you right:
    Code:
    <div>some text to start with</div>
    Then from there you are us JS to add words/letters one @ a time:
    Code:
    <div>some text to start with <span>this is the added text</span></div>
    But because the text is being added one letter @ a time its appears distorted until its all displayed?

    Assuming i am on the right track:
    it sounds like you're in need of a min-width attribute. the problem is IE does not play nice when it comes to min width.

    i dont think this is exactly what your looking for but would this not work:
    Code:
    <div style='width:50px'>
         This is text already in the div
         <span>this is where you add text</span>
    </div>
    *keep in mind the only thing separating a div from a span is "display:block" <- add that to a span and it will behave like a div (inline VS block)

    -aPeg

  8. #8
    Join Date
    Apr 2010
    Posts
    6
    You got it correct.

    However, min-width won't do because it is ,yet again, ignored when applied to a span...

    About the last solution, works fine and really answers the topic.
    But I can't use it because I can only use JS and JS won't handle obj.style.float='left'; (tested it). I can't dynamicly set the float:left ...

    Good Job after all!
    Last edited by Gabarieko; 04-22-2010 at 08:43 AM.

  9. #9
    Join Date
    Sep 2009
    Posts
    146
    Haha good solution, i still don't see what your doing with the width. Here is a solution that does not require the temp span creation:
    Code:
    <html>
    <head>
       <title>Test</title>
       <script type="text/javascript">
    	   function getContentSize(ele){
    		  //document.write('<span id="test_obj"></span>');
    	
    		  var elem     = document.getElementById(ele);
    		  //var test_obj = document.getElementById("test_obj");
    	
    		  //test_obj.innerHTML = elem.innerHTML;
    	
    		  var width = elem.offsetWidth;
    		  var height= elem.offsetHeight;
    	
    		  //test_obj.parentNode.removeChild(test_obj);
    		  return [width,height];
    	   }
       </script>
    </head>
    <body>
       <div id="element" style="border:red solid 1px; float:left;">Some Text</div>
    
       <script type="text/javascript">
          alert(getContentSize('element'));
          document.getElementById('element').style.width = getContentSize('element')[0]; //+2 for the border
       </script>
    </body>
    </html>
    float:left is the key

    -aPeg

  10. #10
    Join Date
    Sep 2009
    Posts
    146
    "float" is already used in JS, here is how you would set it:

    Code:
    		  elem.style.cssFloat = 'left';
    		  elem.style.styleFloat = 'left';
    You have to use both because the 1st one does not work with IE and the second one does not work with all other browsers.

    i used this page all the time until i found jQuery:
    http://codepunk.hardwar.org.uk/css2js.htm

    -aPeg

  11. #11
    Join Date
    Apr 2010
    Posts
    6

    Thumbs up

    Thanks, my mistake... Works fine now

    Made it so that the initial values are not change.
    The function should only get (and not change) the element's properties.

    So here is the final result:
    Code:
    <html>
    <head>
       <title>Test</title>
       <script type="text/javascript">
    	   function getContentSize(ele){
    		  var elem     = document.getElementById(ele);
    
    		  var init_float = (typeof elem.style.cssFloat != 'undefined')? elem.style.cssFloat : elem.style.styleFloat;
    		
    		  elem.style.cssFloat = 'left';
    		  elem.style.styleFloat = 'left';
    	
    		  var width = elem.offsetWidth;
    		  var height= elem.offsetHeight;
    
    		  elem.style.cssFloat = init_float;
    		  elem.style.styleFloat = init_float;
    		
    		  return [width,height];
    	   }
       </script>
    </head>
    <body>
       <div id="element" style="border:red solid 1px;">Some Text</div>
    
       <script type="text/javascript">
          alert(getContentSize('element'));
       </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles