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)
});
Related
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,
I have 5 a elements that I need to inject with additional span , instead of creating new Element 5 times how can I do this only once ? I tried
var holders= $$('.holders');
holders.each(function (el){
var addspan = new Element('span', {
'class': 'over'
});
el.inject(addspan , 'top');
});
but it does not work
any help is appreciated , thank you!
Injection works the other way around; it injects an element into another one. Try reversing addspan and el.
Another option would be to use the adopt function, which might be more intuitively meant to have an element adopt another one.
Like akaIDIOT already mentioned, you have to swap addspan and el when using the inject method. To save a line of code, you can chain the inject method with the new element like this:
var holders= $$('.holders');
holders.each(function(el) {
var addspan = new Element('span', {
'class': 'over'
}).inject(el, 'top');
});
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...
I am using Jquery 1.7.2.
I want to transverse Html Elements Till a Specifc Attribute (id) using Jquery on
mouse over on any html element in my page.
we have parents() function but problem is how to select stop on the parent element which has id attribute
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
var parentEls = $(domEl).parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("" + parentEls + "");
});
this is code but i am getting all element till root
but i want to stop on a closet elements which has attribute id in the tag
Please help me out .
Just use closest:
$(this).closest('#the-id');
Unless your'e just looking for the closest one that has any id attribute, which would be:
$(this).closest('[id]');
Edit: after seeing your updated question, this should be what you want:
$(document).click(function(e) {
e.preventDefault();
var parents = $(e.target).parentsUntil('[id]')
.map(function() { return this.tagName; }).get().join(',');
console.log(parents);
});
Note that this approach accomplishes what you want without selecting and binding click events to every node in the DOM, which is a pretty heavy handed approach.
Edit (again): looks like maybe you wanted to include the tag with the id attribute on it (the above solution is everything up to, but not including that tag). To do this, the solution is pretty similar:
$(document).click(function(e) {
e.preventDefault();
var $parents = $(e.target).parentsUntil('[id]');
var tagNames = $parents.add($parents.parent())
.map(function() { return this.tagName; }).get().join(',');
console.log(tagNames);
});
It looks like you want to map the hierarchy from the clicked element up to the document root. In that case, you can apply parents() to event.target:
$(document).click(function(e) {
e.preventDefault();
var parentEls = $(e.target).parents().map(function() {
return this.tagName;
}).get().join(", ");
});
Note that, as jmar777, you should also change your selector: "*" adds an event handler to all the elements, which is probably not what you want. Bind a single handler to document instead to take advantage of event bubbling.
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});
});