We Keep Coding

Click On window to add class on span

I can remove class when I click On button. I need To add the remove class again after I click on button and span display when I click On window
my HTML file
<button>Click To show Comment</button>
<span class="my_comment my_comment_none">Hello</span>
my CSS FILE
.my_comment{display: block} .my_comment_none{display: none}
my js File
$(document).ready(function () {
$("button").click(function () {
$(this).removeClass("my_comment_none");
});
});

You can attach the click event on document object and check the target name to hide or show the comment:
$(document).ready(function () {
$(document).click(function (e) {
if($(e.target).is('BUTTON'))
$('.my_comment').show();
else
$('.my_comment').hide();
});
});
.my_comment{display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click on the button to show the comment
and hide the comment on clicking anywhere else</div>
<button>Click To show Comment</button>
<span class="my_comment" id="comment">Hello</span>

use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
for window click . maintain any unique id for button and use selectors with id
$(window).click(function () {
if ($('button').hasClass("my_comment_none")) {
$('button').removeClass("my_comment_none");
}
})
;

use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});

You may use simply jQuery slideToggle() function.
$("button").click(function(){
$(".toggle").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click To hide/show</button>
<div class="toggle">Hello</div>

Disable right click except some elements

I am using this code to disable right click on my page:
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
How can i add some exception, lets say when you right click on image the context menu should not be disabled.
Maybe something with stopPropagation but can't figure it out.
Thanks

with event.target:
$(document).ready(function() {
$(document).bind("contextmenu", function(e) {
if(!$(e.target).is('img')){
return false;
}
});
});

Try this:
<script type="text/javascript">
$(function () {
$('#btnClick').bind('contextmenu',function(e){
e.preventDefault();
alert('Right Click is not allowed');
});
});
</script>
<input type="text" /><br>
<input type="checkbox" />
<button id="btnClick">Click</button>
http://jsfiddle.net/NLJ6t/1/

jQuery show hide multiple links slide toggle div

I have a question about toggle effects. I have managed to be able to toggle the same div which is my goal, my problem is I want to add in the effect that say if (toggle1) is on and I click on toggle2, it will close toggle one and open toggle 2. Right now, if you click on any toggle it just opens and closes the toggle based on the state it is in. I want to be able to switch whatever is in the div when clicking on a different toggle. I hope this makes sense. http://jsfiddle.net/nbh2w/
HTML
<div>
Slide Toggle3<br /><br />
Slide Toggle4<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
JS
$(function() {
$('#toggle4').click(function () {
$('.toggle').slideToggle('1000');
return false;
});
});
$(function () {
$('#toggle3').click(function () {
$('.toggle').slideToggle('1000');
return false;
});
});

i'm not exactly sure what you're trying to achieve but based on my understanding, this might be what you want.
Slide Toggle3
Slide Toggle4
</div>
$(function() {
$('#toggle4').click(function () {
$('.toggle').hide('1000');
$('.toggle').text('toggle 4 clicked');
$('.toggle').slideToggle('1000');
return false;
});
});
$(function () {
$('#toggle3').click(function () {
$('.toggle').hide('1000');
$('.toggle').text('toggle 3 clicked');
$('.toggle').slideToggle('1000');
return false;
});
});
http://jsfiddle.net/rNqd5/

You can use an instance of this, also, you're going to need two div's for each link:
Slide Toggle3
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
<br><br>
Slide Toggle3
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
You should also use a class for your links, but I just comma separated the ID's
$("#toggle3, #toggle4").click(function() {
$(this).next(".toggle").slideToggle("slow");
});
Demo: http://jsfiddle.net/nbh2w/2/

You need some thing like this ?
$('#toggle4').click(function () {
$('.toggle').hide();
$('.toggle').slideToggle('1000');
return false;
});
Try it

jquery and css solution to toggle show/hide with text in the html

So I created the following jquery that shows/hides a div.
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").hide();
});
$("#show").click(function(){
$("#me").show();
});
});
This is some text
Hide
Show
http://jsfiddle.net/6DTeq/7/
It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide.
But main problem is I dont want to have the text in the javascript file for internationalization purposes.
It's ok if the text resides in the html. Can someone help me with this?

Html :
<div id="me"> This is some text</div>
<div id="toggle">toggle</div>
Js:
$("#toggle").click(function(){
$("#me").toggle();
});
Demo -----> http://jsfiddle.net/6DTeq/8/
Updated fiddle -----> http://jsfiddle.net/6DTeq/13/

Try this
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").toggle();
$(this).text(function(i, val) {
return val === 'Show' ? 'Hide' : 'Show';
});
});
});
Check Fiddle

<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
<div id="hide" style="display:none;">Hide</div>
<div id="show">Show</div>
</div>
$(document).ready(function(){
$("#clickContainer").click(function(){
$("#me").toggle();
$("#hide").toggle();
$("#show").toggle();
});
})

Try that:
http://jsfiddle.net/6DTeq/10/
$(document).ready(function () {
$("#toggle").click(function () {
$("#me").toggle();
$(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
}).triggerHandler('click');
});

Changing a div's id on click

How do I add an onClick listener to a div.
I want to change the name of a div to divclass active if it was inactive previously & then remove the word 'active' if user click on the list again.
I'm at a loss how to do this.
This is what I've tried so far
<script>
$function tog(){
$(this).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
where the div whose class name I want to change is defined as below
<div id="dd" onclick="tog()" class="wrapper-dropdown-4">
<!--something-->
</div>
I've tried this..
<html>
<head>
<script>
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
</script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="dd" class="wrapper-dropdown-4">
ddddd
</div>
</body>
</html>
What's wrong with this now?
I'm inspecting the element id via chrome developer's tool & I don't see any change using this code. So, can anyone please help?
Thanks. :)

The only script you need is
$(function(){
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
});
Demo: Fiddle

you have to pass the object $(this) is not recognizable , use tog(this)
<script>
function tog(obj)
{
$(obj).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
<div id="dd" onclick="tog(this)" class="wrapper-dropdown-4">
<!--something-->
</div>
not the best way to do it, you can bind the event ,by registering the click in the event.