I have a vertically centered slideshow on a page, however I want to somehow add a "limit" so to speak on how high it slides up the page on smaller screens.
http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre
If you resize your window, it will reach a point where the slideshow sits over the top of the navigation bar and the main logo. Basically it needs to stop at the base of these elements once the screen size reaches a small enough size.
Is this possible?
remove position: absolute; from .production-scroll class
Also remove position: fixed; from #sticky-footer if it is not necessary
I would separate the slideshow section of the site, and the header section. So you have 3 horizontal slices: header, slideshow, footer. Then you can center the slideshow in the middle segment, and it will never go over the header.
Give this small demo I've set up for you a try and see if you can switch up the HTML in your project to something similar:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!-- Insert below CSS here -->
<!-- Insert JQuery here (http://code.jquery.com/jquery-latest.min.js) -->
<!-- Insert below JS here -->
</head>
<body>
<div id="shell">
<div id="head">Header.</div>
<div id="slideshow">Slideshow.</div>
<div id="foot">Footer.</div>
</div>
</body>
</html>
CSS: (mainly for demonstration):
*{ margin: 0; padding: 0; }
div#head{ height: 200px; background: blue; }
div#foot{ height: 100px; background: red; }
div#slideshow{ height: 300px; background: green; }
JavaScript:
// Fix position initially and on each window resize.
$(window).resize(fix);
$(document).ready(fix);
function fix()
{
// Work out position value.
var base = $("div#slideshow").position().top;
var middle = $(window).height() / 2;
var hw = $("div#slideshow").height() / 2;
// Position top either at the position determined above, or 0 if it bypasses the top of the page.
var destination = Math.max(middle - base - hw, 0);
$("div#shell").offset({ top: destination });
}
You can grab the full working example here.
Related
I have a 3 column fluid layout, each column % widths.
Left and right column content is just images, which scale up/down as desired when browser size is changed.
In the centre column, I have a header area with a background image, with the logo image and text image on top of the background image.
The background image, logo, and text image all scale with browser resize, however not in proportion to each other.
That is, when the browser size is reduced, the logo becomes smaller quicker than the background image, so is no longer proportionate to the background image.
As a result the logo image becomes tiny on the background image.
You can see it working here:
http://jsfiddle.net/james2014/KSq5j/embedded/result/
If you slowly resize your browser, you can see all images start to scale down, but the logo (green thing with "whatever" in it) becomes too small for the blue background, as does the text.
And the code, in JSFiddle:
http://jsfiddle.net/james2014/KSq5j/
The blue gradient background image is large (2000+px) to allow it to scale up for potentially large screens, filling the centre area's % width, but I think it's this which perhaps ruins the scaling proportions.
I've tried for days with different CSS, background size, different widths and image sizes.
Can anyone suggest what might be needed in the CSS?
I'd consider a new approach, without the background image being huge, if there's a solution with this too.
Here's the code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>3 column responsive</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<!-- MASTER LEFT COLUMN -->
<div id="master-column-left">
<img src="http://s27.postimg.org/umuoxsb6b/site_left_image.png">
</div>
<!-- MASTER CENTRE COLUMN -->
<div id="master-column-centre">
<!-- Header -->
<div id="header-centre">
<!-- Logo -->
<div id="main-top-logo">
<img src="http://s27.postimg.org/40i88t6z3/logo.png">
</div>
<!-- Some Text -->
<div id="some-text">
<img src="http://s27.postimg.org/a05zcgrrj/some_text.png">
</div>
<div style="clear-both"></div>
</div>
<!-- end Header -->
</div>
<!-- end MASTER LEFT COLUMN -->
<!-- MASTER COLUMN RIGHT -->
<div id="master-column-right">
<img src="http://s27.postimg.org/68weq5e37/site_right_image.png">
</div>
<div class="clear-both"></div>
</body>
</html>
CSS
body
{
margin: 0; padding: 0;
}
img { max-width: 100%; height: auto; }
/** COLUMN WRAPS **/
#master-column-left
{
width: 20%;
float: left;
}
#master-column-centre
{
width: 59.5%;
float: left;
}
#master-column-right
{
width: 20%;
float: left;
}
/** HEADER **/
#header-centre
{
float: left;
width: 100%;
padding: 0 0 1.3em 0;
background-image: url('http://s27.postimg.org/guga25ker/content_header_image.png');
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid #4c6623;
}
/** LOGO **/
#main-top-logo
{
float: left;
width: 10%;
margin: 1.3em 0 0 2em;
}
/** TEXT **/
#some-text
{
float: left;
margin: 2.3em 0 0 9em;
width: 28%;
}
I've used jQuery to keep the heights all the same in this updated FIDDLE.
But I'm not sure it's really optimal.
I wonder if you could put all three of the top items in a single div, and then put three columns below them. That's the only way I can think of in CSS.
edit: If you made the center header an image, it could be treated the same way as the other two images.
I'm sure others will chime in with some better ideas.
JS
var bikeheight = 0;
bikeheight = $('#master-column-left img').height();
$('#header-centre').css('height', bikeheight-22);
$(window).resize(function(){
bikeheight = $('#master-column-left img').height();
$('.putmehere').html(bikeheight);
$('#header-centre').css('height', bikeheight-22);
});
Edit 2: We may have a solution based on this excellent page:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Here is the FIDDLE.
For anyone else ending up here with a similar issue.
TimSPQR's answer was very helpful, gives food for thought and certainly might resolve others' issues.
However I've found the issue I was having with my code was specifically the padding on both the header background image and logo containers were not scaling in proportion with the scaled sizes of the images.
Even though the padding was em, and should ideally scale as desired, it wasn't.
Changing the padding to percentage (%), and of course the values, resolved my headaches.
There is lots of info to get footer 100% wide or to extend 100% to bottom of browser.
My problem is a little different.
All the content of my site is wrapped in max-width container. But client wants the footer to be 100% wide and then if the page info is short, the footer must stretch to bottom of page.
So I have to put the footer outside the main container so that it can go right across the width of the page. But this means I can't use the
html , body {height:100%;}
option because making the footer 100% high will not help as it is outside main container.
So, ignoring the main container, how do I tell the standalone 100% wide footer to fill to the page to the bottom of the browser if the page is too short to fill the screen from top to bottom? How do i get the footer to fill that gap on the bottom?
Here is a simple copy of the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#main {
height: 100px;
max-width: 900px;
background-color: blue;
margin: auto;
}
footer {
width: 100%;
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<div id="main">
</div>
<footer>
Footer content
</footer>
</body>
</html>
How do I get the lightblue footer to go all the way to the bottom?
And please note that I don't want the footer to stick to the bottom, I need it to extend to the bottom of the browser from where ever it is on the bottom of the page.
jsFiddle DEMO
//css //
footer {
width: 100%;
background-color: lightblue;
position:absolute;
color: white;
bottom:0;
}
// jQuery //
$(function () {
var mainHt = $('#main').height();
$('footer').css('top', mainHt);
});
I have an image that is 115px that I want at the very bottom of my page. I searched online how to make it stay at the bottom of the page always and got a lot of complicated answers. I made with code of my own one that works (at least in my browser). I realize it might be an immature way to do it, and wanted to see if there were any potential problems with it. Here is my code
<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
</div>
Here is how you do the footer always at the bottom of page. You can replace footer with <div id="footer">...</div>, but I prefer HTML5 footer.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body { height: 100%;}
footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5);
position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
you may want to consider what will happen if the body text is as long as the viewport height. The text might go behind the fixed footer and you may not be able to see it
I would recommend;
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
then make sure to give the div wrapping all the content has a padding bottom the same as the height of the footer.
#main { padding-bottom: 150px; } /* must be same height as the footer */
Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?
I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.
The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.
Would slides made in HTML5 be what I need? Thank you in advance for any help!
Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.
The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.
EDIT:
Using the scrollTo and localscroll functions developed by Ariel Flesler I have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:
My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.
If someone could figure this out I will be greatly indebted to you!
(I would post a link to what I have, but I can't. It's confidential work for a company)
Thank you in advance!!
EDIT
I am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!
I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).
Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.
http://madesignuk.com/uploader/
PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.
PPS The site is in development so please try not to mock me :p
You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.
Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
«
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
«
»
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
»
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>
Edit
Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC
Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.
Use the scrollTop CSS attribute : you want to scroll down 100px in your main content area ?
Just do that :
var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);
The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.
Try JQuery Cycle plugin.
http://jquery.malsup.com/cycle/
They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.
If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?
Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?
The Google Chrome Team made 20 Things I Learned About Browsers and the Web which has this effect.
Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.
I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.
I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).
You could use something like Coda Slider, and have the content of the slide be the whole page.
I'm trying to fix an image to the bottom of the document for a HTML page.
My strategy roughly involves a setting the CSS height of the html node to 100%, and setting the background-position of the background-image to bottom.
This works for pages with a document shorter than the viewport size, but for documents with a length greater than the viewport size, the background is positioned in the middle of the page.
Without knowing whether the document will be longer than the viewport or not, how can I fix the background at the end of the document?
I've managed to get it working as required in Firefox only with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
.wrapper {
background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
The inline style on the p tag simulates a long document.
This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.
If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).
#specialBackground {
background-image: url(bg.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100px;
z-index: -1;
position: absolute;
bottom: 0;
}
This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).
To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:
window.onscroll = function() {
document.getElementById("specialBackground").style.bottom =
(document.body.scrollTop * -1) + "px";
};
Hope this helps.
EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:
<div id="specialBackground"> </div>
<div id="wrapper">
...