Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post

    Question JavaScript Light box displaying information

    I am currently using the JavaScript Light Box found on; http://www.huddletogether.com/projects/lightbox2/

    I was wondering if it is possible, or easy enough to create something alike the one found on; http://www.whsmith.co.uk/Support/Hel...ffiliates.aspx when you click on; > How to become an affiliate > Complete the OMGuk.com affiliate application form.

    Many Thanks, Tim

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    The lightbox and lightbox2 are both image displayers try looking at shadowbox found at http://www.shadowbox-js.com/ as this allows alot more options such as video players for example youtube videos, QuickTime videos, Yahoo! Videos, Vimeo videos, Google Videos, Flash Videos and also swf files can all be embedded into the shadowbox, you can display full (x)html pages and full websites from with-in the shadowbox, and the image displays are alot more flexable with image dragging, resizing and clipping just with a few commands, the only thing that wont look the same is the look as the whsmiths javascript box has been styled differently to fit into their website.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    369
    Thanks
    46
    Thanked 1 Time in 1 Post
    Wow,this sounds brilliant - I'll go and check this out!

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Check out this, it's very light code, you can add opacity/filter, change the colors and sizes, you may not need the form or the PHP stuff, you can put just about anything you want in the 'box'. The round corners don't quite work on IE, haven't found a good workaround yet.
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <script type="text/javascript">
    //Alerts to errors.
    window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
    </script>
    <script type="text/javascript">
    function showLogin()
        {
        var m = document.getElementById("mylogin");
        m.style.display="block";
        var c = document.getElementById("cover");
        c.style.display="block";
        c.style.width=screen.width+"px";
        c.style.height=screen.height+"px";
        }
    function hideLogin()
        {
        var m = document.getElementById("mylogin");
        m.style.display="none";
        var c = document.getElementById("cover");
        c.style.display="none";
        c.style.width=0;
        c.style.height=0;
        }
    </script>
        <title></title>
    <style type="text/css">
    html{background:#333}
    body{width:900px;margin:auto;margin-top:40px;color: White}
    body a {color: #aff}
    #mylogin
    {
    background: #369;
    padding:20px;
    width:300px;
    height:auto;
    position:absolute;
    z-index:100;
    left:50%;
    margin-left: -150px;
    top:50%;
    margin-top: -160px;
    border: 2px solid #fff;
    }
    #dologin
    {
    border: 2px solid #fff;
    }
    .rounded-corners {
    position: relative;
    -moz-border-radius: 12px; /*Firefox*/
    -webkit-border-radius: 12px; /*Safari and Chrome*/
    -khtml-border-radius: 12px; /*Linux browsers*/
    border-radius: 12px; /*CSS3*/
    /*behavior:url(border-radius.htc); IE, should work for all*/
    }
    #cover
    {
    background: #000;
    height:100%;
    position:absolute;
    top: 0;
    left: 0;
    z-index: 90;
    }
    </style>
    <?php
    if (isset($_POST['submit']))
    {
    $player $_POST['player'];
    $number $_POST['number'];
    //echo $player.$number;
    if (($player !="Your Name" || $number !="Your Number") && ($player !="" || $number !=""))
    {
    $message fopen("players.php","a");
    fwrite($message,"<br><span class=\"player\">".$player.": #".$number."</span><br>\n");
    fclose($message);
    }
    }
    ?>
    </head>
    <body><a href="#" onclick="showLogin();">Login</a><br>
    <h4>Heading here</h4>
    Some text here.
    <div id="cover"></div>
    <div id="mylogin" class="rounded-corners" style="display:none">
    <fieldset id="dologin" class="rounded-corners" >
    <legend>Log in to the site.</legend>
    <form name="logmein" id="logmein" action="" method="post">
    <input type="text" name="player" value="Your Name"><br>
    <input type="text" name="number" value="Your Number">
    <input type="submit" name="submit" value="Enter Data">
    <input type="button" value="Exit" href="#" onclick="hideLogin();">
    </form></fieldset></div>
    <?php include('players.php'?>
    <script type="text/javascript"></script>
    </body>
    </html>

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Quote Originally Posted by DrDOS View Post
    The round corners don't quite work on IE, haven't found a good workaround yet.
    That made me laugh, IE is a main browser used by alot of people but it doesn't do half as much as the other newer browser can do, which is why I don't get why many people and businesses use it still.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •