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

Online Slide Show as Pure HTML5/CSS3 Solution: NO JavaScript

, 25 Feb 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
SAY IT WITH CSS3! - Online slide show implements "darkbox" pop-up using pure CSS3/HTML5 features

This 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 is available (image link follows):"Apple Store in the New York City" slide show

iPad 2 Slide Show CSS 3

The entire solution (i.e. the aforementioned "Apple Store in NYC" slide show) is encapsulated into a single .htm file (see code Listing 1, 2). In addition to the darkbox effect and slide navigation, it also demonstrates various aesthetic enhancements via CSS3/HTML5 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

HTML 5 and CSS 3

The entire application has been encapsulated in a single text file mostly for didactic purpose providing the holistic view of the solution. In practice, CSS styles can be placed in a separate file, thus better adhering to the programming paradigm of separation of concerns (i.e. separating content from formatting and functionality). Pertinent to that consideration two code snippets (Listing 1 and 2) follows, more closely related to the production version of the app.

Listing 1. CSS3

<!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-2015 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. HTML <body>

<body>
    <div id="header">
        <h3>APPLE<sup>&reg;</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&reg; 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&reg; STORE IN MANHATTAN NY" /></a>
            <h1>APPLE<sup>&reg;</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>&reg;</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>&reg;</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://webinfocentral.com" 
                target="_blank">&#9786</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="http://webinfocentral.com" target="_blank"><img
                src="http://webinfocentral.com/iPad2/Prize_Amphora.JPG"
                alt="WebTV New York" /></a>
        </div>
    </div>
    <div id="footer">
        Copyright&copy; 2011-2015 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. HTML5/CSS 3 Modal Dialog Box; no JavaScript
  3. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  4. Hyperlinked Image in ASP.NET GridView[^]

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, credited for 10+ Enterprise level projects (>250k code lines); currently focused on .NET/WPF, C#, HTML5, jQuery, SQL, 'Big Data', AI, Speech Tech and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample projects/pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
  4. Online 3 Fractions Calculator (#1 on Goog)
  5. Top-100 Digital Cameras (powered by iMark-DCAM rating engine)
  6. Engineering Calculator VOLTA-814 for Windows
  7. Pericles™ TTS-14 Text-to-Speech Synthesizer (Win)
  8. Semaphon™ SP-300 semantic phone number converter (Win)
  9. PaydayNY-2015 Payroll Tax Calculator (Win)
  10. 'Find Job Agency' Online Interactive Map (Microsoft Bing technology)
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun25-Feb-15 18:02 
GeneralRe: My vote of 5 PinprofessionalDrABELL25-Feb-15 18:21 
GeneralOnline Slide Show PinmemberAllseo15-Feb-15 0:57 
GeneralRe: Online Slide Show PinprofessionalDrABELL15-Feb-15 5:23 
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 
Reason for my vote of 5
Really useful one.
 
Note: if some of you are using Geany as text editor, for some reason when you copy and paste the code it only can save it as utf-8 file, an error arise if you try to convert to iso 8859-1. In this case simply replace "charset=iso8859-1" />" for "charset=utf-8" />", if you save as it is then when opening the file in a browser you see strange characters. It seems original code was save in no unicode plain text file, but when pasted to code project it was converted to utf-8.
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 
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 

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
Web04 | 2.8.150224.1 | Last Updated 25 Feb 2015
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid