Javascript/jQuery hover on separate elements - javascript

I have a strange problem, stemming from a layout that I cannot change to better solve this.
Basically I have a menu like so:
<div id="hornav">
<ul class="container">
<li class="item1">link</li>
<li class="item2">link</li>
</ul>
</div>
And I have drop downs separated like so:
<div class="dropdowns">
<div id="ditem1" class="dropdown-div">content</div>
<div id="ditem2" class="dropdown-div">content</div>
</div>
What i need to do is make the links hover to show the container. I can do this but I also need to make it so if I move my mouse over the drop down that shows, it does not disappear.
Because of the way the site is running, and what tools I am limited by I cannot make the dropdowns inside of the li elements (It is dynamically generated by the CMS, without any options) - This point is extremely important.
Right now this is the javascript code i am using. It functions to an extent, though IT is very buggy (If i hover over the contained element, then hover back it vanishes). This code may be slightly outdated as I have been gradually trying multiple methods, and reading up on this problem with little success.
function dropdown(event,passDown){
var classes=$(passDown).attr('class').split(' ');
for(var i=0;i<classes.length;i++){
if(classes[i].indexOf('item')!=-1){
var classId=classes[i];
}
}
var elem=$('#d'+classId);
event.preventDefault();
if(!elem.hasClass('active')){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
$('#d'+classId).addClass('active');
$(passDown).parent().addClass('active');
}else{
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
}
}
$(document).ready(function(){
$('#hornav>ul>li[class*="item"]:not(.item20)').each(function(){ //trigger all drop down links
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
if(event.relatedTarget.id.indexOf('ditem')==-1){
dropdown(event,this);
}
});
});
$('.dropdowns .dropdown-div').each(function(){
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
//if(event.offsetParent.className.indexOf('item')==-1){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
//}
});
});
});
EDIT:
We have decided to take another approach and are going to use clicks instead of hovers witch will not cause the problem.
I will leave this open for now, as it seems like a question that could help others out.
EDIT 2:
Never solved this and ended up coming up with another completely different solution. However I feel this question may help people in the future so I will leave it open if anyone wants to answer it.

for each child element, fire the events on the parent element:
jQuery(el).on('mouseenter mouseleave', function(e) {
jQuery(this).parent().trigger(e.type);
});

Related

Closing css dropdown using jquery

Sorry for the vague project title but I'm not having a great idea about how to explain this.
So, let's dive in to it. I was in need of a dropdown list with multiple select options to select recipients from.
I've started my search on Codepen and came across this: https://codepen.io/MaartenTe/pen/mXYLXj
I've forked it so I could tweak it myself. The snippets works perfect. The only thing missing is the ability of closing the dropdownlist when clicking outside of it.
So I started to approach it using javascript. So far I got following code:
$(document).click(function(e) {
var target = e.target; //target div recorded
if (!$(target).is('.multi-select ') ) {
$('.multi-select-options span').css('display', 'none');
$('.multi-select-options label').css('display', 'none');
}
});
Although this isn't working the way I want, I think it's the right approach?
Looking at how that works, its a checkbox that causes the toggle so you need to clear that when you click out the box.
$('.multi-select').on('click', function(e){
e.stopPropagation()
});
$(window).on('click', function(e) {
$('#toggle-open').attr({checked: false})
});
The stopPropagation will stop the window click even firing. https://codepen.io/anon/pen/rdwrya?editors=1111
What works in the given codepen:
var toggle = document.getElementById('toggle-open');
document.addEventListener('click', function(event) {
if (['INPUT', 'LABEL', 'SPAN'].indexOf(event.target.nodeName) + 1) return;
if (toggle.checked) toggle.checked = false;
});
Just handle click, exclude the relevant elements and uncheck if needed.

Dropdown Box disappear on click away

