FAQ Database Discussion Community


How can multiple variables be used to create multiple jquery selectors?

javascript,jquery,variables,jquery-selectors,addclass
When I convert multiple variables into multiple selectors the below code fails to execute. DEMO HERE $('.Btn').on('click', function () { var outer = $(this).data('test'); var inner = $(outer).children('.Inner'); $(outer + ',' + inner).addClass('Success'); }); In the code above: This is successful $(outer).addClass('Success'); This is successful $(inner).addClass('Success'); This is not $(outer...

removeClass setting display none

javascript,jquery,html,addclass,removeclass
html: <table> <tr> <td>Hi</td> <td><a href="#">Click me</a> </td> </tr> </table> js: $('td a').click(function (event) { var txt = $(this); event.preventDefault(); txt.closest('td').addClass('info'); txt.closest('td').fadeOut(500, function () { txt.closest('td').removeClass('info'); }); this.blur(); txt.parent().attr('style', 'display: inherit;'); return false; }); https://jsfiddle.net/iScripters/0dpLyv96/4/ When you click 'Click me', I want the class 'info' to be added to the...

How to add a class via jQuery where the class has no name

jquery,selector,addclass
In jQuery, how do I select and add a class to a class when the class does not have a value? Here is some example code: <div class=""> <div class=""> <span class=""><i class=""></i></span> <div class=""> <span class=""></span> <span class=""></span> </div><!-- /.info-box-content --> </div><!-- /.info-box --> </div> If I only have...

How to reset a css animation class using jquery?

jquery,css,animation,addclass,animate.css
$('#btn_color').on('click', function(){ if($('h1').hasClass('bounceInUp')){ $('h1').removeClass('bounceInUp'); $('h1').addClass('tada'); }else if($('h1').hasClass('tada')){ $('h1').removeClass('tada'); $('h1').addClass('tada'); } }); When I load my page, the 'bounceInUp' class is added to my h1. But I want to play a second animation on click by adding the 'tada' class. The problem is the animation plays only for the first...

add class to depending on xml data

jquery,html,xml,addclass
This is my html <table class="table table-condensed table-hover"> <thead> <tr> <th></th> <th colspan="4" align="center">Course 1</th> <th colspan="4" align="center">Course 2</th> <th colspan="2" align="center">Course 3</th> </tr> </thead> <thead> <tr> <th>Region</th> <th>User</th> <th>Time</th> <th>Test</th> <th>KO</th> </tr> </thead> <tbody id="data1">...

addClass (JS, jQuery) only on first page // Shop-Template

javascript,jquery,templates,addclass,gambio
i'm currently working to implement a template for the Gambio GX2 shop. In the template, the mainpage should be set up differently than the following pages. I would like to add a class (called "mainpage") to the mainpage in one of the following tags: <body> <div id="wrap_box" class="wrap_shop"> This class...

JQuery addClass on scroll doesn't work

jquery,css,addclass
I have 4 buttons next to each other. What I want is when I scroll to a certain point, the 4 buttons height and width change. The button consists of 2 divs on each other so you can see only one div. When the mouse enter div, the bottom div...

jQuery .click() not working properly [duplicate]

javascript,jquery,html,addclass,removeclass
This question already has an answer here: Jquery click function is not working for dynamic elements 3 answers I have looked through a few of the other stackoverflow questions about the .click function not working but none of them seem to help me. I have my imports of the...

jQuery if date true, change class of element x

javascript,jquery,table,addclass,removeclass
Thank you all for help! Now i have two more questions and have updated my code. I have this if (releaseDate <= today), why is the Date 15.05.2015 success?! When i want to check dates with time example: 25.04.2015 - 09.00 am, how i can check that with today and...

Add class to the div if div have specific class

javascript,jquery,addclass
Here i am trying to add class alignright in blog-post div if div have the specific class blog-post but bellow code is not working help me to sort out this. <div class="switches"> <span class="blog off">Blog</span> </div> <div class="timeline"> <script> $(".switches span").click(function(){ $(this).closest("span").toggleClass('off'); if ( $( this ).hasClass( "blog off" )...

.get() not working as expected

jquery,addclass
I apologize if this is a really dumb mistake, but I'm a little new to the .get() function. I used it exactly as was explained on this page, but it did not work as expected. This is the code they used console.log( $( "li" ).get( 0 ) ); So I...

Font-awesome class fa is not being added with JQuery

javascript,jquery,html,font-awesome,addclass
I have a button where I want the HTML and font-awesome icon to change on an odd number of clicks and revert back on an even number of clicks. For example, I have a button named mute. If a user clicks on the button, I want the html to change...

Adding an icon to a html i tag

jquery,icons,addclass
In jQuery, how can I add an icon to an i tag? Here is the html code: <div class="example_infobox1"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box"> <span class="info-box-icon"><i class=""></i></span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> </div> Here is...

Add class when arrive element

javascript,jquery,scroll,addclass
I got the following code: <body> <section id="first"> ... </section> <section id="second"> ... </div> <section id="third"> ... </div> </body> And I'm trying to add a class to section#third when the page arrives the div on vertical scroll, but without specifying the height using px, just when the page meets the...

Isolating add/remove class to clicked item

javascript,jquery,addclass,removeclass,toggleclass
Currently I have a accordion menu, each time .responsive-accordion-head is clicked I'm telling it to switch classes as follows: $('.responsive-accordion-head').click(function () { if ( $( '.responsive-accordion-head i' ).hasClass( "plus-2" ) ) { $('.responsive-accordion-head i').removeClass("plus-2"); $('.responsive-accordion-head i').addClass("minus-2"); } else { $('.responsive-accordion-head i').removeClass("minus-2"); $('.responsive-accordion-head i').addClass("plus-2"); } }); The problem I have is...

jQuery removeClass doesn't works the right way

jquery,addclass,removeclass
There are two buttons (the black ones), and two (at the beginning small sized) green boxes with (red, but at beginning not showed) contents in them. My goal is to make working perfectly the following: If I click on the first button, the first box gets a bigger size, and...

Change class on click based on current class

jquery,click,font-awesome,addclass,removeclass
I want to take a simple FontAwesome icon: <div class="emotion"> <i class="fa fa-smile-o"></i> </div> and swap the class depending on what the current class is: $(".emotion .fa-smile-o").click(function (){ $(this).removeClass('fa-smile-o').addClass("fa-meh-o"); }); $(".emotion .fa-meh-o").click(function (){ $(this).removeClass('fa-meh-o').addClass("fa-frown-o"); }); $(".emotion .fa-frown-o").click(function (){ $(this).removeClass('fa-frown-o').addClass("fa-smile-o"); }); But currently this only works for the first class...

Execute addClass if element width equals .. pixels

jquery,css,width,addclass
So I have this search box which shows and hides by changing its width now I want to add a class to the search icon if its width is larger than zero $("#search input").animate({width: "0px"}, 0); var searchWidth = $('#search input').width(); $('#search i').click( function() { //Change the width (show it)...

Add class to nth of an element found on full page instead within a parent

jquery,jquery-selectors,element,addclass
I'm trying to add classes to the "nth" of a particular element - regardless of where it falls on the page. A simplified version of my html is: <div class="row"> <div class="col-sm-12"><section class="subsection"></section></div> <div class="col-sm-12"><section class="subsection"></section></div> </div> <div class=“row”> <div class="col-sm-12"><section class="subsection"></section></div> <div class="col-sm-12"><section...

jQuery remove class from parent on click

jquery,click,parent-child,addclass,removeclass
I have an element that once you click on it, it adds and removes a class with jQuery. When you click on a child element I want the classes to swap again. I tried doing it with .parent but that doesn't seem to work.. This is the html: <article class="block...

JQuery element unaffected by click after removeClass/addClass

jquery,addclass,removeclass
Not sure how to explain this, but here's the JS fiddle. http://jsfiddle.net/1kLsoj6h/ If you click on anything, then back to "Dashboard", it's unaffected. I'm not sure why that's happening. Here's the code: $('#Dashboard').addClass('tabs_active').removeClass('tabs'); $('.tabs').click(function(){ $('.tabs_active').addClass('tabs').removeClass('tabs_active'); $(this).addClass('tabs_active').removeClass('tabs'); }); Here's the HTML for Dashboard <div id="Dashboard" class="tabs "> <i class="fa fa-tachometer fw"></i>...

jQuery toggleClass not working with bootstrap collapse (change Icon/Class)

jquery,addclass,collapse,removeclass,toggleclass
I'm working with bootstrap 3 and the collapse function. If I click on my plus-icon the collapse-panel will be shown. Another click and the panel will be close. Works! But I want to toggleClass my Icon .. onclick change to imgMinus (open collapse), click again, change to imgPlus (close collapse)....

jQuery Clone and renaming child elements

javascript,jquery,find,clone,addclass
I have a DIV Element with an image, some text, a url link to the image and a link to a status of the image this status is represented by an icon next to the image I use .on("click"..., event to trigger a phpscript that updates the status in thebackground...

Problems with addclass and removeclass jsfiddle [closed]

jquery,css,iframe,addclass,removeclass
Im doing my first script for hide an iframe and show it with the jquery addclass and removeclass. I have this, but i have some problems loading some iframes. Can someone check for the js if it's correct? $(document).ready(function () { $("#dvc-aut").click(function () { $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap dvc-tal"); });...

Change nav a.class on horizontal scroll with jQuery

jquery,html,css,scroll,addclass
I'm working with a horizontal design, with a navigation menu in the top left corner. I want each link to change appeareance as you scroll horizontal. I've used the same thing for vertical scroll-navs without any issues. So I tried the same code but using .scrollLeft(); instead of .scrollTop();and .position().left...

How to add a class to an element if all elements have a given class?

jquery,each,addclass
I have several div having class .toCheck. By clicking to one of these divs, I'm adding to the clicked div the class .readyToSend I also have a button "#send", and every time I'm clicking a .toCheck div, if all the .toCheck divs have the class .readyToSend I want to add...

AddClass in jQuery on runttime and select the new class

jquery,class,jquery-selectors,onclick,addclass
I'd like to add a class to a div tag in runtime (after clicking the tag) and select the div tag by the new class name afterwards. Here is my code: HTML <div class="black" id="" style=""> black </div> CSS .black{ color:black; } .green{ color:green; } jQuery should remove class "black"...

Identify and add HTML class to masonry items by their position

javascript,jquery,position,addclass,masonry
I am using Masonry to render a group of items in two columns. Given below is the HTML structure. <div id="grid"> <article class="entry"> … </article> <article class="entry"> … </article> <article class="entry"> … </article> <!-- And so it goes --> </div> What I want to achieve is identify which one of...

Jquery Select the clicked div among other divs with the same class

jquery,css,hidden,addclass,slidetoggle
Basically I have a gallery(grid) that when each individual block is clicked it reveals a hidden div. I have that functionality working. I also have a color overlay on each block that disappears on hover. I also want the hidden div parent block to not have the overlay - when...

Jquery replace class only works one way

jquery,class,addclass,removeclass
For a school project i'm making a social media page and i've come to the point I have to make a follow/unfollow button. I've made 2 classes. One class (class1) that looks like a normal button and one (class2) that looks like that button is pressed. Normally class1 is chosen...

Why is removeClass not working?

javascript,jquery,html,addclass,removeclass
I'm guessing this is really simple but it has been driving me insane! here is my jquery code below and here is my Fiddle $("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected'); $('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover').siblings().removeClass('SiteIconHover'); $("#HeaderSites").on('click', function () { $(this).addClass('menuSelected').siblings().removeClass('menuSelected'); $(this).children('#Site-icon-2').addClass('SiteIconHover2').siblings().removeClass('SiteIconHover2');...