Click here to Skip to main content
Click here to Skip to main content

Online Slide Show as pure HTML5 / CSS3 solution: NO Javascript

, 3 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
SAY IT WITH CSS! - Online slide show implements "darkbox" pop-up using novel CSS3/HTML5 features
Solution demonstrates CSS3 coding technique implementing online slide show with "darkbox" or "lightbox" pop-up effects using pure CSS3 and HTML5; it does not use any Javascript/jQuery.

DEMO

Working Demo at:"iPad 2 weekend at Apple Store, New York" slide show[^]
 
iPad 2 Slide Show CSS 3
 
Entire solution (i.e., "Apple iPad 2 in NYC" slide show) is encapsulated in a single .htm file (see the code Listing 1, 2). In addition to the darkbox effect and slide navigation, it also demonstrates various aesthetic enhancements via CSS3/HTML5 hew features, like:
  • color gradients
  • rounded corners
  • box shadow
  • text shadow
  • text rotate

Browser Compatibility

Essentially all web browsers supporting HTML5 standard would be able to run this application and its derivatives. In particular, the list of all major browsers fully/partially compatible with HTML5 follows:
  • Mozilla FireFox 4 and higher
  • Google Chrome 10 and higher
  • Microsoft IE 9 and higher (some issues noticed with color gradients and text rotation)
  • Apple Safari 5 and higher

Design Notes

Entire application is encapsulated in a single file mostly for didactic purpose, so the readers will be provided with holistic view of the solution. In practice, CSS part could be placed in a separate file, adhering to the programming paradigm of separation of concerns (i.e. content from formatting and functionality). Pertinent to that, I divided the code snippet into two Listings (1 and 2) in order to simplify the task for users working on the production version of the app.

References

  1. Slide Show CSS "iPad 2 weekend in New York City"[^]
  2. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  3. Hyperlinked Image in ASP.NET GridView[^]
  4. Engineering calculator VOLTA-2011, Design Notes[^]
  5. Embedded YouTube Player[^]
