Is there a way i can add an additional link to an existing menu, where i don't have the ability to change the HTML of the menu , but i am granted access to add javascript/jquery to the site ?
Here is the current HTML of the menu
<div id="hsubmenu">
<ul id="hsubmenuitems">
<li>Home</li>
<li>Live Scoring</li>
<li>Standings</li>
<li>Power Rank</li>
<li>Schedules</li>
<li>Message Board</li>
<li>Playoffs</li>
<li>Players Stats</li>
<li>League History</li>
<li>Transactions</li>
</ul>
</div>
I'd like to add another menu item to the end
<li>Rosters</li>
Yep, you can do this
var li = $('<li>') //Create new li item
li.append('Rosters') //Add href
$("#hsubmenuitems").append(li); //Add this li item with href to "hsubmenuitems"
$().ready(function(){
$('<li>Rosters</li>').appendTo('#hsubmenuitems');
});
http://jsfiddle.net/jk63F/
You can edit the innerHTML of the element to append your new item.
var listElement = document.getElementById('hsubmenuitems');
listElement.innerHTML += '<li>Rosters</li>';
With jQuery the syntax is a little shorter.
$("#hsubmenuitems").append('<li>Rosters</li>');
Related
I have a page with a list of menu items consisting of internal anchors. I'm trying to add an .active class to the selected item. It seems to work on load but when clicking a new item in that same page it doesn't.
When clicking a new menu item, I would like to remove all other active classes and add this class to the clicked item.
Sounds pretty simple, but I can't make it work.
I created this Fiddle, but it doesn't show the issue correctly, since I can't add hashes to the url.
However, maybe someone can point me in the right direction.
JS:
function setActiveLinks() {
var current = location.pathname;
$('.bs-docs-sidenav li a').each(function() {
var $this = $(this);
// Get hash value
var $hash = location.href.substr(location.href.indexOf('#') + 1);
if ($this.attr('href') == '#' + $hash) {
$this.parent().addClass('active');
}
})
}
setActiveLinks();
$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
setActiveLinks();
});
HTML:
<ul class="nav bs-docs-sidenav">
<li>
Download
</li>
<li class="active">
What's included
<ul class="nav">
<li class="active">Precompiled</li>
<li>Source code</li>
</ul>
</li>
<li>
Compiling CSS and JavaScript
<ul class="nav">
<li>Installing Grunt</li>
<li>Available Grunt commands</li>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
Thanks. :-)
You have wrong selector to bind click event on anchor element. also you don't need to call setActiveLinks() function(which sets class based on href) here.
You can use context of clicked anchor element to traverse to parent li and add class active in it:
var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
$navLIs.removeClass('active');
$(this).parent().addClass('active');
});
Working Demo
Below is the code I am using. In my table, on hovering the sales column, I have a menu template tooltip that has 3 list items. When clicking on one of these li items, I want to know the table row/ index the sales column is in.
Code below:
<td>
<a href='#' class = 'sales_tooltip' data-templatename='Conifer'
data-title='<div class = "tooltip-menu">
<ul><li class="sales_rep">Sales Rep 1</li>
<li class="sales_rep">Sales Rep 2</li>
<li class="last-child sales_rep">Sales Rep 3</li>
</ul>
</div>'>
<i class = 'fa fa-male ' aria-hidden='true'></i>
</a>
</td>
I want the tr index of the row, whose li item tooltip I clicked on.
javascript code
$('body').on('click', '.tooltip-menu li.sales_rep', function() {
if(confirm("Have you chosen your sales rep?")){
var sales_rep = $(this).find("a").html();
//var $index = $(this).closest('a').closest('tr').index();
var $index = $('#'+ $(this).data('for')).closest('tr').index();
}
I tried this but this is not working, as it returns -1.
Please help
If you are using Tooltip from jQuery UI, from my experience, the actual tooltip div is generated as a sibling, not a child, of the tooltip trigger element. That means that your tooltip menu is being generated as a sibling of your anchor (a), such that when you call .closest('a'), it will not return anything since the tooltip has no parents that match that selector.
Try var index = $(this).closest('tr').index();.
i wonder why this onclick work on this div:
<div id="block-block-contact" class="block-factice expanded" onclick="sessionStorage.contactclass=this.className ">
but not on this li
<li id="dhtml_menu-1895" class="first collapsed dhtml-menu collapsed start-collapsed menu-1895" onclick="sessionStorage.menu1895=this.className">
meaning when i click on the div, it does store the contactclass variable whereas when i click on the li, it does not store the menu1895 variable
Matoeil,
Can you please check this
https://jsfiddle.net/612ee2df/
<ul>
<li id="dhtml_menu-1895" class="first collapsed dhtml-menu collapsed start-collapsed menu-1895" onclick="sessionStorage.menu1895=this.className">
Test
</li>
</ul>
jQuery
$(document).ready(function(e)
{
$('ul li').on('click',function(e)
{
var cls = $(this).attr('class');
alert(cls);
sessionStorage.menu1895 = cls;
})
})
Because I tried your code-snippet but instead of JavaScript I used jQuery & it saved the value in session storage.
another event was linked to this element.
To strip all event listeners i did
var old_element=document.getElementById("dhtml_menu-1895");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
and now it works
Here I have a list, what I want to do is I need to change the list ( li ) background color to different one after click on a specific list item. the thing is once it click on the link page will be redirected and refresh. please can me suggest a solution for to get this done?
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
what i did for this :
Java Script :
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$("#main-menu li").click(make_button_active);
}
)
CSS :
#main-menu-list li.active {
background: #0040FF;
}
It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code:
/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
// stop the link from firing
e.preventDefault();
e.stopPropagation();
// change the list item's background to green
$(this).closest('li').addClass('myClassName').css('background-color', 'green');
// do anything else, e.g. load in pages via ajax...
});
You could use CSS to apply the green background color, instead of jQuery:
.myClassName { background-color: green; }
This will stop the page from navigating, and I don't know if that's your intention. If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:
var currentPage = window.location.pathname;
$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');
EDIT:
Your amended Javascript code can be simplified to the following:
$('#main-menu li').on('click', 'a', function (e) {
e.preventDefault();
e.stopPropagation();
// only do the following if the clicked link isn't already active
if(!$(this).closest('li').hasClass('active')) {
$(this).closest('ul').find('.active').removeClass('active');
$(this).closest('li').addClass('active');
// load in your content via ajax, etc.
}
});
JSFiddle example
For each page you can add a class to the current list item that has "where the user is"..
CSS:
.selectedItem{
background-color: orange;//whatever color your want for the selected tab..
}
Then for each of your pages,
say you're in Dashboard.html
your menu code will look like:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard" class="selectedItem">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
in profile.html:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile" class="selectedItem">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
and so on..
You need to change the background color when the document is loaded (i.e. in document.ready).
Then you need a mechanism to connect the currently loaded page to one of your list items.
$(document).ready(function(){
//get the url from the current location or in some other way that suits your solution
//perhaps use window.location.pathname
var moduleId = "dashboard" // hardcoded to dashboard to make the point :);
$("#menu-"+moduleId).css("background-color", "#ccc");
});
http://jsfiddle.net/9JaVn/1/
Say I have a unordered list of item1, item2, item3, item4, each with a div around it.
<ul>
<div><li>item1</li></div>
<div class="current"><li>item2</li></div>
<div><li>item3</li></div>
<div><li>item4</li></div>
</ul>
I want that every time I click itemX, it loads itemX.html and give the div around itemX a current class attribute. Currently I'm writing 4 functions separately for four items, and they look almost the same. So how can I write a general function that just works on any itemX, loads itemX.html and changes its div's attribute? My current code seems so redundant.
Assuming that you've fixed the HTML problem(li should be sub element of ul). But still for such problem, you need to do:
$("li").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
But the correct solution is :
HTML :
<ul>
<li>item1</li>
<li class="current">item2</li>
<li>item3</li>
<li>item4</li>
</ul>
JS:
$("li").click(function() {
$(".current").removeClass("current");
$(this).addClass("current");
});
And add some css to your li
Your HTML is invalid, which will continue to cause problems for you. Try adding css padding to your LI elements to increase the click area:
<style>
li { padding:10px; }
</style>
As to your question:
<ul id="targetElement">
<li data-contentName="item1.html">item one</li>
<li data-contentName="item2.html">item two</li>
<li data-contentName="item3.html">item three</li>
<li data-contentName="item4.html">item four</li>
</ul>
<script type="text/javascript">
$('#targetElement li').click(function(){ //for all li elements in #targetElement, do this on click
//remove the active class from the other li's
$('#targetElement li').removeClass('current');
//jQuery wrap the current li
var $this = $(this);
//add the class to the current li (the one that was clicked)
$this.addClass('current');
//get the name of the file to load
var fileToLoad = $this.data('contentName');
//then go about loading the file...
});
</script>
$("div li").on('click',function(){
$(this).siblings().removeClass("current");
$(this).load($(this).text() + ".html").closest("div").addClass("current");
});
Your question isn't clear, and your html isn't valid. so let me venture a guess at what your trying to do.
<ul class="pages"><li>item</li><li>item2</li><li>item3</li></ul>
$(function(){
$('ul.pages li').click(function(){
// load html - not user what you mean, so how ever your doing your page load.
$(this).addClass('someclass');
});
});
Is this what you where looking for?