Thanks for the great suggestion that will indeed provide a great work
around for what I am trying to achieve. The slight gotcha to watch out for
is to make sure I copy any events over as well otherwise it could start to
get very confusing.
Not placing the spans directly into the mark-up is a design choice as I am
building more of a plugin. The user will only need to specify a class and
my code will add in the extra mark-up when needed. This way it makes it
simpler for the end user and keeps the mark-up clean. The effect I am going
for requires the text to always be seen, if I set any of the spans to
display none then the text would disappear as well.
The last question in my head is whether the issue I had with wrap is a bug
within Mootools itself or I was simply misunderstanding its use and
performing an illegal operation?
On Friday, 11 January 2013 10:56:17 UTC, johnnyf wrote:
>
> Your before-and-after examples are only changing the id and class of the
> two elements. While changing an id seems like a dubious pattern to me,
> there's nothing technically wrong with simply setting these two properties.
> Just put this in your click event:
>
> this.set('id', 'clicked');
> this.getParent('span').set('class','clickme');
>
> Based on your description, you might not want to be injecting the elements
> at all. Why not just have the two spans you need already there, in your
> markup, and set the display to none? Then when you do your mouseover event,
> you can set display to block (or an empty string) and you'll be all set.
> You can also use opacity (instead of display) and then fade them in if you
> wish.
>
> I would probably not use the id to set the style on your div, btw. Just
> use classes for both. It'll make more sense when you come back to the code
> later for maintenance.
>
> 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 Fri, Jan 11, 2013 at 2:23 AM, 4fingers <graem...@gmail.com<javascript:>
> > wrote:
>
>>
>> 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
>>>
>>>
>>> On Thu, Jan 10, 2013 at 3:08 PM, 4fingers <graem...@gmail.com> 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
>>>>
>>>>
>>>
>
