<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>
Related
I need a solution for toggle between divs. I have a sidebar with a group of buttons. When I enter the page with the sidebar I only want the div with the button group to appear, but when I press for example Info I want the info div to appear and the other divs to disappear, and when I press the back button on the Info div I again only want the button group to appear.
.info {
border-color: black;
background-color: #f1f1f1;
margin-left: 7%;
margin-right: 7%;
height: 60%;
position: relative;
}
.about {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="sidebar">
<h3>Metadata & additional services</h3>
<div class="button-group" id="showall">
<button class="activeButton" id="info-button">Info</button>
<button class="activeButton">Quotes</button>
<button class="activeButton">Additional</button>
<button class="activeButton">Additional</button>
</div>
<div class="info" id="info">
<h3>Info</h3>
<ul>
<li>Author:</li>
<li>Title:</li>
<li>Content:</li>
</ul>
<button class="back-button">Back</button>
</div>
<div class="about" id="about">
<h1>about</h1>
</div>
</div>
<script>
$(document).ready(function () {
$("#info-button").click(function () {
$("showall").hide();
$("#info").show();
});
});
</script>
</body>
You are missing the id identifier in your .click function. If you want the info div hidden on page load, make sure to set it to display none, then add another event handler for the #backBtn
$(document).ready(function () {
$("#info-button").click(function () {
$("#showall").hide();
$("#info").show();
});
$("#backBtn").click(function () {
$("#showall").show();
$("#info").hide();
});
});
.info {
display: none;
border-color: black;
background-color: #f1f1f1;
margin-left: 7%;
margin-right: 7%;
height: 60%;
position: relative;
}
.about {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="sidebar">
<h3>Metadata & additional services</h3>
<div class="button-group" id="showall">
<button class="activeButton" id="info-button">Info</button>
<button class="activeButton">Quotes</button>
<button class="activeButton">Additional</button>
<button class="activeButton">Additional</button>
</div>
<div class="info" id="info">
<h3>Info</h3>
<ul>
<li>Author:</li>
<li>Title:</li>
<li>Content:</li>
</ul>
<button class="back-button" id="backBtn">Back</button>
</div>
<div class="about" id="about">
<h1>about</h1>
</div>
</div>
<script>
$(document).ready(function () {
$("#info-button").click(function () {
$("showall").hide();
$("#info").show();
});
});
</script>
</body>
</html>
I'm trying to stick my navbar to the top of the window, After window scrolling about 50px that navbar wasn't stick anymore. could anyone solve my problem. i'm stuck. I don't have proper knowledge about javascript and materialize css
thanks in advance
<!--Style-->
<style>
.header{
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box{
height: 500px;
margin-top: 100px;
}
.sticky-nav{
position: fixed;
top: 0;
width: 100%;
}
</style>
<!--Adding JQuery Script for Sticky navbar-->
<script>
$(window).scroll(function() {
if($(this).scrollTop()>50){
$('nav').addClass('sticky-nav');
}else{
$('nav').removeClass('sticky-nav');
}
});
</script>
</head>
<body>
</div>
<!--navbar-->
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
<!--Sample Boxes -->
<div class="container">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>
It is "sticky" and works as it should :
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav').addClass('sticky-nav');
} else {
$('nav').removeClass('sticky-nav');
}
});
.header {
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box {
height: 500px;
margin-top: 100px;
}
.sticky-nav {
position: fixed;
top: 0;
width: 100%;
}
nav {
background-color: skyblue;
}
body {
height: 1000vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
Try the following please:
Change CSS to:
.sticky-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 0;
z-index: 999;
}
Change JS to:
let scrollTopY = window.pageYOffset || document.body.scrollTop;
let navigation = document.querySelector('nav');
window.addEventListener('scroll', function() {
if(scrollTopY > 50) {
navigation.classList.add('sticky-nav');
} else {
navigation.classList.remove('sticky-nav');
}
}
Feel free to accept if this works for you.
I followed a tutorial and created a simple web page. Here is the html part:
$(document).ready(function() {
//when mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false.duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this.stop().animate({
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
})
});
});
body {
font-family: "Lucida Grande", arial. sans-serif;
background: #f3f3f3;
}
ul {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
a {
color: #fff;
text-decoration: none;
}
p {
padding: 0px 5px;
}
.subtext {
padding-top: 15px;
}
.green {
background: #6AA63B;
}
.yellow {
background: yellow;
}
.red {
background: #D52100;
}
.purple {
background: #5122B4;
}
.blue {
background: #0292c0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="js/jquery.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
</body>
</html>
Somewhy when I put mouse over the areas of "red","yellow" etc objects,nothing happens. All the routes to the js files are correct.
There was two errors in your code and your code was not getting jQuery.easing.js. Look here:
$(document).ready(function() {
//when mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false, //removed . and added , after queue: false
duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this).stop().animate({ //added ) after $(this
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
});
});
});
body { font-family: "Lucida Grande", arial. sans-serif; background: #f3f3f3; }
ul { margin: 0; padding: 0; }
li { width: 100px; height: 50px; float: left; color: #191919; text-align: center; overflow: hidden; }
a { color: #fff; text-decoration: none; }
p { padding: 0px 5px; }
.subtext { padding-top: 15px; }
.green { background: #6AA63B; }
.yellow { background: yellow; }
.red { background: #D52100; }
.purple { background: #5122B4; }
.blue { background: #0292c0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- added cdn directly for jquery.easing.js -->
<p>Rollover a menu item to expand it</p>
<ul>
<li class = "green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class = "yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class = "red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class = "blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class = "purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
You can see working fiddle here.
Have you tried to check the console for any error messages? Seems like you mistyped "js/jquert.easing.1.3.js"
It should be "js/jquery.easing.1.3.js"
Please replace . with , from this function $("li").mouseover(function(){
Instead of:
{queue:false. duration:600, easing:'easeOutBounce'})
Should be:
{queue:false, duration:600, easing:'easeOutBounce'})
Put your script inside your body tag and you are calling jQuery script twice remove that and try again sometimes these improper initialization may be the reason
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquert.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
<script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquert.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</body>
</html>
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>
I am using the animate function in jquery but it is working weird. What is wrong with it?
Here is some code:
here is my html page
<ul class="menu red">
<li class="current">Home</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div> <!-- End menu -->
</div> <!-- End header -->
<div id="content">
<div id="inner">
<div id="Home">
home</div>
<div id="Bio">bio</div>
<div id="Portfolio">port</div>
<div id="Pricing">pric</div>
<div id="Contact">con</div>
</div>
Here is my style sheet
#content {
overflow:hidden;
width: 900px;
}
div#inner {
width: 4515px;
}
div#inner div {
float:left;
width: 900px;
margin-right: 3px;
}
here is my script
function nexthome() {
$('#inner').animate({marginLeft: '0px'}, 1200);
}
function nextbio() {
$('#inner').animate({marginLeft: '-1806px'}, 1200);
}
function nextport() {
$('#inner').animate({marginLeft: '2709px'}, 1200);
}
function nextpric() {
$('#inner').animate({marginLeft: '3612px'}, 1200);
}
function nextcon() {
$('#inner').animate({marginLeft: '4515px'}, 1200);
}
Changing the marginLeft is probably not the best way to do this... it might work that way, but I think using left would be best.
I changed the css to make #inner have a relative position and changed the code to set up an object containing the left positions. Here is a demo.
HTML
<ul class="menu red">
<li class="current">Home</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div> <!-- End menu -->
</div> <!-- End header -->
<div id="content">
<div id="inner">
<div id="Home">home</div>
<div id="Bio">bio</div>
<div id="Portfolio">port</div>
<div id="Pricing">price</div>
<div id="Contact">contact</div>
</div>
</div>
Updated CSS:
#content {
overflow:hidden;
width: 900px;
}
div#inner {
position: relative;
top: 0;
left: 0;
width: 5500px;
}
div#inner div {
float:left;
width: 900px;
height: 200px;
border: #000 1px solid;
margin-right: 3px;
}
Updated script
// uses the exact name from the menu
var leftEdge = {
'Home' : 0,
'Bio' : 903,
'Portfolio' : 1806,
'Pricing' : 2712,
'Contact' : 3617
};
$('.menu a').click(function() {
var name = $(this).text(); // grabs the name from the menu
$('#inner').animate({
left: -leftEdge[name] + 'px'
}, 1200);
return false;
});
I actually have a plugin called visualNav that updates the menu (highlights the visible panel) when a block comes into view, you can check it out if you are interested. The second demo shows the menu working on both horizontally and vertically arrange blocks.