jquery toggle append remove - javascript

Here is a menu with submenu. I need that when I click on the submenu item, submenu text toggle beside menu item "Everyday". Like the image below
(function($) {
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
$(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>');
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Everyday
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>
This is what I'm trying, but its does not work.


You can use Javascript's join & jQuery's - hasClass & toggleClass methods with on('click') event like this:
See jsFiddle
or see the code snippet below:
$(function() {
$('.menu .sub-menu li a').on('click', function(e) {
$(this).toggleClass('selected');
var txt = $('#title').text();
var total_len = $('.menu .sub-menu li').length;
var count = 0;
var values = [];
$('.menu .sub-menu li a.selected').each(function(i) {
values.push($(this).text());
count++;
});
if(count == total_len) {
txt = "Every Day";
} else {
txt = "Every " + values.join(',');
}
$('#title').text(txt);
});
})
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
.menu .sub-menu li a.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
<a id="title" href="#">Every </a>
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>


(function($) {
$(".menu .sub-menu li a").on("click", function() {
var $this = $(this);
if (this.hasAttribute("data-selected")) {
$this.removeAttr("data-selected");
} else {
$this.attr("data-selected", 'true');
}
$this.closest(".menu").find(" > li > a").html(fillButton);
});
function fillButton() {
var options = $(this).next(".sub-menu").find("li a");
if (options.filter("[data-selected]").length > 0) {
if (options.length === options.filter("[data-selected]").length) {
return "Every day";
} else {
var html = "Every ";
options.filter("[data-selected]").each(function(i, el) {
html += (i > 0) ? ", " + $(el).text() : $(el).text();
});
return html;
}
} else {
return "Never";
}
}
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a[data-selected] {
background: #f0f0f0;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Never
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>


Check this fiddle.
Change JS as below and add schedule class to the "Everyday" anchor.
(function($) {
var currentValue = [];
function renderValue(){
var content = "Everyday ";
$('.schedule').text(content + currentValue.join(' '));
}
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var el = $(this),
id = el.attr('data-id');
currentValue[id] = currentValue[id] ? undefined : el.text();
renderValue();
});
});
})(jQuery);


You can try this as well. you will have to check if the appended span in the days list is equal to total days.
(function($) {
$(".menu").children("li").children("a.all").hide();
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var li = $(this).closest(".menu").children("li");
if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) {
li.children("a.days").hide();
li.children("a.all").show();
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.all").hide();
li.children("a.days").show();
if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) {
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.days").children("span:contains('" + dayName + "')").remove();
}
}
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Every
Everyday
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

Related

Active Scrolling On single page Website Not working

im trying to find solutions but i cant.
my scrolling spy is not working
this is the navigation html.
<nav class="menu">
<ul>
<li><a class = "active" href="#" data-scroll = "home">Home</a></li>
<li>About</li>
<li>Our Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
My nav CSS JUST INCASE because i think there is a problem with the CSS but on thewebsite it appears just fine and the hover and active effects are working but not the on-scroll.
.menu{
z-index: 100;
position: fixed;
top: 0;
left: 25%;
width: 50%;
overflow: hidden;
background-color: transparent;
/* padding: 20px 0; */
}
.menu ul{
margin: 5px;
padding: 0;
text-align: center;
}
.menu ul li{
list-style: none;
margin:0 20px ;
display: inline;
}
.menu ul li a {
color: black;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
text-decoration: none;
padding: 3px 8px;
transition: 0.5s;
}
.menu ul li a.active{
border-bottom: 1px solid black;
border-top: 1px solid black;
color: #FFC300 ;
}
.menu ul li:hover{
border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
background: yellow;
}
And mY jquery/javascript. I am new to working with Jquery so i'm not too sure if this code is correct and most of the code online is not working for me.
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.content section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a ').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a.first').addClass('active');
}
}).scroll();
Anyone with some good advice or a tutorial i can refer to?

Why isn't my code changing the div colour?

