Develop Reference

Jquery addClass to navigation not working

I am having an issue trying to set a class to the active nav item.
I need some help trying to figure out where i am going wrong.
It is some what working but not correctly, it defaults to the menu item which has a sub menu and i can't see where i have gone wrong.
When clicking on say "contact us" for example - the href takes me to the contact page but the active class does not apply and remains on "Products"
What i want to happen is the active class applies to the item that is clicked and not stuck on "products"
Here is JSFiddle https://jsfiddle.net/2yv92roL/
Thanks for help in advance!
Here is HTML:
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Our Philosophy</li>
<li>Products
<ul class="submenu">
<li>Charbonnier Cookware</li>
<li>Charbonnier Dinnerware</li>
<li>Charbonnier Storageware</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
Here is my CSS:
/* define a fixed width for the entire menu */
.navigation {
width: 150px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
text-decoration: none;
padding: 10px;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #C5C5C5;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
.navigation ul li .active {
color: #0080A6;
}
Here is my JQuery
$(function() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(".navigation ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

You need to make a couple of changes:
Remove "$(this).attr("href") == ''" from your if condition, this is the reason your "Products" menu is getting the active class by default
Add "$(".navigation ul li a").removeClass("active");" before your each to remove the active class from the previously selected menu
Add "/" to your pgurl so that it matches the href attribute of your menus
Here is the updated code:
$(function () {
var pgurl = "/" + window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".navigation ul li a").removeClass("active");
$(".navigation ul li a")
.each(function() {
if ($(this).attr("href") == pgurl)
$(this).addClass("active");
});
});

Dropdown menu not closing jQuery

Can someone explain me what I'm doing wrong, if you click on the first link(link 1) it opens a menu, if you click on one of the 'li' inside the menu it closes the menu.
If I click on the second link(link 2) it opens a different menu but when I click on one of the 'li' inside the menu nothing happens, and what I am trying to do is to close the menu.
jsfiddle (http://jsfiddle.net/BdhxL/)
The HTML code:
Link 1
<div id="dropMenu">
<ul>
<li>Portfolio</li>
</ul>
</div>
<br><br>
Link 2
<div id="dropMenu">
<ul>
<li>Contact us </li>
</ul>
</div>
The JS code:
$(document).ready(function() {
$("li").click(function()
{
$("#dropMenu").hide("slow");
});
$("a").click(function()
{
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});
#dropMenu {
display: none;
position: relative;
right: 5px;
background: #000;
color: black;
margin:50px -5% 0% -142%;
padding: 0px 0px 0px 10px;
}
#dropMenu a {
display: block;
color: #fff;
text-decoration: none;
padding:10px 6px;
font-weight:400;
border-bottom: solid 1px #fff;
}
The CSS code:
#dropMenu ul {
margin:0;
}
#dropMenu a:hover {
background: #57585A;
}
#dropMenu ul {
list-style:none;
padding:0;
}

You have duplicate ids.$("#dropMenu").hide("slow"); is always targetting first dropMenu. Use $(this) to target current and hide the closest div.Try this:
$(document).ready(function() {
$("li").click(function()
{
$(this).closest("div").hide("slow");
});
$("a").click(function()
{
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});});
Working Demo

Currently, you're having duplicated id for parent div of your list which is <div id="dropMenu"> , you need to use class instead:
<div class="dropMenu">
then you can use .closest() to target closest matching .dropMenu of clicked li:
$(document).ready(function () {
$("li").click(function () {
$(this).closest(".dropMenu").hide("slow");
});
$("a").click(function () {
$(this).toggleClass("active");
$(this).next("div").stop('true', 'true').slideToggle("slow");
});
});
You also need to change all #dropMenu to .dropMenu in your CSS.
Updated Fiddle

Context menu using jquery

I have a context menu in jquery on Right Click.
But it is somehow not fulfilling my needs.
When i add new div on click and then try to have context menu operation on it, then it is not working.
It is applying operation on original div.
Can someone help me out in getting this problem solved and improving my Jquery or HTMl.
Js fiddle for Context Menu
Thanks

