jQuery toggleClass conflict - javascript

For a new webdesign I have two 50% width slider div's as a menu, and I want to add/remove/toggle the 'open' class with jQuery. On the click of one of the .menul, the #left should have added class .open, unless #right:hover and the other way around. The first time you click it it works, but the second time you click it seems to be that the toggleClass is stuck / not updated... Does anyone know how to fix this?
Here's my HTML:
<div id='home'>
<div class='slide' id='left'>
<div class='wrap'>
<div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a><br/>
<div class='subtext'>
<a class='menul' href='#artist'>Performing artist</a><br/>
<a class='menul' href='#composer' id='one'>Media Composer</a><br/>
<a class='menul' href='#producer' id='two'>Band Producer</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logol'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
<div class='slide' id='right'>
<div class='wrap'>
<div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a><br/>
<div class='subtext'>
<a class='menur' href='#management'>Content Management</a><br/>
<a class='menur' href='#portfolio' id='one'>Design Portfolio</a><br/>
<a class='menur' href='#engines' id='two'>Search Engines</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logor'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
</div>
And here's my jQuery:
$('.menul').click(function(){
$('#left').addClass('open');
$('#right').removeClass('open');
$('#right').hover(function(){$('#left').toggleClass('open')});
});
$('.menur').click(function(){
$('#right').addClass('open');
$('#left').removeClass('open');
$('#left').hover(function(){$('#right').toggleClass('open')});
});
And here's the fiddle: http://jsfiddle.net/ytexqtyg/2/
Any help would be very much appreciated!

I had another look and you will have to add another class or data attribute to differentiate between an active-and-closed menu and a active-and-open menu or this won't work.
The active "flag" is to ensure you only toggle the .open class on an active menu.
In addition you also need to keep unbinding the hover event as otherwise you are constantly re-binding the hover, causing the element to have multiple hover events bound which then will all execute and contradict each other.
Note that when unbinding the hover event using jQuery off('hover')/unbind('hover') doesn't work and you must unbind the mouseenter and mouseleave events as those are bound by jQuery when using selector.hover(...)
The new JavaScript code is as follows:
$('.menul').click(function () {
$('#left').addClass('active');
$('#left').addClass('open');
$('#right').removeClass('active');
$('#right').off('mouseenter mouseleave').hover(function(){
if($('#left').hasClass('active')){
$('#left').toggleClass('open');
}
});
});
$('.menur').click(function () {
$('#right').addClass('active');
$('#right').addClass('open');
$('#left').removeClass('active');
$('#left').off('mouseenter mouseleave').hover(function(){
if($('#right').hasClass('active')){
$('#right').toggleClass('open');
}
});
});
DEMO - Using a separate indicator for an active menu

Related

Toggle Class combined with Spot.js changing perspective

I am busy with a project where images change perspective, following the mouse position, when the mouse is on the image.
HTML
<a href=""><div class="one spot-area">
<img class="thumbnail add1" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
</div></a>
<a href=""><div class="two spot-area">
<img class="thumbnail add2" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
</div>
</a>
<a href=""><div class="three spot-area">
<img class="thumbnail add3" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
</div>
</a>
<a href=""><div class="four spot-area">
<img class="thumbnail add4" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
</div>
</a>
the two variations i use
var spotAreaElem = document.getElementsByClassName("spot-area"),
spotPerspectiveElem = document.getElementsByClassName("spot-perspective"),
Toggle class
$(".add1").hover(function () {
$(this).toggleClass("spot-perspective");
});
$(".add2").hover(function () {
$(this).toggleClass("spot-perspective");
});
$(".add3").hover(function () {
$(this).toggleClass("spot-perspective");
});
$(".add4").hover(function () {
$(this).toggleClass("spot-perspective");
});
So when i hover over the first images it works just fine. When i try to hover over a new images it seems like the spot-perspective did not toggle on the new images and on the old one.
But when i scroll and keep my mouse on the new images it does toggle on both images. after that the same problem occurs.
Any help would be greatly appreciated.
$.toggleClass only a)adds or b)removes the class per function call.
You need to manually call toggle again to remove the class after it was added.
The mouseleave event can be used to detect when the mouse leaves.
// The function that will call the toggle.
// This will add or remove the class based on if it present or not.
function toggleSpotPerspective(){
$(this).toggleClass("spot-perspective");
}
$(".add1").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);
$(".add2").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);
$(".add3").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);
$(".add4").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);

Show/hide multiple children classes for an individual parent click (Jquery)

I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?
To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery
You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.

Jquery script is it possible to make smaller or more effecient

