How to toggle between two divs and remain on the chosen div after saving/refreshing the page?
You need persistance, and one way to achieve this is via cookies.
Use the jQuery Cookie Plugin.
To save a cookie, all you need to do is:
$.cookie("key", "value");
And to retrieve:
$.cookie("key");
And to delete:
$.cookie("key", null);
So your logic would be:
if cookieValue == "thisDiv"
showDiv1
else
showDiv2
end
Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
Start and stop div scrolling between two other divs
Add another parameter to your function to pass the start element, then set some vars inside your function to store its offset().top + height()
as the start position, then just add another if
to check if the scrollTop()
value is lower than the start one, like this:
var windw = this;
$.fn.followTo = function (from, bumper) { //renamed "elem" to "bumper", to
var $this = this, //prevent ambiguity
$window = $(windw),
$from = $(from),
$bumper = $(bumper),
$startPos = $from.offset().top + $from.height(), //new start position
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() < $startPos) { //new if < startPos
$this.css({
position: 'absolute',
top: $startPos //resets element to start position
});
} else if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#one').followTo('#half', '#two');
JSFiddle
Fixed div to disappear under unfixed div when scrolling
Solved.
Modified CSS:
#top
{
display: block;
position: relative;
width: 100%;
height: 150px;
background-color: #1133DD;
}
#fixed_header_top
{
display: block;
position: fixed;
width: 100%;
height: 50px;
background-color: #DD33DD;
top: 0px;
z-index: 100;
}
#fixed_header_middle
{
display: block;
position: absolute;
width: 100%;
height: 100px;
background-color: #DDDD00;
top: 50px;
}
Modified HTML:
<div id="top">
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
</div>
keep fixed div within its container
Hope this helps.
DEMO
$(document).scroll(function() { var $self = $("#fixedDiv"); $self.css('margin-top', 0); var fixedDivOffset = $self.offset().top + $self.outerHeight(true); // if reaches footer if (fixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(fixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); }});
#container { width: 600px;}
#text { width: 200px; padding: 10px; display: inline-block; vertical-align: top;}
#fixedDiv { position: fixed; width: 100px; height: 175px; margin-top: 30px; background-color: #DB1926; color: white; padding: 10px; display: inline-block; vertical-align: top;}
#footer { width: 90%; height: 700px; margin-top: 20px; background-color: #451870; color: white; padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque elit elit, ac aliquet augue congue id. Suspendisse hendrerit lorem quis ante fringilla, nec consequat nulla egestas. Praesent lobortis felis ut ex congue, at lobortis justo blandit. Praesent convallis metus et finibus venenatis. Phasellus et sapien at augue porta venenatis. Phasellus justo turpis, tempus ut eros sit amet, tristique iaculis lectus. Curabitur facilisis dolor nibh, rutrum accumsan lacus suscipit et. Nulla ut ornare ante, eu pellentesque odio. Pellentesque non facilisis felis. Sed congue arcu at turpis finibus, non facilisis sapien pretium. Nulla finibus cursus hendrerit. Cras nec neque at ipsum lobortis accumsan id at sem. Donec dignissim, velit id interdum ornare, magna augue suscipit risus, ut iaculis eros urna ut orci.</div>
<div id="fixedDiv">fixedDiv</div></div>
<div id="footer">Footer. The fixedDIv should not scroll over this Footer.</div>
Is it possible to align two DIVs side by side if one is fixed?
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
Related Topics
Google Map API Route Request Limit
Safari Iphone/iPad "Mouse Hover" on New Link After Prior One Is Replaced with JavaScript
If HTML, CSS, and JavaScript Are Client-Side, Why Are They Components of a PHP File
Saving Dropdown Menu Selection in a Cookie
How to Make Specific Part of a String Bold in Angular 2
Is It Better to Use Jquery Fadein or CSS3 Animations
How to Use Less Variable in React Js
Center Div Vertically and Horizontally Without Defined Height
Toggle Up and Down Arrows in a Simple Accordion Widget
JavaScript Style Property Is Empty
Using JavaScript to Change Table Cells Width
Displaying a Div Only on Tumblr Blog Homepage
Selecting Text in a Div Programmatically Using Position Values Belong to That Text
Jquery Word for Word Fade in Effect
Does Animating the Value of a CSS3 Transform with JavaScript Rule Out Hardware Acceleration