Develop Reference

How do I get this jQuery script to work

I have a bit of jQuery code I am trying to get to work here. I basically have a vertical nav menu with two items that have jQuery dropdown menus that pop out to the side. However, when you hover over them both quickly they are displayed overlapping each other. So what I am trying to accomplish is that if one is hovered on and pops out, if the other one is already displayed it will slideUp and be hidden. The dropdown trucks already existed I am adding on the engines one. I will keep working on it but if anyone can help out I would appreciate it.
/* Dropdown Menu Trucks*/
$("#menu-main-menu .show-dropdown").hover(function(){
$("#dropdown").slideDown('fast');
});
$("#dropdown").mouseenter(function(){
$("#dropdown").show();
});
$("#dropdown").mouseleave(function(){
$("#dropdown").slideUp('fast');
});
// ----------------------------
/* Dropdown Menu Engines */
$("#menu-main-menu .show-dropdown2").hover(function(){
$(".dropdown-engines").slideDown('fast');
});
$(".dropdown-engines").mouseenter(function(){
$(".dropdown-engines").show();
});
$(".dropdown-engines").mouseleave(function(){
$(".dropdown-engines").slideUp('fast');
});
if ($('#dropdown').is(':visible')) {
$(".dropdown-engines").slideUp();
}
else if ($('.dropdown-engines').is(':visible')) {
$("#dropdown").slideUp();
}
edit: let me approach this another way that seems easier to accomplish..
$("#menu-main-menu .dropdown2").hover(function(){ // hover over .dropdown2
// show #dropdown-engine
$("#dropdown-engine").slideDown('fast');
});
$("#dropdown-engine").mouseenter(function(){ // mouse enter #dropdown-engine
// show #dropdown-engine
$("#dropdown-engine").show();
});
$(".dropdown2" || "#dropdown-engine").mouseleave(function(){
$("#dropdown-engine").slideUp('fast'); // mouse leave #dropdown-engine
// *or .dropdown2 slideup
}); // but only if not hovering on either

The question isn't completely clear to me, but I think this is want.
I noticed that you used id's that are not present in your jsfiddle and are using classes and id's mixed. Try to be consistent and think DRY, by using data-target and the classes like in the example, the code is cleaner and shorter.
$(function(){
$(".dropdown").hide();//hide all dropdowns on start
$(".show-dropdown").mouseenter(function(){
//on mouse enter of a .show-dropdown, we slideup all .dropdowns
$(".dropdown").slideUp("fast");
//then we get the ID of the dropdown we want to show through the data-target attribute, and slide it down.
$("#"+$(this).attr("data-target")).slideDown("fast");
});
});
<ul>
<li class="show-dropdown" data-target="dropdown-trucks"><!--data target is the ID of dropdown you want to show-->
Trucks
</li>
<li class="show-dropdown" data-target="dropdown-engines">
Engines
</li>
</ul>
<ul id="dropdown-trucks" class="dropdown">
<li>Truck 1</li>
<li>Truck 2</li>
</ul>
<ul id="dropdown-engines" class="dropdown">
<li>Detroit Series 60 Engine</li>
<li>Cummins N14 Engine</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I ended up just using hide(); on hover to hide the element I didn't want to see. I was severely overthinking this. Thanks to anyone who answered.

How do I tell a submenu to be visible when its parents or containing links are active?

I have a menu in HTML and it looks like this:
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Team</li>
<li>Philosophy</li>
<li>History</li>
</ul>
</li>
<li>Projects</li>
<li>Services
<ul>
<li><a href="#">Our Service</li>
<li>Special Offers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Everything is in shape via CSS except one thing: to get the submenu to appear when its parent list-item's link points to the same address as the current page address.
I know this is possible somehow. But I really am the greatest noob with JavaScript or jQuery or PHP (I think the last two mean the same thing right?).
I tried copying and pasting code pieces like "OnClick=..." and one that was like "" or also one I found that contained "GetElenentbyTagName" (which almost worked...) but besides that I had no real clue about where to put them even. They just didn't work properly or not at all. I had a full done code piece but when I pasted it in and replaced some tag names it all got got marked red and my head is burning after trying to get it to work for the entire day.
I think this is possible because I have seen things that seemed to be describing part of what I want to do. E.g.
The script piece should either
Option A: Tell the browser that if the user is on a page which has the same address as a link in the menu it's href-address is, then it's submenu (ul li ul) or the menu (ul) where itself is contained in, should get "visiblity:visible".
Option B:
The script code says like "if the user clicks on an menu item (ul li), then it's submenu (ul li ul), if it has one, or if the menu-item that is being clicked is one of the submenus, then this submenu should become "visibility:visible". If the item that is clicked doesn't have a submenu, no submenu should be shown.
The HTML code must not have classes or other attributes directly anywhere between (nav) and (/nav) though.

