We Keep Coding

how to close notification when trigger clicked twice or outside element in jquery

I have a notification widget that will appear when I click the trigger and disappear when I click the trigger twice or click elsewhere in outside element.
How to do that?
$('.swt').click(function(){
$('.swt').removeClass('active');
$('.ctx').removeClass('ctx-active');
$(this).addClass('active');
});
var ccd = 1;
$('#add').click(function(){
$('#ad').addClass('ctx-active');
});
$('#msg').click(function(){
$('#ms').addClass('ctx-active');
});
$('#notif').click(function(){
$('#no').addClass('ctx-active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
demo code

Just change the removeClass and addClass with toggleClass. Here's the Documentation on toggleClass.
Here's a fixed JSFiddle.
For 'close when click outside', you will have to add a transparent div with full width and height behind #tooltip, and add a click eventListener.

You can use dblclick for double-click event handler and inside the event handler you can add checking like this one:
$(document).dblclick(function(e) {
if (e.target.id != "show" && !$(e.target).parents("#show").size()) {
//remove class
}
});
For the implementation you can see here : JSFiddle

Thanks for answers.
Finally i find the result for all the problems.
i just use sibling() and toggleclass() to fix the problems.
this is the update demo.
demo code
$('#add').click(function(){
$('#ms').removeClass('ctx-active');
$('#no').removeClass('ctx-active');
$('#ad').toggleClass('ctx-active');
$('#add').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#msg').click(function(){
$('#no').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#ms').toggleClass('ctx-active');
$('#msg').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#notif').click(function(){
$('#ms').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#no').toggleClass('ctx-active');
$('#notif').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
$('#ss').click(function(){
$('.ctx').removeClass('ctx-active');
$('.swt').removeClass('active');
});`

Jquery toggle not showing div after hiding

When you click 'Darrien Tu' the text on the far right disappears but it doesn't come back when you reclick the name.
https://jsfiddle.net/gkrh0ok0/1/
$("#nav_list").click(function () {
$(".sidebar-right").toggle();
});

I have check the fiddle. There is one issue in .sidebar-right
You have given margin-left:80% instead of give right:20px
This might help to solve your issue.
I have update your script code :
<script>
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open').after($(".sidebar-right").toggle('slow'));
});
});
</script>
Add comment to this code
<script>
/*$("#nav_list").click(function() {
// assumes element with id='button'
$(".sidebar-right").toggle();
});*/
</script>

.slideDown() not working

This should be easy but I checked on google and did not find any info on this.
I am doing:
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
However it is not sliding down. It is getting displayed without any animation. No error either.
.slideUp() is working properly.
What am I doing wrong here?
jsFiddle

Change
$notification.slideDown(1000, function () {
$('#notifications').append($notification);
});
to
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
The reason why slideDown doesn't work is because the element is visible when you are appending it
DEMO
Also note that when you slideUp the notification you should remove it because otherwise you'll have multiple notifications just taking up place
$closeButton.click(function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
});

You had two minor issues, first your .notification element needs to be hidden to be able to slideDown().
.notification{
display: none;
}
Secondly, you were trying to animate in an element that doesn't exist until the animation is complete :)
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
Updated script below. PS: Don't forget to add the CSS snipplet.
$(document).ready(function(){
CKEDITOR.replace( 'description' );
$('#title').focus();
$('form').submit(function(event){
event.preventDefault();
var html=CKEDITOR.instances.description.getSnapshot();
var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').html(html);
var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
$('#notifications').append($notification);
$notification.slideDown(1000);
$closeButton.click(function(){
$(this).parent().slideUp();
});
});
});

slideDown documentation says:
$notification.slideDown(1000, function(){});
here function executes on sliding complete. So you need to append hidden element then slidDown to show.
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
Here is demo

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.

jQuery Hide Toggeled Div On Document.click

I currently have the following code:
$(function(){
$('#btn_signIn').click(function(){
$('#div_signInBox').toggle("fast");
});
});
I need to hide the div_signInBox toggled div anytime any other part of the window is clicked...
Thanks!

Is this what you want?
$(function() {
$('#div_signInBox,html').click(function() {
if ($(this).is('#div_signInBox'))
return false;
$('#div_signInBox').toggle("fast");
});
});