Re: [Proto-Scripty] Toggle opacity

[Walter Lee Davis]

On Jan 23, 2013, at 7:48 AM, Köd wrote:

> Hi guys
>
> To get a full view of my problem, please read: http://stackoverflow.com/questions/14478903/script-aculo-us-toggle-appear-on-multiple-divs
> _____________________________________________
>
> I have a simple question to ask you:
> Is it possible to use effect.opacity as a toggle effect?
>
> The reason why I'm asking this is because when using effect.opacity the assigned function can be spammed, hence making the div appear/fade over and over. I was thinking that it might would be possible to do so by changing something in the scriptaculous.js or effects.js file.
>
>
> If this is not possible, I would like to ask how you can use Effect.Toggle (appear) on multiple div's within an <a href> containing an onclick. An example:
>
> <li><a href="#" onclick="Effect.toggle('DIV1, DIV2, DIV3', 'appear'); return false;"></a>

It's going to be really hard to do this inline (I suppose it's possible, but not very readable) but if you create an observer function, then there should be a way to do this:

var toggleMyItems = function(items){
$w(items).each(function(elm){
var elm = $(elm);
if(elm && ! elm.animating){
elm['animating'] = true;
Effect.toggle(
elm,
'appear', {
afterFinish: function(){
elm.animating = false;
}
}
);
}
});
});

Then you could call that from inline:
<a href="#" rel="DIV1 DIV2 DIV3" onclick="toggleMyItems(this.rel); return false;">Howdy</a>

Or better, observe the click and do it elsewhere (separation of concerns):

document.on('click', 'a.multi', function(evt, elm){
evt.stop();
toggleMyItems(elm.rel);
});

<a href="#" class="multi" rel="DIV1 DIV2 DIV3">Howdy</a>

Walter

>
> Thanks.
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/_mWlqcRjEnIJ.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Jason Westbrook]

Instead of running each() on each element to run the Effect take a look a Effect.multiple()

http://madrobby.github.com/scriptaculous/effect-multiple/

it will do the heavy lifting for you and makes the code more readable

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

[Köd]

Thanks for the quick replies guys, I really appreciate it, +1 for that!

I was just wondering if you have read my post on stackoverflow? You might have a different way of handling this problem.

Anyway, I tried to use the Effect.multiple for Appear, without any luck. I guess I tried it completely wrong.. since I did something in the lines of:

<a href="#" onclick="Effect.multiple(['portfolioDiv','slideDiv'],function(el){Effect.toggle(el,'appear');});></a>

Den onsdag den 23. januar 2013 13.48.43 UTC+1 skrev Köd:

Hi guys

To get a full view of my problem, please read: http://stackoverflow.com/questions/14478903/script-aculo-us-toggle-appear-on-multiple-divs
_____________________________________________

I have a simple question to ask you:
Is it possible to use effect.opacity as a toggle effect?

The reason why I'm asking this is because when using effect.opacity the assigned function can be spammed, hence making the div appear/fade over and over. I was thinking that it might would be possible to do so by changing something in the scriptaculous.js or effects.js file.


If this is not possible, I would like to ask how you can use Effect.Toggle (appear) on multiple div's within an <a href> containing an onclick. An example:

<li><a href="#" onclick="Effect.toggle('DIV1, DIV2, DIV3', 'appear'); return false;"></a>

Thanks.

[Köd]

Guys!

It works! I don't know what was wrong with my code before - but I made the Effect.Multiple work, thanks for your guidance! Weee, now I can continue being happy :D

[Walter Lee Davis]

Could you please post your solution? I thought Effect.multiple was for applying different functions to the same element, not the other way round...

Walter

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/QXlygE0x3SIJ.

[Köd]

I did the following:

<a href="#" onclick="Effect.multiple(['portfolioDiv','slideDiv'],function(el){Effect.toggle(el,'appear');});">

both of my divs had the obvious style="display:none"

Using the same code to close them, since it's a toggle.

[Phil Petree]

I might be late to this show but this is what I use:

 

// get the form DOM
var form = $('myform');
// Now, disable the form!
form[form.disabled ? 'enable' : 'disable']();

// now show it as visually disabled
$('myform').setStyle({opacity: 0.5});

On Wed, Jan 23, 2013 at 11:15 AM, Köd <kodpi...@gmail.com> wrote:

Thanks for your replies. I will look into them, though I have tried to get multiple to work - without success. I was wondering if you had read my post on stackoverflow? Maybe you could see if there was a different solution to my little issue, it's driving me mad!

Den onsdag den 23. januar 2013 13.48.43 UTC+1 skrev Köd:

Hi guys

To get a full view of my problem, please read: http://stackoverflow.com/questions/14478903/script-aculo-us-toggle-appear-on-multiple-divs
_____________________________________________

I have a simple question to ask you:
Is it possible to use effect.opacity as a toggle effect?

The reason why I'm asking this is because when using effect.opacity the assigned function can be spammed, hence making the div appear/fade over and over. I was thinking that it might would be possible to do so by changing something in the scriptaculous.js or effects.js file.


If this is not possible, I would like to ask how you can use Effect.Toggle (appear) on multiple div's within an <a href> containing an onclick. An example:

<li><a href="#" onclick="Effect.toggle('DIV1, DIV2, DIV3', 'appear'); return false;"></a>

Thanks.

--

You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/4HT0A3QJPDYJ.