At first I want to show you what I want to create.
Example! ! Here you have to go on "Galerien" and now resize the Browser in height or width. You see that the images/divs automatically fits on the container.
There is no problem when you only keep attention on the width, but you have to combine width and height that no image overflow the container. I worked with javascript and i want to create if conditions to prevent the overflow.
It is hard to explain, but i hope the example show my problem.
Thanks a lot.
Related
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 looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.
i am trying to make a div which have a lot of images which takes 85% width of the screen. the height doesn't matter as long as the content stays the same. the footer is fixed and the navigation will drop down a div which contains images at the width (85%) of the content size. and the images should scroll with two buttons, next and previous. i'm new to java, html and Css. please help me. thank you :)
I will help you on your way.
I hope this helps you!
To get a div to get scrollable you have to specify that in your css code with the overflow attribute.
Take a look in this fiddle
http://jsfiddle.net/d8dFd/
I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/
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.