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.
Related
currently im having a decent bit of trouble getting my jquery code to work. I'm trying to make the div load in with the correct background image but it doesnt wanna do so. I cant find out what might be wrong since im pretty new to jquery. I have a container set which needs a background image within the html attr 'srcpost' which contains something like
url("movies/Napoleon Dynamite/poster.jpg")
Ill post what I have so far, nothing happens on load. just a blank div with no background image :(.
$( '.video_selection' ).on( 'load', function() {
var backgroundimg = $( this ).attr('srcpost');
$( this ).css('background-image', backgroundimg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
<p>Napoleon Dynamite</p>
</div>
Please don't use element .onload method: Jquery on() load event on a single element. Might as well use $(document).ready(). Which would render your $(this) targeting window and you must change to element class. Also take care of \ in vidurl.
/*$(window).on( 'load', function() {
var backgroundimg = $('.video_selection').attr('srcpost');
console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
$('.video_selection').css({'background-image': backgroundimg});
}); // window load will wait for all the content (images etc) to load before starting. */
$(document).ready(function(){
var backgroundimg = $('.video_selection').attr('srcpost');
console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
$('.video_selection').css({'background-image': backgroundimg});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
<p>Napoleon Dynamite</p>
</div>
Also if you want to define multiple css value you can add them in {}:
$(document).ready(function(){
var backgroundimg = $('.video_selection').attr('srcpost');
$('.video_selection').css({'background-image': backgroundimg, 'height': '500px'});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")'>
<p>Napoleon Dynamite</p>
</div>
$(function(){
var backgroundimg = $('.video_selection').attr('srcpost');
$( '.video_selection' ).css('background-image', backgroundimg);
})
.video_selection {
width: 500px;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg")'>
<p>Napoleon Dynamite</p>
</div>
You can do like this for trigger load event for div.
$(function(){
$('div[onload]').trigger('onload');
});
function changebackground(div) {
var backgroundimg = $('.video_selection').attr('srcpost');
//alert(backgroundimg)
$('.video_selection').css('background-image', backgroundimg);
}
$(function(){
$('div[onload]').trigger('onload');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' onload="changebackground(this)" vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg")'>
<p>Napoleon Dynamite</p>
</div>
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});
I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
alert($(this).find("button").html());
});
});
</script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
I'd tried $(this).find("button").html(), but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No")
Same for $(this).find("p").html(), will return value of 1st
How do I use $(this) to get the value of item I clicked?
Don't suggest me to insert class or id, I'm not suppose to touch the html.
Please assist, thanks.
this in your click handler is always the document (which you've bound the handler to), so that doesn't help anything. Instead, use something like
$(document).click(function(e){
if ($(e.target).is("button"))
console.log($(e.target).text());
} else {
console.log("not clicked (directly) on a button");
}
});
or rather just
$(document).on("click", "button", function(e){
console.log($(this).text());
});
It is because $(this).click event listener is added to document object and not any specific html element.
$(document).ready(function(){
$('button,p').on('click',function(){
alert($(this).html());
});
});
plunker: https://jsfiddle.net/wx38rz5L/1743/
If you are trying to get each button's html on click, use this.
$('button').click(function () {
alert($(this).html());
});
Bind the click event on both button and get the content of the html element with innerHTML.
$(document).ready(function() {
$('button').click(function(event) {
alert(event.target.innerHTML);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
You have to detect which $(this) is binded for ? Try something like this:
Setup an object
<button class="btn red btn-xs editbtn" type="button" value="${rs.id}" value="${rs.id}">
Function for this object
$(function(){
$('.editbtn').click(function(e){
common.showSpinner();
var idbbpdtd = $(this).val();
});
});
Try this.
$(document).ready(function() {
$(this).click(function(event) {
alert(event.target.innerHTML);
});
});
In jQuery event.target always refers to the element that triggered the event.
I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/