I do not have sure if i understand what you need,
you need when user go to some menu page it get the url and active that link on menu until the user is on that page right?
if is that,
i think something like that should work:
<script type='text/javascript'>
$(function(){
$item = $('ul li a').filter(function(){
return $(this).prop('href').indexOf(location.pathname) != -1;
});
$item.css('visibility','visible'); //or whatever ur using to active it.
});
</script>

You can do this with CSS:
li ul {
display: none;
}
li a:hover + ul {
display: block;
}
http://jsfiddle.net/7bxf6r33/
[Edit]
This works:
http://jsfiddle.net/7bxf6r33/7/

Make only bullets clickable

I'm working on a menu that is designed using an unordered list, with each list element containing a link to another page. However, I would also like to be able to click on each bullet point to open more subcategories that will also link to other pages.
Essentially, I would like to be able to click once on a link and have it go to the correct page, but I would also like to click on the bullet point and have it expand into the subcategories. I've been researching how to separate the bullet from the content of the li, but it doesn't seem to be working in my case, likely because my li contains a lot of subcategories. Here's an example:
<li id="m2l1" class="child">
Y
<ul id="u11">
<li class="gchild">Y.1</li>
<li class="gchild">Y.2</li>
<li class="gchild">Y.3</li>
<li class="gchild">Y.4</li>
<li class="gchild">Y.5</li>
<li class="gchild">Y.6</li>
<li class="gchild">Y.7</li>
<li class="gchild">Y.8</li>
<li class="gchild">Y.9</li>
</ul>
</li>
Does anyone have any suggestions as to how to separate the bullet from the text in my case?
Here's the link: http://jsfiddle.net/stamblerre/XYp48/17/
Thank you!!!

Your HTML is invalid. You can't have div inside your ul. Moreover, you can greatly simplify your code by moving separate logic for each li into one generic handler.
Something like this:
Demo: http://jsfiddle.net/abhitalks/XYp48/18/
CSS:
ul {
display: none;
overflow: hidden;
}
ul:first-child {
display: block;
}
JS:
$("li").on("click", function () {
$(this).children("ul").slideToggle();
return false;
});
Edit:
I deliberately left out checking of a because clicking the a would navigate to the respective pages (as mentioned in your question), so expand/collapse wouldn't matter.
However, as per your comment if you really want to remove a altogether from the handler, then you can use the event target to handle li without a. Something like this:
Demo 2: http://jsfiddle.net/abhitalks/XYp48/22/
JS:
$("li").on("click", function (e) {
var $t = $(e.target); // get the event target as a jQuery object
if (!$t.is('a')) { // check if the target is not an anchor
$(this).children("ul").slideToggle();
return false;
}
// otherwise if target is anchor, then do nothing
});

Change your list still to hide bullets, then modify your html to :
<li class="gchild">•Y.1</li>
Should do the trick.

<li class="gchild">Y.1</li>

One way that worked for me: remove the bullet with li { list-style-type: none; } then add your own bullets with the character • (alt-8 on a mac). Add that character inside a elements like so:
• X
with the label now outside of the element.
Hope this works for you!

javascript driven navigation menu on footer

