stick child to bottom when parent div touches the browser bottom - javascript

I want to stick child div to bottom when parent div touches the browser bottom.
P.S : This should happen when the parent div is pushed down not when scrolled down.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content (which is pushing the bottom_content div to the bottom).
But accordion is just an example, there will be some other element which will be pushing the bottom_content div down. So I dont want to write stick function with reference to accordion.
It should stick down only when bottom_content div touches the bottom of the browser and when there is no much content in the page then the child div should stay as it is like child of the bottom_content
Parent div: bottom_content
Child div: footer
Here is my code currently used, which is not proper
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO

The whole idea is to handle .footer position on window scrolling, on window resizing and after .slideToggle() for the list is completed:
Fiddle.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
$(this).next('span').slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom()
{
if ($(window).height() + $(window).scrollTop() < $(document).height())
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
Edit. Updated fiddle without weird footer jumping after list opening.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
var toggledElement = $(this).next('span');
handleBottom(toggledElement.height());
toggledElement.slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom(additionalHeight)
{
var pageHeight = $(document).height();
if (additionalHeight)
{
pageHeight += additionalHeight;
}
if ($(window).height() + $(window).scrollTop() < pageHeight)
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}

you can make js on.change to change that div position to absolute and bottom:0 left:0

Related

How to set position with css method in jquery?

My default values for .csw-step4-price-summary div is
.csw-step4-price-summary {
width: 270px;
position: absolute;
display: inline-block;
bottom: 661px;
right: 40px;
}
When I want to do the following, it does change position to fixed, but it does not react to bottom and right values.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 220) {
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661',
'right': '140'
});
} else {
$(".csw-step4-price-summary").css({ 'position': 'absolute'});
}
});
Any suggestions why this might be happening? Thanks in advance.
Try using 'px' in the unit in the css function
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661px',
'right': '140px'
});
it's
'bottom': '661px',
'right': '140px'

stick part in a specific range

i have a container that is stick to top after a specific point.
but its not enough for me.
i have a footer in the page and when the screen is small the stick part is hiding under the footer.
i want it to stop moving down in the footer top (to stop be fixed to 0 that point but be fixed to minus number that is the substraction between them).
this is my code.
what should i add for that goal?
and when to call it?
on resize?
on ready?
etc.
thanks a lot
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
if (getBrowserHeight().width > 1284) {
var $div = $("#Container");
if ($(window).scrollTop() > $div.data("top")) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
});
This should get you going.
Don't mind to ask for help if somehting isn't clear.
$(document).ready(function() {
$(window).scroll(function() {
var footerEl = $('footer').offset().top;
var footerTop = (footerEl - $(window).scrollTop());
var containerHeight = $('.container').height();
var footerHeight = $('footer').height();
console.log('footer', footerTop);
$('.container').removeClass('sticky');
if (footerTop <= containerHeight) {
$('.container').addClass('sticky');
$('.container').css('bottom', footerHeight);
}
});
});
body {
height: 1000px;
position: relative;
}
.container {
width: 100%;
min-height: 300px;
position: fixed;
top: 0;
background: red;
}
.sticky {
position: absolute;
top: auto;
}
footer {
width: 100%;
min-height: 500px;
position: absolute;
bottom: 0;
background: black;
}
<html>
<body>
<div class="container"></div>
<footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</html>
I've tried to make as few changes to your code as possible, but there's better ways to get around this ie. using classes, like in #mhx answer. Full JavaScript below (sorry, had to remove your getBrowserHeight() as it wasn't defined):
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
var $div = $("#Container");
var $footer = $("footer");
if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
$("footer").data("top", $("footer").offset().top);
});
Besides adding a top data attribute to your footer and defining $footer in the start of fixDiv(),I've added this to your initial if statement, to make sure that the scroll position, does not exceed the top of the footer minus the height of your div.
&& $(window).scrollTop() < $footer.data("top") - $div.height()
... and I've added this else if statement, in case it does exceed the top of the footer minus the height of your div
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
Here's a fiddle: http://jsfiddle.net/ds5tptay/

Make a fixed div stay fixed horizontally

Here is code that fixes a div to the top of the screen when the user scrolls to it.
However, on my browsers, if the user scrolls left or right, the bar stays fixed to the top but scrolls along. I wanted the bar to stay put, with the content it's over.
Here is the jfidddle
Here is the code:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
The key part is left:-$(window).scrollLeft()
DEMO
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px',
left: -$(window).scrollLeft()
});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#stickyalias').css('display', 'none');
}
});
});

position:fixed navigation stop at end of specific div - parallax scrolling & javascript

I have a vertically oriented vertical navigation bar, that I would like to make stop at the end of #contact. It will need to resume scrolling again if the user scrolls back up.
What is the best way to achieve this?
javascript being used:
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#nav>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 340 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
}).scroll();
});
jsfiddle
I believe this is the code you are looking for:
$(function() {
var $Nav = $('#Nav');
var $window = $(window);
var $contact = $('#contact');
var maxTop = $contact.offset().top + $contact.height() - $Nav.height();
window.navFixed = 1;
$window.bind("scroll resize", function() {
var currentTop = $window.scrollTop();
if (currentTop <= maxTop && window.navFixed == 0) {
$Nav.css({
position: 'fixed',
top: '5%'
});
window.navFixed = 1;
} else if (currentTop > maxTop && window.navFixed == 1) {
$Nav.css({
position: 'absolute',
top: maxTop
});
window.navFixed = 0;
}
}).scroll();
});
The #Nav element contains the CSS you had originally specified: position: fixed; top: (...). When the document is ready, the variable maxTop is calculated based on the #contact element's top and height.
On the scroll and resize event, the variable currentTop is calculated as the current scroll position. If this value is lower than maxTop, then #Nav is set to the original CSS; if the value is higher, new CSS styles are applied: position: absolute; top: maxTop;
window.navFixed is used to prevent the CSS to be constantly updated while scrolling. I'm sure that bit can be improved, however, it demonstrates its purpose.
Check out the JSFiddle for the full HTML..
PS. There's a minor bug in your code, where #Nav refers to the <ul> element, rather than the <nav> element. However, the moving element is the <ul>, when it should be <nav>.

Problem showing loader GIF in Internet Explorer

I'm trying to show a loader gif, on a jquery dialog(with no title bar of course) after a user clicks submit on a form.
After doing a couple of thing I came up with this: demo ,and said to myself "Finally! Success!", but when I tested it on IE (I usually use Chrome),much to my disappointment, the animation (loader.gif) didn't seem to be that animated, I mean it looked like a static image and I don't know why it works so fine in FF, Chrome and safary and it simply doesn't work in IE.
I know that gif works wonders on the jsfiddle , even If you use IE, but for some reason when I do the same on my project it doesn't :(
PS:I have no problem if you have another way of doing the same thing, as long as it also works in IE
Hope you can help me out with this.
Ok Here is how I got around it. It seems to be dependent on the time the overlay is added to the document.
Explanations:
If the image is added to chrome and FF's DOM during onclick it won't show my wait GIF... but it will show up in IE. I'm not sure as to why it shows up in IE and not ff or chrome. It could have something to do with the fact that it's added to the DOM on the fly just before a postback.
If the image is added to the DOM at page load time and just slid off the screen, I can simply move it to the proper place just before postback and it will work in FF and chrome but not in IE. IE stops the GIF from animating when doing it this way.
Works in IE
function IeWaitOverlayObj() {
var _waitoverlay = null;
var _waitImage = null;
var _isHidden = true;
this.showOverlay = function() {
if (!_waitoverlay) {
_waitoverlay =
$('<div></div>')
.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: '0px',
position: 'absolute',
opacity: '0.5'
});
var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />';
_waitImage = $(tag).css({
zIndex: '9999',
position: 'absolute',
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200,
width: '400px',
height: '150px'
});
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_isHidden = false;
}
};
this.hideOverlay = function() {
_waitoverlay.hide();
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
Works in Chrome and FF
function WaitOverlayObj() {
var _waitoverlay = $('<div></div>');
var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />');
var _isHidden = true;
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_waitoverlay.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: $(window).width() * -1,
position: 'absolute',
opacity: '0.5'
});
_waitImage.css({
zIndex: '9999',
position: 'absolute',
top: '0px',
left: '-400px',
width: '400px',
height: '150px'
});
this.showOverlay = function() {
_waitImage.css({ top: $(window).height() / 2 - 75, left: $(window).width() / 2 - 200 });
_waitoverlay.css({ top: '0px', left: '0px' });
_isHidden = false;
};
this.hideOverlay = function() {
_waitImage.css({ top: '0px', left: '-400px' });
_waitoverlay.css({ top: '0px', left: $(window).width() * -1 });
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
And in my Document.Ready
if (navigator.appName == "Microsoft Internet Explorer") {
wait = new IeWaitOverlayObj();
}
else{
wait = new WaitOverlayObj();
}
Base64-encode the image into your CSS. IE8 continues to animate it then.
window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; should work. I didn't check it now but the idea is the same I successfully used sometime ago

Categories

Resources