Is this an alterative to the carousel?

WebWorker · January 24, 2008, 10:36am

See the side navigation here:-

Is this an alternative to the carousel, but make the divs fade, rather than slide?

Any hope of this as a Freeway action? or a just a step too far?

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

WebWorker · January 24, 2008, 10:54am

As in I want at the very least “fade in” contents of a page when loaded (I really don’t want to resort to build a flash web site)

I see you can use javascript to fade a single image - but a whole div contents or page is that possible?

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

waltd · January 24, 2008, 12:56pm

If you want to make an entire DIV disappear or appear, just make sure
that you have designed your peekaboo element as a single nested DIV,
rather than a stack of unrelated objects.

Then, it’s really really easy with Scriptaculous. I don’t have an
Action to make this particular effect simpler for you yet, but here’s
how you could do it right now:

Apply the Protaculous action to the page.
In the Actions palette, select Scriptaculous in the Use Library
picker. If you want to be mindful of download time, then open the
“Use individual files” segment and tick ‘effects’.
Click on the item you want to have fade in or out, and note its
name (change it if you like).
Click on the pasteboard to deselect everything, and then click on
the Function Body button in the Actions palette. Enter the following:

window.setTimeout(“Effect.Fade(‘TheName’)”,3000);

Two things to change in the above, naturally. TheName should be the
name of the object you identified in step 3. 3000 should be the
number of milliseconds you want to delay the fade.

Want to make something fade in? Two additional steps are needed.

After step 3 above, while the item is still selected, choose Item >
Extended from the main menu. In the DIV Style pane of that dialog,
enter the following pair:

display
none

This will cause the div to be initially invisible.

Then, in step 4, change the word Fade to Appear. That’s all it takes.

Walter

On Jan 24, 2008, at 5:54 AM, dwn wrote:

As in I want at the very least “fade in” contents of a page when
loaded (I really don’t want to resort to build a flash web site)

I see you can use javascript to fade a single image - but a whole
div contents or page is that possible?

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

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

WebWorker · January 24, 2008, 3:07pm

Where is the Protaculous action?

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

WebWorker · January 24, 2008, 3:21pm

Found it, tried it - perfect

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

waltd · January 24, 2008, 3:23pm

Sorry, it’s here:

http://freewaypro.com/actions/downloads/

Along with other bits and bobs you may find useful at some point.

Walter

On Jan 24, 2008, at 10:07 AM, dwn wrote:

Where is the Protaculous action?

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

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

waltd · January 24, 2008, 3:26pm

One more thing: If you are copying and pasting code from the Web
forum, rather than from the mailing list, you must straighten out or
“dumb down” the smart quotes. The Web forum uses the SmartyPants plug-
in by John Gruber to “educate” all quote marks. I wish there was a
way for it to recognize when you are inside a code block and skip
them there, but I don’t know how to manage that.

Walter

On Jan 24, 2008, at 7:56 AM, Walter Lee Davis wrote:

If you want to make an entire DIV disappear or appear, just make sure
that you have designed your peekaboo element as a single nested DIV,
rather than a stack of unrelated objects.

Then, it’s really really easy with Scriptaculous. I don’t have an
Action to make this particular effect simpler for you yet, but here’s
how you could do it right now:

Apply the Protaculous action to the page.

In the Actions palette, select Scriptaculous in the Use Library
picker. If you want to be mindful of download time, then open the
“Use individual files” segment and tick ‘effects’.

Click on the item you want to have fade in or out, and note its
name (change it if you like).

Click on the pasteboard to deselect everything, and then click on
the Function Body button in the Actions palette. Enter the following:

window.setTimeout(“Effect.Fade(‘TheName’)”,3000);

Two things to change in the above, naturally. TheName should be the
name of the object you identified in step 3. 3000 should be the
number of milliseconds you want to delay the fade.

Want to make something fade in? Two additional steps are needed.

After step 3 above, while the item is still selected, choose Item >
Extended from the main menu. In the DIV Style pane of that dialog,
enter the following pair:

display
none

This will cause the div to be initially invisible.

Then, in step 4, change the word Fade to Appear. That’s all it takes.

Walter

On Jan 24, 2008, at 5:54 AM, dwn wrote:

As in I want at the very least “fade in” contents of a page when
loaded (I really don’t want to resort to build a flash web site)

I see you can use javascript to fade a single image - but a whole
div contents or page is that possible?

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

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

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

WebWorker · January 24, 2008, 3:29pm

Yes I noticed a straight copy did not work.

What happens if someone goes to the site with javascript turned off, and the div is set to display-none?

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

Colin_Alcock · January 24, 2008, 3:46pm

I don’t believe that! I’ve seen you work miracles with code, usually
in no time at all - then any coding is a bit of a miracle to me!

Colin

On 24 Jan 2008, at 15:26, Walter Lee Davis wrote:

but I don’t know how to manage that.

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

WebWorker · January 24, 2008, 3:52pm

What is the correct context for naming more than one item? e.g fade more than one item e.g.

window.setTimeout(“Effect.Fade(‘Name1,name2’)”,3000);

Any guidance about how to recreate what was happening on the Apple site, when they are show hiding individual layers?

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

WebWorker · January 24, 2008, 4:05pm

Mmm… effect is lovely, but fading in part or all a page, presents big problems with someone with javascript disabled, I’ll have to put in a detect javascript option and re-direct to a non-javascript site.

Or pif javascript is disabled, set the div name “display- none” to nothing

Can you detect javascript with PHP?

