Javascript: MooTools

I have a div/form that transitions in (effect onload) when a menu
button is clicked. It works fine but there needs to be a way to close
the div and I’ve been unable to implement it. Clicking the trigger
only reloads the div. I’m doing this manually. Below is the moo code.

http://pastie.org/416272

Todd


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have most of it sorted except for one thing. This form should
initially be hidden on page load http://anoptic.com/slide.html but I
just can’t get it to work properly and visibility: hidden is not an
option.

Todd


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t know Moo, but in Prototype/Scriptaculous, all forms of hiding/
showing things are based around setting display:none on the relevant
element. Have you tried that?

Walter

On Mar 14, 2009, at 11:38 PM, Todd wrote:

visibility: hidden is not an option.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep, tried that too. If the site did not already rely on Moo I would
try to transition it over to proto/scripty but I don’t know enough to
do that yet.

Todd

On Mar 15, 2009, at 7:15 AM, Walter Lee Davis wrote:

I don’t know Moo, but in Prototype/Scriptaculous, all forms of
hiding/showing things are based around setting display:none on the
relevant element. Have you tried that?


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For anyone following along (which is probably no one) here’s the
solution:

http://pastie.org/417147

See it here:

http://www.anoptic.com/slide.html

You’ll notice that the hidden element flashes on load. I seem to
remember that there was a fairly simple fix to prevent this but I
can’t recall it…or am I imagining it? Anyone?

Todd

On Mar 15, 2009, at 7:15 AM, Walter Lee Davis wrote:

I don’t know Moo, but in Prototype/Scriptaculous, all forms of
hiding/showing things are based around setting display:none on the
relevant element.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you code the element with an inline display:none, it will not be shown at all in the beginning, and when you want it to appear, it will slide in. You are already doing the most you can do with the dom:ready thing from the Moo side of things (not an expert with Moo, but this is similar to how Prototype does this trick).

Walter


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I could be confusing my scripty and moo but that’s exactly what I
thought too but display:none (inline) just breaks the effect; meaning
the div will not slide in when triggered.

Todd

On Mar 15, 2009, at 7:49 PM, waltd wrote:

If you code the element with an inline display:none, it will not be
shown at all in the beginning, and when you want it to appear, it
will slide in. You are already doing the most you can do with the
dom:ready thing from the Moo side of things (not an expert with Moo,
but this is similar to how Prototype does this trick).


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Supposedly this should work to stop the flashing on load but not for
me. It’s the (.hide()) that’s throwing me, I thought it went after
(‘vertical_slide’) on the first line but that doesn’t seem to work.
Ideas?

“set visibility:hidden in your css, then in your js, initialize
Fx.Slide, hide it (.hide()) and then set style to visibility:visible.”

The original js:

var myVerticalSlide = new Fx.Slide(‘vertical_slide’);

