...

View Full Version : JavaScript Light box displaying information



MrTIMarshall
12-11-2010, 04:49 PM
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/HelpContactUsAffiliates.aspx when you click on; > How to become an affiliate > Complete the OMGuk.com affiliate application form.

Many Thanks, Tim

DJCMBear
12-11-2010, 04:58 PM
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.

MrTIMarshall
12-11-2010, 05:16 PM
Wow,this sounds brilliant - I'll go and check this out! :D

DrDOS
12-11-2010, 05:44 PM
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.
<!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>

DJCMBear
12-11-2010, 06:27 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum