Develop Reference

How to make a top level drop down item clickable

Im making a store in shopify, and have set up the navbar as a dropdown.
Clicking the nav links will only make it display or hide the drop down, but what i need is for it to, on the first click, display, then clicking the parent will follow the link.(for instance,my home item drops down, but i can't actually get home, and need it as a drop down item.)
HeaderView.prototype.events = {
"click .main-nav .dropdown > a": "toggleMenu",
};
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
e.preventDefault();
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
};
Obviously the e.preventDefault is stopping the link from working, but I'm not sure how to make it give an active class on the first click, then allow the link to be followed when the drop down is visible. It works with hover, but then won't work on touch devices.
Any help/suggestions would be appreciated, thanks.

You only need to call e.preventDefault() when you are doing the first click. Otherwise it is, like you said, preventing it from working.
Try this instead:
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
e.preventDefault();
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");
}
};

Thanks for the response, I was going along the same line of thought and wound up with a simple, "if the class is active prevent default" type statement.
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
So basically, if the drop down shows, allow the link, if isn't showing, prevent it;
thus keeping the top level as a link if it's drop down is 'open'.
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
}
};

how can I check if a particular item is clicked with .blur() in jquery

I have an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});

You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);

How to make this menu behavior in jquery

So this is what i want, take a look jsfiddle for example, I want 3 boxes and when you hover over them another box appears that goes away when you hover away from that box or main box but not when your mouse is in between them the empty space.
Once you click the new box the box remains there until:
user clicks anywhere else.
or an close text is clicked
http://jsfiddle.net/T5QHn/4/ Updated
var menu = $('.menu'), body = $('body');
menu.children('.box').hide();
body.click(hideIt);
menu.hover(showIt,hideIt);
menu.click(keepIt);
function showIt() {
$(this).children('.box').stop().fadeIn();
}
function keepIt() {
//something efficent and not illogical..
}
function hideIt() {
//i have a feeling this depends on keepIt and insn't just inverse of showIt
$(this).children('.box').stop().fadeOut();
}

use mouseenter and mouseleave on the parent, instead of hover.
Apply the click to hide all boxes to the body, then, on the containers put a click handler with event.stopPropagation
Updated fiddle: http://jsfiddle.net/moagrius/fsPd3/1/

Trigger event on a select when the value is the same

I am triggering a event when the user changes a selection in a select menu. As you would imagine it works when the user selects a option that is different than what is already there but when it is the same nothing happens. I have tried changing it to a click event but that doesnt seen to work.
If anyone has a work around for this it could greatly be appreciated.
I have found some solutions to this issue but none of them seem to work for me.
I am also using backbone if this makes a difference to you
My event looks like this:
'change .js-select' : 'show_colours',
UPDATE:
Thanks for the feedback
My scenario is this.
I have four select menus with 0, 1 and 2 as the options. If the user selects anything but zero a block of colour tiles will appear below it so the user can click on a colour. This is the same for all of the select menus.
Now due to lack of space the user can only have one block of colours open at a time. So if the user wants to go back and change a colour on a closed block of colours they need to select a different option than what they already have because if they select the same the event to open the block of colours will not fire.
I hope that is clear.

You can try something like this:
var open = false;
$('select').on('mouseup', function () {
if (open) alert(this.value);
open = !open;
});
http://fiddle.jshell.net/6LYbu/1/
Update
Since this will not work on touchdevices, we should listen for the change-event too:
var open = false;
$('select').on('mouseup change', function (e) {
if (open || e.type === 'change') alert(this.value);
open = !open;
});

How I can I get my grid to appear from a text box

I have a grid of buttons in my code where the user clicks on the word "click here" and the grid of buttons would be displayed. This uses jquery, what I want to know is that does anyone know a way so that the user can click on a text box and what happens is that the grid of buttons appear and if the user clicks on a button or clicks away from the grid, the grid disappear again. In other words I want it to work exactly how the Jquery datepicker works (to see the datepciker jquery please click here
To see my code then it is in jsfiddle, click here

Try this:
UPDATED
$('#showGrid').click(function(e) {
if ($('#gridone').css("display") == "table") {
$('#gridone').hide();
}
else {
$('#gridone').css("display", "table");
}
e.stopPropagation();
});
$("body").click(function() {
$('#gridone').hide();
});
$('#gridone input').click(function(){
$('.box INPUT').val($('.box INPUT').val() + $(this).val() );
$('#gridone').hide();
});
Example fiddle