We Keep Coding

Changing from Mousehover to Click Function

My website uses a vertical menu structure, which operates by Mouseover. Move the mouse over a menu item, the sub-menu shows. Move the mouse away from the menu item, the sub-menu hides.
Due to the fact that there are too many menu items to use the hover function properly without everything going all over the place, I need to change the menu to a click function instead. Similar to this, with a slide function also if possible: http://jsfiddle.net/ZCrk4/17/
I've tried changing the ".hover" to ".click" but that just messes the site up for some reason. Here's the code below:
jQuery(document).ready(function(){
"use strict";
jQuery('#main_menu li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
jQuery('#menu_wrapper .nav ul li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
...
Any help is always appreciated.
Thank you.

Take a look at this, and try it:
jQuery('#main_menu li').click(function(){
var jQuerysublist = jQuery(this).find('ul:first');
if (jQuerysublist.is('.visible')) {
jQuerysublist.removeClass('visible');
} else {
jQuerysublist.addClass('visible');
}
});

Sticky Navigation not working

I'm trying to add a 'fixed' class to a menu once the scroller hits that menu. I've managed to get it working, but having problems removing the class once the user scrolls back to the top.
Here is the site I'm working on: http://www.allbyor.com/
Here's is my JS code:
$(window).bind('scroll', function () {
var menu = $('.bottom-row');
if ($(window).scrollTop() >= menu.offset().top) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});

You need to register the original value of the menu.offset().top in a variable, because once you change its class to fixed the top value will be the same as the $(window).scrollTop().
JSFiddle demo.
var menu = $('.bottom-row');
var menu_top_value = menu.offset().top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() >= menu_top_value) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});

Change to fixed on click

I have a bit of javascript. I want to achieve that when you click on the menuBtn class that it changes 'nav' to fixed fixed.
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
//nav position fixed//
});

$('.menuBtn').click(function() {
$('.nav').css('position','fixed');
});
Not quite sure if nav is an ID or a class. # or . the code should look like this.

Content within Accordion to slide in from the left

i have an accordion but i want the content to slide in from the left after the accordion has come down.
my code so far however this makes the original slide jumpy.
I also have a fiddle showing the original code...
$(function () {
$(".expand").on("click", function () {
$(this).next().toggle("slide", {
direction: "left"
});
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});

Try this fiddle.
$(".expand").on("click", function () {
$('.detail').toggle('slide');
})

How to rotate a bullet image in toggled unordered list with jQuery

Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});

All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});

$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it