Jump to content

automatic div width calculator


TheBnl
 Share

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!

Link to comment
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>

Link to comment
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.

Link to comment
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.

Link to comment
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
Link to comment
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:
Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...