Thanks again for your suggestion which does wrap the element but not in the
order I need.
Your example creates the following HTML:
<span class="clicked">
<div id="clickme">Click Me</div>
</span>
Whereas I need it the other way round like so:
<span class="clickme">
<div id="clicked">Click Me</div>
</span>
This is normally easily resolved by changing the order of the function
calls to the following:
this.wraps(new Element('span', {
'class': 'clicked'
}));
Unfortunately this leads to the same error as before:
http://jsfiddle.net/m92Lu/3/
While your advice is certainly sound it's based on an overly simplistic
example that's only purpose is to demonstrate the error. In the actual code
I am writing two span elements need to be added within the 'clickme'
element. These then specify a background image placed at the top for one
and the bottom for the other.
These two new element need to sit inside the 'clicked' element so the
render order is kept, allowing the background graphics to show above the
background colour placed on the 'clickme' element. You kindly pointed out
that the order created by your suggestion would be a problem which is why
the order is important in the example, ensuring the final result shows the
background colour changing to blue is the main goal.
Finally I am aware that multiple span elements will be created with each
click, in the real code this happens on mouse over and the elements will
get removed after mouse out.
If it is not possible to get wraps working the way I need it to, then I
suppose I could try other ways to achieve the same effect but at the moment
I am trying to figure out if this is a bug with Mootools or if I am doing
something wrong.
Thanks
On Thursday, 10 January 2013 23:30:51 UTC, johnnyf wrote:
>
> wrap() works just like inject(), so do this:
>
> new Element('span', {
> 'class': 'clicked'
> }).wraps(this);
>
> There are two things problematic with this, however, if I'm reading
> between the lines in your jsfiddle.
>
> 1. It looks like all you want to do is change the background color. You
> can do this by simply setting the style or class on "this" in your onClick.
> Note that because of the markup in your jsfiddle, you'll never see any UI
> changes based on the new wrapper. This is because the inner element
> (id='clickme') has a style on it that the wrapping span won't override. You
> have to inspect the DOM to see that your example is doing anything.
>
> 2. Your click event runs every time, meaning a new element (wrapper) will
> be created every time. This will eventually crash the browser by
> overloading the DOM (try clicking it 10K times by firing the click event in
> a loop and you'll see what I mean). You can circumvent this by checking for
> existence of the new element in the onClick (ok), running
> this.removeEvents() in the click event (clever, but may have side effects
> if you need other event handlers), or using the "click:once" pseudo event
> (elegant).
>
> Hope this helps.
>
> Johnny Fuery
> President/Principal Engineer
> Fuery Solutions -- makers of MerusCase
> 1736 Franklin Street, Suite 350
> Oakland, CA 94612
> 510.550.5000 Main
> 925.997.3878 Mobile
> 510-836-0915 Fax
> j...@fuery.com <javascript:>
>
>
> On Thu, Jan 10, 2013 at 3:08 PM, 4fingers <graem...@gmail.com<javascript:>
> > wrote:
>
>> Thanks for your reply but I am looking to wrap the new element rather
>> than inject it.
>>
>> For example injecting it simply adds the new element inside the div
>> either at the bottom or top of the element:
>> <div id="clickme">
>> Click Me
>> <span class="clicked"></span>
>> </div>
>>
>> Whereas I want to wrap the element so the text is included in the new
>> element:
>> <div id="clickme">
>> <span class="clicked">
>> Click Me
>> </span>
>> </div>
>>
>> Any other ideas?
>>
>> Thanks
>>
>>
>
