InterOcean Designs - Full Window Splash Portal

InterOcean Designs :: ProBoards Codes :: ProBoard Code Database :: Full Window Splash Portal

Page 1 of 4 » Jump to page Go

Author

Topic: Full Window Splash Portal (Read 2,127 times)

SubDevo
Co-Admin
Code Support
member is offline

[avatar]

Creator of LSD...

Joined: Mar 2009
Gender: Male

Posts: 2,594
Location: MI, USA
Karma: 102

Full Window Splash Portal
« Thread Started on Mar 7, 2011, 11:45am »

Full Window Splash Portal by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

This code allows you to create your own custom splash/portal page for your main page.
This code doesn't care if you use a custom domain or if the user enters with (or without) "index.cgi" in the URL (like other portal codes).
You choose how often the splash page is shown.
You have an option to keep the page always in view or have it scroll with the page.
This code uses cookies. So, if a user has cookies disabled or deletes them, they will see the splash page again.

Enjoy!!!

SubDevo

The code is in three parts. The CSS (style), the mySplashPage div (contains your HTML for the splash page) and the script itself.

For the CSS, do not modify (or remove) anything above and including z-index.
They are needed for proper operation of the splash page.

The mySplashPage div is where you put all your HTML for your splash page.
Replace the Yellow part with your own HTML.

<div id="mySplashPage" style="display:none;">
<center>


<div style="position:relative;top:200px;width:400px;border:1px solid #FF0000;">
<br /><br /><br /><br /><br />
<font size="6">Welcome to our forum!</font>
<br /><br /><br /><br /><br />
<a href="javascript:closeSplash()">ENTER</a>
<br /><br />
</div>


</center>
</div>

The link to close the splash is this: <a href="javascript:closeSplash()">ENTER</a>
You can change the text in this or even use an image link, like so:
<a href="javascript:closeSplash()"><img src="URL TO IMAGE" /></a>
You can also have it so the user can just click anywhere on the screen to close the page, by adding the Yellow to this line:
<div id="mySplashPage" onclick="closeSplash()" style="display:none;">

Variables:

var keepInView=1; // Keep top of splash page always in view? 1=Yes, 0=No
If this is set to 0, your page will scroll when the user scrolls the page.
If set to 1, your page will always stay in view.

var mExp=-1; // Days before expires.
Enter the amount of days before the user will see the splash page again.
There are a couple "special" values here. 0 days will show the splash page one time for the user, while browsing your forum. When they exit their browser (not tab), they will see the splash page again.
If this is set to a negative number (code default), the user will see the splash page EVERY TIME they go to the main page. This is great for testing. Other than that, it could get annoying. So, make sure you change this once you are done testing.

Location: Global Header

Code:
<style type="text/css">

</style>

<div id="mySplashPage" style="display:none;">
<center>


<div style="position:relative;top:200px;width:400px;border:1px solid #FF0000;">
<br /><br /><br /><br /><br />
<font size="6">Welcome to our forum!</font>
<br /><br /><br /><br /><br />
<a href="javascript:closeSplash()">ENTER</a>
<br /><br />
</div>


</center>
</div>

<script type="text/javascript">
/* Full Window Splash Portal by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.com[/url] or [url]http://lsdp.proboards.com[/url] */

var keepInView=1; // Keep top of splash page always in view? 1=Yes, 0=No
var mExp=-1; // Days before expires.

function splashHeight(a){ var m=document.body,b=m.scrollTop;
   (keepInView)?mY_s.style.top=b:mY_s.style.height=m.clientHeight+b;
}
function splashCook(){ var ex="",d=new Date();
   if(mExp!=0){ d.setTime(d.getTime()+(mExp*86400000));
      ex=" expires="+d.toUTCString()+";";
   } document.cookie="mySplashPage=1;"+ex+" path=/";
} var gotCook=/mySplashPage=1/i.test(document.cookie); splashCook();
if(pb_action=="home"&&!gotCook){
   var mY_s=document.getElementById("mySplashPage");
   mY_s.style.display=""; splashCook();
   if(document.uniqueID){window.attachEvent("onscroll", splashHeight);}
   else{(keepInView)?mY_s.style.position="fixed":window.addEventListener("scroll", splashHeight, false);}
}
function closeSplash(){ mY_s.innerHTML=""; mY_s.style.display="none";
   (window.detachEvent)?window.detachEvent("onscroll", splashHeight):window.removeEventListener("scroll", splashHeight, false);
}
</script>

« Last Edit: Aug 16, 2011, 2:31am by SubDevo »