So I have three DIV's in a container, like so:
<div class="container">
<div class="left">left</div>
<div class="center">click me</div>
<div class="right">right</div>
<div class="spacer"></div>
</div>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
.left, .center, .right {
position: relative;
border: 1px solid black;
float: left;
padding: 10px;
}
.left, .right {
width: 25%;
}
.center {
width: 50%;
}
.right {
right: -999px;
transition: right 0.5s ease-out;
}
.left {
left: -999px;
transition: right 0.5s ease-out;
}
.spacer {
clear: both;
}
I've already coded it so that when you click on the .center DIV, the two sidebars (.left & .right) DIV's move into place. I used this code:
$('.center').click(function(){
$('.right').animate({"right": "0"});
$('.left').animate({"left": "0"});
}
});
What I want to do is write it so that AFTER they move into place, I can click on the .center DIV again and they'll move out like a sidebar does. My idea is to use an if/else checker so that it knows what state the DIV's are in.
I'm fairly new to Javascript and reading the if/else samples on Google only gets me more confused.
Any help? Thanks!
You may be able to rely on the animate complete property...
http://api.jquery.com/animate/
EDIT: I've updated to match your code...
$( ".center" ).click(function() {
$( ".right" ).animate({"right": "0"}, 5000, function() {
// Place the code you want to perform once animation is complete here.
});
});
You have a few options here - you could set a flag in the animation complete block for instance...
var complete = false;
$( ".center" ).click(function() {
$( ".right" ).animate({"right": "0"}, 5000, function() {
complete = true;
});
});
EDIT based on on comments...
$('.center').click(function(){
$('.right').animate({"right": "100px"});
$('.left').animate({"left": "100px"});
});
Related
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 }
I have a pseudo element I'd like to fade to opacity:0 on scroll. I can't seem to make head nor tale of how to do it. I've set up a codepen here. http://codepen.io/emilychews/pen/JWyaKr
Normally I'd use Greensock, but I can't on this project. I also have to use a pseudo element, not an absolutely positioned div. The fade needs to happen after 10px scroll from the top and then come back when the user scrolls back to the top (its part of a nav element)
HTML
<div id="mydiv">My Div</div>
CSS
#mydiv {
background: red;
width: 10%;
}
#mydiv:after {
content: '';
position: absolute;
height: 10%;
width: 10%;
top: 30px;
background: black;
}
Any ideas would be awesome. I feel as though I'm either about to cry or eat a bucket of fried chicken in frustration.
Emily
Set a transition for opacity on the pseudo element, and add a class to the main element on scroll that you use in the selector to change opacity on your pseudo element.
var $mydiv = $('#mydiv');
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$mydiv.addClass('fade');
} else {
$mydiv.removeClass('fade');
}
})
body {
height: 200vh;
}
#mydiv {
background: red;
width: 10%;
}
#mydiv:after {
content: '';
position: absolute;
height: 10%;
width: 10%;
top: 30px;
background: black;
transition: opacity .25s;
}
#mydiv.fade:after {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">My Div</div>
i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.
I tried installing Jquery UI so that I could easily add animation to the toggleClass funciton, but it only animates when adding the class, and not when removing the class (or moving back left to it's original position).
jQuery('#menu').click(function() {
jQuery('#wrap').toggleClass('move-right', 1000);
});
CSS
#wrap {
position: relative;
bottom: 22px;
max-width: 1150px;
margin: 0 auto;
padding: 20px;
}
.move-right {
left: 9%;
}
So How can I get this to animate both ways?
It's just a simple slide to the right, then back left. I thought jQuery UI would be easiest, but if I don't need it even better
add a left position to #wrap
then change your .move-right selector to be more specific
#wrap {
position: relative;
bottom: 22px;
max-width: 1150px;
margin: 0 auto;
padding: 20px;
left:0;
}
#wrap.move-right {
left: 9%;
}
http://jsfiddle.net/TrcLy/
You could try it by using a boolean and if the boolean is true try moving it the other way.
Then your code should be something like this:
JS:
var right = false;
jQuery('#menu').click(function() {
if(!right) {
jQuery('#wrap').toggleClass('move-right', 1000);
right = true;
} else if(right) {
jQuery('#wrap').toggleClass('move-left', 1000);
right = false;
}
});
CSS:
#wrap {
position: relative;
bottom: 22px;
max-width: 1150px;
margin: 0 auto;
padding: 20px;
}
.move-right {
left: 9%;
}
.move-left {
right: 9%;
}
This basically checks whether 'wrap' has moved right on clicking the button. If not, it moves it to the right, otherwise, it moves to the left.
You can use CSS3 transition to define a transition property (left) and time (1s), see: http://jsfiddle.net/m3sEn/1/ This doesn't require jQuery UI.
CSS:
#wrap {
left: 0;
transition: left 1s;
}
#wrap.move-right {
left: 9%;
}
This is a bit of a challenge. Here's what I'm looking for:
3 divs on screen
Div 1 resides in the middle of the page (centered)
Div 2 resides just off the screen on the far left
Div 3 resides just off the screen on the far right
OnClick, Div 1 slides to the position Div 2 was (to the left), Div 2 slides off the screen entirely, Div 3 slides to where Div 3 was (middle, centered). A new div arrives on the right.
I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen.
Any thoughts?
For an example of what I'm describing, visit Groupon.com. I thought it was a cool idea, and have given myself the challenge of recreating it. So far, no dice.
-D
Something like this?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
This is the basic functionality. It doesn't scale to more divs, etc, but that should get you started.
The key is to wrap your elements in a container and make the overflow hidden.
Update:
Here's a slightly better version that handles any number of divs (greater than 1):
http://jsfiddle.net/jtbowden/ykbgT/1/
Simplified further:
http://jsfiddle.net/jtbowden/ykbgT/2/
Code snippet:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
Maybe I misinterpreted. I though you wanted three divs in a row, and only the ones on the end sliding and whatnot.
http://jsfiddle.net/acsfy/
(I know you're using jQuery for this, but it pissed me off as I was trying to force it to work. You'd have to adapt this for your purposes.)
Extending Jeff B answer, i've included Hammer.js and made a circular list.
$(function() {
$("#esq").click(function() {
console.log("Esquerda !");
var obj = $(".ativo");
$(obj).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '+150%');
$(this).appendTo('#container');
});
$(obj).next().animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
$("#dir").click(function() {
console.log("Direita !");
var obj = $(".ativo");
var prox = $(obj).siblings(":last");
$(obj).animate({
left: '+150%'
}, 500, function() {
$(prox).prependTo('#container');
});
$(prox).css('left', '-50%');
$(prox).animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
var hammertime = new Hammer(document.getElementById("container"));
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
hammertime.on('swipeleft', function() {
$("#esq").trigger("click");
});
hammertime.on('swiperight', function() {
$("#dir").trigger("click");
});
});
Example in: http://jsfiddle.net/tvLt1r9h/2/
And... not a year too late. If you want it to start on the first div, your css needs to look like this.
#box1 { background-color:#333; }
#box2 { background-color:#333; left: -50%; }
#box3 { background-color:#333; left: 150%; }
#box4 { background-color:#333; left: 150%; }
#box5 { background-color:#333; left: 150%; }