We Keep Coding

Layout with dynamic menu

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>

After link's first click, make link unclickable, wait for transition end + 1s, then make link clickable again

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 -->

Hamburger menu from an array

I need help with my code for a hamburger menu. I need to use this array to create the menu elements in jquery:
var menu = [{
'title': 'Save',
'onclick': function() {
alert('Open clicked');
}
}, {
'title': 'Load',
'onclick': function() {
alert('Close clicked');
}
}, {
'title': 'Hide menu',
'onclick': function() {
//put a code to close menu
}
}];
Here is what I have so far and I need to use the array above to update it to work with the array.
jQuery
$(document).ready(function() {
$('#menulink').click(function(event) {
event.preventDefault();
if($('.navigation-wrapper').hasClass('show-menu')) {
$('.navigation-wrapper').removeClass('show-menu');
$('.navigation').hide();
$('.navigation li').removeClass('small-padding');
} else {
$('.navigation-wrapper').addClass('show-menu');
$('.navigation').fadeIn();
$('.navigation li').addClass('small-padding');
}
});
});
HTML
<a id="menulink" href="#">
<div class="hamburger-wrapper">
<div class="inner-hamburger-wrapper">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
<div class="menu-title"><p>Menu</p></div>
</div>
</a>
<ul class="navigation">
<li>Home</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
</ul>
It would be nice to get any help that I can.

Using jQuery .append() you can append the array items to a list for creation.
We have to target the functions seperately, but included is a solution where you could put them inline, if you converted the menu[i] items to strings.
// Generate an element, append index to referencing the executing function
$.each(menu, function(index, element) {
$('ul.navigation').append('<li data-index="'+index+'">'+element.title+'</li>');
});
// Run the executing function associated with item
$('ul.navigation > li').click(function() {
var item = $(this).attr('data-index');
menu[item].onclick();
});
// This could be done easier like so:
// $.each(menu, function(index, element) {
// $('ul.navigation').append('<li data-index="'+index+'">'+element.title+'</li>');
// });
// but would require modifying the menu[i] items' functions to just be strings
Here's an updated Fiddle.

How to hide the previous li tag in jquery

I am working on a project in which I have a ul tag with 5 li.
What I want to do is that I want to show each Items one by one on the click of a button. Means as I click the button then the next item should be displayd and the previous one should be hide. as generally happens in quizes.
When We click the next button, the next question appears and the previous one hides.
I am using the following html code :
<div class="span12" style="margin-top:140px;">
<ul id="part">
<li id="div0" style="display:none;">Question id</li>
<li id="div1" style="display:none;">Question 2</li>
<li id="div3" style="display:none;">Question 3</li>
<li id="div4" style="display:none;">Question 4</li>
<li id="div5" style="display:none;">Question 5</li>
</ul>
<button id="next">Next</button>
</div>
and the jquery code is :
<script>
$(function(){
var items = $('ul#part li');
if(items.filter(':visible').length == 0)
{
items.first().show();
}
$('#next').click(function(e){
e.preventDefault();
items.filter(':visible:last').next().show();
});
});
</script>
It is showing the next items from ul on button click but I am unable to hide the previous button.
How can I hide the previous li button as I click on next.
Please help me

This should work
<script>
$(function(){
var items = $('ul#part li');
if(items.filter(':visible').length == 0){
items.first().show();
}
$('#next').click(function(e){
e.preventDefault();
var active = items.filter(':visible:last');
active.hide();
var next = active.next();
if (next.length)
next.show();
});
});
</script>
To check if next exists you should check the length.

Working on Arek's answer, change the if condition to
if (next.length) {
next.show();
} else {
$('#next').html("Submit");
}
so that the button is changed to submit.
Demo Fiddle

Var index=0;/*this should be global variable*/
('#next').click(function(e){
e.preventDefault();
items.hide();
items[index].show();
index==items.length-1?index=0:index++;
});

Set DIV to visible when hyperlink hover - CSS/HTML

