I have menus in 'ul, li' how can I disable the parent menu using JavaScript? I want to stop redirect for parent menu and only child menu will get redirected
I cannot add class or id in the html to disable the parent menu. is there any way that will help to stop redirect using JavaScript?
Following is my HTML code:
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
https://api.jquery.com/event.stoppropagation/
$(child).on("click", function(event) {
// TODO
event.stopPropagation();
});
Based on what I understood, you want to disable all firstLevel links except links also under secondLevel. As requested I have not touched the HTML and the javascript will do all the work by itself.
SEE COMMENTS FOR STEP-BY-STEP EXPLANATION:
$(function() {
$(".firstLevel").find('a').each(function() {
// this is all link elements under element with class firstlevel
if ($(this).parents('.secondLevel').length) {
// this is all link elements which also is under element with class secondLevel
$(this).click(function() {
//don't disturb the event here. feel free to remove the below alert as well.
alert("this link will work");
});
} else {
// this is all link elements under a firstLevel element but not a secondLevel element
$(this).click(function() {
// we shud block this click. we will return false so that jQuery will internally call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
alert("this link will not work");
return false;
});
}
});
});
WORKING SNIPPET EXAMPLE: (note that the HTML is same as you posted. no changes were made there, only the above javscript was added!)
$(function() {
$(".firstLevel").find('a').each(function() {
if ($(this).parents('.secondLevel').length) {
$(this).click(function() {
alert("this link will work");
});
} else {
$(this).click(function() {
alert("this link will not work");
return false; //this will call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
Related
I'm creating a menu with images showing on hover based on the item hovered, managed to achieve the showing and hiding part but need to achieve a few other things which I can't seem to get which are:
When hovering on submenu item, hide the main menu image
When hovering on a submenu item that does not have an image, have the main menu image of that section show.
I have the following code as well as a codepen here https://codepen.io/cr8tivly/pen/LYpXVGx
Thanks
HTML
<div class="container mx-auto position-relative">
<ul class="main-menu col-6">
<li class="nav-item parent-menu border">
<a class="" href="">menu-1</a>
<div class="parent-image">
<img class="main-image" src="http://placehold.it/150/f91?text=Parent-1" alt="" />
</div>
<ul class="child-menu">
<li class="nav-item">
smenu-1
<div class="child-image">
<img class="" src="http://placehold.it/100/ggd" alt="" />
</div>
</li>
<li class="nav-item">
smenu-2
<div class="child-image">
<img class="" src="http://placehold.it/100/cdd" alt="" />
</div>
</li>
<li class="nav-item">
smenu-3
<div class="child-image"></div>
</li>
</ul>
</li>
<li class="nav-item parent-menu">
menu-2
<div class="parent-image">
<img class="main-image" src="http://placehold.it/150/green?text=Parent-2" alt="" />
</div>
<ul class="child-menu">
<li class="nav-item">
smenu-1
<div class="child-image">
<img class="" src="http://placehold.it/100/e00" alt="" />
</div>
</li>
<li class="nav-item">
smenu-2
<div class="child-image">
<img class="" src="http://placehold.it/100/dbb" alt="" />
</div>
</li>
<li class="nav-item">
smenu-3
<div class="child-image"></div>
</li>
</ul>
</li>
</ul>
</div>
JS/JQuery
$('.parent-image').hide();
$('.parent-menu').hover(
function(){
$(this).find('.parent-image').show();
},
function() {
$(this).find('.parent-image').last().hide();
}
);
$('.child-image').hide();
$('.child-menu .nav-item').hover(
function(){
$(this).find('.child-image').show();
$(this).find('.child-image:empty', function(){
$('.parent-image').show();
})
},
function() {
$(this).find('.child-image').last().hide();
}
);
CSS
.parent-image,
.child-image {
position: absolute;
right: 0;
top: 0;
}`
Try following code:
$('.parent-image').hide();
$('.parent-menu').hover(
function(){
$(this).find('.parent-image').show();
},
function() {
$(this).find('.parent-image').last().hide();
}
);
$('.child-image').hide();
$('.child-menu .nav-item').hover(
function(){
$(this).find('.child-image').show();
$(this).closest('.parent-menu').find('.parent-image').hide();
let childImage = $(this).find('.child-image img');
console.log(childImage.length);
if(childImage.length==0) {
$(this).closest('.parent-menu').find('.parent-image').show();
}
else {
$(this).closest('.parent-menu').find('.parent-image').hide();
}
/* $(this).find('.child-image:empty', function(){
$('.parent-image').show();
}) */
},
function() {
$(this).find('.child-image').last().hide();
}
);
I'm trying to use jQuery to hide and show a div when the link in inside the a li tag is clicked, however I can't get the DOM element.
Ousite the ul >li the script it working fine
<a class="showSingle " >All Test </a> //Work Fine
$(function() {
// $('.showSingle ul.list-inline li a').click(function () {
$('.showSingle ').click(function() {
$(this).siblings('.targetDiv ').slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
</li>
i have add jsfiddler to explain the hole issue https://jsfiddle.net/mpef13qu/4/
I don't think there is anything wrong, you were just missing the target :/
UPDATE: I've changed the code snippet
$(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$(this).parents("ul")
.siblings('.targetDiv')
.slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
here is the link
If the target is outside the ul it's not a sibling it's more like an uncle or something ;) so $(this).siblings wont work
Try this:
$('.showSingle').click(function(e){
e.preventDefault();
$('.targetDiv').slideToggle('fast')
})
Updated answer based on your markup
Since you have multiple toggle triggers and you only want to toggle the target directly after a certain trigger you can make use of $(this)
But you need to chain a few other jQuery functions to get up to the level where you can target the next target.
$('this').parent().parent().next('.targetDiv')
.next() is better than .siblings() in this situation since it returns the next sibling matching the .targetDiv selector
Here's the complete code:
$(document).ready(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$('this').parent().parent().next('.targetDiv').slideToggle('fast');
});
});
Updated fiddle https://jsfiddle.net/ywsmgd5c/
For not reloading page <a href="#"> must be written.
I've made demo for you, see it, #Ploni Almoni
I have a HTML structure like so
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
When the primary-nav li a is hovered, jQuery is to slide an image with the apopropriate data-motion attribute of the hovered #primary-nav li.
function mpSlide() {
$("#primary-nav li a").on("mouseenter", function () {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).on('mouseleave', function () {
$("#feature-images .image-field ul li").removeClass("is-open");
});
}
My console gives no errors or warning. I'm not sure what I have done here.
You can use mouseover and mouseout for this like so also you need to remove the a from your select because it doesn't have a data-rel attribute.
$("#primary-nav li").mouseover(function() {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).mouseout(function() {
$("#feature-images .image-field ul li").removeClass("is-open");
});
.is-open{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
How to display the tab selection results in same page?
I have stacked 3 tabs in my page and the resulting html pages are loaded in new page instead of loading in the same page.
I followed the below sample and its working fine till the part its explained.
https://codepen.io/jasoncluck/pen/iDcbh
I have mentioned my URL path in href attribute of anchor tag.
Ex:
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
<li ng-class="{'active': view_tab == 'tab1'}">
<a class="btn-lg" ng-click="changeTab('tab1')" href="/tabl">Tab1</a>
</li>
<li ng-class="{'active': view_tab == 'tab2'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="/tab2">Tab2</a>
</li>
<li ng-class="{'active': view_tab == 'tab3'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="/tab3"> Tab3 </a>
</li>
</ul>
and below is my router part
.when('/tabl', {
controller : 'URLController',
templateUrl : './views/URL.html'
})
I can see my controller and templateURL is loaded but in the different page.
If not possible with href then please share me ideas to follow.
(function () {
var app = angular.module('myApp', []);
app.controller('TabController', function () {
this.tab = 1;
this.setTab = function (tabId) {
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" ng-app="myApp">
<br/><br/><br/>
<h1 align="center">AngularJs Tab Example</h1>
<section ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
<li ng-class="{active:tab.isSet(4)}"><a href ng-click="tab.setTab(4)">Tab 4</a></li>
<li ng-class="{active:tab.isSet(5)}"><a href ng-click="tab.setTab(5)">Tab 5</a></li>
<li ng-class="{active:tab.isSet(6)}"><a href ng-click="tab.setTab(6)">Tab 6</a></li>
<li ng-class="{active:tab.isSet(7)}"><a href ng-click="tab.setTab(7)">Tab 7</a></li>
<li ng-class="{active:tab.isSet(8)}"><a href ng-click="tab.setTab(8)">Tab 8</a></li>
</ul>
<hr>
<div ng-show="tab.isSet(1)">
<h4>Tab 1</h4>
<h6> Description of Tab 1</h6>
</div>
<div ng-show="tab.isSet(2)">
<h4>Tab 2</h4>
<h6> Description of Tab 2</h6>
</div>
<div ng-show="tab.isSet(3)">
<h4>Tab 3</h4>
<h6> Description of Tab 3</h6>
</div>
<div ng-show="tab.isSet(4)">
<h4>Tab 4</h4>
<h6> Description of Tab 4</h6>
</div>
<div ng-show="tab.isSet(5)">
<h4>Tab 5</h4>
<h6> Description of Tab 5</h6>
</div>
<div ng-show="tab.isSet(6)">
<h4>Tab 6</h4>
<h6> Description of Tab 6</h6>
</div>
<div ng-show="tab.isSet(7)">
<h4>Tab 7</h4>
<h6> Description of Tab 7</h6>
</div>
<div ng-show="tab.isSet(8)">
<h4>Tab 8</h4>
<h6> Description of Tab 8</h6>
</div>
</section>
</div>
Demo Tab
<div ui-view></div> is the rescuer...
This will render the child state inside your parent state template.
I am new to using the ratchet framework so I am probably missing something basic. I want to use a toggle to hide a div when the toggle is off, and display it when the toggle is on. I know the toggle name changes to toggle active when it's active but the code I found from a few other posts does not seem to be working in my situation. Any help is appreciated.
Thanks
HTML
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell">
Stages
<div id="toggle1" class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
Javascript
if(document.getElementById("toggle1").className == 'toggle active')
{
$('#Stage1').show();
}
else
{
$('#Stage1').hide();
}
you should use a handle to show/hide your element.
visit this link http://www.w3schools.com/jquery/jquery_hide_show.asp
check this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var status = 'show';
function change()
{
if(status == 'show')
{
document.getElementById("toggle1").style.display = 'none';
status = 'hide';
}
else
{
document.getElementById("toggle1").style.display = 'block';
status = 'show';
}
}
</script>
</head>
<body>
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell" onclick="change()">
Stages (click here)
<div id="toggle1" class="toggle">this is test
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell" >
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
</body>
</html>