animate item while other has class JQuery

animate item while other has class JQuery - javascript

In this code snippet I was trying to make changes on absolute element for the menu item when it has active class, but the problem is when the class toggled and removed from current item the element still have the same effect and didn't enter the else statement.
As you see class active toggled between the menu items when click any of them and I use if this item has class active do this for the element. else back.
but else statement not working and keep the line under the menu item although it's not has active class anymore.
$(function () {
"use strict";
var $menuItem = $('.nav li a'),
$hr = $('hr');
$menuItem.on('click', function (event) {
$('.active').not($(this)).removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('active')) {
$(this).next($hr).animate({width : "100%"}, 200);
} else {
$(this).next($hr).animate({width : "0"}, 200);
}
event.stopPropagation();
});
});
.nav {
background-color:#222;
padding:15px 10px;
position:fixed;
top:0;
left:0;
width:100%;
}
.nav ul li {
display:inline;
margin:0 20px;
position:relative;
}
.nav ul li a {
text-decoration:none;
color:#fff;
}
.nav ul li a .active {
color:red;
}
#home,#about,#services,#contact {
height:600px;
}
h1 {
text-align:center;
font-size:30px;
padding:100px 0;
}
hr {
position:absolute;
width: 0;
height:2px;
border:none;
color: #ff0075;
background-color:#ff0075;
top: 10px;
left: 0;
z-index:-5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Home<hr></li>
<li>About<hr></li>
<li>Services<hr></li>
<li>Contact<hr></li>
</ul>
</div>

As you have added active class to current element, thus truthy section of if will execute.
You need to apply the animation on .filter()ed element.
$menuItem.filter('.active').next('hr').animate({
width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
width: "0"
}, 200);
$(function() {
"use strict";
var $menuItem = $('.nav li a');
$menuItem.on('click', function(event) {
$('.active').not($(this)).removeClass('active');
$(this).addClass('active');
$menuItem.filter('.active').next('hr').animate({
width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
width: "0"
}, 200);
event.stopPropagation();
});
});
.nav {
background-color: #222;
padding: 15px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav ul li {
display: inline;
margin: 0 20px;
position: relative;
}
.nav ul li a {
text-decoration: none;
color: #fff;
}
.nav ul li a .active {
color: red;
}
#home,
#about,
#services,
#contact {
height: 600px;
}
h1 {
text-align: center;
font-size: 30px;
padding: 100px 0;
}
hr {
position: absolute;
width: 0;
height: 2px;
border: none;
color: #ff0075;
background-color: #ff0075;
top: 10px;
left: 0;
z-index: -5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Home
<hr>
</li>
<li>About
<hr>
</li>
<li>Services
<hr>
</li>
<li>Contact
<hr>
</li>
</ul>
</div>

Related

How can I auto scroll to the next possible div and update the top nav control with it?

I would like to create a navigation that scrolls to the specific part and also auto-updates when scrolling up/down.
It should also auto-scroll to the next possible div when scrolling. (this is not that important)
However, it should update on scroll when passing/on the corresponding div. (using jquery or plain js)
I have used this as the backend code for the navigation:
function ShowLanding() {
window.scrollTo(0,0);
}
function ShowContact() {
document.getElementById("contact").scrollIntoView();
}
function ShowAbout() {
document.getElementById("about").scrollIntoView();
}
//nav update code
var nav = $('nav');
var line = $('<div />').addClass('line');
line.appendTo(nav);
var active = nav.find('.active');
var pos = 0;
var wid = 0;
if (active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid });
}
nav.find('ul li a').click(function (e) {
e.preventDefault();
if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {
nav.addClass('animate');
var _this = $(this);
nav.find('ul li').removeClass('active');
var position = _this.parent().position();
var width = _this.parent().width();
if (position.left >= pos) {
line.animate({
width: position.left - pos + width },
300, function () {
line.animate({
width: width,
left: position.left },
150, function () {
nav.removeClass('animate');
});
_this.parent().addClass('active');
});
} else {
line.animate({
left: position.left,
width: pos - position.left + wid },
300, function () {
line.animate({
width: width },
150, function () {
nav.removeClass('animate');
});
_this.parent().addClass('active');
});
}
pos = position.left;
wid = width;
}
});
The CSS:
nav {
position: relative;
padding-bottom: 12px;
padding-top: 20px;
padding-right: 20px;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #ff4242;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
margin: 0 40px 0 0;
opacity: .4;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: .7;
}
nav ul li.active {
opacity: 1;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 14px;
}
And the HTML:
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
Result it produces

