Post by SubDevo on Mar 7, 2011 9:06:38 GMT -8
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 Maroon part with your own HTML.
<div id="mySplashPage" style="display:none;">
<center>
<!-- Splash Content BELOW here -->
<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>
<!-- Splash Content ABOVE here -->
</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 Maroon 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
<style type="text/css">
<!--
#mySplashPage{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10;
text-align: center;
color: #FFFFFF;
background-color: #000000;
}
-->
</style>
<div id="mySplashPage" style="display:none;">
<center>
<!-- Splash Content BELOW here -->
<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>
<!-- Splash Content ABOVE here -->
</center>
</div>
<script type="text/javascript">
/* Full Window Splash Portal by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
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>
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 Maroon part with your own HTML.
<div id="mySplashPage" style="display:none;">
<center>
<!-- Splash Content BELOW here -->
<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>
<!-- Splash Content ABOVE here -->
</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 Maroon 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
<style type="text/css">
<!--
#mySplashPage{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10;
text-align: center;
color: #FFFFFF;
background-color: #000000;
}
-->
</style>
<div id="mySplashPage" style="display:none;">
<center>
<!-- Splash Content BELOW here -->
<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>
<!-- Splash Content ABOVE here -->
</center>
</div>
<script type="text/javascript">
/* Full Window Splash Portal by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
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>