I think that the problem could be easily resolved...but not by me!
I want to create two different animations for my div:hover, the first uses CSS (for the people who won't active javascript in IE) and the second uses JS.
The choice between the two methods is simple, the activation of switchClass function using jqwery. But after this happened the selector for the new class doesn't work and not even the mouseover function!
HELP ME PLEASE!!
Here the code:
$(document).ready(function () {
$( ".plateMiddle" ).switchClass( "plateMiddle", "plateMiddleFX");
});
$(".plateMiddleFX").mouseover(function () {
$(this).stop().find('img').animate({opacity: '0'},{queue:false, duration:500}),
$(this).stop().animate({width: '265'},{queue:false, duration:500});
});
I don't kwow if could generate problem but inside the div there is an image with more or less the same dimensions.
An other information: if I select directly the image by a class selector the animation takes life!
THANKS!!
Try
$(".plateMiddleFX").live('mouseover', function () {
$(this).stop().find('img').animate({opacity: '0'},{queue:false, duration:500}),
$(this).stop().animate({width: '265'},{queue:false, duration:500});
});
Related
I have a requirement where an element with a particular class has to be prepended to its sibling with another class. Although I am able to achieve this for the first instance, it doesn't work for all the elements in the div. I have tried the below code
Click Here
This Works:
$("#MyDiv .spanToBeShifted:first").prependTo($("#MyDiv .MyButton:first"));
This Doesnt:
$("#MyDiv .spanToBeShifted").prependTo($(this).closest('.MyButton'))
Below is the solution which worked for me
Solution
$('.spanToBeShifted').each(function () {
var d = $(this).siblings('.MyButton');
$(this).prependTo(d)
});
I am using the following code to change href links in a page to a new link by using their id.
This is what I'm using to find the href and add the id to it;
$( document ).ready(function() {
$('a[href$="/truck-bed-covers/camper-tops"]').attr('id', 'camper1');
});
And this is what I'm using to change the link.
$(document).ready(function () {
$("#camper1").attr("href", "../camper-tops");
});
It works great. Except it doesn't continue on the rest of the page. It only changes one link and then it's done. How do I continue until there is no more links to change?
ID has to be unique, else JavaScript works with the first one only.
$(document).ready(function() {
$('a[href$="/truck-bed-covers/camper-tops"]').each(function(){
$(this).attr("href", "../camper-tops");
});
});
But I don't think this is the right way. You should find place where you create incorrect links and repair it there (in PHP/DB or where links came from).
At a guess, you're adding the ID so you can refer to the element in the second line, but you don't need to. Once you have an element you can work on it.
You can select all links with something like $('a[href]') (all links with an href attribute) and then iterate over all of them with jQuery's each function. Something like
$(function(){ // shorthand for $(document).ready()
$('a[href]').each(function(index, element){
// work on each element here
var $el = $(element);
$el.attr('href', $el.attr('href').replace(/*whatever you want to do here */);
});
});
i have a dynamically generating div which is not in the time of loading. It is generating later in the document. So how can i target that div and hide it after specific time. The div is as follows:
<div class="message-sent">Your Message has been sent</div>
Important: I refer so many articles but everyone is talking about 'onclick'. I don't want click event. I just want hide this div when it is appearing in the docuemnt. Thanks in advance!
you can add a style display:none.
you can add the style after time out (3000ms) like so:
setTimeout(function(){
document.getElementsByClassName("message-sent")[0].style.display="none";
}, 3000);
note: it is better if you use an id instead of a class to identify your div.
You should try looking into the setTimeout function.
Also if that div is the only member of the DOM-tree that has that class, use an ID. It's better IMO.
Anyway, assuming you want to hide every member of the message-sent-class,
it goes something like this:
setTimeout(function(){
$('.message-sent').hide();
}, 2000)
In which the 2000is the variable that indicates the time (milliseconds)
You can try DOMNodeInserted,
$(document).bind('DOMNodeInserted', function(event) {
var element = document.getElementsByClassName("message-sent"); // get all elements with class message-sent
var lastchild = element[element.length - 1]; // get the last one (others are hidden)
if(lastchild != null){
lastchild.style.visibility = 'hidden'; // set visibility to hidden
}
});
Working demo
Hope helps,
link:http://jsfiddle.net/KM9bK/1/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($('.comprejuntoproduto input:checkbox').is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
}else{
$(".comprejuntoproduto").parent().removeClass("changeborder");
}
});
I want when .compreprodutojunto input:checkbox is checked, change the .compreprodutojunto border style.
Thanks so much
First, you need to actually include the jQuery library if you're going to use jQuery (not sure if this was a fiddle-only issue or not). If you didn't include jQuery in your actual page outside of jsFiddle, you'd do it like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
(Note, you can download your own copy if you prefer to host it yourself, or call it directly from code.jquery.com)
Also, when you call .removeClass() you can simply call it on the element that you had previously called .addClass() on, in this case <div class="comprejuntoproduto">.
See: http://jsfiddle.net/KM9bK/7/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($(this).is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
} else {
$(".comprejuntoproduto").removeClass("changeborder");
}
});
I have a questions.
I search for a solution for these.
Wanna use el with child function.
But didn't work sofar.
If i clear the el it works but then i have all elements class last.
Mootools Script
$$('ul#portfolio li, .ce_id').each(function(el) {
if(!el.hasClass(filterVal)) {
el.fade('out').setStyle('display', 'none').addClass('hidden');
} else {
el.setStyle('display', 'block').fade('in').removeClass('hidden');
$$(el':nth-last-child((4n+4)').addClass('last');
}
Hope you guys can help me. Or its not possible to use el or VAR with :nth-last-child together?
Update: But didn't work.
else {
el.setStyle('display', 'block').fade('in').removeClass('hidden');
el.getElements(':nth-last-child(4n+4)').addClass('last');
}
Update 2:
Here the Code
So i want when i click on print that every 4 li witch not hidden and has the class witch clicked get the class last.
http://jsfiddle.net/6whd9/1/
Best reagards
I'm cutting down on the code a bit, but you cant but the el in the selector. Instead you should use el.getChildren or el.getElements. Here is an example:
$$('#parent > div').each(function(el){
el.getChildren(':nth-last-child(4n+4)').addClass('last');
});
Here is a working example: http://jsfiddle.net/ZxMUh/
Edit: It's really hard to understand from your question what works and not. However, if you try to animate you can not just fade it in. You need to hide it first.
$$('#parent div.hidden').fade('hide');
$$('#parent > div').each(function (el) {
el.removeClass('hidden').fade('in');
el.getChildren(':nth-last-child(4n+4)').addClass('last');
});
Here is the example: http://jsfiddle.net/ZxMUh/2/
Edit (After getting the fiddle): In my example I thought you where changing the nth-child in the "li". The problem is that you can't do it in your each-statement. Do it separate.
Here is fiddle when using :nth-last-child: http://jsfiddle.net/6whd9/2/
However, is't not probably going to do what you want, and it's not really possible to use the :nth-child in this case. You have to make the selection by your self.
var visable = $$('ul#portfolio li:not(.hidden)').reverse();
visable.each(function (item, index) {
// same as 4n + 4
if (index % 4 == 3) {
item.addClass('last');
}
});
Here is a fiddle demonstrating it: http://jsfiddle.net/6whd9/4/
(I added the last class to the style with a solid red border so it would be visable)
I hope I finally understood your question...