Ok so I have a webpage with six icons followed by a header and button for each. Currently I have it working as when you hover over img-1, header-1 and button-1 all hover the same color so on for the following. I was wondering as my jquery im still new and havent mastered it by any means but I call out every single change I want, I was wondering if there is a way to consolidate it or make it easier if I want to change it but still have it hover and change colors to the corresponding divs
Ive set up a snippet of what I have on jfiddle an as you can see on my jquery list i have a long list of stuff doing the same thing
Thanks any tips or tricks would be greatly appreciated to help me in any future sites I write
http://jsfiddle.net/udegrbnr/
<div style="width:50%;float:left;">
<div class="container-1">
<div class="visible-1 upgradea-1 upgradea imgnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 upgradea-1 upgradea otherimg-1"><img src="http://placehold.it/250/db232b/000000" alt=""></div>
</div>
<h3 class="upgradea upgrade otherimg" style="text-align: center;">Upgrade Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-1 buttonshadow-no button-upgrade otherimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div> </div>
<div style="width:30%;float:left;">
<div class="container-1">
<div class="visible-1 contracta contractnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 contracta contractimg-1"><img src="http://placehold.it/250/344da1/000000" alt=""></div>
</div>
<h3 class="contracta contractimg" style="text-align: center;">Contract End Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-3 buttonshadow-no contracta contractimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div></div></div>
and here is all 6 divs i have for my jquery as i feel its alot and can be simplified hopefully
Like i have seen the "this" command but dont know if that could be applied
$(function(){
$(".upgradea , .button-upgrade").hover(function(){
$(".upgradea , .button-upgrade").toggleClass("changecolor");
});
$(".button-upgrade-1").hover(function(){
$(".button-upgrade-1").toggleClass("changecolor-1");
});
$(".flexa ").hover(function(){
$(".flexa").toggleClass("changecolor-2");
});
$(".contracta ").hover(function(){
$(".contracta").toggleClass("changecolor-3");
});
$(".mileagea ").hover(function(){
$(".mileagea").toggleClass("changecolor-4");
});
$(".warrantya").hover(function(){
$(".warrantya").toggleClass("changecolor-5");
});
$(".otherimg").hover(function(){
$(".otherimg-1").toggleClass("changeimg");
});
$(".otherimg").hover(function(){
$(".imgnone-1").toggleClass("hidden-1");
});
$(".fleximg").hover(function(){
$(".fleximg-1").toggleClass("changeimg");
});
$(".fleximg").hover(function(){
$(".flexnone-1").toggleClass("hidden-1");
});
$(".contractimg").hover(function(){
$(".contractimg-1").toggleClass("changeimg");
});
$(".contractimg").hover(function(){
$(".contractnone-1").toggleClass("hidden-1");
});
});
I don't see any reason not to use CSS for all of this. If you target the children of a hovered parent, you can style it however you like. For example:
.parent:hover h3, .parent:hover .child a {
color: red;
}
This CSS could absolutely be further cleaned up, there are a lot of redundant CSS rules and unnecessary containers, I just didn't want to stray too far from the example you provided.
http://jsfiddle.net/qk53a5q4/
Yes, re-think your CSS.
Instead of having a specific class for each hover/changeimg/changecolor state, have one class that states what the thing is then one class for each state.
HTML:
<button class="button-1 hover">Button 1</button>
<button class="button-2 hover">Button 2</button>
CSS:
.button-1.hover { /* styles */ }
.button-2.hover { /* styles */ }
jQuery:
$('.button-1, .button-2').hover(function() {
$(this).toggleClass('hover');
});

Moving mouse to quickly doesn't trigger mouseleave

I have the following html:
<div class="guide-block" id="energy_guide">
<div class="guide-block-inner">
<div class="guide-block-head">
<a class="guide-block-link" href="#">
<h3 class="guide-block-title">Guides</h3>
</a>
</div>
<div class="guide-block-image">
<div class="guide-block-image-inner" id="energy_guide">
<img src="images/Energy-Saving-Bulb-01.png" alt="Guide">
</div>
</div>
<div class="guide-block-more">
<ul class="guide-block-list us-list" id="energy_guide">
<li>News</li>
<li>Guides</li>
</ul>
</div>
</div>
</div>
and the following js:
$( "#energy_guide" ).mouseenter(function()
{
$(".guide-block-image #energy_guide")
.fadeOut("fast", function()
{
$(".featured_news .guide-block-inner .guide-block-more #energy_guide")
.fadeIn("fast");
});
});
$( "#energy_guide" ).mouseleave(function()
{
$(".featured_news .guide-block-inner .guide-block-more #energy_guide")
.fadeOut("fast", function ()
{
$(".guide-block-image #energy_guide")
.fadeIn("fast");
});
});
The list is hidden by default in the css and what i want to achieve is to replace the image with the list while hovering the mouse over the whole guide-block div. Everything is fine and dandy until you move your mouse too fast, the mouseleave function not being triggered for some reason.
Just a first idea that hit me was that actually your events are totally fine, rather the way jQuery constructs Animations and builds them in the queue.
a probable fix would be to .stop() your subsequent animations (anim. buildups) so an overall code could look like:
$( "#energy_guide" ).hover(function() {
$(this).stop().fadeToggle();
});
(Without seeing a demo of your code with CSS it's a bit hard to guess but here you go)
The way you use your selectors is wrong:
.featured_news .guide-block-inner .guide-block-more #energy_guide
jQuery will select only #energy_guide and taking in considerations that it's the only ID in your document (as it should be) there's no need to use parent Class selectors.

how can I remove the subnavigation overlap?

I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?
url: http://arabic001.com
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01').mouseleave(function() {
$('#subNav01').hide('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav02').show('slow');
});
$('#subNav02').mouseleave(function() {
$('#subNav02').hide('slow');
});
})
I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:
html
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display:none;">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">
<div id="engNavText02">Numbers</div>
<div id="arbNavText02">الأحرف</div>
<div id="subNav02" style="display: none; ">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
and the JS
$(document).ready(function() {
$('.menu_item').children().hover(
function(){
$subNav = $(this).parents('menu_item').children("div[id^='subNav'");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});
})
You've created a mouseleave event, but you've only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:
$('#arbNavText01').mouseover(function() {
$('#subNav02').hide('slow');
$('#subNav01').show('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav01').hide('slow');
$('#subNav02').show('slow');
});
Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren't clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.
I'm going to spit ball an idea, it may not even work let alone be the best way.
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display: none; ">
<span style="font-size:26px; cursor:pointer;">قراءة</span
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">...
Edited JS, I think now it could work
$('.menu_item').hover(
function(){
$subNav = $(this).children("div[id^='subNav']");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).children("div[id^='subNav']").hide('slow');
}
);
Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.

Categories