We Keep Coding

Replicating a select element with a checkbox ul (jQuery)

I'm trying to transform a fieldset with one legend and one UL of checkboxes/radio as a select html element. I know, it sounds bad and doesn't really make sense, but let's just say I have to do it.
I have a jsfiddle https://jsfiddle.net/demj49st/
The problem is that I have some issues replicating the click behavior of the select element. I don't find the right selector to make it so a click on a checkbox wont make the fake select box disappear.
(function($) {
$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
})
$(document).on('click', function (e) {
if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) {
$('ul').removeClass('visible');
$('legend').removeClass('active');
}
});
})
})(jQuery);

$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
});
$(document).on('click', function (e) {
if (!$("fieldset > ul , fieldset > legend").is(e.target) // if the target of the click isn't the container...
&& $("fieldset > ul , fieldset > legend").has(e.target).length === 0) // ... nor a descendant of the container
{
$('fieldset > ul').removeClass('visible');
}
});
});
DEMO

Navigation link does not highlighting the current menu, when submenu is clicked

I have written jquery code for highlighting menu onclick of each respective submenu. Now here what happening is
I have one same link in three of the sub-menu's, so when I click one of them, it is highlighting the last menu.
Here is my code:-
var str = location.href.toLowerCase();
$("#menu li a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents("#menu ul").parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("li.activelink").parents("#menu ul").parent().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("#menu li .para1 a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents().parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
Have a look here
Also see the HTML of the same in the Js fiddle
Please suggest something for the same

UPDATE: This was not the OP intended question. The code below will not solve the problem.
I had this problem numerous times. Try this CSS code:
#menu > li:hover { background-color: red; }
Replace the background color declaration with your own highlight.

Jquery scrolling back to top of page instead of required div

you can see here http://jsfiddle.net/Stratos123/qywaLszg/ the code for what i am trying to do. The isotope works perfectly and when you click the image the box opens up with the correct information but what happens is once the box is clicked the page scrolls to the top of the html page instead of scrolling to where the navigation is under the red box in example.
If i change the following code
// Portfolio Open and close
$(document).ready(function() {
$('.portfolio li a').click(function() {
var itemID = $(this).attr('href');
$('.portfolio').addClass('item_open');
to:
// Portfolio Open and close
$(document).ready(function() {
$('.gallery li a').click(function() {
var itemID = $(this).attr('href');
$('.gallery').addClass('item_open');
the portfolio opens and closes perfectly but then the isotop wont work.
Any ideas? I have been working on this for almost 2 weeks now. Going insane.

I guess you want something like this http://jsfiddle.net/qywaLszg/6/embedded/result/
Update
To work with your ul list you need to adjust the classes when you call the filter
Working example here http://jsfiddle.net/qywaLszg/9/embedded/result/
$('#filter li a').click(function () {
$('#filter li.selected').removeClass('selected');
$(this).parent().addClass('selected');
var selector = $(this).parent().attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linea',
queue: false
}
});
return false;
});
Just add in CSS
#portfolio{
position: relative;
}
And in the jQuery
$(".portfolio ul li a").click(function () {
$('html, body').animate({
scrollTop: $("#top").offset().top
}, 400);
});

I guess, it because parseInt cannot be in a string
$(".portfolio ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
also, on every click function, you could
return false;

How to keep next() function from hiding on hover?

I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/

My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle

You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle

jQuery menu with click to show and hide on mouseleave

At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});

On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});​
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}