Jump to content
TheBnl

automatic div width calculator

Recommended Posts

Hey! I'm making a page that has to scroll sideways,to do this it needs to have an div wrapping the content that has the total width value.I was wondering if there is a way to let javascript calculate this automatically so i dont have to change the width every time i upload new content. many thanks in advance!

Share this post


Link to post
Share on other sites

use offsetWidth

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){wrapper_width = document.getElementById("wrapper").offsetWidth;alert(wrapper_width)} /*--*//*]]>*/</script><style type="text/css">#wrapper {float:left; overflow:hidden; background-color:#CCFF66;}#content1, #content2 {height: 200px; float: left; margin:10px;}#content1 { background-color:#CC3333; width: 400px;}#content2 {background-color:#0033CC; width: 500px;}</style></head><body><div id="wrapper"><div id="content1"></div><div id="content2"></div></div></body></html>

Share this post


Link to post
Share on other sites

If what you're looking for is to just have the wrapper "fit" its contents, then float should be all you need. You won't need to use JavaScript to adjust the width at all.If you are looking to retrieve an element's width value, though, then use the offsetWidth as dsonesuk suggested.

Share this post


Link to post
Share on other sites

I think i need the offsetWidth function, but it has to calculate all the widths of the divs inside the wrapper so they wont just float left and bounded by the browsers width, when the content grows beyond the boundaries of the browser it can scoll with overflow-x:scroll; I have an working example: http://bram-de-leeuw.nl/test/filmleapse/ But what i have done here is that i gave the wrapper a width of 3010px, it works fine but i dont want to adjust that value every time i would upload content.

Share this post


Link to post
Share on other sites
Float the wrapper, not your content.
He has to float his content to scroll horizontally, as if the wrapper was to use float alone, when it reached the edge of browser screen the float would stop and the content would begin to stack above each other, so by retrieving the width of each content container he can increase this width to take all his content in one single row so to scroll left and right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var TotalMarginLeftRght = 20;var inner_width = document.getElementById("inner");var TotalDivWidth =0;var child_elem = inner_width.getElementsByTagName("div");for(i=0;i<child_elem.length;i++){TotalDivWidth+=parseInt(child_elem[i].offsetWidth)+TotalMarginLeftRght;}//alert(TotalDivWidth)inner_width.style.width=TotalDivWidth+"px";}/*--*//*]]>*/</script><style type="text/css">#inner {float:left;  background-color:#CCFF66; border-radius: 10px; margin-bottom: 20px;}#wrapper {overflow-x: auto;  }.content1, .content2 {height: 200px; float: left; margin:10px; border-radius: 5px;}.content1 { background-color:#CC3333; width: 400px;}.content2 {background-color:#0033CC; width: 500px;}</style></head><body><div id="wrapper"><div id="inner"><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div><div class="content1"></div><div class="content2"></div></div></div></body></html>

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Another solution may be to give the container a very large size to start with, have the browser render the contents, determine the width of the contents, and resize the container smaller to fit the contents.

Share this post


Link to post
Share on other sites
He has to float his content to scroll horizontally, as if the wrapper was to use float alone, when it reached the edge of browser screen the float would stop and the content would begin to stack above each other
Oops. Yeah, I see that now. My bad. :blush:

Share this post


Link to post
Share on other sites

You could possibly prevent stacking by setting the white-space property to "nowrap." I'm not certain it works with floated elements, though, since the property is generally for inline objects.

Share this post


Link to post
Share on other sites

So? it won't work for floated elements, which they are, and it won't work for block elements either?, which they are also, great! another piece of useless ....

Share this post


Link to post
Share on other sites

Dude. Relax. It was a simple suggestion. He said it could possibly prevent stacking. He was just thinking out loud.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...