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/
Related
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 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;
}
My goal is to to create an animation (css / jquery), so green box slides (grows) over red one (red one is fixed).
Then toggle it back : green shrinks and red comes back again.
Using ("#green").css("wdith") makes the red one being pushed and I want to avoid that.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<style>
.green {
width:400px;
background-color:green;
display:inline-block;
height:320px;
}
.red{
width:200px;
background-color:red;
display:inline-block;
height:320px;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
<script>
$(function() {
$("#action").click(function() {
// toggle so green grows and takes red place (red does not move)
// toggle so green shrinks and so red takes his initial place again
});
});
</script>
</div>
</body>
</html>
here is the fiddle:
http://jsfiddle.net/Sj575/
I'd use a float instead. Try this:
jsFiddle example
.green {
width:400px;
background-color:green;
height:320px;
float:left;
}
.red {
background-color:red;
height:320px;
}
#container {
width:600px;
overflow:hidden;
}
<div id="container">
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action">Toggle Green !</button>
Add
$('#green').slideToggle("fast");
then add css property
.green {
width:400px;
background-color:green;
display:inline-block;
position:absolute;
height:320px;
}
JSFIDDLE
Here's what I did:
Like j08691 I also added float:left to both divs and I added display:block and clear both to the button, otherwise it would too be on the left
<body>
<style>
.green {
width:400px;
background-color:green;
float: left;
height:320px;
}
.red{
width:200px;
background-color:red;
float: left;
height:320px;
}
#action{
display: block;
clear:both;
margin-top:2em;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action" >Toggle Green !</button>
Now what I did was make 2 different functions,to make sure the button wouldn't invoke both events I used the preventDefault(); method. I used animate to increase width and decrease the red using hide() to make it disappear, once you click on 'action' the green will disappear and the red div will take its place
<script>
$(document).ready(function() {
$("#action").one('click', toggleGreen);
// toggle so green grows and takes red place (red does not move)
function toggleGreen(){
$("#green").animate({
width:'600px'
});
$("#red").animate({
width:'100px'
}).hide(2000);
preventDefault();
}
$("#action").on('click', function(){
// toggle so green shrinks and so red takes his initial place again
$("#green").hide(2000);
$("#red").animate({
width:'600px'
}).show(3000);
})
});
</script>
Hope that helps!
I'm trying to make horizontal scrolling effect using two buttons, left and right. But I can't sort it out. I managed to scroll to next element but then scrolling stops and I can't scroll to another element.
$(document).ready(function(){
$("#left").click(function(){
$(".wrap").animate({scrollLeft: 0}, 1000);
return false;
});
var item_width = $('.label').outerWidth();
$("#right").click(function(){
$(".wrap").animate({scrollLeft: item_width}, 1000);
return false;
});
});
You need to keep track of your current index. You have shifted right once (the width of item_width), but the second time you need to animate scrollLeft: item_width*2, the third item_width*3, etc.
set a variable in your document ready that starts at 0, and its incremented or decremented when you click on either right or left, and then change 0 and item_width to item_width * index
Uhm i'm not sure you can use "{scrollLeft: item_width}" for element different to body o window... but if you can do this change part your script:
{scrollLeft: item_width}
to
{scrollLeft: "+="+item_width}
JS:
$(document).ready(function(){
var item_width = $('.label').css("width");
$("#left").on("click",function(){
if(parseInt($(".wrap").css("margin-left")) == 0) return;
$(".wrap").animate({marginLeft: "+="+item_width}, 1000);
return false;
});
$("#right").on("click",function(){
$(".wrap").animate({marginLeft: "-="+item_width}, 1000);
return false;
});
});
For example you can use this
html:
<div id="right">></div>
<div id="left"><</div>
<div class="wrap">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
css:
body{
margin:0;
padding:0;
}
.wrap{
overflow:hidden;
float:left;
width:903px;
height:200px;
position:relative;
}
.label{
display:block;
float:left;
width:300px;
background-color:red;
border-left:solid 1px black;
position:relative;
height:200px;
}
#right,#left{
position:absolute;
background-color:purple;
color:white;
top:100px;
width:20px;
height:20px;
margin-top:-10px;
text-align:center;
line-height:20px;
display:block;
z-index:2;
cursor:pointer
}
#right{
right:0;
}
see the example here:
http://jsfiddle.net/u3hB8/4/
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>