Changing Div width dynamically according to the contents.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Nitinkcv
    New Member
    • Mar 2007
    • 65
    #1

    Changing Div width dynamically according to the contents.

    Hi all,

    I have a situation where i need to change the width of a div automatically according to the contents in it.

    So say if width of the contents inside the div is 400 px then the width of div should be 400px, and also if it exceeds 600px the width should not increase beyond 600, but a horizontal scrollbar should come.

    Thanks in advance,
    Nitin
    Tags: width of div
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5388
      #2
      could you show what you have done so far? ...

      kind regards

        Comment

        • Nitinkcv
          New Member
          • Mar 2007
          • 65
          #3
          Hi,

          This is the javascript code:

          Code:
          var widthDiv  = document.getElementById('mydiv');
var len = width.innerHTML.length;
if(len > 800){
widthDiv.style.overflow ='scrollbar'
}
          And initially i dont set the width of my div

          Thanks,
          Nitin
          Last edited by gits; Jan 19 '09, 12:55 PM. Reason: added code tags

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388
              #4
              1. in line 2 what is width? another div or should it be widthDiv?

              2. length would give you the no of characters ... so you want to check that? but 800 chars are a lot ... i guess you want to set a width in px?

              kind regards

                Comment

                • Nitinkcv
                  New Member
                  • Mar 2007
                  • 65
                  #5
                  Hi,

                  Sorry ya typo error in line2 its widthDiv. And yes i do want to set the width in px. So are you suggesting that i approximate the width, say by dividing the var len by a constant value?

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5388
                      #6
                      that would be one option ... but you could even retrieve the current width of an object (like your div) ... have a look here

                      kind regards

                        Comment

                        • Nitinkcv
                          New Member
                          • Mar 2007
                          • 65
                          #7
                          I looked the link you sent. But the problem is that offsetWidth gives the value as 1024 even if i dont give any initial width for my div.. So my condition for checking width>600 is always true, even if the contents inside the div take up 100 px.

                          So i guess dividing by a const is the only soln?

                            Comment

                            • gits
                              Recognized Expert Moderator Expert
                              • May 2007
                              • 5388
                              #8
                              you may use the float css additionally ... have a look at this:

                              [CODE=html]<html>
                              <body>
                              <div onclick="alert( this.offsetWidt h);" style="float:le ft; border: 1px solid red;">
                              foo
                              </div>
                              </body>
                              </html>[/CODE]
                              kind regards

                                Comment

                                • gits
                                  Recognized Expert Moderator Expert
                                  • May 2007
                                  • 5388
                                  #9
                                  and just to make it a bit more complete, here is a quick-hacked example:

                                  Code:
                                  <html>
    <body>
        <div onclick="if (this.offsetWidth > 200) {
            this.style.width='200px'; 
            this.style.overflow='auto'; 
         }" style="float:left; border: 1px solid red;">
            foooooooooooooooooooooooooooooooooooooooooooooo
        </div>
    </body>
</html>
                                  kind regards

                                    Comment

                                    • Nitinkcv
                                      New Member
                                      • Mar 2007
                                      • 65
                                      #10
                                      Thanks a lot. Works like a gem :)

                                        Comment

                                        • gits
                                          Recognized Expert Moderator Expert
                                          • May 2007
                                          • 5388
                                          #11
                                          no problem ... you are welcome. post back to the forum anytime you have more questions ...

                                          kind regards

                                            Comment

                                            Previous template Next
                                            Working...