No Javascript Fallback

Does anyone know how apple is achieving this slideshow with navigation and fallback for those browsers that have javascript disabled.

Link: http://www.apple.com/ipad/

1.The main question is not how to build a slide show but how to lay it out so when Javascript is turned off all the slides are laid out in a stack in sequential order on the page?

NOTE: To see it in action turn your javascript off

Regards, Dave


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

Simply, by hiding the extra elements of the slideshow using
JavaScript. That way, when it’s not there, the extra images are not
hidden.

Try this on a page to get a feel for how it might work:

  1. Draw a large HTML box on the page (note its name in the Title field
    in the Inspector).
  2. Double-click into it, and add 4 inline photos. Click once on the
    outer HTML box, and un-check the height property in the Inspector, so
    it will shrink to fit its contents.
  3. Apply Protaculous to the page, and choose prototype-packed from the
    library menu.
  4. Click on the top Function Body button and paste in the following
    code (changing the placeholder name for the name you memorized in step
  1. and preview to see the effect.
$('yourDivName').select('img').invoke('hide').first().show();

Look at that page with JS off, then on. What’s happening here is that
any images inside that HTML box are being hidden, then the first image
is shown again. This all happens before the page even has a chance to
finish loading, so all you see (in a scripted browser) is the first
image.

Walter

On Jun 1, 2011, at 12:49 AM, TeamSDA wrote:

Does anyone know how apple is achieving this slideshow with
navigation and fallback for those browsers that have javascript
disabled.

Link: http://www.apple.com/ipad/

1.The main question is not how to build a slide show but how to lay
it out so when Javascript is turned off all the slides are laid out
in a stack in sequential order on the page?

NOTE: To see it in action turn your javascript off

Regards, Dave


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

Thank you Walter. We will have a go at this later today.

Regards,
Dave


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

Hi Walt,

Gave it a try and sure enough it works as you say, very cool. Now to make the slide show work. I tried applying Target Show/Hide Image or layer along with Sequence Timer. Does not appear that these actions work with this type of set up.

Is there another way to bring the slide show functionality to either a layer or image?

Regards, Dave


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

Any other thoughts as to how to create this type of slideshow ad with a no javascript fallback? To make things even more interesting the slideshow ad would need to be able to cause the overall page to grow when it unpacks in in the no javascript mode.

Look forward to your input, Dave


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

To make the page unpack, all you have to do is use an inline layout.
Make the HTML box that contains the images of undefined height, and
make sure that it pushes everything below it downscreen, and you are
set.

To make the animation happen, you just need a little lump of
JavaScript. I’m making this up off the top of my head, but what about
this:

$$('#yourHtmlBoxName img').invoke('setStyle','position:absolute; top: 
0; left:0;');
$('yourHtmlBoxName').observe('click',function(evt){
	var elm = evt.findElement('img');
	if(elm.nextSibling()){
		var next = elm.nextSibling();
	}else{
		var next = elm.up('div').down('img');
	}
	new Effect.Parallel([
		new Effect.Fade(elm),
		new Effect.Appear(next)
	], duration: 0.5});
});

So each time you click, you get the next image until you reach around
to the beginning again.

Walter

On Jun 3, 2011, at 4:43 PM, TeamSDA wrote:

Any other thoughts as to how to create this type of slideshow ad
with a no javascript fallback? To make things even more interesting
the slideshow ad would need to be able to cause the overall page to
grow when it unpacks in in the no javascript mode.

http://www.apple.com/ipad/

Look forward to your input, Dave


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

I just had occasion to try this out, and found a couple of bug-ettes. Please try the following, which is working in Firefox now.

$$('#yourHtmlBoxName img').invoke('setStyle',
    'position:absolute; top: 0; left:0; cursor:pointer; display:none;').first().show();
$('yourHtmlBoxName').observe('click',function(evt){
    var next, elm = evt.findElement('img');
    if(elm.next('img')){
        next = elm.next('img');
    }else{
        next = elm.up('div').select('img').first();
    }
    new Effect.Parallel([
        new Effect.Fade(elm),
        new Effect.Appear(next)
    ], {duration: 0.5});
});

Walter


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

Hi Walt,

Finally got a chance to get around to this again. Should I still use the first mentioned code and Protaculous action?

Also where do I put the above javascript?

Regards, Dave


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

You should draw an HTML box on the page, double-click inside it, and add your photos as inline children. Make note of the name Freeway (or you) give the HTML box. Then apply Protaculous to the page, click on the top Function Body button, and paste in the second version of the code above. Change the word yourHtmlBoxName to match the actual name of the box. Be sure to remOve the height attribute on the HTML box. Now preview, and see what happens.

Walter


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

Wow… this is pretty cool, no this is vary cool and totally PE.

Any idea how to make it run automatically and would there be a way to add buttons instead of clicking on the image?

Regards, Dave


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

What’s PE?

You could change the element that the click is registered on, but you
would have to add some more housekeeping to the function in order to
track which image was “it” at the moment. Right now, it takes
advantage of the fact that the click will only land on the visible
image, since all the others are removed from the DOM.

I’ll see if I can wrap my head around it later.

Walter

On Jun 20, 2011, at 10:46 PM, TeamSDA wrote:

Wow… this is pretty cool, no this is vary cool and totally PE.

Any idea how to make it run automatically and would there be a way
to add buttons instead of clicking on the image?

Regards, Dave


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 Walt,

Sorry for the PE abbreviation… “Progressive Enhancement” and I look forward to what you come up with. You have a great way of technically solving real world needs through clean code solutions.

Regards, Dave


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