I want to implement this codes
but it doesn't work for me , every things is ok but "Fade in" divs not showing for me. can anyone help me why it doesn't work ?
I try it in MVC5 application , adding scripts in mvc5 is difference with other versions ?!
HTML :
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
</div>
CSS :
#container
{
height:2000px;
}
#container DIV
{
margin:50px;
padding:50px;
background-color:lightgreen;
}
.hideme
{
opacity:0;
}
JavaScript:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
this is Demo in jsfiddle
Related
I have tried to add a .fadeIn effect to a script instead of .animate, but it doesn't work. Basically, I try to make fading in elements when you scroll to them. This is the script and HTML:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Check the location of each desired element */
$('.hideme').each(function(i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).animate({
'opacity': '1'
}, 1500);
}
});
});
});
.hideme {
opacity: 0;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Check the location of each desired element */
$('.hideme').each(function(i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).fadeIn(400, function(){
$(this).css('opacity', 1)
});
}
});
});
});
.hideme {
opacity: 0;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
I've made a header is fixed at the top with a fixed position, in which there is a logo and menu in the header. what i want to ask how to hide the logo when a user scrolls to the middle. and the menu shifts up replacing the logo?
Here is my HTML/CSS:
#header {
position:fixed;
width:100%;
}
.logo {
background:#ccc;
}
.logo h2 {
margin:0px;
}
.menu {
background:red;
}
#konten {
padding-top:50px;
}
<div id="header">
<div class="logo">
<h2>Example WEb</h2>
</div>
<div class="menu">HOMEAboutContact
</div>
</div>
<div id="konten">
1abcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghia
<br>defghiabcdefghiab
<br>cdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabc
<br>defghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcde
<br>fghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiab
<br>cdefg
<br>hiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghia
<br>bcdefghiabcde
<br>fghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghi
</div>
<div id="footer">
</div>
External JSFiddle
while you tagged Jquery .. can be done with jquery
$(document).ready(function(){
$(window).on('scroll',function(){
var windowScroll = $(this).scrollTop();
if(windowScroll >= ($(this).height())/2){
$('.logo').slideUp(500);
}else{
$('.logo').slideDown(500);
}
});
});
JsFIDDLE
I hope this is what you want!!
$(window).scroll(function() {
if ($(this).scrollTop() > 200) { //use `this`, not `document`
$('.logo').css({
'display': 'none'
});
}
else
{
$('.logo').css({
'display': 'block'
});
}
});
Demo Here
Change your CSS of header to below so that it remains at top
#header {
position:fixed;
width:100%;
top:0px;
}
I am using the code from here but i need it to show the div when the top scrolls into view not the bottom, how can i achieve this?
JS Fiddle
$(document).ready(function() {
$(window).scroll( function(){
$('.hide').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Simple fix. The trick is to .animate() when you actually hit the top. Right now, you're using
var bottom_of_object = $(this).position().top + $(this).outerHeight()
You don't need $(this).outerHeight() because that increases the y position to which you need to scroll by the height of the div. Just remove it so that you have
var top_of_object = $(this).position().top
$(document).ready(function() {
$(window).scroll(function() {
$('.hide').each(function(i) {
var bottom_of_object = $(this).position().top
var bottom_of_window = $(window).scrollTop() + $(window).height()
if (bottom_of_window > bottom_of_object)
$(this).animate({ opacity: '1' }, 500)
})
})
})
#container { height: 2000px }
#container div { background-color: gray; margin: 20px; padding: 80px }
.hide { opacity: 0 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
</div>
fiddle (for posterity)
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
I have a div with overflow:hidden and a set height. When I run animate(), I want the height to animate to the full size.
For example, I have this:
http://jsfiddle.net/aW9k9/
clicky
<div style="height:50px; overflow:hidden;" class="main">
<div style="height:100px; background:blue;">text</div>
<div style="height:50px; background:yellow;">text</div>
<div style="height:50px; background:green;">text</div>
</div>
This example works, but only because I knew the total height of all the elements.
<script>
function lol() {
$("div.main").animate({height:'200px'}, 1000);
}
</script>
^How can I recreate that without knowing the total animate height?
A Fixed version for #MattBall's answer, which use the .outerHeight(true) to include the inner div's margins.
function lol() {
var $main = $("div.main"),
totalHeight = 0;
$main.children().each(function () {
totalHeight += $(this).outerHeight(true);
});
$main.animate({height:totalHeight}, 1000);
}
If changing html code isn't a problem, you can simply change your html code like this:
clicky
<div style="height:50px; overflow:hidden;" class="main">
<div>
<div style="height:100px; background:blue;">text</div>
<div style="height:50px; background:yellow;">text</div>
<div style="height:50px; background:green;">text</div>
</div>
</div>
and you can get height of inner elements like this:
$('div.main > div').outerHeight()
and also here is the lol function:
function lol() {
$("div.main").animate({height:$('div.main > div').outerHeight()}, 1000);
}
You could do programmatically the same thing that you did mentally to come up with the 200px value: sum the height of the div.main > divs.
function lol() {
var $main = $("div.main"),
totalHeight = 0;
$main.children().each(function () {
totalHeight += $(this).height();
});
$main.animate({height: totalHeight}, 1000);
}
http://jsfiddle.net/mattball/CXyKK