We Keep Coding

If an element is already visible how do I stop it from toggling

I have a hover state and onclick state on a page. I also have a toggle on the hover state. If the user has already onclicked an element, how do I stop that element toggling again if the hover event re-occurs?
$("#ex").hover(function() {
$("#prod").toggle(300).delay(1000);
$("#test").toggle(300).delay(1000);
$("#dev").toggle(300).delay(1000);
});
$("#prod").click(function() {
$("#prod").unbind("mouseenter mouseleave");
$("#prod").finish();
$("#prod").show();
});
$("#test").click(function() {
$("#test").unbind("mouseenter mouseleave");
$("#test").finish();
$("#test").show();
});
$("#dev").click(function() {
$("#dev").unbind("mouseenter mouseleave");
$("#dev").finish();
$("#dev").show();
});

Use the .is(":visible") selector and check if it is visible, if so, don't toggle.
$("#ex").hover(function() {
if (!$("#prod").is(":visible")) $("#prod").toggle(300).delay(1000);
if (!$("#test").is(":visible")) $("#test").toggle(300).delay(1000);
if (!$("#dev").is(":visible")) $("#dev").toggle(300).delay(1000);
});

Add/remove class on click - how do I remove the class on a second click area?

I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});

This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.

You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})

jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}

Element inside div should not interfere on the event handler

I have a div and inside it I have a p. The paragraph is visually above the div. My event handler is being affected by the paragraph.
This is my event handler:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});
So, when I am moving my mouse on the div, it will toggle the class if I cross the paragraph. What I want is to only toggle the class once I enter/leave the div. I also tried to use this:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() {
$(this).toggleClass("active-b");
});
But now it toggles twice once I move my mouse above the paragraph...

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
if (this.id == "container-map")
{
$(this).toggleClass("active-b");
}
});
That should work. It only fires when this has the same id as the div.

You have to use mouseenter not mouseover
$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() {
$(this).toggleClass("active-b");
});

If what you want is that your active-b class is only affected when you leave/enter.
You need to use mouseenter not mouseover.
$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});

Changing the css of button when its active

I want to change the CSS for the element btn1 (its a button) while its active.
I want to look different as long as "story" is shown (when pressed shows a div, as long as the div is shown i want the button to have a different color from the normal css)
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
});

$('#btn1').on('click', function() {
$(this).toggleClass('active'); // add/remove a css class
$('#story').fadeToggle(400);
});
in your css add
.active{
// styles you wish to apply
}

Try .css() method:
$('#btn1').on('click', function() {
$(this).css({'border':'1px solid blue', 'color':'red'});
$('#story').fadeToggle(400);
});
Working Example

:active selector https://developer.mozilla.org/en-US/docs/Web/CSS/:active
and look on this site http://www.paulund.co.uk/css3-buttons-with-pseudo-classes

It sounds like you want to do this:
$(function() {
$('#btn1').on('click', function() {
$(this).css('background-color','red'); // or whatever
$('#story').fadeToggle(400, function() { // 'complete' callback function
$('#btn1').css('background-color','white');
});
});
});

Changing parent css on child hover

i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.
I have 1 parent div with an inner submit button:
<div class="ugd_ele_normal_base">
<input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->
What i want is for when the submit button is hovered over, the parent css changes background.
I have tried a few things, but nothing seems to work.
Thanks for the help

I would use jQuery & CSS for this:
CSS
.black {
background-color: #000000;
}
jQuery
$(function() {
$('.ugd_ele_normal').hover( function(){
$(this).parent().addClass("black");
},
function(){
$(this).parent().removeClass("black");
});
});

$('input.ugd_ele_normal').on({
mouseenter: function() {
$(this).parent().css('background', 'url(/folder/image1.jpg)');
},
mouseleave: function() {
$(this).parent().css('background', 'url(/folder/image2.jpg)');
}
});
or short(er) version:
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});
and to retrieve the old image:
var bgImg = $('input.ugd_ele_normal').css('background-image'),
hvImg = 'url(/folder/image2.jpg)';
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});
or use classes:
.hoverClass {background: url(/folder/image2.jpg);}
-
$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
$(this).toggleClass('hoverClass');
});

You can do this way.
$("#ugd_1").hover(function(){
$(this).parent().css("background","red");
},
function(){
$(this).parent().css("background","none");
});
​
​
Live Demo :
http://jsfiddle.net/Z4QDC/2/

i would define some jquery to do this, and use a custom class.
//when the document is loaded, execute the following code
$(document).read(function(){
//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
//we add the class black to the parent on hover
$(this).parent().addClass("black");
},
function(){
//and remove it on exit hover.
$(this).parent().removeClass("black");
});
});
​
can be seen in action here:
http://jsfiddle.net/xBuyC/

Try:
$('input[name="ugd_1"]').hover(function() {
$(this).parent().css('background-color', 'COLOR');
});
Hope it helps.