vForums Support > Programming & Coding :: Database of Codes/Hacks/Mods :: Code Submissions :: > Graphical confirm logout
Graphical confirm logout - Posted By Dranew (dranew) on 11th Mar 10 at 3:40am
Its been awhile, so I thought I'd write up a quick code {Tongue Out}

Cross Browser: Yes, tested in FF 3.6 and IE 8.0.6
Preview: -Clicky-
Description: Similar to the usual 'confirm logout' it asks if you would like to log out or not, but this one uses images! {Grin}

Place both in Main Header

Style:
Code:
Select All
 
  1. <style>
  2. #logOff {
  3. position: fixed;
  4. z-index: 2;
  5. width: 300px;
  6. height: 220px;
  7. top: 50%;
  8. left: 50%;
  9. margin: -100px 0 0 -150px;
  10. padding: 0;
  11. }
  12.  
  13. #logOff h3 {
  14.   margin: 0 0 20px 0;
  15.   padding: 0;
  16. }
  17.  
  18. #logOff ul {
  19.   list-style: none;
  20.   margin: 0;
  21.   padding: 0;
  22. }
  23.  
  24. #logOff ul li {
  25.   margin: 0 0 20px 0;
  26. }
  27. </style>
  28.  
 


dont really need to edit the style much unless you know what you are doing.

Code:
Code:
Select All
 
  1. <script type="text/JavaScript">
  2. <!--
  3. //Graphical Confirm Logout
  4. //Written by Dranew
  5.  
  6. //Coninue Image
  7. var cnt = "URL OF CONTINUE IMAGE";
  8. cntHeight = "52px";
  9. cntWidth = "194px";
  10.  
  11. //Cancel Image
  12. var can = "URL OF CANCEL IMAGE";
  13. canHeight = "52px";
  14. canWidth = "194px";
  15.  
  16. var gLog = {
  17.   sLog:function() {
  18.     var log = get('menu_buttons','id').getElementsByTagName('a')
  19.          log = log[get('menu_buttons','id').getElementsByTagName('a').length-1] 
  20.  
  21.     if(vf_username != 'guest'){
  22.       log.href = 'javascript:gLog.showLog()';
  23.     }
  24.   },
  25.  
  26.   bLog:function() {
  27.     var tbl = '<div id="logOff" style="display:none;">';
  28.          tbl += '<table class="border" align="center" cellpadding="3" cellspacing="1" width="100%">';
  29.          tbl += '<tr><td class="title1" width="100%"><span class="title">Log off</span></td></tr>';
  30.          tbl += '<tr><td class="window1" align="center"><h3>You are now logging off</h3>';
  31.          tbl += '<ul><li><a href="/action/logout"><img src="'+cnt+'" height = "'+cntHeight+'" width="'+cntWidth+'" border="0" /></a></li>';
  32.          tbl += '<li><a href=javascript:gLog.showLog()><img src="'+can+'" height = "'+canHeight+'" width="'+canWidth+'" border="0" /></a></li></ul>';
  33.          tbl += '</tr></table></div>';
  34.          document.write(tbl);
  35.   },
  36.  
  37.   showLog:function() {
  38.     var eLog = get('logOff','id')
  39.     eLog.style.display = (eLog.style.display == "none")? '':'none';
  40.   }
  41. }
  42.  
  43. gLog.bLog();
  44. gLog.sLog();
  45.  
  46. //-->
  47. </script>
  48.  
 


now, to edit:

//Coninue Image
var cnt = ""; is the URL of the "continue" Image
cntHeight = "52px"; is the Height of the "continue" image
cntWidth = "194px"; is the Width of the "continue" image

//Cancel Image
var can = ""; is the URL of the "cancel" image
canHeight = "52px"; is the Height of the "cancel" image
canWidth = "194px"; is the Width of the "cancel" image