Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm
Related
I'm trying to replicate jQuery slideDown() in GSAP and I'm having trouble working out how jQuery calculates the height of an item which is currently hidden as if it was set to height:auto.
I've tried trawling the code on GitHub but can't find any code which seems to be doing this in jQuery.fn.slideDown or jQuery.fn.animate which it calls.
There are several similar questions on SO and several solutions proposed, all of which seem to have their own problems:
Clone the element, position it off screen and calculate its height. This won't work if the element or any of its child elements have a height set by CSS styles which require the element to be in its original place in the DOM (e.g. an .accordianItem might only be styled if it's inside its .accordian).
Display the item, remove height:0 and quickly calculate the height before hiding the element again and then stating the animation. This might flash the content quickly while calculating the height.
Use visibility:true to show it in place while calculating the height. This would stop the flash and still keep the element in the same position in the DOM for correct height calculation, but it would still push other items below it down because visibility:false items still have a height.
Calculate the height of an item before it's hidden and store it in a data attribute so we know it when we want to open the item later. This won't work if any dynamic content changes the height of the item whilst it's hidden.
jQuery slideDown() "just works" every time so I'd be really interested to know how it works, but I just can't work out where it's doing this. I'm also surprised that GSAP can't do this out of the box, or that nobody has shared a proper solution to this before.
Any help would really be appreciated.
It turns out that if you use $.height() to get the height of an element with display:none it doesn't return 0 as you would expect, it actually sets visibility:hidden, position:absolute etc. and sets display to block to give you the correct height back. I assume this is what's being used internally when doing a slidedown.
This answer helped me a lot.
jQuery: height()/width() and "display:none"
Just to be clear about how this seems to avoid all the problems in my original question. It's basically doing number (3) but avoiding the problem of pushing lower content down the page because it's also set to position:absolute while the height is being calculated. A very simple elegant solution
I hope I do a good job explaining this.
I am making a Tumblr theme, and am setting up the post titles in a way that text won't overflow unto a second line if it is to long. I want to make the text grow smaller as it reaches the edge of the parent instead of dropping into a new line or getting cut off.
I tried fittext.js and bigtext.js, but I couldn't get either to work. And I do not think they would work for what I want, as fittext.js seems to be more responsive text, and bigtext.js always makes the text the same width as the parent which wouldn't work with what I want.
Does anyone know I can accomplish this? I'm a noob when it comes to Javascript, so keep that in mind when responding. ;D
The first step is to stop lines from breaking:
white-space:nowrap;
Then, you need to allow scrolling:
overflow:hidden;
Now you have access to scrollWidth. If it is bigger than offsetWidth, then the text is too big.
You can shrink the text one unit of font-size at a time (be it 0.1em, 1px, 1pt... whatever you want). Repeat this step until scrollWidth is less than or equal to offsetWidth. Ta-da!
I'm writing some code that wraps various content into columns of text (and images, videos, etc). The code works fine, but due to the algorithm I'm using it's rather slow, specifically this general logic:
add something (text for this example) to a column
check to see if column.scrollHeight > column.offsetHeight (this requires a DOM reflow)
if yes, start to binary split the text until it's shorter
Basically my issue is that I'm adding an unknown amount of text to a column, so after each chunk of text I check the column's scroll height which requires the browser to actively reflow the DOM in order to give me the correct scrollHeight. So I have 50-100 or more reflows in order to properly lay everything out.
Any general ideas on how to avoid most of these?
You could render the content multiple times. Since the first time would cache it, this should be fairly fast. The reason for the multiple rendering would be as follows.
Render the original content in a hidden area
Check to see what the column width is compared to content
Overlay the content over the column, but beneath the page. This
will cut off part of the content that is overflowing. You can accomplish with
z-indexing or with overflow: hidden;
Based on what the check from step 2 was, overlay a copy of the content with
the calculated offset in the next column in the same fashion, hiding the
extra content.
Keep track of the rendered content versus total content so you can tell how many
columns you need to do this to if there are multiple columns.
Maybe this is the same thing Travis J is suggesting, but I'm not sure, I don't quite understand his solution.
You could render everything first, on a single column, then loop through the elements top-down to know when to split, based on your desired column height versus each element's offsetTop plus height. When you find an element to break at, cache its position and go on. At the end you should have an array with the list of elements to break at, so you can actually split the content in columns.
Does this make any sense to you?
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.
Im trying to use this plugin:
http://www.jacksasylum.eu/ContentFlow/
2 points:
I want to know how can I get it into my div and stay inside the volume of the div? As it is right now, my div is 185px, but when I put the coverflow inside of the div, it breaks out of it and plays outside the div.
If I take the height off the div, it will stay inside the div, but... the div MUST remain at height of 185px. I dont really see any padding or margin elements inside the CoverFlow css, so im not sure what im supposed to edit.
I also have plans to put the coverflow into an even smaller div on another page, so I want to know how to scale it and fit into my set-height div properly without problems.
When I load the page into another div thats in another page, the coverflow will not load. So basically, the coverflow only loads in its own page. Ive put the links to the .js and css into the main file that loads the coverflow page, but its still not working.
Can anyone help me figure out these 2 important points?
What is happening there is that ContentFlow completely ignores the container's height; it seems to be using some kind of fixed aspect, with only width being taken into consideration, and the height being calculated from that.
Therefore, the simplest solution, in your case, given that you have a fixed height, is to reduce the width of the container, therefore making ContentFlow calculate an smaller height.