This should be simple but nothing's working:
Question
How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?
Background
I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomplish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:
function onScrollEvent() {
var height = scroll height
var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
for each item in my array of graphics
if item index != sectionIndex then item.fadeOut else item.fadeIn
}
Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."
Summary
When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:
height = Math.min(height of contents, height of div style)
Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.
CSS
html, body{
min-height: 4000px;
}
Live Demo
Reference
Easy in CSS:
body
{
height: 4000px;
}
Example here.
This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.
In your CSS add:
body
{
min-height: 4000px;
}
And you'll also need:
body
{
height: 4000px;
}
for internet explorer (via IE's conditional comments).
In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:
http://pastie.org/1674432
Related
I'm having a strange issue with
I've created a fiddle at
http://jsfiddle.net/alexjamesbrown/oqu54cav
In the source, there's a <li> element at line 153 that says 'THIS SHOULD BE VISIBLE'
However, when initially running it, it's not visible in the scroll window.
If I resize the window, even a tiny bit, the rest of the items are visible as expected
I'm struggling to see a) what is causing this, and b) why it fixes itself on resize?
If you turn off prettycheckable, you can see that the problem doesn't happen. I believe this is happening because the scrollbar plugin reads the height of the div before the checkboxes are made larger by the prettycheckable plugin. So the height of the div is set, the scrollbar is generated, then the checkboxes are enlarged with the other plugin.
Right now you are styling the heights for the generated elements. Those only come into play once the javascript has evaluated. In order to fix this, you need to style the elements in the real html. For example, this solves your problem:
.overview li {
height: 2.5em;
}
Because the .overview li is there before the checkboxes are "prettyfied" and then when they are generated, they don't make that element any larger.
This question is a duplicate of jQuery scrollRight?
I have a div with a lot of content (width-wise) and overflow:auto, so i have the scroll bar at the bottom. It starts scrolled fully to the left: is there a way to scroll it all the way over to the right, using jQuery/native JS?
Even if there's a way to do this in CSS (which would normally be preferable) i need to do it in JS, because some other stuff happens in the table first in JS (using the jquery plugin DataTables to be specific) in the dom ready block, so my code needs to run after that.
I thought this would be simple but i've not managed to google anything useful.
thanks! max
Here's how I did it - you might consider it a bit hacky.
In the sample below, "#test" is a div with 100px width and overflow: auto.
$("#test").css("overflow","none");
$("#test").css("width","none");
var width = $("#test").width();
$("#test").css("overflow","auto");
$("#test").css("width","100px");
$("#test").animate({scrollLeft: width}, 100);
Here I'm getting rid of the width and overflow CSS properties to work out what the true width of the content is. Then I'm putting the CSS properties back on and scrolling to that width.
Here's a JSFiddle: http://jsfiddle.net/dReFh/
EDIT: Here is another fiddle, this one showing the problem exactly as it is occurring. In my eyes, since the section bg is INSIDE of the container, overflow hidden should be hiding it: http://jsfiddle.net/9SPDq/2/
I've implemented a custom parallax scrolling solution for my client's site. I've included relevant snippets at the bottom of the question. Since the site is a complete Ajax piece, the background must be as high as the highest page, which in this case is the homepage. When looking at the homepage, all works as expected because all the pieces are arranged to fit a page of that height. But when the user navigates to another page which is significantly shorter, the problem arises: the user can scroll 10x the height of the page because the <html> thinks it has to scroll to the parallax pieces, when in fact I only want it scrolling to the contents of <body_container>. I have tried various combinations of overflow:scroll and :hidden, to no avail.
Here is a js fiddle of what I imagine SHOULD happen, but it seems that because in that example what is #parent is <html> in the production site and the #container is <body>, something is breaking. Namely, because the way I've done it #parent requires overflow:hidden, it removes all scroll bars in the production site because I'm making <html> have overflow:hidden.
http://jsfiddle.net/vb5cp/
The blue <section>, in my eyes, is happily absolutely positioned outside of the scroll area, and for that reason should not affect the height of the #container.
Since the production site's beta is up, I'll provide a link to one of the pages exhibiting the problem, too, in case my descriptions haven't been clear: http://beta.firedogcreative.com/#motion_design
The question is: how do I retain the parallax background pieces, but control the height of my pages so that they only scroll to the height of the page contents?
To summarize the implementation:
<body>
//here are the parallax pieces, with various hooks for the js that control them
<section id="bckgrnd1"></section>
<section id="bckgrnd2" data-type="background" data-speed="6"></section>
<section id="bckgrnd3" data-type="background" data-speed="5"></section>
<div id="body_container">
//actual page content
</div
</body>
Each piece has some simple css, the key part being the absolute positioning:
#bckgrnd2 {
background: url(/media/images/parallax_pieces/smalltopFlame.png);
background-repeat: no-repeat;
background-size: auto;
height: 410px;
width: 661px;
margin-left: 215px;
position: absolute;
}
And finally the js that does all the work:
$(document).ready(function(){
$("html").css("background-image","none");
$("section").show();
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
var yPos = -($(window).scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = yPos + 'px';
// Move the background
$bgobj.css({ top: coords });
});
});
});
// Create HTML5 elements for IE
document.createElement("article");
document.createElement("section");
To those who could follow my meandering and convoluted question, and who are having a similar problem, here is what was going on.
The <sections>, since they were being used as background image containers for a parallax scroll, were absolutely positioned and thus outside the flow. Since their container was <body>, they were treated as a part of the page, and thus even though overflow:hidden was set on <body>, they weren't being viewed as overflow and thus the user could scroll too far down the page. The solution was to contain all the <section>'s in a single div, and then set the height of THAT div in ADDITION to <body>. The result is exactly what you would expect: the user can only scroll down as far as the set height, exactly as you would want.
Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;