We Keep Coding

Javascript manually 'declick' then click child element whilst clicked

Hi please feel free to suggest a better title I couldn't think of a way to word it.
Issue
I have a Google Maps with pointer events set to none; this stops the map being scrolled into when you scroll over it and it works great.
I have a div that is wrapped around this element and when you click into it, it allows all pointer events on the map inside it therefore allowing you too scroll on the map.
Once you then leave the map with your mouse it re-enables pointer events none so that you can scroll over it.
The main issue is that when you click the map you then have to click it again to scroll.
I want to know if it possible to click on the overlay then to get it to un-click and click again for the user to save them being confused about having to click again. The reason this may be difficult is because when the user has clicked down it needs to un-click and click whilst they are still pressed down.
Code
The issue I am having is that I have a Google Maps inside a div like so in the HTML:
<div id="gmap-holder" class="dealer-details__map gmap-scroll-block--on">
<div id="map" class="dealer-details-gmap"></div>
</div>
JS working as explained in the header
$('.dealer-details__map').on('click', function(){
$(this).removeClass('gmap-scroll-block--on');
$(this).addClass('gmap-scroll-block--off');
});
$('.dealer-details__map').on('mouseleave', function(){
$(this).addClass('gmap-scroll-block--on');
$(this).removeClass('gmap-scroll-block--off');
});
Pseudo of what I am trying to achieve
$('.dealer-details__map').on('click', function(){
$(this).removeClass('gmap-scroll-block--on');
$(this).addClass('gmap-scroll-block--off');
//pseudo start
//$(this).unclick()
//$(this).child().click();
//pseudo end
});

You might want to use Custom Controls, so that you can create your own controls to handle interaction with the user. This involves Drawing Custom Control, Handling Events from Custom Controls and Positioning Custom Controls, it will also be easier to track as your function is in a button. You can take a look on the sample code, for reference on how the implementation would be. Hope this helps!

$('.dealer-details__map').on('click', function(event){
event.stopPropagation();
$(this).child().click();
});

Synchronizing top-nav mouseleave for a tab and its associated submenu

I'm trying to create a top-nav menu as follows:
The idea is that when you click a tab, the tab itself gets highlighted in black and an associated menu shows up beneath it. This works fine.
I also want the menu to disappear and the tab to be unhighlighted if the mouse leaves either the tab or the menu. This is where I'm running into trouble. At the moment, the JQuery I use to handle this is roughly as follows:
$('.item-support a').click(function(e){
// removeClass('curr') from all other tabs
$('.item-support').addClass('curr');
$('#submenu-support').fadeIn('fast');
$('.item-support').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
}else{ // Click again
$('.item-support').removeClass('curr');
$('#submenu-support').fadeOut('fast');
}
return false;
});
$('#submenu-products').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
// Similar code for the other tabs
The problem is that the mouseleave events for the tab and sub-menu are not synchronized. So, for example, if the mouse leaves the support tab and enters the submenu below it, the submenu vanishes. I've tried many different approaches to get around this and even have one that crudely works using pageX and pageY co-ordinates, but I'm looking for a more elegant solution. How do I get the tab and its associated submenu to work in tandem? Is there a way to bind the two divs together? Or make mouseleave recognize an exception when entering a certain div?

You can check if either element is hovered, and do something like this:
$('.item-support, #submenu-support').mouseleave(function() {
setTimeout(function() {
if (!$('.item-support').is(':hover') && !$('#submenu-support').is(':hover')) {
$('.item-support').removeClass('curr');
$('#submenu-support').hide();
}
}, 50);
});
You also shouldn't bind your mouseleave event in the callback of another event. Currently every time you click item-support, you are binding another mouseleave event to it.

Prevent context menu and mouse drag on all elements but one

I am trying to prevent right click context menu, and mouse drag on every element on my page except for one called 'IPAddress'.
Using the code below would seem to do the job, but I still cannot select the element 'IPAddress'.
How can this be altered to allow for this behavior?
html.on('selectstart dragstart contextmenu', function (evt) { // prevent right click, and mouse drag
if (html.not('#IPAddress')) {
evt.preventDefault(); return false;
};
});

Try this:
if (!$(evt.target).is('#IPAddress'))
jQuery not is intended for elements-set filtering, and is not the opposite of is.

How do I make a div both scrollable and clickable?

<div id="menuContainer"></div>
<div id="menuItemTemplate" class="menuItem">
<div class="menuItemTitle"></div>
<div class="menuItemImage"><img src="resources/BlackRightChevron.png"/></div>
</div>
The menuContainer div is dynamically appended with clones of the menuItemTemplate. The current click event:
menuContainer.addEventListener('click',menuContainer_click,false);
does not fire when menuContainer overflows in the y-axis.
So I implemented some code found else where on stackoverflow.
Which makes it scrollable but the click events do not run (probably because of the preventDefault()s). Without them I figure every event would be registered as a click instead of a possible move.
Oh, I'm using jQuery mobile and it's UI as well.
Is there any solution to my problem?
The changes I made as per the suggestion:
var scrollStartPosY=0;
document.getElementById(element).addEventListener("touchstart", function(event) {
scrollStartPosY=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(element).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPosY-event.touches[0].pageY;
event.preventDefault();
move = true;
},false);
document.getElementById(element).addEventListener("touchend", function(event) {
if(move)
move = false;
else
menuContainer_Click(event);
},false);

I'm sure the preventDefaults are wiping out your click. In any case you're using click/mousedown/touchstart to scroll exclusively.
What I think you should do is register a touchend event to trigger whatever you intend to have the current click event do. You may want to verify whether there has been a scroll in the meantime and if so, ignore the touchend. That would differentiate between the two separate intentions of scrolling and clicking.

Decided that iScroll was just an easier solution. Though having difficulty with only one div not scrolling completely to the "bottom".

Detecting position with drag-and-drop and jQuery?

I need to know how to detect the position of a dragged item as opposed to other divs. I need to detect whether an item is dropped outside of two different divs. (I am building a mac dock type start page and I need to know how to do this so I can delete icons by dragging them off the bar.)
Any help would be greatly appreciated.

You can use a combination of draggable and droppable from jquery ui. Set your toolbar as droppable and your icons as draggable like this:
var deleteClass = 'deleteMe';
$('div.toolbar').droppable({
out:function(event, ui){
ui.draggable.addClass(deleteClass);
},
over:function(event,ui){
ui.draggable.removeClass(deleteClass);
}
});​​​​​​​​​​​​​​​​​​​​
$('div.icon').draggable({
helper:'clone',
revert:'valid',
opacity:.5,
stop: function(event,ui){
if($(this).hasClass('deleteMe')){$(this).fadeOut();}
}
});
Basically the work is in the events. Out and over events of the droppable toolbar add and remove a class on the icon that we can use as a flag to know when the icon is not over the toolbar. The stop event on the draggable icon then lets us remove the icon if it is not over the toolbar. You can try it out with this jsFiddle. I'm sure the same could also be done using the jquery ui sortable widget so you could also let your users re-arrange icons if they want.