I am working on a submenu for a nav that I need to be accessible for mobile and tablet devices. I am aware that using onClick="return true" will do the trick, however, I also need my list item to close when the user clicks on the list item. Basically I need it to toggle the submenu. If I add this simple line of Javascript, it will work but the submenu will always remain open. How can I get it to close/toggle the submenu?
HTML:
<nav>
<ul>
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li class="bg"><a class="dropdown" href="#">Menu 4</a>
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
</nav>
Javascript:
$('nav li.bg').on('click', function(){
return true;
}
You can use touchstart event which fires on mobile browsers.
$('nav li.bg').on('click touchstart', function(){
return true;
});
More touch based events
A virtual method for p click:
$('p').on("touchstart",p_touch_start);
$('p').on("touchmove",p_touch_move);
$('p').on("touchend",p_touch_end);
function p_touch_start(){
p_touch_move.cancel_click = false;
}
function p_touch_end(){
if(p_touch_move.cancel_click) return;
p_touch_move.cancel_click = true;//avoid somehow repeat call
//trigger onclick()
}
function p_touch_move(){
//user is drag page, not click
p_touch_move.cancel_click = true;
}
I figured out the issue after some researching and help. Here is what was updated in my code to trigger this on mobile devices correctly after some updating of my CSS as well:
function is_touch_device() {
return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
if(is_touch_device()) {
$('.bg').on('click', function(){
$(this).toggleClass('activate');
$(this).find('ul').slideToggle();
return false;
});
}
Related
I have a layout for my web application, which loads different menu items based on which language the user has configured on his/her profile and if the user isn't logged in, they also get different links. The list of items is returned to each view.
The problem occurs when I try to combine this with javascript, to make the currently visited link active.
Each time the layout is loaded the menu is overwritten with the following code
#foreach (var item in ViewBag.LoggedIn)
{
<li>#item.Text</li>
}
I tried to use the following code to make the links active.
$('li > a').click(function () {
$('li').removeClass();
$(this).parent().addClass('active');
});
All help will be greatly appreciated.
I suggest you try to render the menu based on the current url and set the active at the moment of rendering:
string url = HttpContext.Current.Request.Url.AbsoluteUri;
// http://localhost:1302/TESTERS/Default6.aspx You can conviniently get a substring of this
#foreach (var item in ViewBag.LoggedIn)
{
#if (item.Url == url)
{
<li class="active">#item.Text</li>
}
else
{
<li>#item.Text</li>
}
}
You need to remove the active class if present on any li and then add active to the clicked one.
$('li > a').click(function (e) {
e.preventDefault();
$('li').removeClass('active')
$(this).parent().addClass('active')
})
.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</div>
I have a main menu.
The sub-menu opens when the link of any of the PARENT <li> that have children is clicked.
At this point, a class moves-out is added to the main menu and a CSS transition is started.
After the transition ends, the sub-menu is displayed.
The sub-menu contains the clicked <li> (if clicked again will take us back to the main menu) and it's children.
Here, my goal is to disable the click event on the parent <li> for 1 second,
then after this 1 second give it back the ability to be clicked so we can go back to the main menu.
An example of the navigation would be :
<ul class="main-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<span>PARENT</span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
And so on...
</ul>
</li>
</ul> <!-- .main-nav -->
The only way that worked for me was to hide/show the PARENT when the main menu has the moves-out class added to it like so :
$('.subnav-trigger').on('click', function(event) {
event.preventDefault();
if ($('.main-nav').hasClass('moves-out')) {
var $this = $(this);
$this.hide();
setTimeout(function(){
$this.show();
}, 1000);
}
}
I've tried A LOT off things, this is the only one that is near to my goal.
Instead off $this.hide(), $this.off('click') is working
but inside the setTimeout what ever I do to regain the click doesn't work.
Any help would be greatly appreciated.
NOTE : I want this to prevent fast click/re-click. Don't forget the transition ;)
Thanks again in advance for any help.
SYA :)
Try setting pointer-events on the li tag and resetting it after 1 second.
$('.subnav-trigger').on('click', function(event) {
event.preventDefault();
var $this = $(this);
$this.parent().css("pointer-events","none");
if ($('.main-nav').hasClass('moves-out')) {
$this.hide();
setTimeout(function(){
$this.show();
$this.parent().css("pointer-events","auto");
}, 1000);
}
});
Here's a way using a recursive function that enabled the click handler, disables it on click, enables the transitionend event, adds your class that enables the transition, then re-enables the function. Enabled a 3s transition to slow it down for the example.
var $lis = $('li'),
clicker = function() {
$lis.on('click', function() {
$lis.off('click');
$(this).on('transitionend', function() {
clicker();
}).addClass('color');
});
}
clicker();
li {
transition: background 3s;
}
li.color {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
More like a debounce problem, you might want to take a look at it if you have not used it before, it will help a lot in design you code.
For the following example, I added moves-out to ul for testing, you can check the console.log to see the result. To use in your app don't forgot to remove it (moves-out) from the <ul...>
<ul class="main-nav moves-out">
function debounce() {
if ($('.main-nav').hasClass('moves-out')) {
console.log("Clicked - click event Disabled..");
$(this).off('click');
setTimeout(function() {
$(".subnav-trigger").on('click', debounce);
console.log("click event enabled!");
}.bind(this), 1000);
}
};
$(".subnav-trigger").on('click', debounce);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="main-nav moves-out">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<span>PARENT</span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
And so on...
</ul>
</li>
</ul>
<!-- .main-nav -->
I have a problem regarding jQuery. I want to make a responsive drop-down menu with sub-menus. If the window width is less than 700px the submenus will trigger onClick. If the window is wider than 700px the submenus will triger onHover.
The window.resize code is there to make the change when I resize the window, without refreshing the page. It works, but the problem is that if I click/hover any of the two links with nested sub-list it opens ALL the nested lists. Other than that works as it should.
This is the Html code (the .navLevel2 class has display: none):
<div class="mainNav">
<ul class="navLevel1">
<li>link 1</li>
<li class="fakeLink">link 2
<ul class="navLevel2">
<li>link 2.1</li>
<li>link 2.2</li>
</ul>
</li>
<li class="fakeLink">link 3
<ul class="navLevel2">
<li>link 3.1</li>
<li>link 3.2</li>
</ul>
</li>
<li>link 4</li>
</ul>
</div>
And this is the jQuery:
<script>
$(document).ready(function(){
function checkWidth() {
var windowsize = $(window).width();
if (windowsize < 700) {
$('.navLevel1').addClass('small');
$('.fakeLink').attr('onclick','return click_m()');
} else {
$('.navLevel1').addClass('big');
$('.fakeLink').attr('onmouseover','return toggle_m()').attr('onmouseout','return toggle_m()');
}
}
checkWidth(); // Execute on load
$(window).resize(function() {
if($(window).width() < 700) {
$('.mainNav > ul').removeClass('big');
$('.mainNav > ul').addClass('small');
$('.fakeLink').attr('onclick','return click_m()');
$('.fakeLink').removeAttr('onmouseover','return toggle_m()').removeAttr('onmouseout','return toggle_m()');
}
else if($(window).width() > 700) {
$('.mainNav > ul').removeClass('small');
$('.mainNav > ul').addClass('big');
$('.fakeLink').attr('onmouseover','return toggle_m()').attr('onmouseout','return toggle_m()');
$('.fakeLink').removeAttr('onclick','return click_m()');
}
}) // window.resize
}) // document.ready
</script>
The trigers, written in header:
function click_m(){
$('.fakeLink > ul').slideToggle(300);
}
function toggle_m(){
$('.fakeLink > ul').stop().slideToggle(300);
}
So, the problem is:
If I hover/click on Link 2, it opens ALL the nested lists. Same if click/hover the Link 3.
Where is the problem, because I can't find the bug.
Thank you!
I think you need to change your click_m function to target the specific element that's being clicked. I tried this:
function click_m($target){
$($target).children().slideToggle(300);
}
and had the script call:
$('.fakeLink').attr('onclick','return click_m(this)');
which seems to work. You can see it here: Codepen Example
You'd then just duplicate the concept with the hover versions.
The selector .fakeLink > ul in your trigger -
function click_m(){
$('.fakeLink > ul').slideToggle(300);
}
function toggle_m(){
$('.fakeLink > ul').stop().slideToggle(300);
}
will try to find all <ul> under the class .fakeLink, and thus all of them show.
You can use next() to just select the very next <ul> and I believe that should work. So -
function click_m(){
$('.fakeLink').next('ul').slideToggle(300);
}
function toggle_m(){
$('.fakeLink').next('ul').stop().slideToggle(300);
}
Not tested.
The submenu on each menu item slides underneath the main menu item instead of sliding out whenever I click on a menu item, which is what it's supposed to do. Problem is the site itself automatically scrolls up. Its as if the main menu items have a link to them that is anchored to the top of the site. I click on them, the submenu slide out, but the site itself scrolls up everytime.
How to make the code cross-browser compatible?
The javascript code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
The html code:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Based off of this menu: http://www.pmob.co.uk/temp/drop-down-expand.htm#
The reason is because you have "#" in your hrefs...this is telling the browser to return to the top. You need to return false on your onclick so that the default behavior (navigating to the href) doesn't happen on the items that are not truly "links".
You can always add e.preventDefault() to the event listener to remove all hyperlink-effects after clicked.
Using preventDefault is usually more recommended.
http://jsfiddle.net/Z8Uvj/
$("a").click(function(e){
//your stuff
e.preventDefault();
});
I am having some issues figure out how i can just remove a class ="active" from a just one of my lists.
I have a navigation bar:
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I also have a menu within Home:
<div class="container_2">
<ul>
<li class="left-main-list active">Subject 1</li>
<ul class="list-in-list">
<li>Sub subject 1</li>
<li>Sub subject 2</li>
</ul>
<li class="left-main-list>Subject 2</li>
<li class="left-main-list>Subject 3</li>
</ul>
</div>
While i browse my menu on the home page, i want to change the the active list items class to active when clicked, so i now have this jQuery code:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
});
});
This works for my menu, the class change to the current one, but it also delete my navigation bars class, which i don't want. :)
I have tried something like:
$(document).ready(function() {
$('.left-main-list').click(function() {
$('.left-main-list li').removeClass('active');
$(this).addClass('active');
});
});
I've tried '.left-main-list li' & 'li.left-main-list' without any success.
Greatful for answer to this question, and i hope my question (this time) is more accurate than my previous ones. :)
/Bill
ps: Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?
While i browse my menu on the home page, i want to change the the
active list items class to active when clicked
You could just target the lis within the relevant div, similar to this:
$(document).ready(function() {
var $listItems = $('div.container_2 li');
$listItems.click(function() {
$listItems.removeClass('active');
$(this).addClass('active');
});
});
DEMO - target lis within .container_2 only
Can a sub subject AND a main subject be active at the same time, and
that sub subject's class of active, be removed if you for example
click another sub subject, but the main item still have it's class of
active?
Still targeting the container you could use jQuery's parent(), similar to this:
$(document).ready(function () {
$('div.container_2 li').click(function () {
var $this = $(this);
var $children = $this.parent().find('li');
$children.removeClass('active');
$this.addClass('active');
});
});
DEMO - Using parent() to allow active menu and sub-menu but not when main menu changes
I looked at the possibility of making this more dynamic to add activation of items going up the chain when switching between sub menus located within different main menu elements.
Fixing the HTML of the nested uls whereby your nested uls are inside lis instead of just inside the upper ul you can do a fully dynamic implementation.
Assume your HTML like this:
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container_2">
<ul>
<li class="left-main-list active">Subject 1
</li>
<li>
<ul class="list-in-list">
<li>Sub subject 1
</li>
<li>Sub subject 2
</li>
<li>
<ul class="list-in-list">
<li>Sub subject 1
</li>
<li>Sub subject 2
</li>
</ul>
</li>
</ul>
</li>
<li class="left-main-list">Subject 2
</li>
<li class="left-main-list">Subject 3
</li>
</ul>
</div>
Now, using the following script, you can also make parents of any sub menu items active when changing from a sub menu to another which is within another main menu item, similar to this:
$(document).ready(function () {
$('div.container_2 li>a').click(function () {
var $this = $(this);
var $relatedElements = $this.parents('ul').find('li');
if($this.hasClass('active')){
return;
}
$relatedElements.removeClass('active');
$this.parent('li').addClass('active');
var $parents = $this.parents('li');
$parents.each(function(){
$(this).not($this.parent()).prev().addClass('active');
});
});
});
DEMO - Chain-like activation
I think this should have all possible examples to get you started from here.
Hope this helps.
Try this:
$("li").click(function() {
$(this.parentNode).children("li").removeClass("active");
$(this).addClass("active");
});
This will affect only the siblings of the element you click on.
$('.left-main-list').click(function() {
$('.left-main-list').removeClass('active');
$(this).addClass('active');
});
I think what you're looking for is this:
$(document).ready(function() {
$('li').click(function() {
$('li.left-main-list').removeClass('active');
$(this).addClass('active');
});
});
How about
$('li').on ('click', function (){
$(this).addClass ('active').siblings ('li').removeClass ('active');
})