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.
Related
Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.
I have a slideshow that I would like to fill a div completely.
Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example:
If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example:
http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
You can probably change your position:absolute for slideshow class
.slideshow {
position: absolute;
}
You're looking for a way to make your background image fit the back of the page. What Ed is looking for is the CSS/JS that you currently have, so we can better tell you what you should do differently.
This article gives great examples of different ways of achieving what you're asking for:
Perfect Full Page Backgrounds
And if you're interested in another way, here's a JS library that does it as well.
Backstretch
Without seeing your code, that's as good an answer as can be given.
I’m having an issue with a container holding the marquee and i’m not sure what’s causing it.
Essentially, the container is stretching way too far, causing the animation to flash across extremely fast (because the animation accounts for the width).
I don’t want to state a width for the marquee because I want the container to stretch to whatever its siblings width is.
I’ve created a fiddle to display what’s happening. In the fiddle, i’ve included the exact html included on my own webpage.
I assume there’s an issue with the css of one of the other elements, but what? What's causing the container to stretch to extreme lengths?
FIDDLE: http://jsfiddle.net/uz9pG/
This is the jquery plugin marquee that i'm using http://jquery.aamirafridi.com/jquerymarquee/
Tables, fluid widths and overflow hidden tricks don't really get along well. You'll either need to change your code to use a different markup structure or put a fixed width on one the containing divs within your <td>.
Also, you have conflicting settings in your JS vs data-attributes in your markup. <div data-duration="2000" data-direction="right" class="marquee">
Here's a working version. http://jsfiddle.net/uz9pG/2/ Takes a second for the marquee to start. You'll need to adjust your margin code to sort that out. This one removes the tables altogether but you can just as easily add a fixed width to something like your .module_content div if that works for your design.
.module_content {
width: 400px;
overflow: hidden;
}
I have an issue with my web page.
Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.
Edit: The container div has the overflow: auto property.
The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it's taken to a laptop, the last 1-2 rows become 'hidden' due to html overflow.
If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.
Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?
The easiest and probably the fastest way to do it would be using Javascript.
If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.
When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:
function resizeMain()
{
$('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}
// size it on load:
$(function(){
resizeMain();
}
// and size it on resize
$(window).resize(resizeMain);
Of course, many ways to optimize this, but that's the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.
Finally, you need Overflow: auto; on our tabular box
in the div that is height:90% put overflow: auto or overflow: scroll. That'll add a scroll bar to that div only.
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.