Fluid resizable image with infinite horizontal scroll (REV. 2) - javascript

I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)

Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>

I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant

Related

Fullscreen Div - Scrollable - Responsive - Crossbrowser - Bootstrap3

I am looking for a way to create a div with height and width of the current browser window size.
This should work even if the window is re-sized.
The fullscreen div shall be followed by even more content.
I am using Bootstrap3 - But I am not sure if this changes anything.
It is pretty easy to get this working in Firefox/Chrome/IE
.fullscreen {
min-height: 100%;
min-height: 100vh;
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
This does not work on Safari.
So I came up with some js
$('.fullscreen').css({
width: $(window).width(),
height: $(window).height()
});
This works on all Browsers (At least all Browsers I've tested). Resizing the window does not work, as the width and height is fix. I could create a Listener that reacts on Window Size changes (I have not looked it up - but this should work).
I don't like the idea of using js to set css.
Isn't there a best practice? This should be possible using css only, shouldn't it? The solutions I've found on the web, were not satisfying.
Something like this?
You need to set the dimensions of both the viewport (html) and content (body) to 100%, then by giving a div a height and width of 100% it will be calculated relative to the viewport, giving the functionality you require (always filling it even on resize).
Feel free to ignore the huge parrot picture in the example, I added it because often in such layouts the first div includes a responsive image.
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%; /* <-- keep the div 100% of the viewport height */
width:100%; /* <-- keep the div 100% of the viewport width */
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}

How to style a control in Bootstrap to full height in mobile (with scrolling, fixed header/footer)

When using my JQuery control (IOS-style list), in a Bootstrap Web Application, I need the control to take up the full screen height (minus header and footer) on any mobile sizes.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/46y43/1/
/*
Live control Javascript not required for this example
Note: I pasted my bootstrap CSS into the JSFiddle CSS panel,
hence the large amount of styling.
(My styling is at the bottom).
*/
It should look something like the image below, but currently the height of the control is hard-wired so if you resize the control goes outside the window and the footer is lost:
The height needs to be 100% minus the headers, preferably complying with bootstrap. The only other answers I could find for fixed heights in Bootstrap did not adapt to the content area being larger than the screen height. This seems to be a deficiency in CSS, so suggestions/improvements welcomed (I really miss Silverlight layouts!).
The solution should avoid having any browser scrollbars if shown in a small browser window.
I added JQuery/Javascript tag in case the only solution is some form of dynamic resize, but a CSS only solution preferred (must support all major browsers).
Fiddle: http://jsfiddle.net/46y43/2/
CSS:
.navbar-header{height:50px;}
#media screen and (max-width: 768px) {
html {
height:100%;
}
body{
height:100%;
}
.container.body-content{
height:100%;
margin-top:-50px;
padding-top:50px;
}
.container.body-content .row{
height:100%;
}
.col-md-8.col-md-offset-2.col-sm-12{
height:100%;
}
.col-md-8.col-md-offset-2.col-sm-12 .row{
height:100%;
}
.ListView-Wrapper{
height:100%;
min-height:100%;
}
}
LESS:
#navheight : '50px';
.navbar-header{height: #navheight ;}
#media screen and (max-width: 768px) {
html {
height:100%;
}
body{
height:100%;
}
.container.body-content{
height:100%;
margin-top: -#navheight;
padding-top: #navheight;
}
.container.body-content .row{
height:100%;
}
.col-md-8.col-md-offset-2.col-sm-12{
height:100%;
}
.col-md-8.col-md-offset-2.col-sm-12 .row{
height:100%;
}
.ListView-Wrapper{
height:100%;
min-height:100%;
}
}

Horizontal scrolling with sticky div elements

Im trying to do a horizontal navigation with some fixed/sticky elements.
When the user scroll the page, some divs have to remain stuck on the left edge.
Here a fiddle of what i want to do :
http://jsfiddle.net/rQUeL/
css
.container>div {
display:block;
float:left;
}
.container {
height:100%; display:block; background:grey; float:left; width:2000px;
}
.cover{
width:25%; height:100%; background:blue; }
.menu{
width:90px; height:90px; background:green; margin-left:100px; }
.menu.fixed{
}
.cover.fixed{
}
.content{
width:500px; height:100px; background:red; }
<div class="container">
<div class="cover" >
<div class="menu">Menu</div>
</div>
<div class="content">content</div>
When the green square reach the left edge, the green and the blue elements have to be fixed , and the red content go below.
I believe it can be do jQuery...
Thank you for your help.
Sebastien
You basically change the class when the scroll length is above a certain number (in this case margin-left from .menu)
$(window).scroll(function () {
var sl = $(this).scrollLeft();
if (sl > 100) { // 100 is margin-left from .menu
$('.menu').addClass('fixed');
$('.cover').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
$('.cover').removeClass('fixed');
}
});
PS: I have no idea what you want with the red element
FIDDLE
I had the same issue and couldn't find any solutions using CSS alone. so I made jQuery plugin that solves this issue. You can find it here.
Well, I had a great gif here demonstrating what it does but SO doesn't support it. You'll have to click this to see it.
Now, before you yell at me, let me yell at you first. This is a BYOCSS. So if you're looking for something that will take care of the CSS for you, keep looking. All you have to do is style the header element in an absolute position.
This plugin is still in development and needs some improvements. It's kinda jittery when you scroll. You can ease the jittering with a CSS3 transition: 90ms;
This is just a starting point, if you would like to contribute to it, fork it and see what you can do.

Fixed template sidebars position fixed

I want to change the sidebars on the following template to have fixed position.
Is it possible to do it without using javascript and only css?
Template Demo
PS: Placing position fixed for the sidebards it is not an option because its changing the whole structure of the site and they are placed outside of content area.
you wanna like this??http://jsfiddle.net/kFBuD/1447/
overflow:hidden;
You can using position:fixed
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
**position:fixed;**
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
you can use overflow property of HTML if you don't want it in CSS or JavaScript.

How to centre and scale up/down image within a resizing DIV

I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.

Categories

Resources