I have the following HTML layout:
<html>
<head>
...
</head>
<body>
<header class="fluid-container">
<div class="nav-wrapper">
...
</div>
</header>
<section class="salutation fluid-container">
<div class="intro-wrapper">
...
</div>
</section>
</body>
</html>
My objective is to hide intro-wrapper whenever my window scrolls more than 60px and vice-versa. Hence I have implemented the following Jquery code to achieve the above.
var checkScroll = true;
$(window).scroll(function() {
if($(this).scrollTop() > 60 && checkScroll) {
$(".intro-wrapper").stop().animate({display:'none'}, 400);
checkScroll = false;
console.log('Scrolling down. \t checkScroll: ' + checkScroll);
}
else if($(this).scrollTop() < 60 && !checkScroll) {
$(".intro-wrapper").stop().animate({display:'block'}, 400);
checkScroll = true;
console.log('Scrolling up. \t\t checkScroll: ' + checkScroll);
}
});
But unfortunately, I have been failing miserably at understanding why the animation isn't taking place. Please point out the mistake in my above code and help me figure out the solution.
Please note that console.log() is presenting results just as expected, i.e., the conditions are getting appropriately fulfilled and the loop is appropriately completing its journey.
display will/does not work with animate. You can instead use show() and hide() in addition to the other answer.
From http://api.jquery.com/animate/:
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
Instead of animate here you can use jquery .fadeIn() .fadeOut() method to show or hide element with a delay.
Display property won't works in jQuery animate.
Refer animate
display to none/block cannot be animated. Try instead animate the height to 0 with overflow: hidden
Or you can do it with css transitions easily:
// hide it
$(".intro-wrapper").addClass('hidescroll');
// show it again
$(".intro-wrapper").removeClass('hidescroll');
And then in css:
.intro-wrapper {
transition: height .5s ease-in;
height: 400px;
}
.intro-wrapper.hidescroll {
height: 0;
overflow: hidden;
}
Related
I'm at the very beginning of learning JS, right now what's bugging me is I want to animate the opacity of a div when scrolling is detected
I have 2 options from what i've found online:
window.addEventListener('scroll',function());
or
window.onscroll()=function();
Using the first variant, and the console, I see it is detecting the scrolling but here comes my trouble.
Let:
let loadingscreen=document.getElementsByTagName('div')[3];
loadingscreen.style.opacity="0";
Why won't this work?
window.addEventListener('scroll',()=>{
console.log("!"); //detecting the scroll in the console
setInterval(function(){loadingscreen.style.opacity+=".1"},100);});`
The opacity only changes once, i believe it is from 0 to 0.1
Is it that my opacity goes from 0 to 0.1 to 0.11 to 0.111? Tho i cant understand why that would be.
Thank you for taking your time to read this, any response is apreciated!!
I know the code doesn't look that tidy, i promise it is better in my vsc, im having a little trouble with stackoverflow
This is because you are adding a string to a string, not a number to another number. If you want to add 0.1 of opacity when scrolling is detected, you would have to parse the opacity value with parseInt(loadingscreen.style.opacity), then add 0.1 and then apply it to loadingscreen.style.opacity.
However:
scroll events can fire at a high rate
see https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
So, if you scroll one time, your event-handler will maybe fire 20 times, and everytime there is an eventlistener added. So, first you should add { once: true } to your eventListener options.
Secondly, you are adding more opacity every 100 milliseconds.
If you want a nice animation, you should add a class and animate the opacity in CSS.
Consider the following example:
let loadingscreen = document.querySelector(".loadingscreen");
window.addEventListener("scroll", () => {
loadingscreen.classList.add("scrolled");
}, {
once: true
}
);
body {
height: 200vh;
}
div.loadingscreen {
margin-top: 25%;
height: 50%;
width: 100%;
background: red;
opacity: 0;
}
div.loadingscreen.scrolled {
opacity: 1;
transition: opacity 1s linear;
}
<div class="loadingscreen"></div>
const loadingscreen = document.getElementsByTagName('div')[2];
loadingscreen.style.opacity= 0;
let incOpa = 0
function callIncOpacity(){
let refreshIntervalId = setInterval(function(){
console.log(incOpa); //detecting the scroll in the console
if(incOpa < 1) {
incOpa += 0.1;
loadingscreen.style.opacity = incOpa
}
}, 10);
setTimeout(function(){
clearInterval(refreshIntervalId);
}, 100)
}
window.addEventListener('scroll',()=>{
if(incOpa < 1) callIncOpacity()
});
.content-container,
.second-div,
.third-div{
height: 500px;
width: 100%
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="content-container">
<p>
Test content
</p>
</div>
<div class="second-div">
<p>
test content 1
</p>
</div>
<div class="third-div">
<p>
test content 2
</p>
</div>
</body>
</html>
Two things to be kept in mind.
Style property can't be incremented
When you call the setInterval at some point it's better to stop it once the job is done.
This is frustrating me to no end. Before I post the code, here's a summary:
The goal, in simple terms: when I double click X, I want it to fade out; when I click Y, I want X to fade in.
The method: I'm using CSS to create the actual fade-in and fade-out "animations." I'm using JavaScript to apply the classes when necessary using a little trickery.
The problem: the fade-in transition doesn't work -- the element just appears instantly. What is driving me insane is the fact that the fade-in, when instantly added back onto a faded-out object, works perfectly. I'll explain this better as a comment in the JS code.
(Yes, I've added opacity: 1 and transition: opacity onto the base elements. It had no effect at all.)
The code:
CSS
*.fade-out {
opacity: 0;
transition: opacity 400ms;
}
*.fade-in {
opacity: 1;
transition: opacity 400ms;
}
*.hide {
display: none;
visibility: hidden;
}
JavaScript
$( '#ArtistEmblem' ).on( 'dblclick', function() {
fadeOut($( '#ArtistEmblem' ));
fadeIn($( '#btnShowLogo' ));
});
$( '#btnShowLogo' ).on( 'click', function() {
fadeOut($( '#btnShowLogo' ));
fadeIn($( '#ArtistEmblem' ));
});
function fadeOut(element) {
element.addClass( 'fade-out' );
setTimeout( function () {
element.addClass( 'hide' );
/*
* I tried immediately adding the 'fade-in' class here
* and it worked -- as soon as the element faded out, it faded
* back in (using the CSS transition). However, outside of this,
* it REFUSES to work; everything appears instantly
*/
console.log('timer triggered');
}, 400);
}
function fadeIn(element) {
element.removeClass( 'hide' );
element.removeClass( 'fade-out' );
element.addClass( 'fade-in' );
}
Relevant HTML
<div id="ArtistEmblem">
<img src="img/logo_artist_2.png" />
</div>
<div id="PopMenu" class="collapse">
<article>
<header>
<b>Debug Menu</b>
</header>
<section>
<button id="btnOpenOverlay">Open Overlay</button>
<button id="btnShowLogo" class="hide">Show Logo</button>
<button id="btnClose">Close Menu</button>
</section>
</article>
</div>
I apologize if this is something obvious but I've wasted far too much time trying to solve it. I am also open to better, faster, or more efficient solutions if that would be the best answer. Thanks in advance!
The problem is that the initial opacity of "hidden" element is 1 by default. You just need to set it to 0. And also remove display: none –
*.hide {
opacity: 0;
}
Also I would do a little refactoring and remove setTimeout:
$('#ArtistEmblem').on('click', function() {
fade($('#btnShowLogo'), $(this));
});
$('#btnShowLogo').on('click', function() {
fade($('#ArtistEmblem'), $(this));
});
function fade(inElement, outElement) {
inElement.removeClass('hide');
inElement.addClass('fade-in');
outElement.removeClass('fade-in');
outElement.addClass('fade-out');
}
If you don't want the hidden element to occupy space and you want it to be displayed-none, then you need to set display: block before starting the fadeOut.
I know you're asking for a JS heavy answer, but I highly recommend toggling a class of "active", "open" or something similar and using CSS with the transition. Less is more here.
Here's an example fiddle of something I've transitions not only the opacity, but also the z-index. That's the key with these transitions if you intend on having any elements below such as buttons that require hovering, clicking, etc.
JS Fiddle
Key parts:
.container {
z-index: -1;
opacity: 0;
transition: z-index .01s 1s, opacity 1s;
}
.container.active {
transition: z-index 0s, opacity 1s;
z-index: 500;
opacity: 1;
}
EDIT
I was just messing around with this type of thing for my own project, and observing how beautiful Stripe handles their navigation bar. Something so simple changes everything, and that's pointer-events. If you're okay with its support, (notable no ie. 10) this is infinitely easier to integrate. Here's another fiddle of the simulation in a nav bar.
The key part is pointer-events: none, as it ignores click events if set to none, almost as if it wasn't there, yet visibly it is. I highly recommend this.
https://jsfiddle.net/joshmoxey/dd2sts7d/1/
Here is an example using Javascript Animate API. Animate API is not supported in IE/Edge though.
var element = document.getElementById("fade-in-out")
var button = document.getElementById("x")
button.addEventListener("click", function(event) {
element.animate([{opacity: 1, visibility: "visible"},{opacity: 0, visibility: "hidden"}], {duration: 2000})
setTimeout(function() { element.remove() }, 2000)
})
button.addEventListener("dblclick", function(event) {
element && element.animate([{opacity: 0}, {opacity: 1}], {duration: 2000})
})
<input id="x" type="button" value="Click here" />
<div id="fade-in-out"> FADE ME </div>
I just built a sliding top panel for a website which is running on wordpress. Therefore I've added the bar into the header by using a hook point. I use a very simple custom.js (mostly copied together from different sources), so that the bar will "slide down" (=appear) on first click and "slide up" (=disappear) on the second click. For some reasons, this animation is not running smoothly. While it is a little bit too fast (which I could easily change by increasing the speed duration), the animations also seems to be laggy. I bet, I oversee something important, cause I am not used to jQuery/Javascript. Exists there some of code snippets to make the transition more smoothly?
Java-Script Markup:
// Slidingbar initialization
var tgslidingbar_state = 0;
// Clicking
jQuery( '.tg-toggle-wrapper' ).click( function(){
var $tgslidingbar = jQuery ( this ).parents( '#tgslidingbar-area').children( '#tgslidingbar' );
//Expand
if ( tgslidingbar_state === 0 ) {
$tgslidingbar.slideDown( 340, 'easeOutQuad' );
jQuery( '.tg-toggle-wrapper' ).addClass( 'open' );
tgslidingbar_state = 1;
//Collapse
} else if( tgslidingbar_state == 1 ) {
$tgslidingbar.slideUp(340,'easeOutQuad');
jQuery( '.tg-toggle-wrapper' ).removeClass( 'open' );
tgslidingbar_state = 0;
}
});
HTML-Markup:
<div id="tgslidingbar-area" class="tgslidingbar-area">
<div style="display: none;" id="tgslidingbar">
<div class="containertop">
Slidingbar Content Here!
</div></div>
<div class="tg-toggle-wrapper"><a class="tg-toggle" href="#"></a>
</div></div>
With this markup the sliding bar does slide down and up. For example, I've added a google maps into the sliding bar, when I've noticed that the bar is laggy. Could this be a reason for the laggy animations, too, cause google maps just loads when the bar opens? I also realized the "easeOutQuad" property in the copied snippet animations and searched for this on the web. It seems to be a popular jQuery library for animations. Up to now I do not have included this library into my websites, maybe thats the cause?
Kind Regards from Germany!
I applied some modification on the code.
I use query’s animate function.
A initial display property of #tgslidingbar was changed to ‘block’
added ‘padding’ on container top class and removed ‘padding’ on tgslidingbar class.
https://jsfiddle.net/nigayo/cn49ubr6/
[html]
<div style="display:block;height:0" id="tgslidingbar">
[JS]
var tgslidingbar_state = 0;
var $tgslidingbar = jQuery('#tgslidingbar');
var nHeight = $tgslidingbar.get(0).scrollHeight;
// Handle the slidingbar toggle click
jQuery('.tg-toggle-wrapper').click(function() {
//Expand
if (tgslidingbar_state === 0) {
$tgslidingbar.animate({
'height': nHeight
}, 340, function() {
jQuery('.tg-toggle-wrapper').addClass('open');
tgslidingbar_state = 1;
});
......
I suggest some different options.
first,
Instead, use jquery's animate function.
http://api.jquery.com/animate/
sample code : https://jsfiddle.net/nigayo/jo5vd2ob/
second.
you can use css transition.
http://jsfiddle.net/nigayo/qy1ummx6/1/
[css]
.box {
float: left;
/* you can use other ease effect. ease-in, ease-out, ease-in-out */
-webkit-transition: all 1s ease;
overflow: hidden;
}
.height {
background-color: red;
width: 300px;
max-height: 0px;
}
.change {
max-height: 500px;
}
[JS]
$('button').on('click', function() {
$('.box').toggleClass('change');
});
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?
I'm trying to create an effect with jQuery where on mouse over of my initials on the page in the header, the div they are in expands (using jQuery animate) and the text of my full name fades in from each initial.
I have tried a variety of things but am not sure what is the best way to do this. I'm a bit stuck. I'm currently trying to get it going by having the initials of my name "OW" in two separate divs and then the remainder of my name to make up "wen" and "illiams" in between those initals. Like so:
<div class="initialF inlinediv">O</div>
<div class="fullF inlinediv">wen</div>
<div class="initialL inlinediv">W</div>
<div class="fullL inlinediv">illiams</div>
I thought it would work to use jQuery slideLeft and .fadeIn to get the text to slide in from the left as well as fading to look like the text is emerging from the initials but the animations was jumpy and would go onto a second line while the div was still expanding. I am using the below jQuery to detect the mouseIn/Out events:
<script>
$(".brand").mouseenter(function() {
$('.brand').animate({width: '160px'});
$('.fullF').fadeIn("slow");
});
$(".brand").mouseout(function() {
$('.brand').animate({width: '36px'});
$('.fullF').fadeOut("slow");
});
</script>
The alternatives I have tried were using jquery.lettering.js to help with it but there seemed to be some issues with that. Any suggestions to push me in the right direction would be useful and my site with a partially working example is here:
http://192.241.203.146/
Here's one using css transitions rather than jquery animate: http://jsfiddle.net/S58Se/2/
<div class='branding'>
<span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
<span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>
span {
display: inline-block;
overflow: hidden;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
.wen { width: 36px; }
.illiams { width: 160px; }
span.hidden {
width: 0px;
opacity: 0;
}
$('.branding').hover(
function() { $('.nameFull').removeClass('hidden'); },
function() { $('.nameFull').addClass('hidden'); }
);
Or you can do away with the javascript altogether with this: http://jsfiddle.net/S58Se/3/
remove the js and add these css statements:
.branding:hover .wen {
width: 36px;
opacity: 1;
}
.branding:hover .illiams {
width: 160px;
opacity: 1;
}
... just because I think it's neat.
A good way to go about this is to just expand the use of your call to the animation method by adding another property to the object you are passing in. So instead of calling an extra method (fadeIn) you just handle it all in one fell swoop:
$('.brand').on({
'mouseenter' : function () {
$('.nameFull').stop().animate({
'width' : '200px',
'opacity' : '1'
}, 500);
},
'mouseleave' : function () {
$('.nameFull').stop().animate({
'width' : '0',
'opacity' : '0'
}, 500);
}
});
You'll notice I'm also using 'on' instead of the 'hover' or 'mouseenter' and 'mouseleave' methods. In most recent versions of jQuery those methods just reference 'on', so it's better to just cut out the middle man and do it all in one place.
I'm not sure if this exactly fits your design, but I made a Codepen to demonstrate the code in action: http://codepen.io/Tristan-zimmerman/pen/lnDGh
Style the hidden divs position:absolute, and when show them:
'show' them first, to set them visible
then position them (next to your 'launching' div), using jQuery.position();
set the animation going.
Essentially you want them 'absolute' to avoid them thunking in/out & changing your existing flow. position() must be called after making the element visible, and then you should have appropriate starting conditions to kick off your animation.
Or you could try using <span>' for the incoming text and/or displaying as inline-block, which may help avoid the "incoming" kicking things down a line. HTH.
I think what you are looking for is something like this: JSFiddle
html:
<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>
jq:
$('.brand').hover(function(){
$(this).stop().animate({width: '160px'},'slow',function(){
$(this).children('div').children('.full').stop().fadeIn('slow');
});
},function(){
$(this).children('div').children('.full').stop().fadeOut('slow',function(){
$(this).parent().parent().stop().animate({width: '36px'},'slow');
});
});
css:
.full{
display: none;
}
note: there is a simple bug that happens in a specific case and I'm working on it.
regards,