This is my first post on here and I'm just learning Jquery so please be kind! :)
I have just created a website - www.wayfairertravel.com and I have some dropdown boxes on my homepage, where users can search 'By Style' etc...
At the moment once those boxes are opened you have to close them manually... I'm just wondering if there is a way to change the code there currently so that when a user clicks elsewhere on the page it disappears.
Any help greatly appreciated. If you you could be as precises in your answer that would be great - I.e where to change the code and what to change to.
Cheers,
Harry
Usually, you add events on body and on the desired dropdown:
$(document.body).on('click', function() {
dropdown.close(); // .hide(); whatever
});
dropdown.on('click', function(event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
However, I think there are jQuery plugins for clickOutisde events that you could use too (they probably work like mentioned above, but you don't have to write it yourself).
I took Jakub Michálek advice and applied it your code. I prepared fiddle so you can test it out: http://jsfiddle.net/tmuuS/
This is your javascript you want to have on your page:
$(document).ready(function () {
$("#expslider").hide();
$("#expshower").show();
$('#expshower').click(function () {
$("#expslider").slideToggle();
});
$(document.body).on('click', function () {
$("#expslider").slideUp();
});
$("#expslider").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
$("#expshower").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
});
Although remember that it's better to have javascript in head tag, not right beside the place where you use it. (hard to look for it later when you need changes)

In between parent and iframe: mouseover/out combined with click behavior

I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.
If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>
this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div

JQuery... change hover state on focus & Limit keyboard navigation tab area

I'm using a JQgrid in one of my projects (JFiddle LINK). and would like
1.) the save & cancel button to highlight when a user tabs to it (same as on mouse over). Found this post but can't seem to get it working
FIX: based on the answer provided by saratis
after
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
add the following
<script type="text/javascript">
$(document).delegate('a', 'focus', function (event) {
$(this).removeClass('ui-state-hover'); //Remove previous hightlights
$(this).addClass('ui-state-hover');
});
$(document).delegate('a', 'focusout', function (event) {
$(this).removeClass('ui-state-hover'); //Remove previous hightlights
});
</script>
2.) When the user tabs between the fields on the add modal, would it be possible to keep the focus on the modal. eg that when tabbing, the focus only loops between the controls on the modal itself
3.) I'm experiencing a weird issue with the pager not being centered, and not sure what the fix is. I see that an attribute of 106px gets added to pager_left td which is causing it, gut its a generated value, so i'm not sure how to override/disable it
FIX: #pager_left{width:30%!important;}
Would it be possible to achieve any of this?
Thank you
First:
$('.yourInput').bind("mouseenter focus mouseleave",
function(event) {
$('.highlight').removeClass('highlight'); //Remove previous hightlights
$(this).addClass('highlight');
});
I have tried to add this to the fiddle, but I think the modal dialog is written dynamically to the DOM, so the binding should occur after its being placed. And I do not know how to integrate that. Sorry.
For the second part, can be done, but it would be easier when you povided a sample, or even better, as JSDFiddle. -> Looking at it now, I wouldn't know. I'm sure a JS jQuery Guru good do it, but this is too much for me. Again sorry.
Third:
Some good news, don't know the cause, but: #pager_left{width:150px!important;} does the trick.
Sorry I couldn't help more.
Use jQuery to check if any of the modal fields already have focus. If they do, trigger a function on keyup() that checks whether the tab button was pressed (its keycode is 9).
Use this to limit the tab indexing to your form.

Drop Down Problems

I am trying to create a drop down list. I have it working but not fully, using this code:
$(document).ready(function(){
$("#zone-bar li em").hover(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
});
I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?
It works if I put it to onclick but then you have to click the arrow to close it again. You can see a live example at http://doctorwhohd.com (currently using onclick)
It is likely behaving this way because hover() is intended to take 2 functions. One for mouseenter and one for mouseleave.
When you give it only one, I think it fires the one for both events.
Instead of hover(), use mouseenter().
$("#zone-bar li em").mouseenter(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
Try putting the hover on
#zone-bar li
and not on the em
Update, yes, you would need to modify the script:
$("#zone-bar li").hover(function() {
var hidden = $(this).children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).children("ul").toggle()
.children("a").addClass("zoneCur");
}
});
However, the suggestion of using mouseenter is probably superior, it seems that this causes momentary flicker.
You might want to consider doing this with pure CSS, there is no obvious reason to employ jquery to create this effect.
#zone-bar li{ height:1em; overflow:hidden};
#zone-bar li:hover{ height:auto};

Categories