- Moderated by:
- Support
Adding a progress bar, sound, graphic to login/logout screen
-
- rank:
-
Softmore
- registered:
- February 2004
- Status:
- offline
- last visit:
- 18.06.05
- Posts:
- 79
I don't know if this as been posted somewhere else so please forgive me if it has.
If anyone has visited a MD-Pro CMS website, one thing you will notice if you login/log out is the sound and graphic.
When I saw this I really wanted this for my PN website. After searching, I couldn't find anything but I did run across a page load bar script. I installed that and it looked a little better but I was still missing the graphic and sound.
I played with it some more and finally figured it out. Below, you will find the instructions on what needs to be change if you want to change your login/log out screen. When I say change, I mean adding a progress bar, graphic, and sound when someone logs in or logs out.
Please note that the sound will not work on Firefox/Mozilla browsers. It works great on IE browsers. I haven’t tested on Netscape.
Here’s the hack:
Code
#-----[ OPEN ]------------------------------------------
#
\modules\NS-User\tools.php
#
#-----[ FIND ]------------------------------------------
#
echo "</head><body bgcolor=#2F363F text=#DADEE3>\n";
echo "<table align=center border=0 cellpadding=2 cellspacing=0><tr><td><font class=\"pn-title\">$message</font></td></tr></table></body></html>";
#
#-----[ REPLACE WITH ]------------------------------------------
#
echo "</head><bgsound src=/modules/NS-User/user/FileName.mp3><body bgcolor=#2F363F text=#DADEE3>\n";
//echo "<table align=center border=0 cellpadding=2 cellspacing=0><tr><td><font class=\"pn-title\">$message</font></td></tr></table></body></html>";
echo "<table height=\"100%\" align=center border=0 cellpadding=2 cellspacing=0><tr><td><font class=\"pn-title\"><center>$message</font><br><br><img src=/images/logo-intro.gif><br><br>";
?>
<script language="javascript">
// Timer Bar - Version 1.0
// Author: Brian Gosselin of http://scriptasylum.com
// Script featured on http://www.dynamicdrive.com
var loadedcolor='CCCCCC' ; // PROGRESS BAR COLOR
var unloadedcolor='FFFFFF'; // COLOR OF UNLOADED AREA // Orange F3A947
var bordercolor='CCCCCC'; // COLOR OF THE BORDER
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300; // WIDTH OF THE BAR IN PIXELS
var waitTime=2; // NUMBER OF SECONDS FOR PROGRESSBAR
// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)
var action=function()
{
//alert("Optionally enter an alert box..when the user clicks "OK" they are directed to your site.");
//window.location="http://www.yoursitename.com
}
//*****************************************************//
//********** DO NOT EDIT BEYOND THIS POINT **********//
//*****************************************************//
var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';
txt+='</div>';
}
document.write(txt);
function incrCount(){
window.status="Loading...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('hidebar()',100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
}
function hidebar(){
clearInterval(Pid);
window.status='';
//if(ns4)PBouter.visibility="hide";
//else PBouter.style.visibility="hidden";
action();
}
//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}
function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);
}
function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}
window.onload=progressBarInit;
</script>
<?php
echo"</center></td></tr></table></body></html>";
#
#-----[ FIND ]------------------------------------------
#
bgsound src=/modules/NS-User/user/FileName.mp3
#
#-----[ EDIT]------------------------------------------
#
Replace "/modules/NS-User/user/FileName.mp3" with the path and file name of the soundbite
#
#-----[ FIND ]------------------------------------------
#
<img src=/images/logo-intro.gif>
#
#-----[ EDIT]------------------------------------------
#
Replace "/images/logo-intro.gif" with the path and file name of the logo
#
#-----[ FIND ]------------------------------------------
#
var loadedcolor='CCCCCC' ; // PROGRESS BAR COLOR
var unloadedcolor='FFFFFF'; // COLOR OF UNLOADED AREA // Orange F3A947
var bordercolor='CCCCCC'; // COLOR OF THE BORDER
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300; // WIDTH OF THE BAR IN PIXELS
var waitTime=2; // NUMBER OF SECONDS FOR PROGRESSBAR
#
#-----[ EDIT ]------------------------------------------
#
Edit the progress bar for color, border, height, width, and time values
#
# EoM
-
- rank:
-
Helper
- registered:
- February 2005
- Status:
- offline
- last visit:
- 17.11.08
- Posts:
- 411
There are plenty of sites using it but you'll have to register to see it, it only works when you login as a member
http://www.mashdeco.com
I think that one uses a plugin thingy for Xanthia theme engine
http://www.firstedge.com.au
uses something very similar to the one in this thread but with AutoTheme. Its pretty easy to do and looks better that the stock loging you in stuff.
|
