Question

This one is bit tricky ,
I created jsfiddle here
http://jsfiddle.net/WXmcL/10/
to kinda replicate the https://chrome.google.com/webstore/category/home
addons containers. all is fine except that a element link.

I need to position the

 <a class="link" href="linktoapp"></a>

correctly but also let the users reach the

<a href="linktoinfo">Info1</a>

since I cant have any ul or divs inside the a element I am not able to achieve this effect. Yes I can do spans but my ratings contain ul , divs etc and I would have more markup inside it. If you check on chrome store you can always link to the app and in same time reach the rating. They put all the elements inside the a tag but the page validation is not seeing it. So it seems to me that is being done with js on load or ?

Thank you!

Answer 1

you should forget about validation whilst you are building your effects for a while. get it to work with the markup you need, then you can sit back and take away what won’t validate and inject it via javascript.

mootools has a wonderful Element constructor.

new Element("a.linktoinfo[html=Info]").inject(element);

you can pass on any property into it via the constructor options object.

eg.

new Element("a", {
    "class": "foo",
    "href": "#",
    "events" : {
        click: function() {
            showInfo(this.getParent());
        }
    }
}).inject(element.getElement("a.link", 'after');

etc etc.

btw when you morph classes, just make sure it morphs the properties you differ. in your case, it makes sense to make .myInfoOn / .myInfoOff that have the different heights. there is no point in assigning a morph between other values that have not been changed.

that type of morph parses all the css rules defined in the class that you pass on every event and in reality, you are better off setting it manually. it will scale less if it’s hardwired, I realise that – but you can set as a variable into your class.