I have attached a snippet of my HTML.
Is it possible if I hover over the hyperlink with ID li1link that div#li1 is displayed, and if I hover over the hyperlink with ID li2link then div#li2 is displayed. Is this easily achievable?
So I guess the default is the DIVs are set to display:hidden until that particular related link is hovered over/active.
To confirm, only one DIV will be visible at any time.
Here is my current HTML:
<ul>
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
<div id="li1">
<ul>
<li>Content 1</li>
<li>Content 1</li>
</ul>
</div>
<div id="li2">
<ul>
<li>Content 2</li>
<li>Content 2</li>
</ul>
</div>
I'm open to using jQuery or CSS, I'm just not totally sure how to approach this issue. Confused is an understatement.
Many thanks for any pointers with this.

You could try:
// for all links that have link keyword in their ids
$('a[id*="link"]').mouseenter(function(){
// get the div id out of this
var id = this.id.replace('link', '');
// hide all other divs
$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();
});
// hide when mouse moves away
$('a[id*="link"]').mouseout(function(){
var id = this.id.replace('link', '');
$('#' + id).hide();
});
To confirm, only one DIV will be visible at any time.
These lines take care of that:
$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();

$("#li1link).hover(function(){
$("#li1").attr('display','block');
});
$("#li1link).mouseover(function(){
$("#li").attr('display','none');
});
You can do similar thing when #li2link and display #li2 and hide it.

try this:
<!DOCTYPE html>
<html>
<head>
<script>
var p = {
onmouseover: function(link) {
document.getElementById(link.id.substring(0, 3)).style.display = "block";
},
onmouseout: function(link) {
document.getElementById(link.id.substring(0, 3)).style.display = "none";
}
};
</script>
</head>
<body>
<ul>
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
<div id="li1" style="display: none;">
<ul>
<li>Content 1</li>
<li>Content 1</li>
</ul>
</div>
<div id="li2" style="display: none;">
<ul>
<li>Content 2</li>
<li>Content 2</li>
</ul>
</div>
</body>
</html>

You can check it here
CSS:
#li1link, #li2link {
display: none;
}​
jQuery:
$("#li1, #li2").hover(
function () {
$('#' + $(this).attr('id') + 'link').show();
},
function () {
$('#' + $(this).attr('id') + 'link').hide();
});​

With a minor html change (adding a class to your ul) you can handle it all in 1 function,
Assumption: The a->href value and the div ID are same.
DEMO
HTML Change:
<ul class="showDivOnHover">
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
JS:
$('.showDivOnHover a').hover (function() {
$($(this).attr('href')).show();
}, function () {
$($(this).attr('href')).hide();
});

I used jQuery, tried to give you a quick solution:
http://jsfiddle.net/88nKd/
<ul id="nav">
<li>Test 1 - hover over to display ul#li1</li>
<li>Test 2 - hover over to display ul#li2</li>
</ul>
<div id="li1" class="none">
<ul>
<li>Content 1</li>
<li>Content 1</li>
</ul>
</div>
<div id="li2" class="none">
<ul>
<li>Content 2</li>
<li>Content 2</li>
</ul>
</div>
css:
.none{
display:none;
}
js:
$(document).ready(function(){
$(".liLink").mouseover(function(){
var linkNumber = $(this).attr('id');
var divNumber = '#li'+linkNumber;
$(divNumber).show();
}).mouseout(function(){
var linkNumber = $(this).attr('id');
var divNumber = '#li'+linkNumber;
$(divNumber).hide();
});
});
Cheers!

I find having a class which deals with the styles and then adding and removing those works well for me, so:
(Please note the below code will remove the class when not hovering over the link and I would recommend giving the links sensible class names to do the selector on rather than all a tags, same with the divs)
CSS:
div {
visibility:hidden; // Or display:none; or left: -999em; depending on what your page is there for.
}
div.show {
visibility: visible;
}
JS:
$('a').hover(function() {
$($(this).attr('href')).addClass('show');
}, function() {
$($(this).attr('href')).removeClass('show');
});