EDITED----------------------------------------
With help from users, we have discovered that the load is not working in the javascript. It is only for the topmenu file. Tried the dom ready function and this has not worked. Any further suggestions would be great!
function loadHeader()
{
$("#header").load("http://www.garden-design-courses.co.uk/lib/header.html");
}
function loadTopmenu()
{
$("#topmenu").load("http://www.garden-design-courses.co.uk/lib/topmenu.html");
}
I have a jquery menu that is not showing in IE7 or IE8. Below is the code
http://www.garden-design-courses.co.uk/
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
The menu is
<ul class="topnav">
<li>Top Navigation
<ul class="subnav">
<li>subnav</li>
</ul>
</li>
</ul>
The problem isn't in that navigation code you have in your question, but in fact because the menu isn't even getting loaded onto the page.
Profiling the code on IE shows that the loadTopmenu function is getting called, but obviously the contents of it aren't getting loaded onto the page.
Try modifying your loadTopmenu to only be called when the DOM is ready:
function loadTopmenu()
{
$(function(){
$("#topmenu").load("http://www.garden-design-courses.co.uk/lib/topmenu.html");
});
}
When I get this behavior it's due to me forgetting to wrap everything up in
$(function(){
...
});
Without it it will work in most browsers except for IE..
Related
I am trying to implement a basic toggle menu after the last has stopped working but no matter how much I try to narrow down the CSS selector, the sub menu items ALWAYS toggle the menu on click for the mobile menu and therefore you cannot click through.
My JS is:
jQuery(document).ready(function() {
jQuery('#menu-item-1837').click(function(e) {
jQuery('#menu-item-1837 > ul').slideToggle(500);
e.preventDefault();
});
});
jQuery(document).ready(function() {
jQuery('#menu-item-1832').click(function(e) {
jQuery('#menu-item-1832 > ul').slideToggle(500);
e.preventDefault();
});
});
I have tried all sorts of variations including targeting using:
#menu-item-1837 a:first-child
.menu-item-has-children > a
a#menu-item-1837
I can't work out why it isn't working
I have also tried variations of targeting the sub-menu but it never works
Any help would be appreciated
I have a horizontal menu. This sub menu is displayed outside the ul. When i hover on a specific class, I want the .sub_menu to appear. When I hover the .sub_menu, I want it to be still there.
However, when moving my mouse from to the .sub_menu, it disappears.
jQuery(document).on('click', '.mobile-sub-menu-controller', function () {
jQuery(this).siblings('.sub-menu').slideFadeToggle();
if (jQuery(this).find('i').hasClass('icon-angle-down')) {
jQuery(this).find('i').removeClass('icon-angle-down');
jQuery(this).find('i').addClass('icon-angle-up');
} else {
jQuery(this).find('i').removeClass('icon-angle-up');
jQuery(this).find('i').addClass('icon-angle-down');
}
});
In
jQuery(document).on('click', '.mobile-sub-menu-controller', function () { ..
change click to 'mouseenter', because 'mouseover' will trigger the event for every movement unit the cursor moves across the target.
I think that you can attach watcher for both elements (menu item and submenu) and decide with class you should use in both watchers.
However, is your menu has the structure like this:
<ul>
<li><i>icon<i> Text
<ul>
...
</ul>
</li>
<li><i>icon<i> Text
<ul>
...
</ul>
</li>
...
<ul>
You can use css or mouseenter/mouseleave events to toggle the menu item class to show submenu.
Be careful, if there is a gap between menu item and submenu your css or js will work incorrectly because mouse will leave menu item to the another element but not to the submenu.
If you have some additional information or questions let me know.
Also you may attach your menu html code to clarify the question.
I've looked around and researched why this isn't working, but it seems that I am in a sort of different situation.
I have a default action for a navigation item that handles the navigation animation on hover:
$('.logoCont').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
Now, when it comes to being on the mobile screen, I hide the navigation and place a button there. The button then controls the animation of the menu sliding out from the side. I've added a line of code that adds a class to the navigation elements when this button is clicked.
$('.mobile-menuButton').click(function(){ //When you click the menu-show button
if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
$('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
} else {
$('.nav_hover').removeClass('mobile_open'); //remove it
}
});
So then I changed the first hover function to say:
$('.nav_hover').not('.mobile_open').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
I was hoping this would stop the someFunction() from happening when the mobile menu is out.
You can view what I'm doing HERE - When you reduce the screen to under 540px the media query will take effect and you can click on the menu button.
Documentation on .not() HERE. The second example at the end of the page is exactly what I was hoping for.
The class is added later and the event handler is attached to any and all elements that match the selector at pageload (or whenever it is executed) and doesn't really care about what you add later.
You have to check for the class inside the event handler
$('.nav_hover').hover(function(){
if ( !$(this).hasClass('mobile_open') ) {
someFunction()...
}
}, function (){
if ( !$(this).hasClass('mobile_open') ) {
someFunctionReverse()...
}
});
delegation could also work, but it wouldn't really work with not() or hover()
$(document).on({
mouseenter: function() {
someFunction()...
},
mouseleave: function() {
someFunctionReverse()...
}
}, '.nav_hover:not(.mobile_open)');
I have small dropdown profile menu with logout button etc. I need to show the menu when I click on the button and hide it when i click anywhere on page or on the button as well.
<div id='menu'>
<ul>
<li class='has-sub'> <a class="testbutton" id="userButton" onclick="dropdown()" href="#">
<span id="buttonText">User name</span> <span id="triangleDown">▾</span>
</a>
<ul id="submenu">
<li class='has-sub'><a href='#'><span>Change password</span></a>
</li>
<li class='has-sub'><a href='logout.php?action=0'><span>Logout</span></a>
</li>
</ul>
</li>
</ul>
</div>
I used JavaScript. At this time menu is displayed on hidded only when I click on profile button. I also know how to start function using something like document.ready.
My not working code:
function dropdown() {
if ($('#submenu').css('visibility') == 'hidden') {
$('#submenu').css('visibility', 'visible');
} else {
$('#submenu').css('visibility', 'hidden');
}
};
$(document).click(function (event) {
if ($('#submenu').css('visibility') == 'visible') {
$('#submenu').css('visibility', 'hidden');
}
});
But when I combine this methods it does not works. So when I clicked on the button to open menu, nothing happened.
Sorry for my English :)
Thanks for help in advance.
This has partly to do with something called event propagation. Put simply, this means that click events will register not only on the clicked element, but also on any parent or ancestor elements of that element.
So if you click a DIV, the event will also be registered on the BODY, because the DIV is inside the BODY. Put abstractly, if a kitchen is the scene of a crime, then the apartment that houses that kitchen is also the scene of a crime. One is inside the other.
This is prevented by preventing propagation - in jQuery, by running the stopPropagation() method of the evt object that is automatically passed to your event handler.
In any case, your situation can be greatly simplified.
var menu = $('#menu'), but = $('#menu_button');
$(document).on('click', '*', function(evt) {
evt.stopPropagation(); //<-- stop the event propagating to ancestral elements
if ($(this).is(but)) //<-- on button click, toggle visibility of menu
menu.toggle();
else if (!$(this).closest(menu).length) //<-- on click outside, hide menu
menu.hide();
});
Assumption: I have assumed that the toggler button is targetable via the selector '#menu_button'. Update this as required. Also, the code should run inside a DOM-ready handler.
The code listens for clicks to any element. If it's registered on the button, the visible state of the menu is toggled. If it's to an element outside of the menu, the menu is hidden. (If, in the latter case, the menu is already hidden, this will have no effect.)
Here's a working JS Fiddle that demonstrates the approach.
Try this:
$(function() {
$('.test-button').click(function(event) {
event.stopPropagation();
$('#submenu').toggle();
});
$('body').click(function() {
var submenu = $('#submenu');
if(submenu.is(":visible")) {
submenu.hide();
}
})
});
I'm trying to change the background of a button for a mobile app. The Click event seems too slow, so I used vmousedown. This works but only once per page. I'm doing this.
Mousedown
$(.headerNavBar).on('vmousedown','.logout',function() {
$(this).removeClass('ui-bar-c').addClass('ui-bar-c');
});
Mouse UP
$(.headerNavBar).on('vmouseup','.logout',function() {
$(this).removeClass('ui-bar-c');
});
$(.headerNavBar).on('tap','.logout',function() {
$(this).removeClass('ui-bar-c');
});
HTML is
<li>Log out</li>
The button is in a JQueryMobile page content block.
If there is a better way to just change the background gradient that would be fine too.
Update: I just noticed in the inspector that the class is being added and removed, it's just not updating on the page.
Use parent element or document to bind the event and give the selector. Second thing you may check you have vmousedown it would be mousedown and same for vmouseup.
Mousedown
$(document).on('vmousedown','.logout', function() {
$(this).removeClass('ui-bar-c').addClass('ui-bar-c');
});
Mouse UP
$(document).on('vmouseup','.logout', function() {
$(this).removeClass('ui-bar-c');
});
$('body').delegate('.logout','vmousedown', function() {
$(this).removeClass('ui-bar-c').addClass('ui-bar-c');
});