I have a website menu bar that has two separate divs that a site visitor can toggle between just by tapping. Here's the fiddle and the actual code:
HTML:
<div id="container">
<div id="div">
<div id="next1">MENU 1</div>
<div id="next2">MENU 2</div>
</div>
</div>
CSS
#container{
height:100px;
width:50%;
position:relative;
overflow:hidden;
}
#div{
height:100px;
width:100%;
position:relative;
}
#next1{
height:100px;
width:100%;
top:0;
left:0;
background:green;
position:absolute;
}
#next2{
height:100px;
width:100%;
top:0;
left:100%;
background:orange;
position:absolute;
}
JavaScript
$("#next1").click(function () {
targetLeft = "-100%";
$("#div").animate({left: targetLeft},400);
});
$("#next2").click(function () {
targetLeft = "0";
$("#div").animate({left: targetLeft},400);
});
The code works well, but I'd like to do this without JQuery, and am wondering if anyone knows how this could be done? (If it can be done without JavaScript as well, that would be ideal but I'm not sure that's possible.)
Thanks for reading!
You could use CSS3 transitions instead:
Example Here
document.getElementById('next1').addEventListener('click', function () {
document.getElementById('div').style.left = '-100%';
});
document.getElementById('next2').addEventListener('click', function () {
document.getElementById('div').style.left = '0%';
});
#div {
height:100px;
width:100%;
position:relative;
left: 0;
transition: left 400ms ease-in-out;
}
Related
Well I am very new with javascript, have always loved to work on my own codes as it is easier to edit.
I am working on making a website which animates on scroll.
By seeing many tutorials I am able to make the div animation on a particular scroll from top
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate").className = "boxl1";
} else {
document.getElementById("animate").className = "";
}
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate1").className = "boxl2";
} else {
document.getElementById("animate1").className = "";
}
}
#main{
width:1000px; height:2000px; float:left; background-color:#000;
}
#left{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
.boxl1{
width:100px;
height:100px;
float:left;
background-color:#FFF;
background-image:url(gif/1.png);
transform:scaleX(-1);
animation-name:lefty;
animation-duration:5s;
}
#keyframes lefty{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(270deg);
}
}
#right{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
.boxl2{
width:100px;
height:100px;
background-color:#FFF;
background-image:url(gif/1.png);
float:right;
animation-name:travel;
animation-duration:5s;
}
#keyframes travel{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(360deg);
}
}
#leftd{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
#rightd{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
<div id="main">
<div style="margin-top:400px;">
<div id="left">
<div id="animate"></div>
</div>
<div id="right">
<div id="animate1"></div>
</div>
<div id="leftd">
</div>
<div id="rightd">
</div>
</div>
</div>
Now all i want into this is that it should not complete the animation until i scroll down and reverse it when i scroll up.
the method i think is, i can create many boxes in css (like boxl1, boxl2,boxl3,...n) with different margins, and make a switch statement, but as i am too new to this, can you help me how does it works? I saw many tutorials they all show day and date, or names nothing for class and divs
Many answers here ask to get a js library and stuff, but i want to write it myself, if you can help, it would be great, thanks in advance!
In the given (first) SSCCE, I have tried to animate initial 0px height of .scroll-header to 70px by $(".scroll-header").animate({height:"70px"}, 350); based on a condition (which is when the .view is scrolled out of the screen during the window scrolling event - have used the jquery-visible plugin for checking if it is visible or not) in JQuery.
But it doesn't seem to work.
On the other hand in the second example given below, I have done everything just the same way except that instead of the animate() function I have used the $(".scroll-header").css("height", "70px"), and it works perfectly.
But I need the animation. How do I solve this?
$(document).ready(function() {
console.log("script.js is detected");//check
$(window).scroll(function() {
console.log("window onscroll being called.");//check
if ( $("div.view").visible(true) ) {
console.log("YES if ( $(\"div.view\").visible(true) )");//check
$(".scroll-header").animate({"height": "0px"}, 350);
} else {
console.log("NO if ( $(\"div.view\").visible(true) )");//check
$(".scroll-header").animate({"height": "70px"}, 350);
}
});
});
.view {
height:500px;
width:100%;
background-color:crimson;
}
.second {
height:2500px;
width:100%;
background-color:purple;
}
.scroll-header {
background-color:yellow;
width:100%;
height:0px;
top:0px;
left:0px;
position:fixed;
}
.header {
position:absolute;
width:100%;
height:100px;
background-color:cyan;
top:0px;
left:0px;
}
* {
border:0px;
padding:0px;
margin:0px;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="view">.</div>
<div class="header">.</div>
<div class="scroll-header">.</div>
<div class="second">.</div>
OR JSFiddle here.
SSCCE without Animation:
$(document).ready(function() {
console.log("script.js is detected");//check
$(window).scroll(function() {
console.log("window onscroll being called.");//check
if ( $("div.view").visible(true) ) {
console.log("YES if ( $(\"div.view\").visible(true) )");//check
//$(".scroll-header").animate({"height": "0px"}, 350);
$(".scroll-header").css("height", "0px");
} else {
console.log("NO if ( $(\"div.view\").visible(true) )");//check
//$(".scroll-header").animate({"height": "70px"}, 350);
$(".scroll-header").css("height", "70px");
}
});
});
.view {
height:500px;
width:100%;
background-color:crimson;
}
.second {
height:2500px;
width:100%;
background-color:purple;
}
.scroll-header {
background-color:yellow;
width:100%;
height:0px;
top:0px;
left:0px;
position:fixed;
}
.header {
position:absolute;
width:100%;
height:100px;
background-color:cyan;
top:0px;
left:0px;
}
* {
border:0px;
padding:0px;
margin:0px;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="view">.</div>
<div class="header">.</div>
<div class="scroll-header">.</div>
<div class="second">.</div>
OR JSFiddle here.
I am new to JavaScript and I am trying to write a simple function that will trigger multiple div hovers. Until now I tried with many things but I assume this code will be closer to the solution. If someone could help me I would be really grateful.
$(function() {
$(document).on('mouseenter','.Test1', function() {
if($('.Test2').hasClass('Test2')) {
$('.Test2').toggleClass('Test2:Hover');
}
});
});
.Test1{
position:relative;
width:200px;
height:200px;
background-color:#951159;
}
.Test1:Hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
.Test2{
position:relative;
width:200px;
height:200px;
background-color:#147852;
}
.Test2:Hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
<div class="Test1">1</div>
<div class="Test2">2</div>
Thanks in advance.
PS: I know that it could be done only with CSS but I need it with Javascript.
It's best to use CSS classes. and add and remove them by javascript.
$(function(){
//reset box
$('.Test1').hover(function() {
$('.Test2').addClass('hover');
}, function(){
$('.Test2').removeClass('hover');
});
});
.Test1{
position:relative;
width:200px;
height:200px;
background-color:#951159;
}
.Test1:hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
.Test2{
position:relative;
width:200px;
height:200px;
background-color:#147852;
}
.Test2:hover, .Test2.hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="Test1">1</div>
<div class="Test2">2</div>
$(document).on('mouseenter','.Test1', function() {
if($('.Test2').hasClass('Test2')) {
$('.Test2').trigger('mouseover');
}
});
I have got some problems here finding my mistake. Debugging Console says:" Can't find variable: mouseover/mouseout." I don't know what she's trying to say to me. I want to fade a div with lessCss to 50% transparency with the onmouseover/onmouseout event.
<div id="right" class="" onMouseOver="javascript: mouseover(this);" onMouseOut="javascript: mouseout(this);"></div>
<script type="text/javascript">
function mouseover(this) {
this.setAttribute("class", "mouseover");
}
function mouseout(this) {
this.setAttribute("class", "");
}
</script>
lessCss code:
#right {
position:fixed;
top:320px;
right:0px;
z-index:5;
height:200px;
width:30px;
background-image: url(images/right);
border-radius:5px;
background-color:fade(darken(#bg-color, 50%),50%);
cursor:pointer;
}
.mouseover {
background-color:darken(#bg-color, 50%);
}
You dont need a javascript function, use CSS selector "hover":
#right {
position:fixed;
top:320px;
right:0px;
z-index:5;
height:200px;
width:30px;
background-image: url(images/right);
border-radius:5px;
background-color:fade(darken(#bg-color, 50%),50%);
cursor:pointer;
}
#right:hover {
background-color:darken(#bg-color, 50%);
}
Your div will simply need to have "right" as id:
<div id="right"></div>
I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.
How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.
HTML
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<p>Hover over red div please!!</p>
</body>
</html>
CSS
.wrapper{
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
margin-top:200px;
color:white;
}
jquery
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){ $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
and here is the fiddle http://jsfiddle.net/qGVfp/
There's 2 changes you need to make. First adjust the stylesheet so the moving div is off to the left instead of the bottom:
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
left:-200px;
color:white;
}
And then change the javascript to react to clicks, be based on width and modify the left property. Note, there is a toggle method that behaves a lot like hover, but it's getting removed from jQuery, so you have to have a boolean that tracks state.
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
Here's an updated fiddle: http://jsfiddle.net/qGVfp/30/
.wrapper2{
background-color:blue;
width:400px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner2{
width:200px;
height:200px;
position:absolute;
background-color:black;
margin-left:400px;
color:white;
}
$(".wrapper2").hover(function(){
$(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
},function(){
$(".inner2").stop().animate({marginLeft:400},1000);
});
});
http://jsfiddle.net/bighostkim/vJrJh/
You are basically there just need to change a few things around.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<button id="btn">click</button>
</body>
</html>
CSS
.wrapper {
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner {
width:200px;
height:100px;
position:absolute;
background-color:black;
left:200px;
color:white;
}
SCRIPT
var hidden = true;
$(document).ready(function(){
$("#btn").click(function() {
if(hidden) {
$(".inner").stop().animate({left:0}, 1000);
hidden = false;
}
else {
$(".inner").stop().animate({left:200},1000);
hidden = true;
}
});
});
Here is a fiddle to show this: http://jsfiddle.net/qGVfp/31/