We Keep Coding

React on click over an area as long as it was not an <a> tag

I have a large area that I need to make clickable. Imagine I have a list of items:
<ul class="my-area">
<li>...</li>
<li>...</li>
</ul>
The items <li> have a lot of stuff inside including working links or links that trigger modal windows etc. As long as someone clicks on one of the links inside, it should do whatever it is designated to do - redirect, open modal window, etc. However, if the click was not on a link but just a <div>, <span> etc, then I need to redirect to a specific location.
I've tried this:
$("ul.my-area li:not(a)").click(function (event) {
location.href='SOME_LOCATION';
});
However, it's not working. I considered using .stopPropagation() as well but then the modal windows stop working so that's not an option. Any ideas?

edited: There is two posible solutions:First solution:event.stopPropagation() *(not an option for this specific question because of modals)*- this would look like:
$("ul.my-area li").on('click',function (event) {
//location.href='SOME_LOCATION';
});
$("ul.my-area li a").on('click',function(e){
e.stopPropagation();
});
Second solution: Since you have nested DIV, IMG... inside the anchors, here it is checking if clicked element is not an anchor or if it don't have any ancestor anchor, and inside you can change location.href/do some action:
$("ul.my-area li ").on('click', function(event) {
if (!((event.target.tagName == "A") || $(event.target).closest('a').length)) {
console.log("This is not an anchor");
//location.href='SOME_LOCATION';
}
else{ //it's an anchor }
});
Check the below snippet
$("ul.my-area li ").on('click', function(event) {
if (!((event.target.tagName == "A") || $(event.target).closest('a').length)) {
console.log("This is not an anchor");
//location.href='SOME_LOCATION';
}
else{ //it's an anchor }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="my-area">
<li>
<p>This is Paragraf This is Anchor
</p>
<div>This is DIV</div>
</li>
<li>
<p>This is another Paragraf</p>
<a href="#">
<div>This Div inside Anchor<span> This is span inside div inside the anchor</span>
</div>
<img src="" alt="Image part of the anchor">
</a>
<p>Some paragraf</p>
</li>
</ul>

Div not displaying using jquery

I have the below which is supposed to change the div depending on the image link clicked.
I want the British content to show automatically on page load, then it gives the option to change the div to display different content (language) by clicking on the image of the flag.
This works in jsFiddle and CodePen but is not working on my site, even when using the exact same code. Whenever I click the Iranian logo it does not load the content.
Any tips?
$(document).ready(function() {
$('#wayfindermenu a').click(function(e) {
hideContentDivs();
var tmp_div = $(this).parent().index();
$('.maincontent div').eq(tmp_div).show();
});
function hideContentDivs() {
$('.maincontent div').each(function() {
$(this).hide();
});
}
hideContentDivs();
$('.maincontent div').eq(0).show();
});
$(function() {
$('#wayfindermenu li a').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
https://jsfiddle.net/pxce3t31/

for some reason, the code $('.maincontent div').eq(1); is bringing back the image of your flag instead of your iran content.
(div class=​"image right" style=​"display:​ block;​">​<img src=​"https:​/​/​www.herts.ac.uk/​__data/​assets/​image/​0008/​24983/​Iran.jpg" alt=​"Flag of Kuwait">​</div>​)
try this implementation instead - target the specific class of the content instead of using indexes:
use data tag attributes to link which flag link goes with which page id, then target that specific div content and show it.
and also, britain doesnt show as default in your page because you dont have $('.maincontent div').eq(0).show(); in your page code, but its in your fiddle. you can also target the specific britain div like i did below $('page1').show();
$(document).ready(function() {
hideContentDivs();
$('#page1').show();
$('#wayfindermenu a').click(function(e){
hideContentDivs();
var target = $(this).data('page'); // gets the data-page attribute
$('#' + target).show(); // shows the page
});
function hideContentDivs(){
$('.maincontent div').hide();
}
});
li {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wayfindermenu">
<li id="link1" class="">
<a href="#!" data-page="page1">
<img src="https://www.herts.ac.uk/__data/assets/image/0005/104909/english.svg.png" alt="Britain flag logo" id="itemImg"/>
</a>
</li>
<li id="link2" class="active">
<a href="#!" data-page="page2">
<img src="https://www.herts.ac.uk/__data/assets/image/0020/104906/Flag_of_Iran.svg.png" alt="Iran flag logo" id="itemImg"/>
</a>
</li>
</ul>
<div class="maincontent">
<div id="page1">british content</div>
<div id="page2">iran content</div>
</div>

How to dynamically add a class to li item and change its background color using javascript and css

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/

How to change a colore of menu bar when user click on net link

I want yo Change a color of nave when user click on other nav button i don't no how can i do this by code here is a image below:
when user click in abut then that color should be change in orange and home page active orange color will be black and about will be orange. i want to do this by JavaScript. here is a code lines below.
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active">Home</li>
<li>About</li>
<li>T-P</li>
<li>M-P</li>
<li>B-M</li>
<li>R-B</li>
<li>L-C</li>
</ul>
</nav>
</div>
i use this JavaScript for change this.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
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()
{
$(".menu li").click(make_button_active);
} )
</script>
but nothing happen please let me know how can i do this. anyone have any Idea?
Thank You

There are a number of issues here. For one menu is the value of an id so you would need to reference it in jquery with $('#menu"). Below is a working version of your code. I had to remove the href attributes to achieve the desired style change with minimal effort. You now have two choices:
Use this code and swap content dynamically using javascript and css display property
On each page in your site modify the markup, to set the active nav item; with this approach the javascript is not necessary.
<htmL>
<head>
<script type="text/javascript">
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(){
$("li").click(make_button_active);
});
</script>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active"><a>Home</a></li>
<li><a >About</a></li>
<li><a >T-P</a></li>
<li><a >M-P</a></li>
<li><a >B-M</a></li>
<li><a >R-B</a></li>
<li><a >L-C</a></li>
</ul>
</nav>
</div>
</body>
</html>

Hi more simple way to chafe class in li
string thisURL = this.Page.GetType().Name.ToString();
switch (thisURL)
{
case "home_aspx":
lihome.Attributes.Add("class", "Active");
break;
case "support_aspx":
lisupport.Attributes.Add("class", "Active");
break;
case "logout_aspx":
lilogout.Attributes.Add("class", "Active");
break;
}
need to do this code on load event of page and it will working that vote for this solution=)

js 'toggle' or 'hover' function?

I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)

If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.

Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});

use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>