Whenever i press one of the buttons they change to .active css (this is good) but the problem is : when i click another button , they change to the .active css (which is good), but the previous button keeps their .active css, i dont want that , after i click another i want them to take the default css and just the button that is pressed to take the .active css
HTML
<button id="btn1">a</button>
<button id="btn2">b</button>
<button id="btn3">c</button>
<button id="btn4">d3</button>
<button id="btn5">e 4</button>
<button id="btn6">f 5</button>
<button id="btn7">g 6</button>
<button id="btn8">h 7</button>
<div class="divToHide" id="story">story</div>
<div class="divToHide" id="z1">1</div>
<div class="divToHide" id="z2">2</div>
<div class="divToHide" id="z3">3</div>
<div class="divToHide" id="z4">4</div>
<div class="divToHide" id="z5">5</div>
<div class="divToHide" id="z6">6</div>
<div class="divToHide" id="z7">7</div>
CSS
#z1, #z2, #z3, #z4, #z5, #z6, #z7 {
display: none;
}
.active {
color: red;
}
JS
$(function () {
$('#btn1').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#story').fadeToggle(400);
});
$('#btn2').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z1').fadeToggle(700);
});
$('#btn3').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z2').fadeToggle(700);
});
$('#btn4').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z3').fadeToggle(700);
});
$('#btn5').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z4').fadeToggle(700);
});
$('#btn6').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z5').fadeToggle(700);
});
$('#btn7').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z6').fadeToggle(700);
});
$('#btn8').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z7').fadeToggle(700);
});
});
General tip: Don't repeat jQuery code (especially as it already uses this). Apply a class to all buttons (to allow group selection) and data-drive any additional requirements (like your target elements) from data- attributes.
For this example I just surrounded the buttons in a div so they could all be selected together.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pEA9R/
$(function () {
$(document).on('click', 'button', function () {
var $this = $(this);
// Fetch the data-id attribute value for our target element
var target = $this.data('id');
// remove the active class from all buttons
$('#buttons button').removeClass('active');
// Hide all target divs
$('.divToHide').hide();
// highlight the clicked item
$this.addClass('active');
// Show the required div
$('#' + target).fadeToggle(400);
});
});
This also uses the delegated version of on. So you could make it listen on the parent of the buttons, rather than document to make is slightly more efficient:
$('#button').on('click', 'button', function () {
Delegated events are great because they only create a single handler connection, and even support dynamically added items (added somewhere within the target ancestor).
Add this line in line 2:
// After This Line:
// $(function () {
$("button").click(function () {$('button').removeClass('active')});
The above code will remove active class for all buttons when you click on one of the buttons.
Create a separate function that removes all active class css from your html. Place the following statement in that function and call it from each button click event. $("button").removeClass('active');
EDIT:
It would be best to wrap your buttons in a div with an id say.. buttonWrapper and use the following code instead. $("buttonWrapper > button").removeClass('active');
Related
I click the button, it will append a div inside body, then, I want to click the div to alert a msg.I tried, but fail. How can I implements with highlight area.
example
$(document).ready(function()
{
$("button").click(function()
{
div = "<div class='test'>div</div>";
$("body").append(div);
});
$(".test").click(function()
{
alert("test");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Append div</button>
You should note that when document is ready elements with the .test class do not exist (that is why your code didn't work), they are dinamically added. So, I will do like this:
$(document).ready(function()
{
$("button").click(function()
{
var div = $("<div></div>").addClass('test'); // this is creating div element in dom as jquery
// Then attach click function to purpose of its create
div.click(function()
{
alert('test')
});
$("body").append(div);// then this is appending created div
});
});
jsfiddle Playground
One way, is just registering the listener on click event after you append it to the body tag, taking care of unregistering the previous clicks events, so you don't fall on multiple clicks events on the same element. Note that when document is ready still don't exists any element with the class .test, thats the reason your code was not working. Check next example:
$(document).ready(function()
{
$("button").click(function()
{
var div = "<div class='test'></div>";
$("body").append(div);
$(".test").unbind("click").click(function()
{
alert("A new div was clicked!");
});
});
});
.test {
width: 200px;
height: 200px;
background: red;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button type="button">Append new div</button>
</body>
For dynamically created elements, use .on, lear more about .on here http://api.jquery.com/on/
$(document).ready(function(){
$("button").click(function(){
div = "<div class='test'></div>";
$("body").append(div);
});
$(document).on('click', '.test', function(){
alert("test");
});
});
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');
}
});
JS beginner, sorry
How can could I make it so that every button that has the id "#popit" to open the same popup box?
I'm using bPopup
With this code there is only one button on the site which does open the popup
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
http://jsfiddle.net/yg5so25s/ - there are 3 buttons with the same id, but only the first one opens the popup box, anyway I could make it so that every single button to open the same popupbox?
id must be unique, you need to use class instead:
<button class="my-button">POP IT UP</button>
then you can use . to target elements by class name:
;(function($) {
$(function() {
$('.my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Updated Fiddle
use common class for all buttons
$('.commonClass').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
DEMO
I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});
I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});
Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default
Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});
Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});
this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/
When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().
you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})
remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});