document.addEvent(“domready”, function() {
$(‘vertical_slide’).slide(‘hide’);
$(‘global_connect’).addEvent(‘click’, function(e) {
e.stop();
$(‘vertical_slide’).slide(‘in’);
});
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try setting visibility:hidden on this slide element in the actual
style sheet for the page. Then, after you have applied the event
listener, add this line:

$('vertical_slide').style.setAttribute('visibility','visible);

Untested, naturally, but if I read between the lines here, that’s what
it appears they are saying you should do. Sort of a belt-and-
suspenders approach, because the first line should hide the element
immediately, wrapped as it is inside a domready event listener.

Walter

On Mar 16, 2009, at 9:39 AM, Todd wrote:

Supposedly this should work to stop the flashing on load but not for
me. It’s the (.hide()) that’s throwing me, I thought it went after
(‘vertical_slide’) on the first line but that doesn’t seem to work.
Ideas?

“set visibility:hidden in your css, then in your js, initialize
Fx.Slide, hide it (.hide()) and then set style to visibility:visible.”

The original js:

var myVerticalSlide = new Fx.Slide(‘vertical_slide’);

document.addEvent(“domready”, function() {
$(‘vertical_slide’).slide(‘hide’);
$(‘global_connect’).addEvent(‘click’, function(e) {
e.stop();
$(‘vertical_slide’).slide(‘in’);
});
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You were very close. I on the other hand wasn’t quite as close but
still, not too bad. : )

$(‘vertical_slide’).slide(‘hide’).setStyle(‘visibility’, ‘visible’); //
now that the fx.slide is hidden, display the element

Thanks,

Todd

On Mar 16, 2009, at 8:54 AM, Walter Lee Davis wrote:

Try setting visibility:hidden on this slide element in the actual
style sheet for the page. Then, after you have applied the event
listener, add this line:

$(‘vertical_slide’).style.setAttribute(‘visibility’,'visible);

Untested, naturally, but if I read between the lines here, that’s
what it appears they are saying you should do. Sort of a belt-and-
suspenders approach, because the first line should hide the element
immediately, wrapped as it is inside a domready event listener.

On Mar 16, 2009, at 9:39 AM, Todd wrote:

Supposedly this should work to stop the flashing on load but not
for me. It’s the (.hide()) that’s throwing me, I thought it went
after (‘vertical_slide’) on the first line but that doesn’t seem to
work. Ideas?

“set visibility:hidden in your css, then in your js, initialize
Fx.Slide, hide it (.hide()) and then set style to
visibility:visible.”

The original js:

var myVerticalSlide = new Fx.Slide(‘vertical_slide’);

document.addEvent(“domready”, function() {
$(‘vertical_slide’).slide(‘hide’);
$(‘global_connect’).addEvent(‘click’, function(e) {
e.stop();
$(‘vertical_slide’).slide(‘in’);
});
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

With the exception of curly-brackets around the arguments, that is
precisely how you would do this in Prototype.

$(‘foo’).setStyle({visibility:‘visible’});

Walter

On Mar 16, 2009, at 12:53 PM, Todd wrote:

setStyle(‘visibility’, ‘visible’)


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry I missed this thread, I do not normally pop into the ‘Dyanmo’ forum.

Todd, you may want to see this message in a slightly related thread:
http://www.freewaytalk.net/thread/view/26259#m_26477

It details a method of uses JS to hide content while the page is still loading, preventing content flash.

(short quote)

This has been mentioned elsewhere, but any framework has to load and be attached to some window event (onLoad, onDomReady, etc…) before it can modify the page. This leads to the page being loaded as the html dictates, then it is modified when the event is fired; evidenced by a content flash.

This script has proven successful for me (the createStyleRule() function) http://www.bobbyvandersluis.com/articles/dynamicCSS.php

(/short quote)


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Weaver,

You haven’t missed the thread, in fact, now that you’re here…

I’ve been doing some code-level experimenting and recently updated to
v2 of moo in order to use Fx.Slide which was the basis for this
thread. Got that working pretty well but I’ve noticed that, oddly,
some but not all of my accordions and all of my effect onload slaves
(v1.2) are now broken. I’ve decided to try and rewrite them for this
new version but do you happen to know why it broke and if there’s a
simple fix for it?

Thanks for the link.

Todd

On Mar 17, 2009, at 8:28 AM, Weaver wrote:

Sorry I missed this thread, I do not normally pop into the ‘Dyanmo’
forum.

Todd, you may want to see this message in a slightly related thread:
http://www.freewaytalk.net/thread/view/26259#m_26477

It details a method of uses JS to hide content while the page is
still loading, preventing content flash.

(short quote)

This has been mentioned elsewhere, but any framework has to load and
be attached to some window event (onLoad, onDomReady, etc…) before
it can modify the page. This leads to the page being loaded as the
html dictates, then it is modified when the event is fired;
evidenced by a content flash.

This script has proven successful for me (the createStyleRule()
function) http://www.bobbyvandersluis.com/articles/dynamicCSS.php

(/short quote)


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I meant to say I upgraded to v1.2, not v2.

Todd


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For anyone following along (which is probably no one) here’s the solution:

well… in fact i do!!!
:slight_smile:


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options