segwaypirate Posted August 22, 2010 Share Posted August 22, 2010 I've got a horizontal scrolling site where all the text is justified into columns that are 500px by 200px. Currently the page displays 8 columns with 8 different articles, each one with a vertical scroll if required. While this is nice, I'm working on giving the option to view just one whole article at a time where the text spills over into the next column. wordwrap() might not be able to cover this one as it only works in characters not pixels and I'd prefer to not need a font with fixed character widths. The best way I can think to do this would be to somehow detect the point at which the css overflow would kick in. Any guidance or insight would me much appreciated! Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 22, 2010 Share Posted August 22, 2010 Just change the width of the div/container that the text is in and let the browser determien where the word wraps will be. Quote Link to comment Share on other sites More sharing options...
segwaypirate Posted August 22, 2010 Author Share Posted August 22, 2010 Just change the width of the div/container that the text is in and let the browser determien where the word wraps will be. The browser does determine where the wraps will be until the text gets to the end of the 500x200 pixel column and I want to it to wrap into a different one which is a new div/container. The point is to figure something out without changing the look of the site. Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 23, 2010 Share Posted August 23, 2010 You are going to have to provied some examples (image mockups perhaps or a link to the current page) because based upon what you are saying I still don't see the difficulty. This is not a PHP issue, but an HTML/CSS one. Moving to the CSS forum. Quote Link to comment Share on other sites More sharing options...
segwaypirate Posted August 23, 2010 Author Share Posted August 23, 2010 I created a horizontal scrolling site with the technique found in this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ A link to the demo of the technique described above can be found here: http://css-tricks.com/examples/HorzScrolling/ To get the horizontal scrolling site, the jquery .wrap function is used to put each post in into its own cell of a single row table. This works fine if using only short articles. If an article is too long the result is a single column with a vertical scroll bar. Instead I want the text to fill up the first cell which is 500x200 px and then wrap into the 500x200 px cell to its right. Breaking up the text is easily done with the markup that causes a new column. In this case its <div class="post"></div>. The issue is that when my site is populated with content, how can I determine when the first container would be full so that the tags should be printed to begin populating the next container? If this can be solved with just html/css i'll be impressed. Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 23, 2010 Share Posted August 23, 2010 It would have been VERY helpful if you had stated that you were using JavaScript/JQuery for this. In any event I still see no reasong for JavaScript to "create" the columns. (In fact it doesn't even work in IE browsers). You can create columns using just CSS and it makes your site more usable. However, in order to dynamically determine if a column is too long and should be spanned across multiple columns is something that will most likely need to be handled by JavaScript. PHP can't "know" how tall a div will be displayed in the browser because it will be different based upon the users resolution and browser settings. (Note: even attempting to do what you are asking could potentially "break" the output for some users. You will want to test on different browsers, resolutions, font-size, and even hand-helpd devices) You can determine a div's hieght in JS and then dynamically increase the width of the column as needed. Here is a very rough example. It still needs some work with regard to the container div CSS properties. I'm sure there is a way to let the width of the container be dynamic AND forcing the columns not to break without using JS, but there is enough for you to work with. The page will load with the inital maximum column height set to 500px. Chnage it to 400 and click the button to see the results. <html> <head> <style> #columnContainer { border: 1px solid red; width: 2200px; } .column { border: 1px solid black; width: 400px; float: left; padding-right: 20px; font-family: arial; font-size: 10pt; } </style> <script type="text/javascript"> function resetColumns() { var totalWidth = 0; var baseWidth = 400; var maxHeight = document.getElementById('maxHeight').value; var colIdx = 1; while(document.getElementById('column'+colIdx)) { var divObj = document.getElementById('column'+colIdx); widthMult = 1; divObj.style.width = baseWidth + 'px'; while(divObj.offsetHeight > maxHeight) { widthMult++; newWidth = baseWidth * widthMult; divObj.style.width = newWidth + 'px'; } totalWidth += parseInt(divObj.style.width) + 20; colIdx++; } document.getElementById('columnContainer').style.width = totalWidth + 'px'; return; } </script> </head> <body> Max Col Height: <input type="text" id="maxHeight" value="500" /> <button onclick="resetColumns();">Reset Columns</button> <div id="columnContainer"> <div id="column1" class="column"> <h4>Post Title Example One</h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan. <br /> </div> <div id="column2" class="column"> <h4>Post Title Example Two</h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan. <br /><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan. </div> <div id="column3" class="column"> <h4>Post Title Example Three</h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan. </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.