<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
myOffice Email Message
</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="date" content="2002-11-01">
<style type="text/css">
</style>
</head>
<body>
<span style=
"color:#FF0000 "><b><span style=
"font-family:MS Sans Serif ">[Reply]</span></b></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">John,</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">A simple tutorial to help understand what's going on. Web applications have three levels of functionality:</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">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.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">2. Layout - CSS</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">3 Behaviour - local Javascript code executing inside the browser.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">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.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">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.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">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.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">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.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">Dojo, JQuery, Scriptaculous, are a few names that come to mind.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">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.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">This effect is often used to replicate a modal popup window without using the standard javascript alert and confirm popups.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">HTH</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">Gary</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#000000 ">A</span><span style=
"color:#FF0000 "><b>t 20:53 on 15/07/2009 you wrote </b></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>To : delphi@delphi.org.nz</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>CC : </span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>From: PDS - John, John@padasy.co.nz</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>Content Type: text/html</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>Attached: </span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>This is a multi-part message in MIME format.</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>Hi all</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">> </span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>TradeMe has a nice presentation in case you enlarge a photo; background</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>vague and photo clearly visible. I had a look at their source but can't</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>really figure out how they do this. Has anybody an idea how to achieve this</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>presentation?</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">> </span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>John C</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">></span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>_______________________________________________</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>NZ Borland Developers Group - Delphi mailing list</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>Post: delphi@delphi.org.nz</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>Admin: http://delphi.org.nz/mailman/listinfo/delphi</span></span>
<p>
<span style=
"font-family:MS Sans Serif "><span style=
"color:#008000 ">>Unsubscribe: send an email to delphi-request@delphi.org.nz with Subject: unsubscribe</span></span><p>
<font face=arial size = 1 color = Navy><font color=gray face = "helvetica,verdana,arial" size = 1><br /><br>
<font size=2 color="black">Gary Benner </font><hr /><br>
<a HREF="http://www.semantic.co.nz" style="text-decoration:none; color:blue">Semantic Limited</a> - Online Education, e-Commerce, Software Development & Systems Design<br /><br>
<a HREF="http://www.123.net.nz" style="text-decoration:none; color:blue">123 Internet Limited</a> - Managed Web Hosting, Virtualisation, High Availability Systems & Cluster Technologies<br /><br>
<b>Mob:</b> 021 966 992<br /><br>
<b>DDI:</b> +64 7 543 1206<br /><br>
<b>Email:</b> <a href="mailto:gary@benner.co.nz" >gary@benner.co.nz</a><br /><br>
<b>Skype:</b> garybenner<br /><br>
</font><br>
<br>
Ref#: 41006<br>
<br>
</body>
</html>