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 >>>> >>>> >>> >