But still its much better than a site all in flash, which from the clients requests would have been the option.

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

waltd · January 24, 2008, 4:11pm

You can’t detect JavaScript with anything but JavaScript. But you can
design your page to degrade gracefully.

That’s what my follow-up message was about. If you apply the “hide”
behavior using JavaScript rather than CSS, you will automatically
leave things untouched for those who choose to disable JS in their
browsers.

So the effect would work like this:

Page downloads to the browser with everything showing
As soon as the page is loaded, the elements that should fade in
disappear.
Then the timer starts to make them fade in.

If you use LowPro or Prototype 1.6 or better, then the second step
happens BEFORE the page displays in the browser.

Those who have disabled scripting will simply see the entire page.
Those who have enabled it will see the page “fade in”.

Walter

On Jan 24, 2008, at 11:05 AM, dwn wrote:

Mmm… effect is lovely, but fading in part or all a page, presents
big problems with someone with javascript disabled, I’ll have to put
in a detect javascript option and re-direct to a non-javascript site.

Or pif javascript is disabled, set the div name “display- none” to
nothing

Can you detect javascript with PHP?

But still its much better than a site all in flash, which from the
clients requests would have been the option.

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

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

waltd · January 24, 2008, 4:52pm

In the case of the Markdown/SmartyPants stuff, I am standing on some
very tall shoulders:

http://michelf.com/projects/php-markdown/

This is very well-written code, but written in a very abstract style
that I have difficulty following. I just plug it in, and in the case
of this forum, monkey-patch it after it’s done its thing with about
50 lines of regular expressions.

Walter

On Jan 24, 2008, at 10:46 AM, Colin Alcock wrote:

I don’t believe that! I’ve seen you work miracles with code, usually
in no time at all - then any coding is a bit of a miracle to me!

Colin

On 24 Jan 2008, at 15:26, Walter Lee Davis wrote:

but I don’t know how to manage that.

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

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

waltd · January 24, 2008, 4:56pm

Try one of these:

Effect.Fade('name1,name2,name3')
$A('name1,name2,name3').each(function(thing){Effect.Fade(thing)});

I can’t recall if Effect directly supports iteration (first example),
or if you have to invoke it manually (second).

Walter

On Jan 24, 2008, at 10:52 AM, dwn wrote:

What is the correct context for naming more than one item? e.g
fade more than one item e.g.
window.setTimeout(“Effect.Fade(‘Name1,name2’)”,3000);
Any guidance about how to recreate what was happening on the Apple
site, when they are show hiding individual layers?

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

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

waltd · January 24, 2008, 5:01pm

Oh, and we should really get this discussion over to Dynamo. I have a
feeling we may be scaring the codeaphobic among us with all this
yammering of Prototype and object-oriented JavaScript.

Walter

On Jan 24, 2008, at 11:56 AM, Walter Lee Davis wrote:

Try one of these:

Effect.Fade(‘name1,name2,name3’)
$A(‘name1,name2,name3’).each(function(thing){Effect.Fade(thing)});

I can’t recall if Effect directly supports iteration (first example),
or if you have to invoke it manually (second).

Walter

On Jan 24, 2008, at 10:52 AM, dwn wrote:
What is the correct context for naming more than one item? e.g
fade more than one item e.g.
window.setTimeout(“Effect.Fade(‘Name1,name2’)”,3000);
Any guidance about how to recreate what was happening on the Apple
site, when they are show hiding individual layers?

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

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

waltd · January 24, 2008, 5:05pm

Then they never see it.

The “correct” way to do this is to set the visibility with JavaScript
at page load.

Inside the Function Body dialog, set this as the first line:

$('yourDivName').hide();

In the Freeway layout, delete the whole DIV Style thing entirely.

Now, you will have a different problem – the flash of initial
content. There are various ways to deal with this.

One is to use LowPro.js to extend Prototype. This gives you the
ability to target DOM elements as soon as they load into the
browser’s memory, but before they actually display on the screen.

Another is to upgrade to the very latest version of Prototype, which
incorporates this functionality into the core.

At the moment, Protaculous is stuck at the Prototype 1.5.1.1 level. I
hope to update it to 1.6.x as soon as I get a chance to go through
all the various dependencies and figure out what else I need to
change in my Action code.

Walter

On Jan 24, 2008, at 10:29 AM, dwn wrote:

Yes I noticed a straight copy did not work.

What happens if someone goes to the site with javascript turned
off, and the div is set to display-none?

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

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

WebWorker · January 24, 2008, 5:09pm

how do i get Javascript to print “display - none” through the Freeway interface into the div style?

Short of have coding it?

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

waltd · January 24, 2008, 5:15pm

I don’t think you can, short of applying Source Code Snooper to the
element or entire page. Ick. Try this:

Apply Protaculous to the page, enable Prototype.
Click into the Function Body, and add the following:

$(‘yourDivId’).hide();

That will do the trick for you, without any snooping.

Walter

On Jan 24, 2008, at 12:09 PM, dwn wrote:

how do i get Javascript to print “display - none” through the
Freeway interface into the div style?

Short of have coding it?

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

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

WebWorker · January 24, 2008, 5:19pm

This worked, and I don’t see a flash on content in Safari, but I do in Firefox.

$(‘yourDivId’).hide();

Looking at my stats on my site only 6 out of 1024 this month had javascript disabled. - so perhaps that no too much of a problem.

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

WebWorker · January 24, 2008, 5:21pm

How do we do that?

Oh, and we should really get this discussion over to Dynamo

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