As marck said that there are many mistakes in your code.You used same ID on multiple elements multiple times. Anyway, I created a basic jsfiddle of what you are trying to achieve. You can build on top of that and modify it according to your needs.
Here is the link:
http://jsfiddle.net/PCLwU/
function add(){
//For adding new items.
}
function menu(){
//to show up context menu
}
function menuactions(){
//Define the actions performed when menu option is selected.
}
For different context menu for different list : http://jsfiddle.net/PCLwU/3/

Context menu div
<div id='contextMenu'>
<ul id='items'>
<li id="cutDoc">Cut</li>
<li id="copyDoc">Copy</li>
<li id="pasteDoc">Paste</li>
<li id="deleteDocs">Delete</li>
</ul>
</div>
menu Style
<style>
#items
{
list-style: none;
margin: 5px 0 0 5px;
}
#contextMenu
{
display: none;
position: fixed;
border: 1px solid grey;
width: 150px;
background-color:white;
box-shadow: 2px 2px 1px grey;
}
#items li
{
list-style-type: none;
border-bottom: 1px solid grey;
border-bottom-style: dotted;
padding: 10px;
font-size: 14px;
}
#items :hover
{
background: #0070FF;
color: white;
}
</style>
jQuery Script for applying on area where it will needed which
$("YOur class name").mousedown(function(e){
//to block browsers default right click
if( e.button == 2 ) {
$("#contextMenu").css("left", e.pageX);
$("#contextMenu").css("top", e.pageY);
$("#contextMenu").fadeIn(500, startFocusOut());
}
});
function startFocusOut() {
$(document).on("click", function () {
$("#contextMenu").hide(500);
$(document).off("click");
});
}
This will work fine.
Update:
here is the fiddle demo

Highlighting items when selected

I have a list of elements (divs) which all have the same background color (white). Now, I want to make the background color change (to blue) once they are clicked. Thing is this, only one can be highlighted at a time.
So, let's say you click div1, and it turns blue. If you click div2, it needs to make div1 turn white and then div2 turn blue.
Sort of a selecting method, no?
Is there a stand-alone method of doing this?

Try This:
Jquery Code:
$('div').bind('click',function(){
$('div').removeClass('selected');//remove selected class from previously added div
$(this).addClass('selected');//add class to current div
})
CSS:
.selected{
background-color:blue;
}

Try this ...
<style type="text/css"><!--
#menu_top {
list-style:none;
width:100%;
float:left;
margin:8px 0;
border-bottom:8px solid #60CBFF;
font:normal 11px/22px arial,helvetica,sans-serif;
}
#menu_top li, #menu_top a {
float:left;
height:22px;
}
#menu_top li {
margin-left:4px;
}
#menu_top a {
background: none repeat scroll 0 0 white;
color: #000000;
padding: 0 8px;
position: relative;
text-decoration: none;
}
#menu_top a:active,
#menu_top a:focus,
#menu_top a:hover {
background: none repeat scroll 0 0 blue;
}
</style>
and HTML code is ..
<ul id="menu_top">
<li>HOME</li>
<li>Services</li>
<li>Portfolio</li>
<li>Download</li>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
You can check my JSFIDDLE also.

For a library agnostic solution, you could use something like this:
<style>
.clickable {
background-color: #eee;
height: 30px;
margin: 10px;
}
</style>
<div>
<div class="clickable"></div>
<div class="clickable"></div>
<div class="clickable"></div>
</div>
<script>
var clickables = document.getElementsByClassName('clickable');
var resetSiblings = function () {
for (var i = clickables.length - 1; i >= 0 ; i--)
clickables[i].style.backgroundColor = '#eee';
};
var clickHandler = function (ev) {
resetSiblings();
ev.target.style.backgroundColor = '#00f'
};
for (var i = clickables.length - 1; i >= 0 ; i--)
clickables[i].addEventListener("click", clickHandler, false);
</script>

simple onclick applied on <a> not working IE and FF

I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!

If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>

Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)

You might want to try something like this instead:
Default Categories