Refer to this link (open firebug). I have a "dropdown" html element which has an event observer looking for mouseover. It's working, but it continuously fires mouseover events while you are mousing over the other elements inside it. I am guessing this is because of bubbling.
Is there a way to only make it fire the event on the initial mouseover? I want it to do an Effect and this is breaking the effect. I am sure it's just something basic I am not doing.
Thanks for the help.
Figured it out. With the latest version of prototype you can create onmouseenter and onmouseleave events, which only fire once. Thanks to the Protoype Google group.
I believe that you may want to use Event.stop(event)
Documentation: Prototype: Event.stop
You should only be observing the mouseover event on elements with the dropdown_label class.
Given your HTML:
<div class="dropdown" id="">
<div class="dropdown_label">About <strong>Us</strong></div>
<div class="dropdown_content">
<ul>
<li>Contact</li>
<li>Facts and Figures</li>
<li>Offices</li>
</ul>
</div>
</div>
Both the dropdown label and the dropdown content are contained within the dropdown. It sounds like you only want your effect to execute when the user mouses over the dropdown label.
Edit
Some untested JavaScript that may or may not work
$$('DIV.dropdown').each(function(dd) {
var dd_list = dd.down('.dropdown_content');
dd.select('DIV.dropdown_label').each(function(ddl) {
ddl.observe('mouseover', function(event){
console.log('mouseover');
dd.addClassName('dd_open');
});
});
dd.observe('mouseout', function(event){
console.log('mouseout');
dd.removeClassName('dd_open');
});
Related
I have following html on my page:
<div class="group-one" >
<p><span id="handle" draggable="true">::</span> click me</p>
</div>
<div class="group-two" draggable="true">
<p>I should be dragged</p>
</div>
Now what I want is that when #handle is dragged, the drag event should be delegated to div.group-two and element under move cursor should be div.group-two either. This is what I have tried:
$('#handle').mousedown(function(e){
$('.group-two').trigger(e);
});
$('#handle').on('dragstart', function(e){
$('.group-two').trigger(e);
});
$('.group-two').on('dragstart', function(e){
console.log('dragestart triggered on group-two');
});
$('.group-two').mousedown(function(e){
console.log("mousedown triggered on group-two");
});
Here is a jsfiddle.
The problem here is that although event is delegated to div.group-two but element being dragged under the move cursor is still span#handle.
Now my question is that, Is it possible to delegate drag in this manner? If it is, then any hint how to achieve it.
Note that I am using plain jQuery not jQuery UI.
Probably not. Personally it doesn't work for me, and after a bit of digging I found this extension someone made to help resolve it: https://www.bitovi.com/blog/delegate-able-drag-drop-events-for-jquery
I suspect it has something to do with the originalEvent being a trusted event and hence we can't modify its contents.
If you don't want to use the extension, perhaps consider relying on the quirk that users can only drag one thing at a time; and hence storing the data in a global variable (if its just going to be in the browser) would work. That's what I'm about to do :)
On a onepager website i've a livesearch implemented which works as a overlay. The results are shown like this:
<div style="display: block;" id="LSResult">
<ul id="LSShadow">
<li><a owl="sl23" slide="5" rel="sl23#6" class="clk_s">Team</a></li>
<li><a owl="sl22" slide="9" rel="sl22#10" class="clk_s">Trust Services</a></li>
</ul>
The click-function looks like that:
$('.clk_s').click(function() {
alert("click");
$('.search_ov').fadeOut();
})
Unfortunately, if i click on a result-link nothing happens. I don't know, but there must be some conflicts with the overlay/livesearch output - because if i testing without overlay, everything works.
Can somebody help me or know whats wrong?
thanks + best regards
thomas
The problem is that you are binding to the click event on elements that don't exist yet. Since the event is bound on page load, but the search function renders the .clk_s elements way after that, they will never trigger the event handler.
One way to solve this is to bind the handler on a parent instead, say <body> for example, and fire the handler when the event was triggered on a child that matches your selector. That way you have bound only one event handler, and it will trigger on any .clk_s no matter when they were added to the document.
Changing your snippet to this should do the trick:
$('body').on('click', '.clk_s', function () {
alert("click");
$('.search_ov').fadeOut();
});
For more info on jQuery's on() function: http://api.jquery.com/on/
How can I make it so that when I hover over one of my timeline items and navigate to the drop down menu, the mouseleave event will not fire and the menu will continue to display. Only when leaving both the menu and the timeline item do I want the menu to not display.
The mouseenter and mouseleave events are set on:
$(".trek_timeline_day .activity_link")
Put the timeline and the menu into one div and register the events for the whole div. So something like this:
<div class="wholediv">
<div class="timeline">...</div>
<div class="menu">...</div>
</div>
and then:
$( '.wholediv' ). etc.
I would recommend implementing some form of jQuery Menu Aim, similar to Ben Kaman's Amazonish smart menu - http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
If you put the .hover_info div inside the .activity_link (so there is one .hover_info inside each .activity_link), the mouseleave event will not get fired when you enter the .hover_info div because it's inside the .activity_link element.
I have an <input> that when focused on it shows a suggest drop down. When anything else is clicked the suggestions disappear. The problem is that I cannot seem to figure out to make it so that when the suggest <div> is clicked the blur event does not run.
Heres some of the HTML:
<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<li class="tagSuggestTag">testtag</li>
<li class="tagSuggestTag">testtag2</li>
<li class="tagSuggestTag">testtag3</li>
<li class="tagSuggestTag">testtag4</li>
</ul>
</div>
Heres some of the JavaScript:
$('#testTags').focus(
function(){
$('#tagSuggest').show();
});
$('#testTags').blur(
function(){
$('#tagSuggest').hide();
});
Try something like:
$("#yourinput").blur(function(e) {
if(!$(e.target).is(".suggestDiv")) {
// close the suggest div
}
});
UPDATE: (oops, the code above doesn't work as I thought it would)
This should work:
$(document).click(function(e) {
if (!$(e.target).is("#suggest")) {
$("#suggest").hide();
}
});
Demo: http://jsfiddle.net/PNVCL/
UPDATE2:
I forgot that you still need blur, because you probably want to hide the suggest div when you switch into another input by hitting tab. Here's an updated demo: http://jsfiddle.net/PNVCL/1/
Clicking anywhere still closes the suggest div (except on the suggest div itself or the input) as well as hitting tab to switch to another input. Still needs improvements, but you should be able to pick up from here.
You should not use the blur event because it's impossible to make the difference between a blur caused by a click on the suggest box and another blur (tab, window blur, right click, ...).
A workaround given by #dakis is to use the click event on the document but the suggest box to close the box. I suggest to dynamically add and remove the document click handler to avoid overhead, and to allow the user to click in the field without closing the box.
Demo here: http://jsfiddle.net/fvwPn/
In addition I made the box to close when TAB is pressed. I also added a dirty hack version (commented) which uses the blur event and a big hack using a timeout (since the two events are fired independently, the delay depends on the client browser and speed... yep it's a dirty hack).
Im trying to remove a class once the user hovers over a link.
Here is the HTML:
Fonctionalites
<div id="commercial_dd_total_FONCTIONALITES" class="menu_hidden">
<a class="commercial_dd_bg">Item One</a>
</div>
JS:
<script type="javascript">
$(document).ready(function(){
$("#menu_fonctionalites").hover(
function () {
$("#commercial_dd_total_FONCTIONALITES").removeClass("menu_hidden");
}
);
});
</script>
This isn't working.... any ideas about what I've done wrong?
http://jsfiddle.net/tuFru/1 it appears to be working here. You might include the CSS and describe what exactly isn't working for you. I updated it to take advantage of the second argument for hover as defined below:
Description
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
version added: 1.0.
hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element.
Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
See the discussions for .mouseenter() and .mouseleave() for more details.
If you are just trying to toggle visibility you could probably just add the normal class for the div styling and toggle it using the jQuery hide()/show() methods.