Develop Reference

When div reaches bottom of window, stick and scroll over next div

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.

Animate div but keep height dynamic

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.

Adjust scroll position relative to center on window resize?

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

Make only part of a div visible

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/

CSS placing elements without affecting one another dynamically using javascript

I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot

Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps