How to make a div fade in after a specific height? - javascript

I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.
I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.
Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:
Would love to hear from someone who has the solution.
Thanks! :)

Here is a start http://jsfiddle.net/ZtGK6/
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});

A good way to make it hide on page load is to give the surrounding div CSS class a display: none; property. That way it will display hidden when the page initially loads, and not fade out quickly upon page load. Then, your JavaScript will load it after you scroll down the determined # of pixels. This will behave cleanly and is super easy to achieve.

HTML:
<div id="theDiv">Now I'm visible</div>
CSS:
body, html {
height: 200%;
}
#theDiv{
top: 30px;
left: 20px;
display: none;
background-color:#FFF000;
width:200px;
height:200px;
}
Javascript:
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
Demo: http://jsfiddle.net/waitinforatrain/ZtGK6/3/

$(function() {
var theDiv = $('#myDiv'),
scrollPos = $('body').scrollTop();
if ( scrollPos > 100 ) {
theDiv.fadeIn(500); // 500 milliseconds
} else {
theDiv.fadeOut(500);
}
});
I haven't been able to test this and you may have to put the if statement in a scroll event so the scrollPos var updates as you scroll.

Related

Fixed header not working properly with one version of jquery code, why is my second version so slow in Firefox?

Here's a link first of all to a test page: http://www.mindevo.com/tests/tacos.html
Edit: I set up a jsfiddle to play with it as well: http://jsfiddle.net/E4Uav/1/
So I set up my page with a fixed background on the main feature div. Here's the basic framework of how the page is set up:
<div class="main"></div>
<div class="game2 dark"></div>
<div class="game3 dark"></div>
<div class="gave4 dark"></div>
Here's the corresponding css for that setup:
.main{
position: relative;
width: 100%;
height: 15em;
background: white url('../images/tacobg.png') no-repeat fixed 0 0;
padding-top:1em;
}
.game2, .game3, .game4 {
height:13.3333em;
width:100%;}
.game2 {background:rgb(0,51,16) url('../images/potatobackground.png') no-repeat 0 0em;}
.game3 {background-color: rgb(0, 1, 82);}
.game4 {background-color: rgb(255, 80, 0);}
.dark {opacity: .5;}
Now that all works just fine by itself. Then I added a bit of javascript to tell the next div to fade in once it reaches a certain point, and when I add the javascript then something gets broken.
This happens only in Chrome (also checked Chrome Canary) but not in Firefox. When you scroll down the fade in happens perfectly. Now when you scroll up for some reason the background becomes no longer fixed for a moment, you scroll all the way up and some whitespace appears above the image (which is the background color for the "main" div, not the entire page).
Here's the javascript I'm using to fade in the "game2" div:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('.dark').addClass('show');
} else {
$('.dark').removeClass('show');
};
});
});
EDIT: So just to get around that bug I learned a different way to achieve what I was trying to do....
Here's my new javascript, it skips adding / removing the classes (the transitions are really odd, and when it triggers is really slow in Chrome, but it seems to work):
$(document).ready(function(){
$(window).scroll(function(){
$('.dark').each(function(i){
var half_object = $(this).position().top + ($(this).outerHeight()/2);
var bottom_window = $(window).scrollTop() + $(window).height();
var bottom_object = $(this).position().top + $(this).outerHeight();
if(bottom_window > half_object){
$(this).animate({'opacity':'1'},200);
}
else if(bottom_object > $(window).scrollTop()) {
$(this).animate({'opacity':'.5'},200);
}
});
});
});
It could use some speeding up, it takes forever to happen in Firefox now, the second and third s which use the "dark" class don't get their opacity changed for quite some time. To the point where it would make user interaction annoying.
What is the cause of this delay? How can I speed this code up so it just triggers when the div is halfway displayed, and then when it's above the top or below the bottom of the viewport it fades back to 50% opacity?
I don't think you're doing anything wrong. It looks like a bug in Chrome? For me it fixes itself after a delay in Chrome, and doesn't occur in IE.

Fixing third div under first div after scrolling down

I'm trying to fix #fixed_header_bottom div right under #fixed_header_top div after scrolling 100px down but failed to do so. #fixed_header_middle div obviously will appear and disappear when scrolling up and down and only #fixed_header_top, #fixed_header_bottom and #body_block will be visible when (for example scrolling down come to an end).
JSFIDDLE is here
In the second image, #fixed_header_middle disappeared completely but will start appearing when scrolling up.
Thanks
First, you need to set a top style for your headers so they are in the correct position, you should think about a more robust way to do this.
Another way to consider doing this is to make a hidden clone of your bottom header.
Then, simply hide/show it when the scroll position is correct. This method avoids any funny business with the scroll bar changing size and/or position as the element is taken in and out of the scrollable portion of the page (because the original is still there):
JSFiddle Demo
An even better way is to simply make a placeholder that you show/hide as the bottom header is fixed/un-fixed:
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't ever see me</div>
JS:
$(document).ready(function () {
$(window).bind("scroll", function (e) {
if(!$('#fixed_header_bottom').hasClass('fixed')) {
if ($(document).scrollTop() >= 100) {
$('#fixed_placeholder').show();
$('#fixed_header_bottom').addClass('fixed');
}
} else {
if ($(document).scrollTop() < 100) {
$('#fixed_placeholder').hide();
$('#fixed_header_bottom').removeClass('fixed');
}
}
});
});
CSS:
#fixed_header_bottom, #fixed_placeholder {
display: block;
width: 100%;
height: 50px;
background-color: #11DD55;
}
#fixed_placeholder {
display: none;
}
.fixed {
position: fixed;
top: 50px;
}
JSFiddle Demo
This code works as it should.
Your problem is that you didn't set any top property, so it stays on its original top position.
Same Fiddle with jQuery 1.8.3 (as 1.10 don't handle scrollTop() method for IE) ;): http://jsfiddle.net/h8H6N/4/
I added top: 0; to the header top, and top: 50px; to bottom header, assuming that's the render you're looking for.

JQuery sticky bar flickering on page resize

I've added a sticky 'call to action' bar to my site, it works like a sticky navigation, however it's stuck to the bottom of the window its original position in the page is scrolled past, then it jumps back in to the flow of the document.
It uses a CSS class '.sticky' to add the fixed position when the scroll position is less than the vertical position of the bar's original position.
The issue is, when I resize the page I get a nasty flicker and the bar more often than not disappears from view.
The code I am using is below...
(function() {
$(window).on('resize', function() {
var stickyNavTop = $('#wrap-bar').offset().top;
var stickyNav = function(){
var scrollBottom = $(window).scrollTop() + $(window).height() - $('.cta-bar').height();
if (scrollBottom < stickyNavTop) {
$('#wrap-bar').addClass('sticky');
$('#wrap-bar-dummy').show();
} else {
$('#wrap-bar').removeClass('sticky');
$('#wrap-bar-dummy').hide();
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
$(window).trigger('resize');
});
})(jQuery);
Can anyone point me in the right direction as to what I need to change to get the bar to stop flickering when resizing?
Thanks.
The flickering you're reporting is most likely because Javascript isn't rendering your DOM changes as quickly as you scroll. As mentioned by #Switching Brains, attempt using CSS to absolutely position your footer at 0px from the bottom of the window. Then, you'll only need Javascript to locate when you've reached the bottom of the page, then apply your class to hold it in a fixed position.
A realy dirty example of this, but you'll get the idea:
HTML
<div id="body">
<div id="bar">Bar at the bottom</div>
</div>
CSS
html, body {
height:100%;
widht:100%;
}
#body {
position:relative;
height:100%;
border:1px solid #000000;
}
#bar {
position:absolute;
bottom:20px;
width:300px;
left:50%;
margin-left:-150px;
background-color:#cccccc;
}
http://jsfiddle.net/Auc6n/
I found with Mozilla that .resize() caused a lot of page flickering as it was being driven too hard.
I used:
$window.resize(throttle(500,function(){

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}

jQuery: resizing element cuts off parent's background

I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?
Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)
Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.
Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.

Categories