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 RepliesThis 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?
I've got some code like this:
$(".slide-1").hover(
function () { $('.caption-1').animate({ bottom:0 },200); },
function () { $('.caption-1').animate({ bottom:-35 },200); }
[code]....
I don't have to repeat this block over and over manually? I know I can get jQuery to repeat each code block and insert the number automatically.
I am attempting to load an unknown number of images (from 0 to 6) from a website. The images will always be in a specific format, in a specific location and so on - but the page will never know how many images there are ahead of time.I've managed to cobble together the code below to work, *sometimes* and only in IE. I know, right?Does anyone see what's wrong? Is there some obvious reason that most of my code just doesn't run in firefox, ever? (online or locally) Is there a reason only the writes inside functions are called in chrome?Why, why does this prevent the rest of the page around it from loading?
View 4 Replies View RelatedI want to loop through my elements using a delay. How can I do that? [code]...
View 1 Replies View RelatedI've been using this little bit of code to show a div when the user rolls over a link:
$('a#eventspopupbtn').mouseover(function() {$('#menu').hide('fast'); $('#eventspopup').show('fast');
return false;
});
I have been trying to extend this bit of code so that there is a short delay built inso that if the user rolls over the link by mistake or 'just passing through' the div is not displayed. I tried using setTimeout but couldn't get that working (unfortunately, I can't share that with you because I lost the code).
having a warning "unknown pseudo-class or pseudo-element 'visible' "
View 2 Replies View RelatedI have a vvery simple javascript for a navigation menu that displays one tree. I am trying to make it so that there is a delay on the mouseout.
Code:
var DropDownMenu = Class.create();
DropDownMenu.prototype = {
[code].....
I am building a sort of tree view in javascript with items that can be expanded and collapsed (with default being collapsed).The problem is the page can get very large, and the user sees the the browser render the list with all the items expanded, and then sees them all collapse after half a second.[/quote]You could use a setInterval in the head section that's on a tight loop, that waits and watches for the tree, then hides it and removes the setInterval process.
View 2 Replies View RelatedI have mulitiple 'a' tags with different classes (aclass1, aclass2, aclass(n)) and I have multiple divs, also with consecutive classes (divclass1, divclass2, divclass(n)). Is there a way to select the 'a' tags to match the div based on its number (ie. 'aclass1' with 'divclass1' and aclass2 with divclass2)? For example something like this:
$(document).ready(function() { $(".aclass(n)").event(".divclass(n)");
});
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)
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]....
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.
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:
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!
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]....
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 RelatedI 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.
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.
I want to build a dynamic list of items with jquery but am unsure how to add an index number to each of the items i create so that i can reference them to edit or delete them for example. So far, I have the following which just creates the items and appends or prepends them to the element depending on whether one item exists already. I just need a way of adding an attribute so I can then reference the current item when clicked and remove it. What would be the simplest method to use?
//create list items
if ($('.mylistitem').length) {
$('.myList-box').prepend('<div class="mylistitem"><div class="mylistitem-image"><img width="30" height="40" src="[URL]"/></div><div class="mylistitem-title">' + title + '</div><div class="mylistitem-options"><a href="javascript:removetitle();">Delete From List</a></div>');
} else {
$('.myList-box').append('<div class="mylistitem"><div class="mylistitem-image"><img width="30" height="40" src="[URL]' + titleid + '"/></div><div class="mylistitem-title">' + title + '</div><div class="mylistitem-options"><a href="javascript:removetitle();">Delete From List</a></div>');
}
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.
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]....
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 RelatedI 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 RelatedI 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>
What would be the easier way to do this? For each of the list elements I want to check how many image elements are inside each, and do something with the one that has only one image.
<ul>
<li>
<img src="" />
[code]....