SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Auto Load Light Box

    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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can u please give some urls to download auto load popup boxes when website starts////

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jdpgoud View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    plz send code if you have

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jdpgoud View Post
    plz send code if you have
    Here's a link to the code:

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


Bookmarks

Posting Permissions

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