Auto Load Light Box

**Stormy Para** · Oct 11, 2012 22:01

Reference --> https://www.clothingrepublic.com/lightbox

How do I go about auto loading the lightbox on page load?

Currently, I have to click on the hyperlink to start the pop-up.

Any help rendered is greatly appreciated.

Code:

<html>
<head>
<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until March 23, 2009 18:25:00"
}
else{ //else if target date/time met
var displaystring="********** HEADER OVER HERE **********"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span>"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}
</script>



<style>

/**********************COUNT DOWN TIMER***********************************************/

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:white;
font: bold 65px Candara;
padding: 10px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}


/**********************COUNT DOWN TIMER***********************************************/

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 65%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}

body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
width:100%;
vertical-align: top;
}  

td.tableheader {
color: #ffffff;
background-color:#000000;
border-color:#ababab;
border-style: solid;
text-align:center;
font-family: Tahoma, Geneva, sans-serif;
border-style:solid;
border-width:1px;
font-weight:bold;
line-height:20px;
}

td.tablecontent {
border-color:#ababab;
border-style: solid;
text-align:center;
font-family: Tahoma, Geneva, sans-serif;
border-style:solid;
border-width:1px;
font-size: 15px;
background-color:#ffffff;
}

td.tablecontent2 {
border-color:#ababab;
border-style: solid;
text-align:center;
font-family: Tahoma, Geneva, sans-serif;
border-style:solid;
border-width:1px;
font-size: 15px;
background-color:#e4e4e4;
}

p {text-align:center;}

td.floatright{float:right;}

td.formheader{text-align: center;
font-size: 30px;
font-weight: bold;}
</style>

</head>

	<body>
		<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><u>here</u></a></p>
		<div id="light" class="white_content">
<table>
<tr>

<td class="floatright"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></td>
</tr>
<tr>
<td>
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)
</script>
</td>
</tr>
<tr><td><br /><br /><br /><br /><br /><br /><br /><br /></td></tr>
<tr>
<td>
Description Here!!!
</td>
</tr>

</table>
<br>
</div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>

Regards,
Chris.

**CletusSpuckler** · Oct 11, 2012 23:45

On the reference page, you have a script-block right before the </body> tag. You could add the script for opening the lightbox there.

HTML Code:

<script type="text/javascript">
cssdropdown.startchrome("nav-menu");

/* Open the lightbox */
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
</script>

**Stormy Para** · Oct 12, 2012 00:12

Originally Posted by CletusSpuckler

On the reference page, you have a script-block right before the </body> tag. You could add the script for opening the lightbox there.

HTML Code:

<script type="text/javascript">
cssdropdown.startchrome("nav-menu");

/* Open the lightbox */
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
</script>

Hi Sir,

Do you mind elaborating more on that?

Regards,
Chris

**CletusSpuckler** · Oct 12, 2012 00:34

What do you need me to elaborate on?

The link that opens the lightbox calls two lines of JS code:

Code:

document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';

So you need to make sure that these two lines get called on page load. There are a number of ways of doing this. The easiest is to just add them to a <script> block right before the </body> tag. Like:

HTML Code:

<body>
... all page content ...

<script type="text/javascript">
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
</script>
</body>

This way these JS lines will execute right away. There are other ways of doing this as well, like adding an onload-handler or whatever. But you already have a script block at the end of your html in the page you linked to, so all you need to do is add these two lines of code to that.

**jdpgoud** · Nov 21, 2012 22:32

can u please give some urls to download auto load popup boxes when website starts////

**ralph.m** · Nov 21, 2012 22:41

Originally Posted by jdpgoud

can u please give some urls to download auto load popup boxes when website starts////

The point of this thread is that they don't come with that functionality out of the box. The previous post suggests how the script can be tweaked to allow for this, though.

**jdpgoud** · Nov 21, 2012 22:42

plz send code if you have

**ralph.m** · Nov 21, 2012 23:13

Originally Posted by jdpgoud

plz send code if you have

Here's a link to the code:

http://www.sitepoint.com/forums/show...=1#post5205401

User Tag List

Thread: Auto Load Light Box

Thread Tools

Display

Auto Load Light Box

Bookmarks

Bookmarks

Posting Permissions