Hi, This is my first post here, and I really need your help.
Please help on adding a Slide&Fade effect, and a Delay, on the following Mootools code: --------------------- $('updates_pulldown').addEvents({ mouseenter: function(){
I have tried some things as you can see below, but nothing worked for me: --------------------- $('updates_pulldown').addEvents({ mouseenter: function(){
$('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pul ldown_active') $('pulldown_contents_wrapper').set('tween', { duration: 1000, physics: 'pow:in:out', transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out' }).SlideOut(); }, mouseleave: function(){ $('pulldown_contents_wrapper').delay(1000).set('tween', { duration: 1000, }).SlideIn();
The show() and hide() function calls you're making will change the display
style to block and none, respectively. They aren't part of Fx or Fx.Tween.
If you really want to use Tween and you want to get it going from the
Element reference, you should use the tween() method. Since (I'm guessing)
you want to adjust the height, you'll need to make sure your element has a
CSS float property set. Then do something like Element.tween('height',
'0px')
If you shove this into a JSFiddle, someone on this list will probably just
fix it for you.
For delay, it needs to be on a full function reference, either an anonymous
inline declaration or a closure, e.g.,:
(function(){ console.log('this will run in 1000 milliseconds');
}).delay(1000)
...or...
var foo = function(){ console.log('this will run in 1000 milliseconds'); };
foo.delay(1000);
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 Sun, Oct 21, 2012 at 10:58 PM, Bogh <cont...@skayz.com> wrote:
> Hi,
> This is my first post here, and I really need your help.
> Please help on adding a Slide&Fade effect, and a Delay, on the following
> Mootools code:
> ---------------------
> $('updates_pulldown').addEvents({
> mouseenter: function(){
> I have tried some things as you can see below, but nothing worked for me:
> ---------------------
> $('updates_pulldown').addEvents({
> mouseenter: function(){
> $('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pul ldown_active')
> $('pulldown_contents_wrapper').set('tween', {
> duration: 1000,
> physics: 'pow:in:out',
> transition: Fx.Transitions.Bounce.easeOut // This could have been
> also 'bounce:out'
> }).SlideOut();
> },
> mouseleave: function(){
> $('pulldown_contents_wrapper').delay(1000).set('tween', {
> duration: 1000,
> }).SlideIn();
Please put runnable, editable code @ jsFiddle.net. This will make it a
lot easier for someone to help you (remember, element
'updates_pulldown' is meaningless outside of your domain unless you
can show us the scaffolding of your site at jsFiddle).
I have used tween because this is what I have found on my searches, I am not even sure if this is the best way. I think I would like the height to be adjusted automatically, on slide, because I can't really restrict the box to a height. All I want is to add a slide & fade, and a delay on mouseleave.
jsFiddle can't read PHP. I almost think your Fiddle is harder to
execute than an e-mail!
In jsFiddle, you put inner markup in the "HTML" pane (everything
*inside* the BODY, not including the BODY tag), your styles in "CSS,"
and JS in "JS." You don't need to wrap JS in domready.
The idea is for the "Result" pane that combines and runs the other
panes, to actually be a page of HTML elements and images, not dumped
PHP code.
Working in jsFiddle can be amazing help in refactoring and simplifying
problematic code; I don't think I could write adaptable classes were
it not for jsFiddle helping me to be generic.
I realize I am being strict about this, but the payoff is that someone
will give you a great solution. But it has to be de-mangle-ified
first.
A lot of times, its easier to build the interaction/concept/widget in a standalone version. This is particularly helpful if its a concept you are having trouble with and/or are trying to enlist help from others.
One you have your interaction/concept/widget working it should be fairly easy to integrate with your php application.
>> Thanks for your replies, I have posted the code to JSfiddle:
>> http://jsfiddle.net/eKTwM/1/ > jsFiddle can't read PHP. I almost think your Fiddle is harder to
> execute than an e-mail!
> In jsFiddle, you put inner markup in the "HTML" pane (everything
> *inside* the BODY, not including the BODY tag), your styles in "CSS,"
> and JS in "JS." You don't need to wrap JS in domready.
> The idea is for the "Result" pane that combines and runs the other
> panes, to actually be a page of HTML elements and images, not dumped
> PHP code.
> Working in jsFiddle can be amazing help in refactoring and simplifying
> problematic code; I don't think I could write adaptable classes were
> it not for jsFiddle helping me to be generic.
> I realize I am being strict about this, but the payoff is that someone
> will give you a great solution. But it has to be de-mangle-ified
> first.
Thank you all for your time. I have solved it somehow. Sorry for not posting a functional code in jsfiddle, I'll do it better next time when I'll need your help. Thanks again, wish you a good day!
> Thank you all for your time. I have solved it somehow.
> Sorry for not posting a functional code in jsfiddle, I'll do it better next
> time when I'll need your help.
> Thanks again, wish you a good day!
Glad you got it working. Looking forward to your next question!