JQuery ScrollTop scrolling too far - javascript

I'm wanting to create basically a full page background image that, once the user clicks (anywhere), scrolls down to the remaining content and then hides itself. Initially, there would be no scrollbar, then once the click>scrolltop has taken place, and the background div hidden, the scrollbar appears by removing the overflow-hidden class.
My problem is that when I use the scrolltop by itself, the page does scroll directly to the element I've selected, but when I then add in the javascript code to hide the initial introduction div (on which the user clicks), the page jumps down far past the ScrollTop point.
I've included my JSFiddle link here, if anyone has any thoughts.

display: none is changing the height of .intro to 0, so you have two options:
Change the CSS for .hidden to use visibility: hidden
or
Change the first parameter of .animate to take into account the height of .intro: $(".one").offset().top - $(".intro").height()
I'd also suggest putting the removeClass and addClass calls in a callback function, rather than using .delay():
Example with option 2 + callback usage:
$(document).ready(function() {
$(".intro").click(function() {
$('html, body').animate({
scrollTop: $(".one").offset().top - $(".intro").height()
}, 700, function() {
$("body").removeClass("bleh");
$(".intro").addClass("hidden");
});
});
});

Is this helpful? After adding the hidden class you can scroll to the top of the one div.
$(function(){
$(".intro").on("click", function(){
$("body").removeClass("bleh");
$("html, body").animate({
scrollTop : $(".one").offset().top
}, function(){
$(".intro").addClass("hidden")
$(document).scrollTop(0)
})
})
})
html, body{
height: 100%;
}
body{
margin: 0;
}
.bleh{
overflow: hidden;
}
.hidden{
display: none;
}
.intro{
background: red;
text-align: center;
padding: 20px;
background-position: center;
background-size: cover;
height: 100%;
}
.one {
width: 100%;
background-color: black;
display: block;
height: 400px;
}
.two {
width: 100%;
background-color: blue;
display: block;
height: 400px;
}
.three {
width: 100%;
background-color: black;
display: block;
height: 400px;
}
.four {
width: 100%;
background-color: blue;
display: block;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body class="bleh">
<div class="intro">
<h1>Click anywhere to scroll down to main content</h1>
</div>
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</body>

Related

jquery: Remove a <div> stacked above another <div> on mouseenter and restore that <div> on mouseleave

Here's the challenge:
I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});
.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
The jquery code snippet above is in a separate file and called in the html's head.
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>
Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.
Thank you for your help!
I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.
This post should help you: jquery .mouseover() and .mouseout() with fade
If not (if that does not work) what I would do/suggest is:
When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.
You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...
Trust this helps.
You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.
$(document).ready(function() {
$('.dimmer').on('mouseenter', () => {
$('.dimmer').css("visibility","hidden");
}).on('mouseleave', () => {
$('.dimmer').css("visibility","visible");
});
});
.experience {
background: red;
height: 110px;
width: 110px;
z-index: 0;
}
.dimmer {
background: blue;
position: absolute;
top: -10px;
height: 110px;
width: 110px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
jQuery(document).ready(function(){
jQuery(".dimmer").on({
mouseenter: function () {
jQuery(this).css('opacity', '0');
},
mouseleave: function () {
jQuery(this).css('opacity', '1');
}
});
});
.experience {
background: url("http://lorempixel.com/400/200/") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.imparant{
position:relative;
height: 110px;
width: 110px;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index: 3;
transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
<div class="experience"></div>
<div class="dimmer"></div>
</div>
You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:
.container{
position:relative;
height: 110px;
width: 110px;
background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s;
}
.container:hover::before{
opacity: 0;
}
<div class="container"></div>
If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:
.dimmer:hover { opacity: 0 }
Otherwise you'd need to use a descendant selector:
.outerDiv:hover .dimmer { opacity: 0 }

How to use .animate() to expand width from a specific side

I am trying to animate an opening sequence for a project and am wondering how I can use .animate() to make my div "come in" from the right instead of the left which seems to be the default.
I am sure it is a simple solution, here is my code and fiddle:
JSFiddle
$("#clickMe").click(function() {
$(".login").animate({width: '0'});
}, function() {
$(".login").animate({width: '100'});
});
Thanks!
You could set a margin-left with a value equivalent to the element's width and animate it at the same time. In doing so, the width animation is essentially displaced by the margin.
$("#clickMe").click(function() {
$(".login").animate({
'width': '100',
'margin-left': '0'
});
});
.login {
height: 100px;
width: 0px;
background-color: #f00;
margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="login"></div>
Alternatively, another approach would be to float the element to the right inside of a parent element with the same dimensions:
$("#clickMe").click(function() {
$(".login").animate({width: '100%'});
});
.animation-wrapper {
width: 100px;
height: 100px;
}
.login {
height: 100%;
width: 0;
background-color: #f00;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="animation-wrapper">
<div class="login"></div>
</div>
Similarly, you could also just animate the left property and hide the overflow:
$("#clickMe").click(function() {
$(".login").animate({'left': '0'});
});
.animation-wrapper {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
}
.login {
height: 100%;
width: 100%;
background-color: #f00;
position: absolute;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="animation-wrapper">
<div class="login"></div>
</div>
its a simple solution but should be enough for simple cases:
Wrap your login with container with exact width and height:
<div class="wrap">
<div class="login"></div>
</div>
Than apply styles:
.login {margin-left: 100px; height: 100px; width: 100px; background-color: red;}
.wrap{
width: 100px;
height: 100px;
overflow: hidden;
}
You move your .login to the right side of the .wrap (using margin-left:100px;) and add overflow:hidden to .wrap (.login will be not visibile)
than simply reset margin-left to 0 :
$("#clickMe").click(function() {
$(".login").animate({marginLeft: 0});
});

On click slide to width 100%

I have this code:
$('button').click(function(){
$('.slide').animate({
width: "450px";
display: block;
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"></div>
<button>Slide the div</button>
When I click on the button I want .slide to appear to the left like a slide.
I already put my width div at width: 0px. Then in jQuery this div would get width: 450px.
You had some syntax errors within the animate the ; should be a , and the button had no class so the click event was never executed. Also, you can't animate the display property.
Here's the updated snippet:
$('.open-menu').click(function(){
$('.slide').animate({
width: "450"
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"></div>
<button class="open-menu">Slide the div</button>
There are a few issues with your code:
Animate won't take care of the display property.
Click handler setup should be wrapped in the jQuery ready function.
Button needs the class open-menu.
Object properties in animate argument shouldn't end with semicolons.
See below for a working example.
$(function () {
$('.open-menu').click(function(){
$('.slide').animate({
width: "450px"
});
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="open-menu">Slide the div</button>
<div class="slide"></div>

Jquery to slide up two elements and slide down one element inside an element

I have 3 div elements inside a div, and I want to use jquery to slide up 2 of the elements and slide down 1 of the element at once.
html
<div class='container'>
<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
</div>
css
.div1, .div2, .div3 {
display: inline-block;
width: 100px;
height: 300px;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
.div3 {
background: green;
}
jquery
$(document).ready(function() {
$('.container')
.children('.div1')
.slideUp(2000)
.end()
.children('.div2')
.animate({height:0},2000)
.end()
.children('.div3')
.slideUp(2000);
})
jsfiddle demo
I want the second(div2) at the middle, the blue colored one to slide to the bottom and the other divs to slide up, I know I can't use slideDown as it is already displayed, I think I have to use animate, but how do I make it to animate to the bottom ?
*The script has to be written in that way, as I am using it inside a setInterval function.
Can somebody help me with the fix to accomplish this ?
All suggestions are welcomed.
Thx in advance
If you position the divs relatively or absolutely you can animate the top and the height of the middle div simultaneously.
I have updated your fiddle.
JS:
$(document).ready(function() {
$('.container')
.children('.div1')
.slideUp(2000)
.end()
.children('.div2')
.animate({top: 300,height:0},2000)
.end()
.children('.div3')
.slideUp(2000);
});
CSS:
.div1, .div2, .div3 {
display: inline-block;
width: 100px;
height: 300px;
position: absolute;
}
.div1 {
background: red;
left: 0px;
}
.div2 {
background: blue;
left: 100px;
top: 0px;
}
.div3 {
background: green;
left: 200px;
}

Two nav fixed nav bars on one page

I want to have two fixed nav bars one on top and other at some center of the page. When scroll reach to second nav first should hide (or become relative) &
second should become fixed bar. And when we move up the second nav now become relative (not hide) and fist one will again start showing again.
fiddle
<div id="nav01">
</div>
<div class="content"></div>
<div id="nav02">
</div>
<div class="content"></div>
#nav01
{
height: 100px;
background: red;
width: 100%;
position: fixed;
top: 0;
}
#nav02
{
height: 100px;
background: blue;
width: 100%;
}
.content
{
height: 2000px;
background: #ccc;
width: 100%;
}
I have seen many jquery plugins but not found them useful - I am not good in scripting so need your help thanks in advance.
You have to add the below code
$(document).ready(function(){
$(window).scroll(function() {
if($(window).scrollTop()>2000){
$("#nav02").css("position", "fixed");
$("#nav02").css("top", 0);
$("#nav01").hide();
} else {
$("#nav02").css("position", "relative");
$("#nav01").show();
}
});
});
See this fiddle http://jsfiddle.net/P8Hzx/1/

Categories