Affect property of any div when it is clicked - javascript

I want to affect the background-color of any item on my page when it is clicked. How can i do this without using id names? I've tried using this as you can see below but it doesn't seem to be working.
$(document).click(function() {
$(this).css({'background-color': 'blue'});
});
Any help always appreciated. Thanks

This should work:
$(document).click(function(event) {
$(event.target).css({'background-color': 'blue'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>

Why not look at event.target?
document.addEventListener('click', function (e) {
e.target.style['background-color'] = 'blue';
});

Related

Checking if an element has a specific class in jquery not works

I am stopped up with a very simple functionality that worked with me many times back but not working right now.No specific errors in console also.
I am trying to check if there is a specific class for a div containing .form-content.inactive classes.I am trying to find if there is another class opened .
My codes are below mentioned
$(document).ready(function() {
if($('.form-content.inactive').hasClass('opened')){
$(".form-content a").click(function(event) {
alert('has');
});
}
});
No alerts are given on click.I am stupid now for a while :p
If your div hasn't the class opened from the beginning, you should do it this way.
$(document).ready(function() {
$(".form-content a").click(function(event) {
if($('.form-content.inactive').hasClass('opened')){
alert('has');
}
});
});
Otherwise your code could work.. When your div has the class opened already before the document became ready, only then jQuery is able to subscribe your click element to the event.
$(document).ready(function() {
if ($('.form-content.inactive').hasClass('opened')) {
$(".form-content a").click(function(event) {
alert('has');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Click!</a>
</div>
Instead of checking for opened you could use a delegate:-
$(document).ready(function() {
$('body').on('click', '.form-content.inactive.opened a', function(event) {
alert('has');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Link</a>
</div>
This will fire the click event for a if the .form-content has both classes .inactive and .opened.
If you insist on using hasClass and you have multiple .form-content then you should use this to get the closest .form-content and check for both classes.
$(".form-content a").click(function(event) {
var formContent = $(this).closest('.form-content');
if(formContent.hasClass('inactive') && formContent.hasClass('opened')){
alert('has');
}
});

Remove clicked class by click/on click in Jquery?

Here is my code, all I want is to remove the class that I clicked.
I don't understand why it does not works, I tried both
$(document).ready(function(){
$(".start").on("click", function(){
$(this).removeClass("start");
return false;
});
});
and
$(document).ready(function(){
$(".start").click( function(){
$(this).removeClass("start");
return false;
});
});
index.php
in a while loop, I have
<li>Name </li>
As the elements are created in while loop may be your class='start' element remains undetected. Try this..
$(document).ready(function(){
$(document).on('click','.start',function(){
$(this).removeClass("start");
return false;
});
});
You may have forgotten to add reference of jquery...
This works fine here:
$(document).ready(function(){
$(".start").on("click", function(){
$(this).removeClass("start");
});
});
.start
{
color:black;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Name </li>
add jquery library to your code
visit jsfiddle http://jsfiddle.net/Jf8mp/15/jsfiddle
$(document).ready(function(){
$(document).on('click','.start',function(){
$(this).removeClass("start");
return false;
});
});
follow this also

How to hide div slowly in javascript

I have two div when I click button to close the div. second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance.
fiddle
http://jsfiddle.net/ssZXA/185/
read the documentation about .hide()
the first argument is "duration"
You can use $("#notice").hide('slow');
use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
Jsfiddle
Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();
Plz try this:
$("#notice").hide("slow");
Thanks.
Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO
Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
Demo
$("#notice").hide('fade','slow');
DEMO
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax:
$("selector").hide('type',time);
Try with this.
<body>
<div id="myDiv" style="width:200px;height:150px;background-color:red;">
This is the div that will fade out, slide up, then be removed from the DOM.
</div>
<input id="myButton" type="button" value="Fade" />
</body>
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
});
});
Demo
$(function(){
$(this).html('«');
$('.slider-arrow').click(function(){
var x = $(".slider-arrow").offset();
if (x.left == "308")
{
$( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
}
else
{
$( ".slider-arrow, .panel").animate({left: "+=300"}, 700);
}
});
});

jQuery mouseenter/leave

I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

Categories

Resources