make content viewable with javascript turned off

Hey,

I’m developing a simple site and I’d like to make sure that the site displays properly for people with javascript turned off… but then enhances with a few simple effects for those with it on.

At the moment I have a large image with a fade-in effect (initially hidden). When js is turned off, it doesn’t display at all… so how can I make sure that it just ignores the animation and displays a flat image using freeway 5 pro?

All help much appreciated!


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

This is an example of what is known as “progressive enhancement”.
It’s a very good idea. The basic idea behind it is that things which
are hidden on page load should be hidden by JavaScript – thereby
making the net result no change if JavaScript is not present.

The Softpress Actions that use Prototype/Scriptaculous do not work in
this way, but you could get them to do that without much trouble.

If you look at the code that is published when you have the fade-in
effect set up, you’ll see that they set the initial visibility using
the object’s style tag, not within the call to the effects library.

The last thing in the style tag for your hidden object will be
“display:none”.

If you un-check the Initially Hidden box in the Inspector, then the
object will be there for your un-scripted visitors. But what to do
about the people who want the groovy effects?

Apply Protaculous[1] to the page. Make a note of the name of the
object you have applied the Action to (look in the Inspector, in the
Title field of the left-most tab). Click on the top-most Function
Body button in the Inspector, and paste the following code in:

$('YourItemName').hide();

Be sure to replace YourItemName with what you found in the Inspector.
This will be case sensitive, and you need the single-quotes around
the item name.

Now, when the page loads, two unobtrusive functions will fire. The
first will hide anything that you have decided to hide. This behavior
will happen before anything appears on screen. The second function
will fire after the page has fully loaded (that’s the part from the
Transitions FX) and will cause the hidden object to appear.

If you have more than one thing to hide, you can either stack up
multiple versions of the code above, changing only the ID in each
one, or you can use the cool ‘iterator’ functions in Prototype to do
the same thing with less typing:

$$('#thing1,#thing2,#thing3').invoke('hide');

Walter

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

On Jul 15, 2008, at 10:18 AM, ed watt wrote:

Hey,

I’m developing a simple site and I’d like to make sure that the
site displays properly for people with javascript turned off… but
then enhances with a few simple effects for those with it on.

At the moment I have a large image with a fade-in effect (initially
hidden). When js is turned off, it doesn’t display at all… so how
can I make sure that it just ignores the animation and displays a
flat image using freeway 5 pro?

All help much appreciated!


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

Hi Walter,

thanks so much! That’s fantastic! I’ve done that and everything is working perfectly. They should build that into freeway in the next update… either that or some sort of automatic state for non-javascript on each effect.

Very nice that you can hide multiple items so easily too.
Really appreciate your help and insight,

Ed


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