Listing 1
<!DOCTYPE HTML>
<html>
<head>
    <title>SLIDESHOW CSS3 | HTML5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Copyright" content="2011 Infosoft International Inc" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache">
    <meta name="Robots" content="all" />
    <meta name="Distribution" content="global" />
    <meta name="Keywords" content="APPLE iPAD 2, SLIDE SHOW CSS 3, DARKBOX CSS 3,
    LIGHTBOX CSS 3, Apple Store Manhattan NY,
    RIA, HTML 5, NO Javascript, NO jQuery />
    <meta name="Description" content ="APPLE iPAD 2 SLIDE SHOW WITH DARKBOX EFFECT,
    CSS 3, HTML 5, NO Javascript, Apple Store in Manhattan NY" />
    <style type="text/css">
        html, body {
            font-family:Arial, Calibri;
            background-color:#bababa;
            margin:0;
            padding:0;
            text-align:center;
            overflow:hidden;
        }
        /*** horizontal list applied to thumbnails, nav controls ***/
         ul {
            float:left;
            width:100%;
            margin: 0px 0px 20px 0px;
            padding:0;
            list-style-type:none;
        }
        li {display:inline; margin-right:5px;}
        /*** pop-up div to cover entire area ***/
        .divDarkBox  {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            /*! critical !*/
            display:none;
            /* last attribute set darkness on scale: 0...1.0 */
            background-color:rgba(0,0,0,0.8);
            text-align:center;
            z-index:101;
        }
        /*** ! target attribute does the job ! ***/
        .divDarkBox:target  { display:block; }
        /*** virtual frame containing controls, image and caption ***/
        .divDarkBox div  {
           /* either absolute or fixed */
            position:fixed;
            top:10%;
            left:25%;
            width:50%;
            height:60%;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:102;
        }
        /*** header used as main image caption  ***/
        .divDarkBox div h1  {
            font-size:0.9em;
            color:#bababa;
            font-weight:normal;
            margin-top:20px;
            z-index:103;
            /* add shadows to text */
            -moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.9);
            -webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
            text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
        }
        /*** div serves as thumbnais container  ***/
        #divThumbnails {
            position:relative;
            margin: 60px 0 0 0;
            height:150px;
            padding-top:30px;
            background-color:#cacaca;
             /* add shadows */
            -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
            -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
            box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
             /* gradient effect with color-stop */
            background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 49%, #909090 50%, #cacaca 50%, #cacaca 90%, #ababab);
            background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.49, #cacaca), color-stop(0.50, #909090), color-stop(0.50, #cacaca), color-stop(0.90, #cacaca), to(#ababab));
        }
        /*** div contains related apps ***/
        #divRelate {
            padding-top:20px;
        }
        /*** thumbnails/relate div share image style ***/
        #divThumbnails img, #divRelate img
        {
            padding:10px;
            border: solid 1px gray;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /* add shadows */
            -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            z-index:1;
        }
        /*** thumbnails specific image style ***/
        #divThumbnails img {
            min-width:50px;
            max-width:100px;
            height:100px;
        }
        /*** relate-specific image style ***/
        #divRelate img  {
            max-height:400px;
            max-width:250px;
            max-height:300px;
        }
        /*** main image style ***/
        .divDarkBox img {
            padding:20px;
            z-index:105;
            border: solid 1px gray;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /* gradient effect with color-stop */
            background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #303030 50%, #101010);
            background: -webkit-gradient(linear, center top, center bottom, from(#dadada), color-stop(0.05, #505050),
                color-stop(0.5, #bababa), color-stop(0.5, #303030), to(#101010));
            /* this causes some rendering diff */
            min-height:300px;
            min-width:300px;
            max-height:100%;
            max-width:80%;
        }
        /*** hover effects increase visual responsiveness ***/
        img:hover, .divDarkBox ul a:hover  {
            background:#505050;
            /* gradient effect with color-stop */
            background: -moz-linear-gradient(top, #eaeaea, #505050 50%, #303030 50%, #404040);
            background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea),
                color-stop(0.5, #505050), color-stop(0.5, #303030), to(#404040));
        }
        /*** navigation controls style: highest z-index ! ***/
        .divDarkBox ul a  {
            padding:5px;
            font-size:22px;
            font-weight:bold;
            color:Yellow;
            text-decoration:none;
            border: solid 1px Gray;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:110;
        }
        /* optional text stamp: 45 Degree */
        .divDarkBox .divDemo  {
            position absolute;
            top:15%;
            left:0%;
            font-size:4em;
            color:Olive;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
        }
        /* page footer/header: fixed */
        #footer, #header {
            position:fixed;
            padding:0;
            width:100%;
            height:60px;
            text-align:center;
            background-color:#606060;
            color: #cacaca;
            /* add shadows to text */
            -moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.6);
            -webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.6);
            text-shadow: 3px 4px 6px rgba(10,10,10,0.6);
        }
        #header {top:0; }
        #footer { bottom:0; line-height: 60px;}
    </style>
</head>
 
Listing 2
<body>
    <div id="header">
        <h3>APPLE<sup>®</sup> iPAD 2 SLIDE SHOW WITH DARK BOX EFFECT IMPLEMENTED AS PURE CSS 3 SOLUTION (NO JAVASCRIPT)</h3>
    </div>
    <!-- NAV THUMBNAILS -->
    <div id="divThumbnails">
        <ul>
            <li><a href="#divDarkBox1" ><img src="http://www.webinfocentral.com/iPad2/Apple-GEDC3429_small.JPG"
                alt="APPLE® STORE" /></a></li>
            <li><a href="#divDarkBox2" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3474_small.JPG"
                alt="iPAD 2 PRICING" /></a></li>
            <li><a href="#divDarkBox3" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3477_small.JPG"
                alt="iCIRCUIT" /></a></li>
            <li><a href="#divDarkBox4" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3446_small.JPG"
                alt="ZENO-5000" /></a></li>
            <li><a href="#divDarkBox5" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3453_small.JPG"
                alt="FRACTION CALCULATOR" /></a></li>
            <li><a href="#divDarkBox6" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3455_small.JPG"
                alt="YOUTUBE PLAYER" /></a></li>
            <li><a href="#divDarkBox7" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3458_small.JPG"
                alt="SILVERLIGHT" /></a></li>
            <li><a href="#divDarkBox8" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3465_small.JPG"
                alt="BING MAP" /></a></li>
            <li><a href="#divDarkBox9" ><img src="http://www.webinfocentral.com/iPad2/Prize_Amphora_small.JPG"
                alt="SURPRISE: NY QUIZ" /></a></li>
        </ul>
    </div>
    <div id="divRelate">
         <h3> RELATED WEB APPLICATIONS</h3>
        <a href="http://www.webinfocentral.com/VOLTA/Volta.htm" target ="_blank" ><img
            src="http://www.webinfocentral.com/iPad2/Engineering_Calculator_Volta_2011.jpg"
            alt="Calculator VOLTA-2011" /></a>
        <a href="http://www.webinfocentral.com/MATH/zeno.htm" target ="_blank" ><img
            src="http://www.webinfocentral.com/iPad2/Zeno5000.jpg"
            alt="Calculator ZENO-5000"/></a>
    </div>
    <!--1st SLIDE -->
    <div id="divDarkBox1" class="divDarkBox">
        <!--OPTIONAL TEXT 45 DEG-->
        <div class="divDemo">COOL DEMO!</div>
        <div>
            <ul >
                <li><a href="#">&#8855</a></li> <!--CLOSE SYMBOL-->
                <li><a href="#divDarkBox9">&#8678</a></li> <!--BACK ARROW: MOVE BACK|LAST-->
                <li><a href="#divDarkBox2">&#8680</a></li> <!--FORWARD ARROW: MOVE NEXT-->
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <!--FULL SIZE IMAGE: ON CLICK MOVE NEXT-->
            <a href="#divDarkBox2"><img
                src="http://www.webinfocentral.com/iPad2/Apple-GEDC3429.JPG"
                alt="APPLE® STORE IN MANHATTAN NY" /></a>
            <h1>APPLE<sup>®</sup> STORE IN MANHATTAN, NY. iPAD 2 WEEKEND STARTED ON MARCH 12th, 2011</h1>
        </div>
    </div>
    <!--2nd SLIDE -->
    <div id="divDarkBox2" class="divDarkBox">
        <div class="divDemo">iPad 2 PRICING</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li> <!--CLOSE-->
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox1">&#8678</a></li> <!--MOVE BACK-->
                <li><a href="#divDarkBox3">&#8680</a></li> <!--MOVE NEXT-->
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <a href="#divDarkBox3"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3474.JPG"
                alt="iPAD 2 PRICING MODEL" /></a>
            <h1>iPAD 2 PRICING MODEL STAYS PRETTY MUCH THE SAME, STARTING FROM $499</h1>
        </div>
    </div>
    <!--3rd SLIDE -->
    <div id="divDarkBox3" class="divDarkBox">
        <div class="divDemo">WOW, CIRCUIT!</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox2">&#8678</a></li>
                <li><a href="#divDarkBox4">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <a href="#divDarkBox4"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3477.JPG"
                alt="iCIRCUIT SCHEMATIC DIAGRAM" /></a>
            <h1>iCIRCUIT SCHEMATIC DIAGRAM EDITOR, GREAT APP!</h1>
        </div>
    </div>
    <!--4th SLIDE -->
    <div id="divDarkBox4" class="divDarkBox">
        <div class="divDemo">VERY NICE!</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox3">&#8678</a></li>
                <li><a href="#divDarkBox5">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li>
                <li><a href="../MATH/zeno.htm" target="_blank">LINK</a></li>
            </ul>
            <a href="#divDarkBox5"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3446.JPG"
                alt="ZENO-5000" /></a>
            <h1>FREE ONLINE SCIENTIFIC CALCULATOR <strong>ZENO-5000</strong> (TESTING MY STUFF :)</h1>
        </div>
    </div>
    <!--5th SLIDE -->
    <div id="divDarkBox5" class="divDarkBox">
        <div class="divDemo">VERY USEFUL!</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox4">&#8678</a></li>
                <li><a href="#divDarkBox7">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://www.webinfocentral.com/Mobile/Fractions.aspx"
                    target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="#divDarkBox6"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3453.JPG"
                alt="FRACTION CALCULATOR" /></a>
            <h1>MOBILE ONLINE FRACTION CALCULATOR (ALSO MY STUFF :)</h1>
        </div>
    </div>
    <!--6th SLIDE -->
    <div id="divDarkBox6" class="divDarkBox">
        <div class="divDemo">YouTube Player</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox5">&#8678</a></li>
                <li><a href="#divDarkBox7">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://www.webinfocentral.com/RESOURCES/VideoAudio.aspx"
                    target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="#divDarkBox7"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3455.JPG"
                alt="YOUTUBE PLAYER" /></a>
            <h1>EMBEDDED YOUTUBE PLAYER SEEMINGLY WORKING...</h1>
        </div>
    </div>
    <!--7th SLIDE -->
    <div id="divDarkBox7" class="divDarkBox">
        <div class="divDemo">SILVERLIGHT?</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox6">&#8678</a></li>
                <li><a href="#divDarkBox8">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
            </ul>
            <a href="#divDarkBox8"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3458.JPG"
                alt="SILVERLIGHT" /></a>
            <h1>MICROSOFT SILVERLIGHT<sup>®</sup> APPLICATION IS NOT WORKING...</h1>
        </div>
    </div>
    <!--8th SLIDE: -->
    <div id="divDarkBox8" class="divDarkBox">
        <div class="divDemo">MS BING</div>
        <div>
           <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox7">&#8678</a></li>
                <li><a href="#divDarkBox9">&#8680</a></li> <!--MOVE NEXT-->
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://www.webinfocentral.com/RESOURCES/WeatherMap.aspx"
                    target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="#divDarkBox9"><img
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3465.JPG"
                alt="BING MAP" /></a>
            <h1>MICROSOFT INTERACTIVE BING<sup>®</sup> MAP AND 7-DAY WEATHER FORECAST WORK FINE</h1>
        </div>
    </div>
    <!--9th SLIDE: LAST ONE -->
    <div id="divDarkBox9" class="divDarkBox">
        <div class="divDemo">HAVE FUN!</div>
        <div>
           <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox8">&#8678</a></li>
                <li><a href="http://exm.nr/NYipad" target="_blank">&#9786</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="http://exm.nr/NYipad" target="_blank"><img
                src="http://www.webinfocentral.com/iPad2/Prize_Amphora.JPG"
                alt="New York FUN-QUIZ" /></a>
            <h1>SURPRISE: NEW YORK FUN-QUIZ :)</h1>
        </div>
    </div>
    <div id="footer">
        Copyright© 2011 Infosoft International Inc | Author: Alexander Bell, NY |
        <a href="http://www.webinfocentral.com" target ="_blank" >HOME</a> |
    </div>
