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');
});
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 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,
This code from Dart worries me:
bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
void _ensureTemplate() {
if (!isTemplate) {
throw new UnsupportedError('$this is not a template.');
}
...
Does this mean that the only way I can modify my document is to make it html5?
What if I want to modify an html4 document and set innerHtml in a div, how do I achieve this?
I am assuming you are asking about the code in dart:html Element?
The method you are referring to is only called by the library itself, and only in methods where isTemplate has to be true, for example this one. If you follow this link, you can also read what other fields/methods work like this.
innerHtml is a field in every subclass of Element which supports it, for example DivElement
Example:
DivElement myDiv1 = new DivElement();
myDiv1.innerHtml = "<p>I am a DIV!</p>";
query("#some_div_id").innerHtml = "<p>Hey, me too!</p>";
Sorry for this absolute noob question.
I am trying to implement Tabs with this MooTools Plugin:
http://mootools.net/forge/p/simple_tab_pane
The syntax for the constructor is as follows:
var myTabPane = new TabPane('tabs', {
tabSelector: 'li',
contentSelector: 'p'
});
Where 'tabs' is the CSS-id of the container.
Now I would prefer to use a class for the container but '.tabs' won't work.
What would be the correct syntax for this?
And how should i do it to adress for example every div-Element ?
well first things first - what is expected:
https://github.com/akaIDIOT/MooTools-TabPane/blob/master/Source/TabPane.js#L44
he expects argument to be an element id or an actual element. how you arrive to that element is up to you.
var myTabPane = new TabPane(document.getElement('.tabs'), {
tabSelector: 'li',
contentSelector: 'p'
});
passing an element found based upon a class search for .tabs.
alternatively, you can re-implement the initialize method on the class and write the line as:
this.container = document.getElement(container);
this.container.getElements(this.options.contentSelector).setStyle('display', 'none');
so you can then pass a jquery like selector: new TabPane('#someid') or new TabPane('div.someclass')
You'd refactor it by doing TabPane.implement({ initialize: fn(){... }) or do a subclass like var myTabs = new Class({extends: TabPane, initialize: fn(){ ... }). When you extend, this.parent() will call the parent method over the prototype.
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.