Adding A Class With DOM
Aug 27, 2007
I know you can add classes with DOM, but specifically what I want to do is when a link is clicked I want to add a class that will style it as being "active" since a:active only lasts for the moment it is clicked. Basically I would want something like this:
One of the links will default to "active"
<a href="#" class="active">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
Then when another link is clicked the class would be removed from Link 1 and added to the clicked link
HTML Code:
<a href="#">Link 1</a> | <a href="#" class="active">Link 2</a> | <a href="#">Link 3</a>
Hope this makes sense.
View 6 Replies
ADVERTISEMENT
Nov 8, 2010
adding a class to an active li. I'm working in drupal, and the system adds a .active class to the DOM of whatever li class was last selected.In my .js file I added the following:
$('document').ready(function(){
var tabActive = $('#tabs-tabset ul.primary li.active a');
tabActive.addClass('tabknotch')
});
This works perfectly...for the first tab. when I navigate to the next tab the class does not change. I thought maybe there's a variable in the dom that is causing the class to not move, so I tried narrowing the div that it looks for and tried this:
$('document').ready(function(){
var tabActive = $('li.active a');
tabActive.addClass('tabknotch')
});
This achieved the exact same results...so there's obviously something I'm missing, but don't know what it is. If it's any help, here are two examples of the generated DOM that occurs when clicking on the active li. The first example is the div that has the class added, and the second is a div that does not have anything added. <li class="overview ui-tabs-selected active first tabknotch"><a href="#overview"><span class="tab">Overview</span></a></li> (this is the active tab where the jQuery succesfully adds the "tabknotch" class)<li class="features ui-tabs-selected active"><a href="#features"><span class="tab">Features</span></a></li> (this is the active tab that does not have the class added when clicked. When this li is active knotchtab remains on the other li that no longer has the .active class attributed)
View 2 Replies
View Related
Sep 14, 2011
I have a single page website and I would like to add an .active class to my links when I reach a certain point on the page (this will be done by unique div or section id's). The classes are currently empty, so I would need to be able to remove and replace the .active class accordingly.
Here is my html:
<
nav
id="main-nav">
[code]....
View 2 Replies
View Related
Jul 29, 2010
I would like to create a mouseOver event that adds an attribute to a class, so that this...
...ends up like this:
I know you can use css, i have tried already....I need a unique selector name.
I tried the following...
...but on mouseover, instead of the selector being replaced, the text "Something" is replaced by "1plus" in the resulting html.
View 3 Replies
View Related
Nov 24, 2011
I am rather new to jQuery, and have been trying to work out how to add info to a class, but so far following various tutorials hasn't worked.
I have a span with the class TT marked (<span class="TT">xxx</span>).
I need to add the following code to it:
View 2 Replies
View Related
Oct 15, 2009
I have wrote some jQuery thats adds a class to any <a> tag that contains an external link. That way an icon can be applied to the <a> using CSS!
Code JavaScript:
$("#contentPg > p > a[href^='http://']").addClass('icon').addClass('wwwDoc').attr('rel','external');
However, I want to try and modify this script so that it only adds the class if the <a> tag is directly after a <p>, however I am not sure how to achieve this? The reason I wish to achieve this is so that Icons are not applied when the link is in the middle of a line of text, but only when the link is on a line of its own!
View 2 Replies
View Related
Nov 15, 2010
I have this script where if users click on a link it will show that particular link in a slideUp, slideDown effect. For example There are two links and Two divs.Both Divs are hidden to start. If the user clicks link 1, Div 1 will appear. If the user clicks link2 Div 1 will close and Div 2 will appear. how do I add a active state when the user clicks on each particular link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
xmlns
="http://www.w3.org/1999/xhtml"
[code]....
View 1 Replies
View Related
Mar 3, 2011
I've seen this on many sites where the current link in a menu is styled. How do I add a class to a link that is active?
View 5 Replies
View Related
Jul 26, 2010
I need to add a class to every div (with ID #myDiv) NOT containing an <li>-Tag.
I have:
Line 5 doesn't add the class to the div.
View 6 Replies
View Related
Dec 2, 2011
How can I use jQuery to add a css class to the first level of <li> tags under a <ul> tag? I have this so far:
$("ul.menu li:first").addClass("myClass");
But this only adds the "myClass" to the first <li>, I'd like the set of <li> tags directly underneath to have the same css class. I have a menu structure and it's only the first set
of <li> tags I'm interested in.
View 2 Replies
View Related
Jun 26, 2010
adding a class to all links with a target of _blank
View 12 Replies
View Related
Jul 23, 2010
I got help with creating a method (to have only increments of 10 as valid values for certain fields in the form).
jQuery.validator.addMethod("roundnumber", function(value, element, params) {
return (value % 10) == 0;
}, "Your order of vaccine must be in increments of 10");
I've also found info on how to add rules to a class (there are multiple fields and name generated dynamically so I have to use class).
jQuery.validator.addClassRules("fluzone_", { roundnumber: true});
So I've added both these lines to additional-methods.js, but it does not validate it on submit. I do have php back-end logic that sets values to the nearest round number but I do want Js navigation before submission.
View 1 Replies
View Related
Apr 11, 2010
I'm trying to add .active class to a menu, based on the URI. It works with URL's like: /, /products, /about, /contact but not anymore when you go to /products/some-product.I know what's wrong, but I can't find a working solution. I've tried a regex, but that didn't work either...
The code:
$(function() {
var path = location.pathname;
if (path) {
[code]....
View 4 Replies
View Related
Sep 5, 2010
I have a table with onw row and one column.I have set class for column also written function for click event for class.Now added table row dynamically and set same class.But click event works only for existing row not for newly added row.
View 1 Replies
View Related
May 5, 2011
This is essentially the effect I'm going for:
function quickadd() {
$('.menu').addClass('red').delay(1000).removeClass('red');
}
So, from what I've gathered from the docs, this doesn't work because the addClass and removeClass functions don't observe the queue. How could I get around this and setup a function that will add a class, wait a second, then remove that class? Would it require me to go outside of jQuery a bit and use some standard JS?
View 1 Replies
View Related
Mar 9, 2009
I am working on the project that will be only one page and the menu will link to the same page. The problem is that i can't add active class to the menu the same we did in the normal linked pages. For example, in css we can see .about .menu ul li .active a { color:#black} . This means the menu will be in black when the user is in the about page. I can't do like this in one page scroll menu as there is only one menu. Are there any ways to let the menu change (add active class)when i scroll to some specific part of the page?
View 3 Replies
View Related
Dec 20, 2011
I have a form that is initially submitted by normal submit button, but after that I want it to resubmit on change(). I thought I'd be able to pick up the secondary change()s by adding a class to all of the inputs. However I now understand that won't work by default because the change() can't be attached to the class added by the the submit() as it didn't exist at the time, it was added by Jquery. I've since discovered on() but I'm now stuck on where to include it.
Here's the script so far:
The submit() adds the 'stu' class, and then the change() tries to select it but can't
<script>
$(document).ready( function(){
$("#search_choices").submit( function(evt){
runSearch();
$("input").addClass("stu");
evt.preventDefault();
});
});
$('.stu').change( function(){
runSearch();
});
function runSearch(){
var sFor
= $("#for").val(),
sWhere
= $('input[name=where]:radio:checked').val();
$("#search_results").load('search.php', { where: sWhere, treb: sFor } );
};
</script>
View 2 Replies
View Related
Aug 11, 2011
I have a lot of information on my site that is in multiple categories. I have a list of categories, each with its own checkbox. By default, all the information is displayed (therefore all the checkbox's are checked by default).When someone unchecks the box I want to hide the divs with that class, and when someone rechecks the box, they should reappear. Here is my code so far. It is hiding the div's fine, but they are not reappearing when user tics the checkbox again.
<script type="text/javascript">
function toggledisplay(category){
if(document.getElementById(category).checked){
[code]....
View 2 Replies
View Related
Nov 13, 2010
I'm working on a little project where they have a slider form and I need to piggyback a tiny line of code into the validation function for the form.
What I need to happen is when the user has filled in all the fields and clicks the submit button AND the data validates THEN a class is added to the body tag. My jQuery knowledge is very minimal - I added the code to where I 'thought' its supposed to go but it didnt seem to work.
jQuery(document).ready(function() {
jQuery('#scroller').css('overflow','hidden');
// Set up the scrollable registration
var wizard = jQuery('#scroller').scrollable();
[Code]....
View 1 Replies
View Related
Nov 15, 2011
This is a hard one for me: I got some elements with the class "tiles". What I am looking for is a function, which adds a class "flip" to each element but with a delay between each call of addClass(".flip"), so that the elements change the way they look sequentially, not one after another, but with a delay. Has anyone an idea?
View 1 Replies
View Related
Feb 12, 2009
Last evening I ran across this script which I think will address a need I have; replacing my radio buttons with images. The one difference I have is that I need to use a different button image for each of the 5 buttons in my group.Unfortunately, the script dose not apply unique classnames within the generated mark-up so if I'm to use this I need to apply some sort of counting variable that increments and use this variable to append the classname with.Around line 52/53 of jquery.checkbox.js is
Code JavaScript:
/* Wrapping all passed elements */
return this.each(function()
{
[code]....
View 2 Replies
View Related
May 26, 2011
So, I have this menu set up that reduces the opacity of all but the hovered link. It works fine, but it's a video playlist, and I realized that I need to make sure that this style persists after the link has been clicked.I can figure out how to add a class on click, but how to combine the two? How can I set it up so that, if the link doesn't have the class .selected, the opacity will be at 0.3. Unless, of course, it's being hovered over.I'm in a little over my head here. Here's what I'm working with:
Code:
jQuery(document).ready(function() {
jQuery("#links").delegate("li", "mouseover mouseout", function(e) {
[code]....
View 1 Replies
View Related
Aug 10, 2009
I know the refresh() method is gone since version 1.2 but for somereason even if it's suposed to work without it I can't get it to work.Here's the scenario:I got a select box, depending on the selection I want certain elementto validate so I dynamically add validation class to those elementlike this.$("input#element").toggleClass("{validate:{required:true}}");But when I click submit the element doesn't get validated at all but Ican see the class has been added in firebug.
View 2 Replies
View Related
Jun 24, 2010
I'm using a function to load a page into a div. When I add the class of the element I want to show (.contentpaneopen) Chrome and Safari show no content. It works OK in IE and FF.When I ommit the class it works on all browsers.
function loadContent(elementSelector, sourceUrl) {
//Works in Chrome en Safari:
$(""+elementSelector+"").load(""+sourceUrl+"");
[code]....
View 1 Replies
View Related
Sep 1, 2010
for some reason, after a couple of seconds the clicked on div acquires the "fade" class even though in theory it is still a "div-selected" and not a div:not(.div-selected)...what am I missing???
$(".content-item").click(
[Code]...
View 1 Replies
View Related
Aug 23, 2010
I need to add an "alt" class to every third div of a certain class.
View 7 Replies
View Related