var el = document.querySelectorAll('.gange-color ul li'),
colorLesit = [],
i;
for (i = 0; i < el.length; i++) {
colorLesit.push(el[i].getAttribute('datacolor'));
el[i].addEventListener('click', function() {
document.body.classList.remove('red', 'green', 'purbal', 'black');
document.body.classList.add(this.getAttribute('datacolor'));
})
}
* {
box-sizing: border-box;
}
.gange-color {
margin-left: 40%;
}
ul li {
display: inline-block;
list-style: none;
width: 30px;
height: 30px;
margin: 30px auto;
cursor: pointer;
}
ul li:first-child {
background-color: red;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: purple;
}
ul li:last-child {
background-color: black;
}
*emphasized text* h3 {
color: red;
font-size: 19px
}
.contant {
background-color: red;
padding: 30px;
}
.contant h4 {
color: white;
font-size: 17px
}
<head>
<title>cangecolor</title> `
</head>
<body>
<div class="gange-color">
<ul>
<li datacolor='red'></li>
<li datacolor='green'></li>
<li datacolor='purbal'></li>
<li datacolor='black'></li>
</ul>
</div>
<h3>TWFSRG</h3>
<div class="contant">
<h4>TESTINH</h4>
</div>
</body>

Because you have not defined css styles for body e.g
body.green {
background-color: green;
}

responsive navigation hide move items to dropdown when space runs out in plain javascript

I have a navigation of lets say 7 items, and when resolution gets smaller items drop in a new line. I need to make that when an item doesn't fit on a navigation anymore it should put a "MORE" dropdown button on the right side of nav. and put that item that doesn't fit in a dropdown.
I need in plain javascript not in jquery.
$(document).ready(function() {
function calcWidth() {
var navwidth = 0;
var morewidth = $('#main .more').outerWidth(true);
$('#main > li:not(.more)').each(function() {
navwidth += $(this).outerWidth( true );
});
var availablespace = $('#Mainbar').width() - morewidth;
if (navwidth > availablespace) {
var lastItem = $('#main > li:not(.more)').last();
lastItem.attr('data-width', lastItem.outerWidth(true));
lastItem.prependTo($('#main .more ul'));
calcWidth();
} else {
var firstMoreElement = $('#main li.more li').first();
if (navwidth + firstMoreElement.data('width') < availablespace) {
firstMoreElement.insertBefore($('#main .more'));
}
}
if ($('.more li').length > 0) {
$('.more').css('display','block');
} else {
$('.more').css('display','none');
}
}
$(window).on('resize load',function(){
calcWidth();
});
});
#nav-main {
*zoom: 1;
}
#nav-main:before,
#nav-main:after {
display: table;
content: "";
}
#nav-main:after {
clear: both;
}
#Mainbar {
clear: both;
position: relative;
width: 100%;
}
#Mainbar > ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
z-index: 5;
}
#Mainbar > ul > li {
background: none;
float: left;
font-size: 14px;
margin-bottom: 0;
padding-left: 0;
position: relative;
text-transform: uppercase;
}
#Mainbar > ul > li.hidden {
display: none;
}
#Mainbar > ul > li:hover {
background: #f00;
}
#Mainbar > ul > li:hover ul {
display: block;
}
#Mainbar a {
display: block;
opacity: 0.75;
padding: 15px;
}
#Mainbar a:hover {
opacity: 1;
}
#Mainbar ul ul {
display: none;
list-style: none;
margin: 0;
padding: 15px 0 0;
position: absolute;
top: 100%;
right: 0;
}
#Mainbar ul ul a {
margin-bottom: 15px;
padding: 0 15px;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<nav id="Mainbar">
<ul id="main">
<li class="selected">Home</li>
<li>home</li>
<li>about</li>
<li>contact</li>
<li>product</li>
<li>FAQ's</li>
<li class="more hidden" data-width="80">
More
<ul></ul>
</li>
</ul>
</nav>

On ready position of specific class for li

I code this page that I want to navigate in a li menu by the wheelmouse. My question is: I want the li with the class selected was in the first position on the left.
How can I do to make the specific li with the class selected at this position using jquery code?
$(document).ready(function() {
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});
#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>
Like this :
image
I tried this :
$("#menu").css("left", $(".selected").css("left"));
But it's not work
Please help me

Try this in $("#menu ul li.selected").prependTo("#menu ul");
$(document).ready(function() {
$("#menu ul li.selected").prependTo("#menu ul");
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});
#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>

I found the answer
We must add this :
var pos = $("li.selected").position();
$("#menu").css("left", pos);

Stick second level navigation onclick

I have this 2 level navigation. If I click on second level it should not hide, but stick there. On hover, second level is showing properly, now what I want is, is I click on sub 2 and move my cursor out, the sub 2 should be selected and stay there.
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
});
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 13px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 13px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #000;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #ccc;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #ccc;
color: #FFF;
}
#top_navigation li li {
height: 30px;
line-height: 30px;
border-top: #ccc 1px solid;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<div id="top_navigation">
<ul>
<li>item1</li>
<li>item2
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
<li class="selected_menu_item">sub3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Try this:
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
if( ! $('ul', this).children().hasClass('show')) {
$('ul', this).slideUp('fast');
} else {
$('#top_navigation ul').click(function(){
$('ul.submenu').slideUp();
})
}
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
$('ul.submenu li').click(function(){
$('ul.submenu li').removeClass('selected_menu_item')
$(this).addClass('selected_menu_item show')
});
});
Working Fiddle: https://jsfiddle.net/co7u8L23/2/

$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
var $nav1 = $('#top_navigation > ul > li >ul >li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
$nav1.click(function(){
$(this).addClass("selected_menu_item");
}
);
});
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 13px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 13px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #000;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #ccc;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #ccc;
color: #FFF;
}
#top_navigation li li {
height: 30px;
line-height: 30px;
border-top: #ccc 1px solid;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<div id="top_navigation">
<ul>
<li>item1</li>
<li>item2
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
<li class="selected_menu_item">sub3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have added click event in your code.This is running snippest of it

Categories