so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>
You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>
Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>
You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>
Related
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
</style>
</head>
<body>
<ul>
<li>
<div class="header">
<p>Header</p>
</div>
</li>
<li>
<div class="header">
<p>Hello World</p>
</div>
</li>
<li>
<div class="header">
<p>Footer</p>
</div>
</li>
</ul>
<script>
$(".header").on("click", function () {
var e = $(this).closest("li");
e.prev().insertAfter(e);
})
</script>
</body>
</html>
I am trying to switch the li element with animation which will be like slowly moving upwards but can't seem to make it, above is what I have practiced till now and I am weak at jquery animation hope to get your feedback/help what I want is animation like this code http://jsfiddle.net/BYossarian/GUsYQ/5/ any answer or help would be appreciated. Manga read
your CSS does not visible effect on this animation
var animating = false;
$(".header").on("click", function() {
var clickedDiv = $(this).closest("li");
if (animating) {
return;
}
prevDiv = clickedDiv.prev(),
distance = clickedDiv.outerHeight();
if (prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
top: -distance
}, 600),
prevDiv.animate({
top: distance
}, 600)).done(function () {
prevDiv.css('top', '0px');
clickedDiv.css('top', '0px');
clickedDiv.insertBefore(prevDiv);
animating = false;
});
}
});
li {
width: 200px;
border: 1px solid black;
position: relative;
margin:10px;
}
li .header {
border: 1px solid black;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="header">
<p>Header</p>
</div>
</li>
<li>
<div class="header">
<p>Hello World</p>
</div>
</li>
<li>
<div class="header">
<p>Footer</p>
</div>
</li>
</ul>
This code I provided seems to be the only way I figured out how to animate a side navigation, due to the speed and callback. I want it to toggle back and forth the width of the navigation. I am also wondering if my if statement is written wrong?
$(function(){
$('.btn').on('click', function(){
if($('.right-nav').is(':hidden')) {
$('.right-nav').show()
$('.right-nav').animate({'width': '350px'}, 'slow');
} else {
$('.right-nav').animate({ 'width': '0' }, 'slow', function() {
$('.right-nav').hide()
});
};
});
});
.item {
padding: 10px;
background-color: #ffffff;
display: block;
}
.right-nav {
position: fixed;
z-index: 4;
height: 100%;
top: 0;
right: 0;
width: 0;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="right-nav">
<ul class="navigation-items">
<li><a class="item" href="#">ABOUT</a></li>
<li><a class="item" href="#">PROJECTS</a></li>
<li><a class="item" href="#">CONTACT</a></li>
</ul>
</div>
<button type="button" class="btn">click me</button>
After clicking the button you can see it requires two clicks to initiate the animation from right with a width of 0 animates to a width of 350px. I've searched everywhere for the possible bug I've created.
Any help would be great!
Your element is not actually hidden at first because you only moved it off the screen. An element is considered "hidden" when it has been explicitly set that way. So, the first time you click the button, it fails your if test and moves into the else branch where you do explicitly hide it. Then the second click works.
Adding display:none to the CSS for that element solves the problem.
$(function(){
$('.btn').on('click', function(){
if($('.right-nav').is(':hidden')) {
$('.right-nav').show()
$('.right-nav').animate({'width': '350px'}, 'slow');
} else {
$('.right-nav').animate({ 'width': '0' }, 'slow', function() {
$('.right-nav').hide()
});
};
});
});
.item {
padding: 10px;
background-color: #ffffff;
display: block;
}
.right-nav {
position: fixed;
z-index: 4;
height: 100%;
top: 0;
right: 0;
width: 0;
background-color: white;
display:none; /* YOU WEREN'T ACTUALLY HIDING THE ELEMENT */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="right-nav">
<ul class="navigation-items">
<li><a class="item" href="#">ABOUT</a></li>
<li><a class="item" href="#">PROJECTS</a></li>
<li><a class="item" href="#">CONTACT</a></li>
</ul>
</div>
<button type="button" class="btn">click me</button>
Add display: none; to .right-nav. You're checking to see if .right-nav is :hidden before showing it, and it isn't hidden when the page first loads.
$(document).ready(function(){
$('.btn').on('click', function(){
if($('.right-nav').is(':hidden')) {
$('.right-nav').show()
$('.right-nav').animate({'width': '350px'}, 'slow');
}
else {
$('.right-nav').animate({ 'width': '0' }, 'slow', function() {
$('.right-nav').hide()
});
};
});
});
.item {
padding: 10px;
background-color: #ffffff;
display: block;
}
.right-nav {
position: fixed;
z-index: 4;
height: 100%;
top: 0;
right: 0;
width: 0;
background-color: white;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="right-nav">
<ul class="navigation-items">
<li><a class="item" href="#">ABOUT</a></li>
<li><a class="item" href="#">PROJECTS</a></li>
<li><a class="item" href="#">CONTACT</a></li>
</ul>
</div>
<button type="button" class="btn">click me</button>
</body>
</html>
Hi You have to add default condition of your Navigation to hide.
It is taking two clicks because on first click its not getting the state.
Please refer below code.
Working JSFiddle
$(document).ready(function(){
$('.right-nav').hide();
$('.btn').on('click', function(){
if($('.right-nav').is(':hidden')) {
$('.right-nav').show()
$('.right-nav').animate({'width': '350px'}, 'slow');
}
else {
$('.right-nav').animate({ 'width': '0' }, 'slow', function() {
$('.right-nav').hide()
});
};
});
});
At the moment, I am learning how to write in javascript and jquery.I wrote a simple jquery code where you have a navigation menu which on click it is scrolling to a specific div inside an overflow container. However, the scroll function is not working. If someone can help me I am going to be really grateful. Thank you in advance.
My Code:
$(document).ready(function() {
$("#Anchor_A").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_A").offset().top
}, 'slow');
});
$("#Anchor_B").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_B").offset().top
}, 'slow');
});
$("#Anchor_C").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_C").offset().top
}, 'slow');
});
$("#Anchor_D").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_D").offset().top
}, 'slow');
});
$("#Anchor_E").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_E").offset().top
}, 'slow');
});
});
.Wrapper{
display:flex;
position:relative;
width:90vw;
height:90vh;
background-color:purple;
}
.Menu{
position:relative;
width:10vw;
height:90vh;
background-color:blue;
}
.Menu li{
position:relative;
font-size:4vw;
line-height:5vw;
text-align:center;
color:white;
cursor:pointer;
list-style-type: none;
}
.Container{
position:relative;
width:80vw;
height:90vh;
background-color:red;
overflow-y:hidden;
}
.Box{
position:relative;
width:80vw;
height:90vh;
background-color:purple;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
<div class="Menu">
<li id="Anchor_A">A</li>
<li id="Anchor_B">B</li>
<li id="Anchor_C">C</li>
<li id="Anchor_D">D</li>
<li id="Anchor_E">E</li>
</div>
<div class="Container">
<div class="Box" id="Box_A">
Box A
</div>
<div class="Box" id="Box_B">
Box B
</div>
<div class="Box" id="Box_C">
Box C
</div>
<div class="Box" id="Box_D">
Box D
</div>
<div class="Box" id="Box_E">
Box E
</div>
</div>
</div>
Best regards,
George S.
The key point here is that you need to use position() but not the offset() method. The offset() method returns coordinates relative to the document.
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
However you are trying to scroll them inside a container. See the implementation:
Note 1: I've optimized code a bit so instead of multiple similar blocks data-target attribute is used to define which block scroll to.
Note 2: the position() method returns coordinates from left top corner of the container. Thus the coordinates are changed once the content has been scrolled. That is why we need to compensate it by adding $('.Container').scrollTop().
$(document).ready(function() {
$(".Menu li").on('click', function() {
$('.Container').animate({
scrollTop: $($(this).data('target')).position().top + $('.Container').scrollTop()
}, 'slow');
});
});
.Wrapper {
display: flex;
position: relative;
width: 90vw;
height: 90vh;
background-color: purple;
}
.Menu {
position: relative;
width: 10vw;
height: 90vh;
background-color: blue;
}
.Menu li {
position: relative;
font-size: 4vw;
line-height: 5vw;
text-align: center;
color: white;
cursor: pointer;
list-style-type: none;
}
.Container {
position: relative;
width: 80vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Box {
position: relative;
width: 80vw;
height: 90vh;
background-color: purple;
cursor: pointer;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="Wrapper">
<div class="Menu">
<li id="Anchor_A" data-target="#Box_A">A</li>
<li id="Anchor_B" data-target="#Box_B">B</li>
<li id="Anchor_C" data-target="#Box_C">C</li>
<li id="Anchor_D" data-target="#Box_D">D</li>
<li id="Anchor_E" data-target="#Box_E">E</li>
</div>
<div class="Container">
<div class="Box" id="Box_A">
Box A
</div>
<div class="Box" id="Box_B">
Box B
</div>
<div class="Box" id="Box_C">
Box C
</div>
<div class="Box" id="Box_D">
Box D
</div>
<div class="Box" id="Box_E">
Box E
</div>
</div>
</div>
</body>
</html>
I have list of images and on hovering each li, I need a div to show up near to the hovered element. I have tried to get the position of each li using jquery. But it didn't work. How can I establish this?
sample code :
<ul>
<li><img src="image1.png"></li>
<li><img src="image2.png"></li>
<li><img src="image2.png"></li>
</ul>
<div class="popup-box hide">
<p> some text...</p>
</div>
<style>
.hide{display:none;}
</style>
We can do this using the mouseenter, mouseout and mousemove events.
On mouseenter, we shall show the div.
On mouseout, we shall hide the div.
On mousemove, we shall change the position of the div on the fly.
$("#list").on("mouseenter", "li", function() {
$("#popupbox").show();
$(this).off("mousemove").on('mousemove', function(e) {
$('#popupbox').css({
'top': e.pageY,
'left': e.pageX,
'z-index': '1'
});
});
}).on("mouseout", "li", function() {
$("#popupbox").hide();
})
li {
background: #f00;
color: #fff;
margin-bottom: 10px;
}
.popup-box {
position: absolute;
width: 50px;
height: 50px;
background: #00f;
margin-left: 5px;
margin-top: 5px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>
<img src="image1.png">
</li>
<li>
<img src="image2.png">
</li>
<li>
<img src="image2.png">
</li>
</ul>
<div id="popupbox" class="popup-box hide">
<p>some text...</p>
</div>
Basically you can do it this way.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="popup-box hide" style="position:absolute;">
<p> some text...</p>
</div>
<style>
.hide{display:none;}
</style>
<script type="text/javascript">
$("ul li").on("mousemove", function(){
var position = $(this).position(),
popup = $(".popup-box");
popup.removeClass("hide");
popup.css({"top": position.top + "px", "left": position.left + "px"});
})
$("ul li").on("mouseout", function(){$(".popup-box").addClass("hide");})
</script>
I added style="position: absolute;" on your popup-box so it will follow the css position we're setting during mouse hover.
Hope this help
i am a new learner of javascript. so the first i don't want to use jquery to get the tab. the following is my code. but it doesn't work.how to correct my code. thank you.
.web_index{ position:relative;}
.web_index div{ width:400px; height:300px; background:#eee; position:absolute; left:30px;top:100px; }
ul li{ float: left; width:100px; height:30px; line-height:30px; list-style:none;}
<script type="text/javascript">
function clicker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");
for(var i=0;i<lier.length;i++){
for(j=0;j<diver.length;j++){
if(i==j)
diver[j].style.display=block;
}else{
diver[j].style.display=none;
}
}
}
}
</script>
</head>
<body >
<ul>
<li onclick="clicker()" class="li01">one</li>
<li onclick="clicker()" class="li02">two</li>
<li onclick="clicker()" class="li03">three</li>
<div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>
i want to when click one then show content one.all the content are hidden. two then show content two...
See, for your question of implementing tabs, I can suggest you to do in a better way. The same clicker function can take an argument of the ID of the DIV and you can pass it when you are calling it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Tabs</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
</style>
</head>
<body>
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
<div class="web_index">
<div id="t1">content one</div>
<div id="t2">content two</div>
<div id="t3">content three</div>
</div>
<script type="text/javascript">
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
clicker(1);
</script>
</body>
</html>
Working
Instead of finding the index of the element occurrence, we can give a Unique ID to each. Then, functions support arguments, and that is what javascripts are for. Pass that argument and set the style using .style.display of the element.
We don't need to position the tabs as absolute, because it is not going to be hanging. And, you can set the margins using display: inline-block instead of float: left.
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
You can rewrite the clicker() script this way:
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
So that, you can pass the ID of the DIV tag as a parameter. By modifying the style properties of the element, you can either hide or show.
You can call this in the <li> using the same onclick function but just passing another extra parameter:
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
Check out demo at: http://jsbin.com/welcome/22513