[DUG] How to create a highlighted presentation

[Gary T. Benner]

[Reply]

John,

A simple tutorial to help understand what's going on. Web applications have three levels of functionality:

1. Content - produced form the web server as HTML,images etc, and this may be static ( ie form a file ) or generated from your script code ( PHP,ASP etc) or Delphi ISAPI DLL.

2. Layout - CSS

3 Behaviour - local Javascript code executing inside the browser.

When a browser receives a response from a Web Server it takes the HTML, CSS and Javascript and attempts to transform this into it's own object model - called the DOM, Document Object Model. This can be acted upon further using the included Javascript code, and it can also generate Javascript events which can be responded to.

When you see your enlarged photo with the background grayed transparently, Javascript is used to manipulate the objects in the DOM to create this effect.

NB: While the code for this may be delivered by the webserver, in real time the web server will not be involved, other than to perhaps deliver the content for the enlarged photo.

There are existing Javascript libraries that provide this effect - just check out which one you want - are are already using perhaps for other reasons ... somehow they don't always work nicely together.

Dojo, JQuery, Scriptaculous, are a few names that come to mind.

This effect BTW is created by enabling two divs, one that is gray and transparent and occupies the whole screen to give you the background, and the second in front of that with the content ( a photo in your case ). That's putting it simply, the reality is a little more complex.

This effect is often used to replicate  a modal popup window without using the standard javascript alert and confirm popups.

HTH

Gary






At 20:53 on 15/07/2009 you wrote 
>To  : delphi at delphi.org.nz
>CC  : >From: PDS - John, John at padasy.co.nz
>Content Type: text/html
>Attached: >
>This is a multi-part message in MIME format.
>
>
>
>
>Hi all
>
> >
>TradeMe has a nice presentation in case you enlarge a photo; background
>vague and photo clearly visible. I had a look at their source but can't
>really figure out how they do this. Has anybody an idea how to achieve this
>presentation?
>
> >
>John C
>
>
>
>_______________________________________________
>NZ Borland Developers Group - Delphi mailing list
>Post: delphi at delphi.org.nz
>Admin: http://delphi.org.nz/mailman/listinfo/delphi
>Unsubscribe: send an email to delphi-request at delphi.org.nz with Subject: unsubscribe

Ref#: 41006

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://listserver.123.net.nz/pipermail/delphi/attachments/20090715/cd11123b/attachment-0001.html