TheBnl Posted February 22, 2012 Share Posted February 22, 2012 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 More sharing options...
dsonesuk Posted February 22, 2012 Share Posted February 22, 2012 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 More sharing options...
ShadowMage Posted February 22, 2012 Share Posted February 22, 2012 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 More sharing options...
TheBnl Posted February 23, 2012 Author Share Posted February 23, 2012 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 More sharing options...
ShadowMage Posted February 23, 2012 Share Posted February 23, 2012 Float the wrapper, not your content. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 23, 2012 Share Posted February 23, 2012 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted February 23, 2012 Share Posted February 23, 2012 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. Link to comment Share on other sites More sharing options...
TheBnl Posted February 23, 2012 Author Share Posted February 23, 2012 Yes! Dsonesuk, this is exactly what i mean! maybe i was a bit vague in my description, sorry for that!Many Thanks! Link to comment Share on other sites More sharing options...
ShadowMage Posted February 23, 2012 Share Posted February 23, 2012 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 otherOops. Yeah, I see that now. My bad. Link to comment Share on other sites More sharing options...
Ingolme Posted February 23, 2012 Share Posted February 23, 2012 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 More sharing options...
dsonesuk Posted February 24, 2012 Share Posted February 24, 2012 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 .... Link to comment Share on other sites More sharing options...
ShadowMage Posted February 24, 2012 Share Posted February 24, 2012 Dude. Relax. It was a simple suggestion. He said it could possibly prevent stacking. He was just thinking out loud. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.