You mean something like this?
nav {
position: relative;
padding-bottom: 12px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
background-color:darkgray;
position:fixed;
top:0;
right:0;
left:0;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #ff4242;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
margin: 0 40px 0 0;
opacity: .4;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: .7;
}
nav ul li.active {
opacity: 1;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 14px;
}
.home, .about, .contact {
height:800px;
text-align:center;
padding-top:50px;
color:#000;
font-size:50px;
}
.home {background-color:lightblue;}
.about {background-color:lightgreen;}
.contact {background-color:yellow;}
<html>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 0 ) {
$("li#home").css('background-color', 'blue');
} else {
$("li#home").css('background-color', '');
}
if(scroll_pos > 800) {
$("li#about").css('background-color', 'blue');
$("li#home").css('background-color', '');
} else {
$("li#about").css('background-color', '');
}
if(scroll_pos > 1600) {
$("li#contact").css('background-color', 'blue');
$("li#about").css('background-color', '');
} else {
$("li#contact").css('background-color', '');
}
});
});
</script>
<body>
<nav>
<ul>
<li id="home"><a href="#" >HOME</a></li>
<li id="about"><a href="#" >ABOUT</a></li>
<li id="contact"><a href="#" >CONTACT</a></li>
</ul>
</nav>
<div class="home">THIS IS HOME </div>
<div class="about">THIS IS ABOUT</div>
<div class="contact">THIS IS CONTACT</div>
</body>
</html>

Instead of writing this functionality on your own you could use a scrollspy plugin like Simple Scrollspy. You can check out the code on this Github repo.

responsive horizontal menu with dropdown menus

I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>

Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();

Jquery show different data-id per each li on mouseover

I'm trying to make a menu to my website. My idea is on the left side of the web the menu will appear. The menu will have X <li> and with X icon per each <li>, when my mouse is over I want to appear X data-id per each <li> + the icon.
For example:
<ul><li data-id="My Profile">ICON</li></ul>
On mouse over:
<ul><li>ICON + My Profile</li></ul>
Here I have an example that doesn't work: http://jsfiddle.net/pqa84nec/1/
Here's the JS I'm trying to use:
$("#menu").each(function() {
$(this).find('li').each(function(){
var oldData = $(this).html();
var data = $(this).attr("data-id");
var that = this;
$(this).mouseover(function() {
setTimeout(function() {
$(that).html(oldData+data);
}, 100);
});
$(this).mouseout(function () {
$(this).html(oldData);
});
});
});
Can you give me some help?
P.D.
As I can see, this code IS bugged:
Thanks!

Try this:
Javascript:
$(function() {
$("#menu ul li").each(function() {
var _this = $(this);
var icon = _this.html()
$(this).hover(function(e) {
setTimeout(function() {
_this.html(icon + _this.data('id'));
}, 200);
}, function(e) {
setTimeout(function() {
_this.html(icon);
}, 200);
})
});
});
CSS Addition:
#menu>ul>a {
overflow: hidden;
}
https://jsfiddle.net/mh4hcuw4/

You have many errors in your script Try this:
$(document).ready(function() {
$("#menu a li").each(function() {
var oldData = $(this).html();
var data = $(this).attr("data-id");
$(this).mouseover(function() {
setTimeout(function() {
console.log(oldData + data);
$(this).html(oldData + data)
}, 100);
});
$(this).mouseout(function() {
console.log(oldData);
$(this).html(oldData)
});
});
})

If you don't mind a CSS solution, here's something based on what you had. This way you don't have to rely on JavaScript to run your menu. It's nothing fancy, and there's plenty you could do to make it nicer, but it should get you started. In the fiddle I loaded the Font Awesome library to use the icons.
HTML:
<div id="menu">
<ul>
<li>
<a href="#">
<i class="fa fa-user"></i>
<span>My Profile</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-power-off"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</div>
CSS:
*{margin:0;padding:0;}
html,body {
background-color: #263238;
font-family: 'Roboto', sans-serif;
height: 100%;
}
li {
position: relative;
}
a {
text-decoration: none;
}
#menu {
background-color: #37474f;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 50px;
}
#menu ul {
list-style: none;
}
#menu > ul > li {
border-bottom: 1px solid #263238;
}
#menu > ul > li > a {
color: #263238;
display: block;
font-size: 22px;
height: 50px;
line-height: 50px;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
width: 50px;
}
#menu > ul > li > a i {
display: block;
height: inherit;
line-height: inherit;
text-align: center;
width: 50px;
}
#menu > ul > li > a span {
color: #fff;
font-size: 16px;
left: 50px;
max-width: 130px;
opacity: 0;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: absolute;
text-overflow: ellipsis;
top: 0;
transition: opacity 0.3s ease .2s;
visibility: hidden;
white-space: nowrap;
}
#menu > ul > li > a:hover {
background-color: #fbd75b;
color: #fff;
width: 200px;
}
#menu > ul > li > a:hover span {
opacity: 1;
visibility: visible;
}
And a fiddle to view: jsfiddle.net/LjLvwb8q/3/

Why can't I center my nav bar?

I am using jQuery to create a drop down nav menu and it works fine, but I can not get it to center on my page.
I have tried using align="center" in the div "menu", but that did not work. I then tried aligning it using the css for the div and the lis and uls, but that also did not work.
Here is my code
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function () {
$("#menu li").hover(function () {
$(this).children(":hidden").slideDown();
}, function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
HTML:
<div id="menu">
<ul>
<li>Home
</li>
<li>test
<ul>
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>test
<ul>
<li>drop1</li>
<li>drop2</li>
</ul>
</li>
</ul>
</div>
CSS:
#menu {
height: 30px;
background-color: #26C7FF;
margin-left: 0;
margin-right: 0;
}
#menu li li:hover {
background-color: yellow;
cursor: pointer;
}
#menu ul, #menu li {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
width: 120px;
list-style-type: none;
line-height: 30px;
text-align: center;
}
#menu li ul {
position: absolute;
background-color: #26C7FF;
display: none;
}
#menu li li {
float: none;
padding: 2px;
}
#menu a {
color: #000;
text-decoration: none;
}

Use display:inline-block; instead of floating the li elements and then use text-align:center; for the container ul.
#menu > ul > li {
display: inline-block;
}
Here is a working example:
http://codepen.io/taneleero/pen/MwojLV

Wrap it in a container that has a max-width of whatever width you'd like your menu to be:
.container {
max-width: 600px; // Or whatever
width: 100%;
margin: 0 auto;
}
#menu {
height: 30px;
background: #26C7FF;
}
<div class="container">
<div id="menu">
</div>

Please check this code. I think this is what you wanted.
< script type = "text/javascript" >
$(document).ready(function() {
$("#menu li").hover(function() {
$(this).children(":hidden").slideDown();
}, function() {
$(this).parent().find("ul").slideUp();
});
}); < /script>
#menu {
height: 30px;
background-color: #26C7FF;
margin-left: 0;
margin-right: 0;
}
#menu li li:hover {
background-color: yellow;
cursor: pointer;
}
#menu ul,
#menu li {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
}
#menu li {
float: none;
width: 120px;
list-style-type: none;
line-height: 30px;
text-align: center;
display: inline-block;
}
#menu li ul {
position: absolute;
background-color: #26C7FF;
display: none;
left: 0;
right: 0;
}
#menu li li {
float: none;
padding: 2px;
}
#menu a {
color: #000;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="menu">
<ul>
<li>Home
</li>
<li>test
<ul>
<li>drop1
</li>
<li>drop2
</li>
<li>drop3
</li>
</ul>
</li>
<li>test
<ul>
<li>drop1
</li>
<li>drop2
</li>
</ul>
</li>
</ul>
</div>
this is the JSFIDDLE link

Since you're setting your ordered list tags at a fixed width, the following css should fix your problem.
#menu ul {
width: 369px;
margin: 0 auto;
}
Here's a working jsfiddle.

Nav dropdown hover flicker problems when reloading page with cursor over the tab

I have a problem with my dropdown Navbar it doesn't do it all the time. But if I reload the page and keep the cursor over the tab it will sometimes start flickering and flashing and the hover seem to mess up.
I have made a JSfiddle DEMO, but the dropdown isn't working on it not sure why I will also provide the code and webpage link were the dropdown does work.
Webpage Link Here. with kinda working dropdown.
HTML
<div style="padding-top:15px;">
<a class="toggleMenu" href="#">Menu</a> <!-- Mobile Nav -->
<ul class="nav">
<li>
refresh and keep cursor here
<ul>
<li>
somthing
<ul>
<li>Nothing</li>
<li>Nothing</li>
<li>Nothing</li>
</ul>
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
</ul>
</li>
</ul>
</div> <!-- Container-Nav End -->
<div style="background:#333; width:100%; height:500px;"></div>
CSS
.nav-wrapper {
max-width:1300px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.container-nav {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-top:18px;
padding-left: 20px;
}
.toggleMenu {
display: none;
background-color: #455357;
width: 35%;
padding: 15px 40px;
border-radius: 3px;
font-weight: 600;
font-size: 16px;
color: #fff;
float: right;
text-align: right;
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
display: block;
text-transform: uppercase;
color: #788083;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.02em;
transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.nav a:hover {
color:#d54572;
text-decoration: none;
}
/* first sub hover colors */
.nav li a:hover {
background: none;
}
/* second sub hover colors */
.nav li li a:hover {
background: #999;
}
/* active tab colors */
#active {
color:#d54572;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
/* first sub menu */
.nav li li a {
width: 127px;
background: #666;
color:#fff;
position: relative;
z-index:500;
border: 1px inset #fff;
display: block;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin-left:-40px;
}
/* second sub menu */
.nav li li li a {
background:#777;
z-index:500;
}
Javascript
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 801) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 801) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}

Develop Reference

JavaScript is the programming language of the Web.

animate item while other has class JQuery - javascript

Related

How can I auto scroll to the next possible div and update the top nav control with it?

responsive horizontal menu with dropdown menus

Jquery show different data-id per each li on mouseover

Why can't I center my nav bar?

Nav dropdown hover flicker problems when reloading page with cursor over the tab

Categories

Resources