I have a fluid-width div filled with thumbnails from a JSON query, and I am attempting to evenly distribute these thumbnails across the width of the div. These thumbnails must be allowed to wrap and reflow if the width of the enclosing div changes, and may vary in x- and y- dimensions, as well as in the number of thumbnails loaded.
I have found using text-align: justify; and display: inline-block does exactly what I want with static HTML elements, like so:
http://jsfiddle.net/skywalkar/gUcvq/
When I do the same thing with content fetched via JavaScript, however, it reverts to plain left-justified alignment (if it even renders at all-- Chrome and Firefox render it as left-justified, but IE seems to give up displaying the thumbnails altogether!):
http://jsfiddle.net/skywalkar/KdLyx/
My question, then, is this:
How can I force the JavaScript-loaded thumbnails to be horizontally justified like the HTML version?
You have 2 problems here. First, your span is outside of the div (honestly, you don't even need the span, just use the :after pseudo element).
Second, justification relies on whitespace. You're inserting your images without including a space/newline/etc. That's why they won't justify.
http://jsfiddle.net/KdLyx/7/
Related
I am in the process of reworking a simple web site so that it can run on a thumb drive, aka with no server involved.
On a page on the original I had a "select" control that would execute a script that read a file and loaded images and some text.
Since I can't load files from the client's computer, I put all the information on the page, each entry in a separate div, each with a unique id, and am using style.visible = "hidden" and "visible" to hide the ones I don't want to see and show the ones I do.
Problem is, the page stays the same size (length) as if each of the divs was visible, and the space occupied by the divs I have hidden is not released.
How do I get the hidden divs to give up their space?
Here's the original page: https://www.vintagebankantiques.net/people.html
A css rule like
.class-of-divs{
min-width: 100%
}
or possibly
.class-of-divs{
min-width: 100vw
}
should help. Without having a JS fiddle or something it's hard to say more.
What these rules do is say that those divs must all be 100% of the width of the page, and shouldn't change size based on the presence of the other divs.
A problem you might get is that the divs will still get shifted in position by their neighbours. To prevent that, you could try setting display: none instead of visible: hidden. The key difference is that a div with a visibility of hidden still affects page layout. A div with a display of none does not affect page layout.
Setup:
So, I have a narrow but long table (width:200px, height:2000px ish). This table is wrapped inside another div with fix height (300px) and overflow-y:scroll, giving a fixed height visible area. In the table, there is a lot of cells that are stacked vertically (see image and markup is simple regular table wrapped in a div).
Problem:
Each cell contains images, so if there are lots of cells that the page has to fetch including the images and data before loading the site then it will slow down the site significantly.
Solution Approach:
I am thinking of two approaches.
Apply lazy-load to images only. In this case (for example, from the image above). all three sections (section 1, 2 and 3) will be fully loaded except images that are not visible yet. Although it will minimize the delay if it has to fetch lots of data (for example 100+ cells), then I am not sure if it is the best approach.
Another approach is little bit more complicated but will minimize the delay as much as possible and is really ideal. So, when the page is first loaded, only the section-1 will be visible but section-2 will be also loaded (either with images or lazy-loaded images. Howeversection-3will not be loaded at this point.
When the user scrolls to thesection-2then thesection-3will be automatically loaded but not visible until user scrolls down. Ifsection-3is in the viewpoint, thensection-4` will be loaded but not visible. You get the point.
Any thoughts on it and how-to?
Thanks.
Do both. Make sure your images are always being lazy loaded, and only get the data for the next section when the user is scrolling and gets close to (or at) the bottom.
I use a lazyload image system where I specify my images like this:
<div class="lazyimg" data-src="path/to/image">
</div>
I give .lazyimg a width and height and then, when it scrolls into view, I load data-src and set background-image on the .lazyimg element.
This only works if you can specify a size independent of the actual image size, background-size: cover|contain are your friends here.
EDIT
Alternatively I guess you could load the image and then pop it in the DOM as an img tag, but changing the dimensions of the element could affect any sibling layout which could appear somewhat jarring, even if smoothly animated.
How to do it: onscroll callback.
I generate a PDF File from a HTML Source. Each Page has a height of 1402px. First solution was, a DIV for each side.Placing Footer and Header was easy then. Problem is: if the content (dynamically generated) doesn't fit the page div, it overlaps the footer and in worst case, destroys the layout. So all the Pages and their content goes into one div, but how do i add 300px of margin, which I need for Footer and Header?
I tried to display my problem in this picture:
The whole white thing is one Div.
The black lines display each page in the Div but they are not in the code.
The green lines display where I need a margin so the red content doesn't overlap, but continues on the second page instead.
Red -> current situation
Blue -> what I need
I can also use Javascript in the document.
Can you help me?
http://i.stack.imgur.com/iMFBb.png
Here is the fiddle of how its solved until now:
https://jsfiddle.net/8yvpavd7/1/
I suggest you ensure that the height of your page is lower than a specific limit. Since you are using absolute sizes and positioning anyway you can easily check that using jquery (example:)
$('#page1').height() / $('#page1').outerHeight()
Since we don't know anything about your datastructure, i can only assume what you need. The following fiddle should explain what i'm talking about https://jsfiddle.net/rkvs5s1z/2/
You could remove parts of your content until it fits the height. You need to store the removed data.
The fiddle does not store the data in the correct direction - it should only demonstrate how this could work
Afterwards you append a new page including your headers and footers.
You might need to repeat these steps if the content of one page is bigger than two pages.
I would also suggest to improve the shown example by not slicing single characters but complete words. If your pages contain html you might also need to check for html code and correct nesting.
I have this problem where I am trying to show multiple graphs (based on jsPlumb) on a single page. Since I want each graph to be side by side on one row no matter how much space is available I am using a table (if I used divs with float:left, if not enough space is available some of the divs move down on a separate row).
Now each table cell contains a main div which in turn contains two or more node-divs. The way jsPlumb works is by creating a separate div for each node. I need to position each node at a particular top/left relative to its parent div.
The problem I have is that the main graphDiv in each table cell does not expand to fit its content. Some of the graph-node divs are outside of it. I understand that when you have "absolute" positioned divs they are not taken into account. But I am using "relative" positioned divs with top/left coordinates. Does the same thing apply?
If so, what would be the best way for me to expand the table-cell/graphDiv to cover its content? (i have tried all the clear fixes and went thru all stack-overflow related posts but could not find a solution).
Here is a link to the jsfiddle page I set up: http://jsfiddle.net/7QkB2/28/
I'm a little rusty but I share your pain in trying to get divs to properly expand to contain their contents.
As explained by this page http://reference.sitepoint.com/css/relativepositioning when you use relative positioning you're actually leaving behind a hole where the content used to be. I'd think of it almost as an optical illusion - The object is still reserving an invisible block in its old position, but it appears as if it has moved.
So in your case, the 3 nodes are still stacked in the upper left corner of the graph even though they look like they're floating outside of it. If you get rid of all the absolute and relative positioning on the nodes you'll see the table is sized to be big enough to fit their original positions.
I'd recommend usually only using position relative if you're only moving your content by a few pixels. Why they designed the css to work this way is a mystery to me, but maybe its something to do with the limitations of the rendering engines? When you use position absolute the object no longer has a "box" taking up space in the document. It's easy to position, but won't affect the spacing of anything else as you observed.
I'm not sure your exact application, but you may need to get creative with how you specify the spacing. If you know the dimensions you can always specify them, but I'm guessing you're not that lucky. Do you really want to set the position relative to the top-left corner, or just relative to the other nodes? I'd probably just use old-fashioned margins. That should allow you to specify the positions of the content that needs to fit in the table while maintaining the block model. Then if you need one of the nodes to overlap, position it using absolute positioning.
Have you tried displaying each div as an inline-block and turning off line wrapping on the enclosing div? You don't have to resort to tables if you want content with a dynamic width to display horizontally without wrapping.
div.graph {
display: inline-block;
}
div.graph-container {
white-space: nowrap;
}
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.