Menu is initially open on page load, should be closed until clicked - javascript

This may be a silly question but I cannot figure out why my menu displays when the page is loaded. I would like to have it closed and then opened when it is clicked but it is the other way around and I can't seem to fix it.
<html>
<head>
<script>
$(document).ready(function () {
$('#nav p')
.css({ cursor: "pointer" })
.on('click', function () {
var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
$(this).text(txt);
$(this).next('ul').toggle();
})
});
</script>
</head>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>


$(document).ready(function(){
$('#nav p')
.css({cursor: "pointer"})
.on('click', function(){
var txt = $(this).text() === "MENU"?"CLOSE":"MENU"; // 3 egals verification
$(this).text(txt);
$(this).next('ul').toggle();
})
});
ul{
display: none; /* ADD this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li></ul>
</div>
</body>
</html>


You can do most of the stuff from CSS. Create .closed class and assign it to #nav.
#nav.closed > ul{
display: none;
}
That's it. You are done with minor changes in jQuery click event!
See the snippet below.
$(document).ready(function(){
$('#nav p').on('click', function(){
$(this).parent().toggleClass("closed");
});
});
#nav{
cursor: pointer;
}
#nav.closed p::after{
content : "CLOSE";
}
#nav p::after {
content: "MENU";
}
#nav.closed > ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
<p></p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>

Related

How to make Tab loop using JQuery and JavaScript?

I have created a tab using JQuery and JavaScript. It's working fine but I need one modification on that.
I want a tab loop type like once we reached the last one it should go to the first tab when I click the next button. but now it's not looping. I tried so many types but I am not getting the output what I expected. I have added my code here. anyone helps me to fix this.
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault(), $("li.active").next("li").trigger("click");
}),
$(".previous").click(function (e) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

Check next & prev element is there
$("li.active").next("li").length)
$("li.active").prev("li").length)
$(document).ready(function () {
$(document).ready(function() {
$(".tab_content div:not(:first)").toggle(),
$(".tabs li").click(function() {
var e = $(this).index();
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function(e) {
if ($("li.active").next("li").length) {
e.preventDefault(), $("li.active").next("li").trigger("click");
} else {
e.preventDefault(), $("li:first-child").trigger("click");
}
}),
$(".previous").click(function(e) {
if ($("li.active").prev("li").length) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
} else {
e.preventDefault(), $("li:last-child").trigger("click");
}
});
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
.tabs_indicators li.active{background:red;}
.tabs li.active{color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

You just have to add 2 checks:
For the "next" case, if there is any next <li> element
For the "prev" case, if the is any previous <li> element
Just change your js like this:
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
debugger;
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

Drop down menu for posts as like twitter and facebook implemented

I tried my best to implement a drop down menu as facebook and twitter does for their statuses but couldn't get the way. I did a lot of search but find no way.
Here is my Markup:
<div class="drop">
Menu
<div class="down">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<!-- Post here !-->
</div>
<div class="drop" id="1">
Menu
<div class="down" data-url='1'>
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<!-- Post here !-->
</div>
<div class="drop">
Menu
<div class="down">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<!-- Post here !-->
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript">
$('.drop').drop();
</script>
<style type="text/css">
.drop{
display: inline-block;
padding: 5px;
background-color: #ddd;
margin: 20px;
cursor: pointer;
}
.down{
display: none;
}
</style>
I am using jQuery and here is the module:js.js
(function($){
$.fn.drop = function(){
this.each(function(){
var self = $(this);
self.on('click', function(){
$('.down').css('display', 'block');
});
});
}
})(jQuery);
With this code when I click on any of the .drop element all of the .down elements are displayed.
Sorry for any typos.
Every suggestion will be appreciated.

In script your selector is .down So, it will apply to all .down class
Try to catch just child like this
(function($){
$.fn.drop = function(){
this.each(function(){
var self = $(this);
self.on('click', function(){
self.find('.down').css('display', 'block');
});
});
}
})(jQuery);
I hope this will help you for now and in future.

CSS class not applying in the node

I am trying to add and remove class using the following script to #menuElem tag:
<script type="text/javascript">
$('#menuElem li ul').each(function (){
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function (){
$(this).removeClass("skew");
});
</script>
Ideally this should work, but not working, Can someone help?
See below the HTML that we are adding the class, you can find menuElem inside the HTML
<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont">website</div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->
<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>
</a>
<!-- Main nav -->
<nav class="main-nav inactive">
<ul id="menuElem">
<li>
<span class="antiskew">Browse Experiences</span>
<ul>
<li>
website
</li>
<li>
Local
</li>
<li>
Voluntours
</li>
<li>
Welcome website
</li>
</ul>
</li>
<li>
<span class="antiskew">Become a Member</span>
</li>
<li>
<span class="antiskew">Daily Deals</span>
</li>
</ul>

$(document).ready(function() {
$('#menuElem>li>ul').addClass("fallback browse-experience-drop-down-width");
$('#menuElem>li>a').addClass("skew");
$('#menuElem>li>ul>li>a').removeClass("skew");
});

$(document).ready(function () {
$('#menuElem li ul').each(function () {
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function () {
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function () {
$(this).removeClass("skew");
});
});

How to load the content onclick menu?

I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?

There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}

How to highlight the Menu, when user clicks the Submenu by using php/javascript

I would like to Highlight the Menus Dynamically by using Php & javascript. Below code working for only Menu's. But I want when I click Submenu for that menu it should be Highlighted.Please check the Code once
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Please Help me. Thanks in advance.

$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
If I understood right, that's what you are looking.
BTW, you have some syntax problems.
You didn't close the <style>.
The <ul id="id"> is outside the <body>, isn't closed and apparently does nothing.
You are missing the <head>.
Final code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
});
</script>
<style>
.active {
background: #4FA9E4;
color:#FFF;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">
Company
<ul>
<li class="has-parent">a</li>
<li class="has-parent">b</li>
</ul>
</li>
<li class="has-sub">
Patners
<ul>
<li class="has-parent">c</li>
<li class="has-parent">d</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>

Categories