My navigation menu on header looks like this:
<ul id="nav">
<li id="home">
<a class="mainmenu" href="#">Link1</a>
</li>
<li>
<a class="mainmenu" href="#">Link2</a>
</li>
</ul>
and the same markup is used for the footer section and it's not working.
I have also a file called jscript.js which contains all the javascript for the website,
and I found this variable:
var navTarget = "ul#nav li a" //menu link to target
Also, if I remove for example the markup in the header sections the footer will work.
I've tried also to use .nav instead of #nav and I have the same problem.
The navigation menu is controlled by javascript, I don't post the code here because it's huge, for better understanding of how the navigation menu works look here
I've found this in the javascript:
//SET MENU ITEM IDs
$(navTarget).each(function(i){
i++
this.id = this.id +"_" +i ;
});
//MENU CLICK FUNCTION
$(navTarget).click(function() {
//ensure link isnt clickable when active
if ($(this).hasClass('active')) return false;
//get id of clicked item
activeNavItem = $(this).attr('id');
//call the page switch function
switchContent();
});
//CONTENT SWTICH FUNCTION
var switchContent = function (){
//set previous and next link & page ids
var PrevLink = $(navTarget+'.active')
$(PrevLink).removeClass('active');
var PrevId = $(PrevLink).attr('id');
//alert(PrevId)
var NextLink = $('#'+activeNavItem).addClass('active');
var NextId = activeNavItem
//alert(NextId);

From the looks of it, the JS code is using some CSS selector (like jquery's $ or dojo's dojo.query) that pulls in the DOM element target based on the value of navTarget, and then does something with it: turns it into a menu.
But its only doing it once.
You need to look at the JS and see where navTarget is used. Then it should be fairly easy to make it do the menu creation on all the results of $(navTarget) instead of just the first hit.
Also, you should only have on instance of an ID in your dom.
You can change this to a class instead:
var navTarget = "ul.nav li a"
And in the markup:
<div class='nav'>
But you will still have to look at the JS and make sure it functions against a set of targets returned by the CSS selector. That code is probably expecting just a single result and using just it: results[0].

You can only have one element of a given id on the page. So based on your description, it sounds like you have 2.
I don't know exactly how this script works, but you can try using classes instead.
<ul class="nav">
var navTarget = "ul.nav li a";
You would have to change your HTML and the JS navTarget selector string.
But there is also a good chance that your script may not support creating multiple menus at all. And if thats the case, you may need to fix that script or find a better one.

If the code for the footer really is identical to the header, that's the problem. An id should only be used for a single element in a page, and jQuery's selectors will only return the first. Meaning code like "ul#nav li a" only works on the header.
Easiest solution is to change the id's to classes, e.g.:
<ul class="nav">
... and change your jQuery to match that, e.g.:
var navTarget = "ul.nav li a";
Update: And (ignoring that this may end up turning into three duplicate posts), that fix is probably not enough at all, since other parts of the script may only work with a single menu.

If I have one nav_bar.html file that is included on other pages, how do I show which menu item is active?

thanks for taking the time to read this.
I have a JavaScript (jQuery) navigation bar on my main page that is simply "included" on my page. For example, I have index.shtml that "includes" the nav bar, which is "nav_bar.shtml". And this is the same for every other page. Now clearly, with the current setup, there's no way to show the user which menu item is currently selected since the nav_bar.shtml page stays static.
What I'm wanting to do is STILL have just the one nav_bar.shtml file, but be able to, on the individual pages, show the user the current menu item selected on the nav bar (as in a different shade of color, etc.). If nav_bar.shtml stays static, there's not a very clear way to do this. Is there a workaround to this if I don't want to instantiate an entirely new Javascript nav bar on each and every page? Or would each page need its own version of the nav_bar code specific to that page so it knows which item it needs to shade?

One way to do this is to write some code to look in your menu, find the hrefs of the links therein, and compare them to the current window.location.pathname. If you have nice clean URLs this isn't too hard. If you have long, complex URLs, it may not be workable.
So, here's the general idea:
$(document).ready( function(){
var thispage = location.pathname.substring(1);
$('#menu li a[href~="' + thispage + '"]') // ~= is contains. Tweak as needed.
.addClass('active');
});
Assuming your menu looks something like this:
<ul id="menu">
<li>This</li>
<li>That</li>
<li>The Other</li>
</ul>
And of course:
li.active {
background-color: yellow;
}

I don't know if this is the answer you're looking for. But you don't need any javascript in order to shade certain element in certain page.
You can always take advantage of CSS selectors, for example:
<body id="homepage">
<ul id="tabs">
<li id="tab-homepage">homepage</li>
<li id="tab-news">news</li>
...
In your CSS you can say something like:
#homepage #tab-homepage { background-color: red }
#newspage #tab-news { background-color: blue }
So, finally, you would only have to change the "id" attribute of the body element to get your shaded menu items.
Anyway, if you're using jQuery you can always use something like:
$('body').attr('id', '...');

You could attempt to detect which page the user is currently on by use of window.location.pathname, and shade the relevant menu item based on this.
Example:
function shadeMenuItem(item){
//Your code to style the given element here
}
$(document).ready(function() {
if(window.location.pathname.match(/^\/questions.*/)){
shadeMenuItem($('#questions')); //shade menu item 'questions'
}
else if(window.location.pathname.match(/^\/users.*/)){
shadeMenuItem($('#users')); //shade menu item 'users'
}
});
If this code was implemented on this page, the first condition would be matched, meaning that shadeMenuItem() would have the element with #questions passed to it.