I want to create this sliding scroll behavior in between divs. Let's say that the markup looks like this:
<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>
Every .slide div would have different heights depending on the content inside them and would of course also change it's height depending on window size.
What I want is that when each div reaches it's bottom when scrolling the page, I. e. when the bottom of the div is at the bottom of the window, the div should become fixed and the div underneath should then scroll over the previous fixed div. And this behavior would be repeated for each div within the container (in this example main).
Do you have any ideas for how this could be achieved?
I figured that adding the following to each section through JavaScript (in my case jQuery just for this exercise) will make each div behave like I wanted on scroll:
$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})
Essentially applying a CSS top value that is the div height minus the window height.
This would also require the divs to have position: sticky applied to them through CSS.
Related
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I have <div> elements as pages, and "next" and "back" buttons to switch between them. When the "next" button is clicked, the current page fades out and the next page fades in, using jQuery. As I've been doing it so far, the only way to ensure that the divs sit on top of each other instead of sitting next to each other is to style them position:absolute. However, this forces the divs to also overlay anything else on the page that they would otherwise push out of the way.
Is there any way to make divs basically positioned absolute only relative to each other, and still act as though they are positioned relative to the rest of the page? I've tried putting them inside a container that is positioned relatively, but the divs overflow their container, making it more or less useless.
Edit:
Basic fiddle: http://jsfiddle.net/9AXS4/4/
Yes, I mix up $ and jQuery. I've been using jQuery a lot after calling jQuery.noConflict()
If your pages, as you call them, are of fixed width and height, then you can set their container to be position:relative and also have the width and height of the pages..
.container{
position:relative;
width:500px; /*the total width of a page, including padding and borders*/
height:400px; /*the total height of a page, including padding and borders*/
}
This way the container element will handle the pushing around of the other elements
Here is your corrected fiddle: http://jsfiddle.net/gaby/9AXS4/2/
(the width/height of the container must account for paddings and border on the page elements)
Also you were targeting the container with .pagecontainer instead of #pagecontainer (since you used an id)
Update (after comment about arbitrary heights..)
Since your pages height is not fixed, you will need to resort to jQuery to resize the container..
Here is a full demo : http://jsfiddle.net/gaby/9AXS4/7/
The divs can't be positioned absolute in relation to each other, but they can be positioned absolutely in relation to an outer div. The container that holds the page divs should have position: relative in order to contain the inner page divs that are absolutely positioned.
If there is unwanted overlap, you can use overflow: hidden or overflow: auto on the outer div to hide it, depending on whether or not you want to allow for scrolling. If you are going to use the overflow property, be sure to include a height and width so the browser knows where the overflow should be.
http://jsfiddle.net/vkTXs/
$(".page").each(function(){
jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
jQuery(this)
.parent().fadeOut()
.next().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
$(".back").click(function() {
jQuery(this)
.parent().fadeOut()
.prev().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
function resizeContainer(page){
// get height of next page
var newPageHeight = $(page).height();
// add padding and border
newPageHeight = newPageHeight + 14;
$('#pagecontainer').height(newPageHeight);
}
So basically I have 3 inline-block divs that are stacked horizontally as such:
div1 -- div2 -- div3
div1 and div3 are skyscraper ads, and div2 is my main content wrapper. The problem I had initially was that whenever I resized my window to make its width smaller than the divs' widths combined, div2 and div3 would wrap to the next line underneath div1, because they did not fit on the same line (same problem when viewing website from smartphone or tablet because they have small width), and div1 (an ad) would sit there awkwardly centered on the main page. I fixed that by adding white-space: nowrap to the body tag to prevent the divs from wrapping, and adding white-space: normal the content-wrapper div to prevent it inheriting from the body element so that the content text can wrap normally. This fixed the problem and now when I visit the website, the three divs are always on the same line regardless of the browser width, and there's a horizontal scrollbar if needed.
However, the scrollbar always starts at the left side and so my content-wrapper (div2) which is my main content that should be centered is not. Instead div1 (ad) shows up first on the left side followed by the content-wrapper. How can I correct this situation? I know the divs will be centered just the way I want them if I were to get rid of the word-wrap on the body, but that would bring back the initial problem of the divs wrapping when they shouldn't. Is there anyway I can fix both problems using CSS?
I've done something similar once where I needed a column to be offset to the right of the main content area. It was easy enough to position the column off to the right, but the real trick was preventing it from affecting the overflow/scroll of the page.
The solution was to add the following two properties to a container that wrapped my main content and column:
#wrap {
min-width: 960px;
overflow-x: hidden;
}
I've adapted this to show how it can be used in a 3-column layout with two skyscrapers on either side: DEMO
I want a div that only partly has its content visible. I want the user to use his mouse horizontally (i.e., left-to-right mouse movement) to change which part of the div is visible.
How can I do this?
The HTML and CSS
If I understand your question correctly, you have a div that is x pixels wide, and its contents are y pixels wide where x > y. In other words, the div's contents are wider than the div itself.
The following HTML and CSS are an example of how to hide part of the div if x = 250 and y = 500:
<div id="outer-div" style="width:250px;overflow:hidden;">
<div style="width:500px;">
....
</div>
</div>
The CSS overflow:hidden hides the horizontal scrollbar. If you would like the user to see the horizontal scrollbar, use overflow:auto. If the horizontal scrollbar is all you require, then there is no need to write any JavaScript.
The JavaScript
Changing which part of the div is visible based on mouse movement requires JavaScript. One way to accomplish this is to change the scroll position of the outer-div. mootools has the method Element.scrollTo. Other JavaScript frameworks have something similar.
$('outer-div').addEvent('mousemove', function(event) {
$('outer-div').scrollTo(event.client.x);
});
See this fiddle for an example.
Use the CSS overflow property:
#element {
overflow: hidden;
width: 200px;
}
You can then scroll the div left or right using the scrollLeft property:
document.getElementById("element").scrollLeft = 100;
jsFiddle: http://jsfiddle.net/vHEPv/
I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?
is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.