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.
Related
How can I make the text disappear when the menu button is clicked but then come back when you exit the menu?
My efforts
$("#menuBtn").click(function() {
if ($("ul").css("display") == "none") {
$("ul").fadeIn();
} else {
$("ul").fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="menuBtn">Click</button>
<ul>
<li>Menu</li>
</ul>
Your code works and do what you want, you are just missing parenthesis and curly brackets. Try copying this code:
$("#menuBtn").click(function() {
if($("ul").css("display") === "none") {
$("ul").fadeIn();
}
else {
$("ul").fadeOut();
}
})
//Fade out when the mouse leaves the menu
$("ul").mouseleave(function() {
$("ul").fadeOut();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Menu button</button>
<ul style="display: none">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
You can set one extra class (hidden) to html element that you want to hide in order to detect if it is hidden or not. Then you can use fadeIn() and fadeOut () base on html element state.
$(document).ready(function(){
$(".btn1").click(function(){
if ($("ul").hasClass("hidden")) {
$("ul").removeClass("hidden").fadeIn();
}
else {
$("ul").addClass("hidden").fadeOut();
}
});
});
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 would like to add a functionality to the original jQuery Sortable Connect List example at: http://jqueryui.com/sortable/#connect-lists
Since my second list (#sortable2) is kind of large... I would like to be able to scroll the page down and once I found the item that I need to select/move... just Double.Click on it in order to move it to the other list.
I need to move the items (li) from #sortable2 to #sortable1 as well as from #sortable1 to #sortable2. The idea is just to Double-Click and not Dragging.
THANKS!
Your html
<ul id="sortable1" class="sortable_list connectedSortable">
<li class="ui-state-default">sortable1 Item 1</li>
<li class="ui-state-default">sortable1 Item 2</li>
</ul>
<ul id="sortable2" class="sortable_list connectedSortable">
<li class="ui-state-default">sortable2 Item 1</li>
<li class="ui-state-default">sortable2 Item 2</li>
</ul>
Only from id = sortable2 you will have the items appended to sortable1 with li.class = ui-state-default. This adds one li item at a time from sortable2 to sortable1 .
script
//attach on load
$(function() {
$("#sortable2 .ui-state-default").dblclick(function(){
$("#sortable1").append(this);
});
});
$(function() {
$("ul li").dblclick(function(){
var parentID = $(this).parent().attr('id'); //sortable1 or sortable2
if(parentID.match(/^(sortable1)$/g))
$("#sortable2").append(this);
else if(parentID.match(/^(sortable2)$/g))
$("#sortable1").append(this);
});
});
I am trying to drag an element from out site of kendoSortable and drop it into kendoSortable.
I set connectWith property of kendoSortable. But it`s not working.
In Kendo UI demo i did not find this kind of example.
Here is my Code :
<h1>Sortable</h1>
<ul id="sortable">
<li class="list-item">Apples</li>
<li class="list-item">Grapefruits</li>
<li class="list-item">Bananas</li>
</ul>
<h1>Dragable</h1>
<ul id="dragable">
<li class="list-item">D1</li>
<li class="list-item">D2</li>
<li class="list-item">D3</li>
</ul>
<script>
$("#sortable").kendoSortable({
connectWith: "#dragable",
placeholder: function placeholder(element) {
return $("<li class='list-item' id='placeholder'>Drop Here!</li>");
},
});
$("#dragable li").kendoDraggable({
hint: function () {
return $("<li class='list-item' id='placeholder'>GOOOOOO!</li>");
}
});
$("#sortable").kendoDropTarget({
dragenter: function () {
console.log("enter");
},
dragleave: function () {
console.log("leve");
},
drop: function (e) {
}
});
</script>
In dojo.telerik
Given your two lists:
<h1>Sortable</h1>
<ul id="sortable">
<li class="list-item">Apples</li>
<li class="list-item">Grapefruits</li>
<li class="list-item">Bananas</li>
</ul>
<h1>Dragable</h1>
<ul id="dragable">
<li class="list-item">D1</li>
<li class="list-item">D2</li>
<li class="list-item">D3</li>
</ul>
and assuming that you want to copy it from the second (#draggable) into the first (#sortable), what you should do define connectWith in the second (origin of the copy):
$("#sortable").kendoSortable({
placeholder: function placeholder(element) {
return $("<li class='list-item' id='placeholder'>Drop Here 1!</li>");
}
});
$("#dragable").kendoSortable({
connectWith: "#sortable",
placeholder: function placeholder(element) {
return $("<li class='list-item' id='placeholder'>Drop Here 2!</li>");
}
});
Also important to note that placeholder probably be defined in both. The first is used when you move from this list while the second is used when the origin is in the second list (no matter if the drop is the first or the second).
You can see it here: http://dojo.telerik.com/#OnaBai/oJIy
i am having some trouble with the menu bar on this website: http://www.re-generation.ro/ro/campanii/minerit-aurifer .
Now, the second li element is active. What i want to do, is that on hover over any other li element in the menu, the class of the current active li element becomes blank and on on hover out, it becomes active again. If you visit the link you can easily understand what i what.
If you need any information pls ask.
thank you in advance!
My code:
var lis = document.getElementsByTagName('ul');
for (var i=0, len=lis.length; i<len; i++){
lis[i].onmouseover = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = '';
var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]);
ul.className = '';
};
lis[i].onmouseout = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = 'active';
};
};
EDIT: Thank you all for your answers! That really helped!
The first thing you probably want to do is assign two different states/classes: active and current. One tells you which one should be shown, and the other actually toggles the visibility.
$('#menu').on('mouseover', '> li', function(e) {
# attach hover event to the menu, and check which LI you are hovering
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').removeClass('active');
}
}).on('mouseout', '> li', function (e) {
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').addClass('active');
}
});
Here you are selecting just the direct descendants and updating the class, provided it's not the currently active list item.
HTML:
<ul id="menu">
<li>Item 1</li>
<li class="current active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JavaScript:
$('#menu li').on('mouseover', function() {
var li$ = $(this);
li$.parent('ul').find('li').removeClass('active');
li$.addClass('active');
})
.on('mouseout', function() {
var li$ = $(this);
li$.removeClass('active');
li$.parent('ul').find('li.current').addClass('active');
});
DEMO
I would use JQuery for this. Something like this:
$('li').hover(function(){
$('li.active').removeClass('active').addClass('normal');
});
$('li').mouseleave(function(){
$('li.normal').removeClass('normal').addClass('active');
});
What you're missing is a way to remember what the default state is. Here is my answer, and a Fiddle
HTML:
<ul class="menuWithDefault">
<li>Link One</li>
<li class="active">Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
Javascript:
$(".menuWithDefault").each(function() {
var defaultItem = $(this).find(".active").first();
$(this).find("li").hover(function() {
defaultItem.toggleClass('active', false);
$(this).toggleClass('active', true);
}, function() {
$(this).toggleClass('active', false);
defaultItem.toggleClass('active', true);
});
});
$(document).ready(function(){
$('li').hover(function(){
$(this).addClass('active').siblings().removeClass('active')
});
});
li.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>