</body>
</html>
 

References

  1. Slide Show CSS "iPad 2 weekend in New York City"[^]
  2. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  3. Hyperlinked Image in ASP.NET GridView[^]
  4. Engineering calculator VOLTA-2011, Design Notes[^]
  5. Embedded YouTube Player[^]

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran published 300+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, .NET, ASP.NET, WPF, C#, SQL, 'Big Data', AI, Speech Technology and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Engineering Calculator VOLTA-814D
  5. SQL generates large data sequence
  6. Aggregate Product function extends SQL
  7. Watch Your Mouse!
  8. Top-100 Digital Cameras
  9. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects w/total code base exceeding 250k lines.
Follow on   Twitter

Comments and Discussions

 
GeneralReason for my vote of 5 Really A Good Example Pinmemberonurag192-Feb-12 8:49 
GeneralRe: Thank you for your note/vote! PinmemberDrABELL2-Feb-12 10:09 
GeneralReason for my vote of 5 Really useful one. Note: if some of... PinmemberJH6410-Jan-12 10:44 
GeneralRe: Many Thanks for your vote/note! PinmemberDrABELL10-Jan-12 14:04 
General<b>My vote of 5</b> Very nice article. More explanations on ... PinmemberAkram El Assas5-Jan-12 11:55 
GeneralRe: Many Thanks! I plan a series of full-size articles on this t... PinmemberDrABELL5-Jan-12 13:36 
GeneralReason for my vote of 5 cool Pinmemberbeginner20112-Jan-12 16:49 
GeneralRe: Thanks! PinmemberDrABELL2-Jan-12 16:58 
GeneralReason for my vote of 5 cool stuff PinmemberAlexander Kouznetsov29-Dec-11 23:43 
GeneralRe: Many Thanks! PinmemberDrABELL30-Dec-11 3:41 
GeneralReason for my vote of 5 Very Nice PinmemberYuval Dagan26-Dec-11 19:50 
GeneralRe: Many Thanks! PinmemberDrABELL27-Dec-11 6:09 
GeneralReason for my vote of 5 Nice one. 5/5 Pinmemberrageit23-Dec-11 5:21 
GeneralRe: Many Thanks! PinmemberDrABELL27-Dec-11 6:08 
GeneralReason for my vote of 5 this is very nice... Pinmemberashishkumar0088-Sep-11 1:27 
GeneralRe: Thanks! PinmemberDrABELL8-Sep-11 4:56 
GeneralReason for my vote of 5 Great... Pinmemberashishkumar00825-Jun-11 10:59 
Reason for my vote of 5
Great...
GeneralRe: Thanks a bunch! Have a great weekend. My best, Alex. PinmemberDrABELL25-Jun-11 13:38 
GeneralReason for my vote of 5 Good one Pinmembercode in play23-Jun-11 19:52 
GeneralRe: Many thanks! PinmemberDrABELL24-Jun-11 7:48 
GeneralIt is really simple and elegant. Also in regards to the labo... Pinmembermathomp317-May-11 4:06 
GeneralRe: Hi, Thanks a lot for your thoughtful comments! You are absol... PinmemberDrABELL17-May-11 9:03 
GeneralReason for my vote of 5 Excellents! PinmemberAnyelo Roy4-Apr-11 4:27 
GeneralRe: Many thanks! PinmemberDrABELL4-Apr-11 4:51 
GeneralReason for my vote of 5 Great demo of the technology. Very c... PinmemberChristian Mattix22-Mar-11 3:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 3 Jan 2012
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid