As a test I'm trying to combine 2 JQuery menus. The "Slide Down Box Menu" and the "Vertical Mega Menu". But the "Vertical Mega Menu" is not working as it should. I have tried a lot, but I can't get it to work.
On the following site you can see my test: http://members.upc.nl/b.riem/.
When you hover over the list item "Projects" a sub list appears. When you hover over the item "Job Board Website" the 2nd menu (Vertical Mega Menu) should appear, but it doesn't.
On the first page there is a link to another page. On that page I did isolate the submenu under "Projects". On that page the Vertical Mega Menu is working with all the JQuery and JavaScript references still on the page.
So, on the first page there is a conflict between the 2 menus or something wrong with the CSS but I can't figure out what it is.
May I ask everyone to take a look at it and advise me what the problem could be and how I can solve it.
Thank you very much for your help and advise.
Best Regards,
Geert De Vylder
I see that an error is being thrown from the jquery.hoverIntent.js plugin you are using. This is from line # 113 from that library that calls jquery on() method. But your jQuery is quite a bit older version (1.4.x) which does not have on() method defined. Consider upgrading your jQuery reference from google cdn as you are already using. For eg: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js for jQuery 1.8.3
Related
I have just started a new site created with meteor and using foundation for sites and sass.
I want to create a dropdown menu, but I can't make it work.
I followed this link
dropdown menu and copied html, but it's not been showed as a dropdown menu.
I think my problem is because maybe I haven't initializated the javascript of the dopdown menu.
Can someone show me how to do it. In Zurbs site there are several examples, but loading the script in the head. But I want to know how to do it with meteor.
I might be completelly lost, so any help is really welcome.
This are the packages I have added to my meteor
zurb:foundation-sites
seba:minifiers-autoprefixer
fourseven:scss
To initialize the Foundation plugins you have to run the init code $(document).foundation();, make sure it is added after the foundation js file are included.
Also make sure that $(document).foundation(); is added after DOM has been rendered (at the bottom of html) or in window.onload event.
Took some hours once to find this out :P
I have a toggle dropdown menu button that appears on smaller resolutions/devices, but for some reason it isnt working. When clicked, nothing appears/shows.
Most likely there is something missing (JS function that makes it open maybe). Copying entire code doesn't make too much sense to me, so I am just using some of it:
http://goo.gl/TNixQe
UPDATE
True about responsive design. Now I noticed it (but did you say about it in your question? nope.).
When I tried to resize window firebug had found this error:
This error appears in js_func.js file in 9 row. Are you sure you link libraries correctly? JS can't find uniform() function.
Possibly this error is appearing, because all your instructions are in simple function. Try to add them to onload handler. Possibly browser try to load this instructions before uniform library had been loaded.
I meant this:
$(document).ready(function()
{
// use `uniform()` function on elements
}
OLD ANSWER
It is simple drop-down menu, based on lists. It is working throw hover handlers.
You can't do 'hover' on your mobile device. You can tap on screen only.
If you want users with gadgets use your site, you have to create menu espesially for gadgets.
Small trick, which helped me (because I am lazy :)) is to assign javascript:void(0); to 1 level buttons hrefs. This worked on SGS2 and Xperia Z1, but I am not sure it will work everywhere. With that trick, a man will tap on menu button and drop-down menu will appear.
You have a javascript error on line 9 of js_func.js:
Uncaught TypeError: Object [object Object] has no method 'uniform'
This will be causing any code below it not to be run.
Could it be a missing plugin on the mobile version?
A quick google suggests that the issue is with your jquery verison, they say to downgrade to 1.8.3.
In your case you are using 1.8.2, so try upgrade to 1.8.3.
Hi Im using wordpress and i have a navigation.
I would like to use js or jq to toggle the visibility of the sub menu items when clicking on the parent item. I can do this with raw code but i dont know how to do this with wordpress menus.
Currently my wp_nav_menu is in a nav container in its own div.
Any help would be really appreciated. I need this to be totally dynamic.
I have found a plugin called Jin Menu and this seems to allow me to add onclick functions to each menu item but even then im not sure what to add...
Thanks folks
Without looking at your code it is hard to provide samples that you can use directly. jQuery can be used to accomplish this so no worries there. The simplest way without delving deep into advance jQuery selectors (I'm not sure of your background knowledge) is to give each navigation link an id and then use jQuery to hide the div. If you would provide your navigation code, or a link to your page, we could help you more.
$( "#idOfParent" ).on( "click", function () {
$(this).children().toggleClass("HideNav").toggleClass("ShowName");
}
Here is a jfiddle with a working example (though not pretty). If you needed something different, let me know.
This is my third jquery script, and parts of this have been taken from other scripts. I'm trying to implement the following feature:
I've spent 4 hours trying to figure out how to get the submenu to display left if the browser window is too small. Currently it only works on large resolutions too. I found one script on here, but it only detected it on page load. This script used offset(), and this caused my marquee to fail on firefox. I'd like to avoid this if possible.
The menu is running here: http://www.mantisclan.com/beta/dropdown/
I'd like to use .addClass and .removeClass to set the left: position of the submenu.
Thanks for the help, I will learn from this.
So it seems to work here: http://jsfiddle.net/JLUqH/2/. However I don't like this effect because it is quite impossible to control the menu, it pops up, collapses very fast.
Try changing the event from hover to click.
There are a lot of jQuery plugins that handle drop down menu creation for you: 38 jQuery And CSS Drop Down Multi Level Menu Solutions
Does somebody know a Javascript menu (in Jquery if possible) similar to the javascript menu used in Oracle?
And it must work for ie7+ and ff2+
http://www.oracle.com/index.html
This menu does not display a list of element instead, it show an entire div.
You may look for something like this menu
Demo here