mootools fade help

[Timbo_La]

I am currently trying to implement the following on a website I am making.

http://jsfiddle.net/2bcq9/

At the moment I have read a few mootools examples and tried to use the codes in the examples to get the result I want.

the problem I have is I can't figure out how to just trigger the fades on mouseenter and mouseleave of the div that you enter, because at the moment all the fades happen when you enter the div that I have attached the addevent to.

I think I have to use the .each function/selector? but not sure where to put or how to implement it or whether I am on the right track.

does anybody have an idea or can push me in the right direction.

off to do more research and maybe look at jQuery instead as that seems to have more support.

thanks

Tim

 

[Tripnologist]

I don't use Mootools and can't be arsed to look up how to do what it is that needs to be changed. However, I do know jQuery, so can help you with that, if you'd like.

Now, I'm not completely sure how you want it to work, but I'm guessing you want the events attached so they function on each '.ap_collections_container' individually, rather than on all of them on the page?
Something like this?
http://jsfiddle.net/2bcq9/2/

If that's not quite what you're trying to do, tell me exactly what you want to have happen when, and I'll tell you how to do it.

 

[Timbo_La]

I don't use Mootools and can't be arsed to look up how to do what it is that needs to be changed. However, I do know jQuery, so can help you with that, if you'd like.

Now, I'm not completely sure how you want it to work, but I'm guessing you want the events attached so they function on each '.ap_collections_container' individually, rather than on all of them on the page?
Something like this?
http://jsfiddle.net/2bcq9/2/

If that's not quite what you're trying to do, tell me exactly what you want to have happen when, and I'll tell you how to do it.

Thanks for the help.

to clear things up, what i want to happen is the following.

when the cursor enters the div with the class '.ap_collections_container' (there will be more than one of these containers on the page)

the images in the div with the class 'ap_collections_thumbs_container' fade up from 0.4 to 1.0

and the text in div with class 'ap_collections_title_text' fades down.

when the cursor leaves the div with the class '.ap_collections_container' they return to there original state.

in your example the text is behaving the way correct way, but it seems that the images are not fading up ( i know there are no images in the example but the border is not fading up)

i have tried play around with your example after reading a little bit on jquery but not had much success.

i have corrected some spelling mistakes and also added a background colour to the img class here

http://jsfiddle.net/2bcq9/7/

will go off to try and figure out why the img tags are not fading up.

thanks for the help

Tim

 

[Tripnologist]

Here you go.

http://jsfiddle.net/2bcq9/8/

 

[Timbo_La]

Here you go.

http://jsfiddle.net/2bcq9/8/

Thank you for the help, fantastic.

will look into using Jquery more as it looks like mootools is not as popular.

Tim

 

[Tripnologist]

No problem!
IMO, jQuery is definitely the one to know. It's pretty much the industry standard JS library.

Also, look at the amount of code you started with when trying to do it with Mootools, compared to the amount of code that was needed to do it with jQuery.
Having to write less code is a good thing in my book.


Edit:
BTW, I forgot to mention this when I made my post and didn't change it in jsFiddle, but you are incorrectly closing your image tags.
<img></img> is incorrect.
Generally speaking, it should just be <img> for HTML or <img /> for XHTML, while HTML5 is fine with either.

Personally, even though I use HTML5, I still stick to XHTML Strict standards as much as I can. ie: self closing tags, lower case attributes, attributes in quotes, etc.

 

[Timbo_La]

I will look into cleaning up my code.

out of interest i asked on the mootools google group what I needed to fix in the original code to get it to work and they came back with this

http://jsfiddle.net/2bcq9/14/

I appreciate your help as it opened my eyes to Jquery aswell.

Tim