I'm trying to figure out how to make the main visible content area expand to the height of the browser-- it's responsive in a sense. If you extend the browser, more of the content shows. If you scroll down, it scrolls to the next div and repeats the behavior.
I have no idea what this behavior is called or referred to as, so I'm not sure I can give an accurate title.
My guess is that this is done with Javascript, but I'm not well-versed in the language by any means. Can someone help me out here?
Examples:
http://theartofraw.g-star.com &
http://www.apple.com/iphone-5s/
I've done this with Jquery. Basically you get the height of the window and then set the height of each slide to that value.
var origheight = $(".slide").height();
var height = $(window).height();
if (height > origheight) {
$(".slide").height(height);
}
http://jsfiddle.net/uYXvF/
They have sections, that are CSS "height: 100%";
Then they detect scrolling and, do a CSS3 Transform with CSS3 Transition:
Transform: Y: 0%
Scrolling Detected
Transform: Y: 100%
So they are basically preventing actual scrolling and instead move the whole content by 100%.
Edit (2):
In this post they show how to disable scrolling:
How to disable scrolling temporarily?
function wheel(e) {
preventDefault(e);
document.getElementById("mainContainer").style.webkitTransition = "-webkit-transform 1s";
document.getElementById("mainContainer").style.webkitTransform = "translateY(-100%)";
}
This is a simplified version from what i use on my own page.
If you want to accomplish the same as in the example sites you posted, then you could make use of a jQuery plugin called fullPage.js.
Related
Si I have a simple few lines of code, basically what it does is when you click on the div that has the id, it disappear (display :none). Normally I would do an addClass / removeClass but I was wondering if just with this code I could add an effect that doesn't make the div brutally disappear but maybe with a transition to the left or the top with 0.8 seconds. How would you proceed?
window.onload = function(){
var divToHide = document.getElementById('divToHide');
document.onclick = function(e){
divToHide.style.display = 'none';
}
};
If you want to use jquery, you can use slide methods of the same. Constraint is that you will have to use jquery.
$("#divToHide").slideDown(2000); //2000 is the ms for the effect
However you can also apply transition-timing-function in css. If you keep the transition-timing-function: linear and go from width 100% to zero width, it will have the effect of sliding and from to to bottom, transition on height..
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
I know this topic has been posted quite often already, but none of the solutions presented have been of any help to me by far. I have a sidebar on the left side of my page, which I assigned position:fixed in CSS, and which I would like to scroll horizontally (along with all the other content on my page)
For my header and footer I solved the issue like this:
$(window).scroll(function ()
{
$("header,footer").css('margin-left', -($(window).scrollLeft()) + "px");
});
But this doesn't do it properly for my sidebar.
This is the html for my sidebar:
<div class="fullscreen_block hided">
<div class="left-sidebar-block">
and CSS:
.left-sidebar-block {
position: fixed;
margin-left: 70px;
}
Can anybody show me how I can fix this without using the above JS code? (any other JS or CSS or jQuery is fine)
Thanks!!
First off, I think you want to use scrollTop instead of scrollLeft. From your description, it sounds like you want to have an element slide to the left as the user scrolls down. scrollTop will give you the distance the user has scrolled.
Second, I recommend using the transform property instead of the margin property, as long as it meets your browser support requirements. Scrolling tricks are often performance intensive so you should try to use high performance css properties like transform and opacity rather than slower properties like margin, left, and display.
The following code does what I think you are trying to do. (Codepen demo: http://codepen.io/regdoug/pen/yyYvaV):
$(window).scroll(function ()
{
var top = $(window).scrollTop();
$("left-sidebar-block").css('transform', 'translateX(' + (-top) + "px)")
.css('-ms-transform', 'translateX(' + (-top) + "px)")
.css('-webkit-transform', 'translateX(' + (-top) + "px)");
});
References
http://www.html5rocks.com/en/tutorials/speed/scrolling/
http://css-tricks.com/almanac/properties/t/transform/
http://caniuse.com/#feat=transforms2d
Your problem is not really clear.. but I think you shoukd better play with the "left" attribute rather than "margin-left". Margins won't have any effect on a fixed element..
code: http://jsfiddle.net/MDnrk/7/
for those too lazy to click the link:
$j(function(){
// need to fix some things that CSS doesn't seem to be able to fix (esp cross browser)
fix_drawer_height()
$j(window).resize(function() {
fix_drawer_height()
});
})
function fix_drawer_height(){
var new_height = document.body.offsetHeight - $j(".redline_info_scrollable").offset().top;
$j(".redline_info_scrollable").css({
'max-height': new_height + 'px;'
});
}
now, in my app, fix_drawer_height() gets called on DOM ready, but it doesn't seem to be called in teh JS fiddle.. so I'm not sure if that is the correct medium to show this problem.
Still not sure what would couse the window resize listener to not set the max-height appropriately. =\
The goal is to have the scrollable div always stretch to the height of the window.
Normally I'd just use height: 100% in the CSS, but that isn't really cross browser, and won't work with how the div is positioned in my actual app.
thanks!
You can use this:
function fix_drawer_height() {
$('.redline_info_scrollable').height($(document).height());
}
and add it in your onload or onresize;
working code: http://jsfiddle.net/MDnrk/13/
After dabbling in Chrome Extensions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?
I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:
body {overflow-x:hidden;overflow-y:auto;}
So when a vertical scrollbar appears the content at least doesn't jump.
Perhaps you need to specify a width on the scrollbar.
::-webkit-scrollbar {
width: 42px; //Do not know actual width, but I assume you do
}
I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.
A view in my web app has a table which may be extremely long, so I wrapped it in a div with overflow: auto; max-height: 400px; so users can scroll through it while keeping the other controls on the page visible.
I want to use a bit of JavaScript to dynamically adjust the max-height CSS property so the div stretches to the bottom of the browser window. How can I determine this value? jQuery solutions are fine.
The table doesn't start at the top of the page, so I can't just set the height to 100%.
Something like this would work I think:
var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);
I had a very similar problem, except in my case I had a dynamic pop-up element (a jQuery UI Multiselect widget), to which I wanted to apply a max-height so that it never went below the bottom of the page. Using offset().top on the target element wasn't enough, because that returns the x coordinate relative to the document, and not the vertical scroll-position of the page.
So if the user scrolls down the page, the offset().top won't provide an accurate description of where they are relative to the bottom of the window - you'll need to determine the scroll position of the page.
var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});
window.innerHeight gives you the visible height of the entire window. I did something almost identical recently so I'm pretty sure that's what you need. :) Let me know, though.
EDIT: You'll still need the Y-value of the overflowed div which you can get by document.getElementById("some_div_id").offsetHeight, seeing that .style.top won't give you a result unless it has been specifically set to a point via CSS. .offsetHeight should give you the correct 'top' value.
Then it's just a matter of setting the size of the table to the window height, minus the 'top' value of the div, minus whatever arbitrary wiggle room you want for other content.
something like max-height: 100%, but not to forget the html and body height 100%.