Javascript, JQuery, Web Development

Summarise: A jQuery Plugin to make alerts easier

Quickly had a reason to make a small plugin that could handle making alerts within most generic apps a bit more responsive and easier to change and manipulate with Ajax requests.

It is really simple and easy to use for your alerts.

I should note I used Bootstrap CSS classes, syntax and styling for this plugin actually however, this plugin is not limited to Bootstrap in anyway and should provide configuration abilities for any site and CSS framework.

You can find more on this plugin on Github: https://github.com/Sammaye/summarise

Hope it helps,

Javascript, JQuery, PHP, Web Development

PHP Upload Progress bar V2

This now has a Github home: Here!!

Updated: The new update can now handle stopping uploads as well and extra validation and more robust scripting.

Some of you will notice a long time ago I wrote a post on creating a upload progress bar in PHP. Well I have finally got round to recreating this script and I can thankfully say it is a lot better than my old script. It is, in fact, so different I am going to start anew here and describe from the beginning how I did it.

Ok so here we are, first thing you need to do is install uploadprogress extension for PHP. To do this simply run this command:

pecl install uploadprogress

If console tells you that pecl is not a valid command or that you need phpiz; just enter this into it:

apt-get install php5-pear
apt-get install php5-dev

Afterwards open up your php.ini and at the end put:

extension=uploadprogress.so

And restart your server like so (for Apache):

sudo /etc/init.d/apache2 restart

You must restart your server, reloading will not work.

Beleive it or not but you now have PHP upload progress identification installed. Now you just need to make a script that will upload a file and display its progress. Shall we move on?

The javascript

This is the backbone to the entire script. It is what allows the front to join with the back.

var upload_timer;
var timeout = 5000;
var u_ids = [];

$(document).ready(function(){

	// Add a new upload form
	add_upload();

	// When the "Add new upload" link is clicked add a new upload form
	$('#add_upload_form').click(function(){ add_upload(); return false; });

});

/**
 * Stops an upload
 *
 * @param id
 */
function stop_upload(id){

	var answer = confirm("Are you sure you wish to remove this upload?"), p_id = "#up_prog"+id;

	// Only remove the upload if it has not completed.
	if (answer && ($(p_id+" .uploadProgInner").css("width") != "100%") && ($("#container_outer"+id).length > 0)){

		// Form ids and write the cancelling message
		var message_id = "#up_message_prog"+id;
		$(message_id).html("<b style='color:red;'>Cancelling...</b>");

		// Make the upload go away peacefully showing the user it has been cancelled.
		setTimeout(function(){
			$("#container_outer"+id).remove();
			u_ids.splice(u_ids.indexOf(id), 1);
		}, "2000");
	}else{
		if(($(id+" .uploadProgInner").css("width") == "100%") || ($("#container_outer"+id).length == 0)){
			$("#general_error").show();
			$("#general_error span").html("<h2>File Upload Could Not Be Removed</h2><p>The file upload could not be removed. This is most likely due to the file having had already been completed or already removed by some other means.</p>");
		}
	}
}

/**
 * This function runs when a upload is submitted. It checks the
 * file field as best it can for a valid file. TBH there are some things
 * we just have to do AFTER the file has been uploaded to /temp
 *
 * @param id
 * @returns {Boolean}
 */
function check_upload(id){
	var file = $("#"+id).val(), end = file.length, start = end - 5;

	var ext = file.substring(start, end);

	// Is the file a divx extension?
	if(ext == ".divx"){
		$("#uploadForm-outer"+id).hide();
		$("#up_prog"+id).show();
	}else{
		$("#general_error").show();
		$("#general_error span").html("<h2>Wrong File Type</h2><p>You attempted to upload a file type that is not supported by this uploader. Pleae try again soon, we hope to have support for mkv, avi and other formats in their raw form.</p>");
		return false;
	}
}

/**
 * This adds a new upload form to the screen
 */
function add_upload(){

	var ts, count;

	// We make a ts as a cache buster for shit browsers cough-Opera-cough
	ts = Math.round(new Date().getTime() / 1000);

	// How many forms already exist?
	count = $(".uploadFormContainer").length;

	// So long as limit has not been reached (10)
	if(count < 10){

		// Generate the form
		$.get("/upload/add", {ts: ts}, function(data){

			// Add to the page
			$("#uploadForm_container-outer").append(data);

			// If this is the first form then add the updater iframe
			if(count == 0 && $('#uInfo_ifr').length == 0){
				$("#u_iframe_container").html("<a href="/upload/getInfo">/upload/getInfo</a>");
			}

			// Add the upload id to the list of IDs
			var e = $(".uploadFormContainer").last().find("input[name=UPLOAD_IDENTIFIER]").val();
			count_ids = u_ids.length;
			u_ids[count_ids] = e;
		});

	}else{

		// Show upload limit error
		$("#general_error").show();
		$("#general_error span").html("<h2>Upload Limit Reached</h2><p>This form has been limited to 10 uploads to protected internet connections. If you are sure you understand what your ISP allows you to upload you can open a new window and continue uploading there.</p>");
	}
}

/**
 * This gets the updated status of the uploads
 *
 * @param info
 */
function update_progress(info){

	// Scrolls through the IDs assigning the information.
	for(i = 0; i < info.length; i++){

		// Sometimes uploadprogress can return null for a upload
		if(info[i] != null){

			// Calculate how much has been uploaded
			var done = Math.floor(100 * parseInt(info[i].uploaded) / parseInt(info[i].total));

			// Ascertain the IDs for the elements needing change
			var id = "#up_prog"+info[i].id;
			var message_id = "#up_message_prog"+info[i].id;

			// Change the width of the progress bar to match done and set a message for the upload status
			$(id+" .uploadProgInner").css("width", done+"%");
			$(message_id+" span").html(done+"% Completed of "+info[i].file+" - Estimated Time Left: "+info[i].left+" at "+info[i].speed+"ps");
		}
	}

}

The Upload Form

Now we have the Javascript we need the upload form itself. This form will be gotten everytime add_upload() is called within the Javascript whilst the user is under the upload limit:

		global $session;

		$u_id = strval(new MongoId());
		?>

		<div class="uploadFormContainer" id="container_outer<?php echo $u_id ?>">
			<div class="uploadForm" id="uploadForm-outer<?php echo $u_id ?>">

				<h2>Please select a file to upload</h2>

				<form onsubmit='check_upload("<?php echo $u_id ?>")' action="/upload/to_server" target="u_ifr<?php echo $u_id ?>" method="post" enctype="multipart/form-data">
					<input type="hidden" name="UPLOAD_IDENTIFIER" value="<?php echo $u_id ?>" />
					<input type="file" name="<?php echo $u_id ?>" id="<?php echo $u_id ?>"/>

					<input type="submit" value="Upload" class="uploadFormSubmit"/>
				</form>

				
			</div>

			<div class="uploadBar" id="up_prog<?php echo $u_id ?>">
				<div class="uploadProgOuter">
					<div class="uploadProgInner">&nbsp;</div>
				</div>
				<div class="up_message_prog" id="up_message_prog<?php echo $u_id ?>">
					<span>Connecting to server...</span><a href="javascript:;" class="cancel_uploadForm" onclick='stop_upload("<?php echo $u_id ?>")'><b>Cancel</b></a>
				</div>
				<div id="up_err<?php echo $u_id ?>">

				</div>
			</div>
		</div>
		<?php

The Updater page

Now we have a form up and running (I will let you decipher the form :P) we just need the progress update page:

		// A nice little hack for telling IE we wont abuse iframe permissions
		header('P3P: CP="CAO PSA OUR"');

		global $session;

		?>
		<html>
			<head>
				<title>Upload Info Page</title>

			    <script type="text/javascript">

			    	// Get the u_ids from the parent window
					var u_ids = parent.u_ids, id_url = "";

			    	// Run the initial function
					refreshiframe();

				    function refreshiframe(){

				    	// Get the url formatted version of u_ids (upload IDs)
				    	if(u_ids != null && u_ids.length > 0){
				    		for(i = 0; i<u_ids.length; i++){
				    			// return an url of the current id
				    			if(i == 0){
				    				id_url = id_url + "ids[]="+u_ids[i];
				    			}else{
				    				id_url = id_url + "&ids[]="+u_ids[i];
				    			}
				    		}
				    	}else{
					    	id_url = "ids[]=0";
				    	}

				    	// if php detects the set $_GET then delay the refresh else do it now
				    	<?php if(empty($_GET['ids']) && !isset($_GET['ids'])){ ?>
				    		redirect();
				    	<?php }else{ ?>
				    		setTimeout("redirect()",5000);
				    	<?php } ?>

				    }

				    function redirect(){
					    // redirect with full url encoded u_ids
				    	parent.uInfo_ifr.location.href="/upload/getInfo?"+id_url;
				    }
			    </script>

			</head>

			<body>
				<script type="text/javascript">

					var info = [];

					<?php for($i = 0; $i<count($_GET['ids']); $i++){

						$upload_id = $_GET['ids'][$i];

						// This is our magic function. It gets our upload information
						$info = uploadprogress_get_info($upload_id);

						// We format the data to be printed into JS JSON arrays and echo it to screen
						if(!empty($info) && $info){ ?>
							info[<?php echo $i ?>] = {'id':'<?php echo $upload_id ?>', 'file':'<?php echo $info['filename'] ?>', 'uploaded':<?php echo $info['bytes_uploaded'] ?>, 'total':<?php echo $info['bytes_total'] ?>, 'left':'<?php echo gmdate("H:i:s", $info['est_sec']) ?>', 'speed':'<?php echo convert_size_human($info['speed_average']) ?>'};
						<?php }else{ ?>
							info[<?php echo $i ?>] = null;
						<?php } ?>

					<?php } ?>

					// Now lets update the upload progress
					parent.update_progress(info);

				</script>
			</body>
		</html>
		<?php

The Page

Now we need the other page this all goes into:

<div class="UIMessage error UIMessageConstrained UIUploadErrorMessage" id="general_error">
	<span></span>
</div>

<div class="upload_container">

<div id="uploadForm_container-outer"></div>

<div id="u_iframe_container" class="u_iframe_container"></div>

<a href="" id="add_upload_form">Add new upload</a>

</div>

Beleive it or not but that is it! You now know how to make a progress bar in PHP. Rmember this isn’t flash nor is it HTML 5 it will work on any browser with almost any settings so long as they don’t have JS turned off :P. All you need to do now is style it. Here is my style sheet to get you started:

.upload_container{
	width:600px;
	margin:auto;
}

.uploadFormContainer{
	padding:10px;
	border:1px solid #C9D7F1;
	margin-bottom:10px;
}

.uploadForm{
	border:1px solid #E1ECFE;
	background:none repeat scroll 0 0 #F0F6FF;
	padding:10px;
}

.uploadForm h2{
	margin-bottom:10px;
}

.uploadFormSubmit{
	float:right;
	font-weight:bold;
}

.uploadBar{
	display:none;
}

.uploadProgOuter{
	background:white;
	height:40px;
	padding:2px;
	border:1px solid #73A6FF;
}

.uploadProgInner{
	background:#73A6FF;
	width:10%;
	height:40px;
}

.up_message_prog{
	margin-top:7px;
}

.u_iframe_container{
	display:none;
}

.UIUploadErrorMessage{
	display:none;
	margin: 15px auto;
}

This style produces this result (or close anyway):

Any questions? If so just write a comment otherwise enjoy :).

CSS, Javascript, JQuery

Facebook style top bar/ bottom bar navigation thing

I said some while ago now I would post a more elegent version of the facebook drop down JQuery…Well here it is. It works per menu item. It can work from the container div only but I wanted it this way it made ore sense for me. Sorry I didn’t post this earlier I am so busy lately.

The Javascript:

var SubMenutimer;
var last_o;

$(".mainbar").ready(function() {
	$(".staticMenu dt a").click(function() {
		
		$(".staticMenu dd ul").not($(this).parents(".staticMenu").find("ul")).hide();
		$(".staticMenu dt a").not($(this)).removeClass("selected");
		$(this).parents(".staticMenu").find("ul").toggle();
		
		if($(this).parents(".staticMenu").find("ul").css("display") == "none"){
			$(this).removeClass("selected");		
		}else{
			$(this).addClass("selected");		
		}
								   
	});

	$(".staticMenu dd ul li a").click(function() {
		var text = $(this).html();
		$(".staticMenu dt a span").html(text);
		$(".staticMenu dd ul").hide();
	}); 

	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("staticMenu")){
			$(".staticMenu dd ul").hide();
			$(".staticMenu dt a").removeClass("selected");	
		}
	
	});						 
});

function openSubMenu(o){
	cancelSubMenuClose();

	if(last_o) $(last_o).parent().find("div").hide();

	last_o = o;
	$(o).parent().find("div").show();
}

function closeSubMenu(){
	SubMenutimer = setTimeout("close()",500);
}

function cancelSubMenuClose(){
	clearTimeout(SubMenutimer);	
}

function close(){
	$(last_o).parent().find("div").hide();
}

The css:

@charset "utf-8";
/* CSS Document */

div.mainbar{
	top:0; 
	z-index:99;
	padding:0;
	position:fixed;
	width:100%;	
}

div.mainbarInner{
	background:url(/images/pre_top.png);
	border:1px solid #bcb6aa;
	border-top:0;
	border-bottom:0;
	margin:0 15px;
}

ul.mainMenu{
	list-style:none;
	
}

ul.mainMenu li{
	float:left;
	border-right:1px solid #bcb6aa;
}

.mainMenu li a{
	padding:5px 4px 5px 4px;
	margin-bottom:1px;
	display:block;
	font-weight:bold;
	color:#444444;
	line-height:15px;	
	text-decoration:none;
}

.mainMenu li a:hover{
	background:white;
	text-decoration:none;
}


.staticMenu dl{ }
.staticMenu dd { position:relative; }

/* DT styles for sliding doors */
.staticMenu dt a {	
	padding:5px 4px 5px 4px;
	margin-bottom:1px;
	display:block;
	font-weight:bold;
	color:#444444;
	line-height:15px;	
	text-decoration:none;
}
		
.staticMenu dt a.selected{
	background:white;
	position:relative;
	z-index:99;
	padding-bottom:6px;
}

/* UL styles */
.staticMenu dd ul { 
	display:none;
    list-style:none; 
	position:absolute; 
    cursor:pointer;
}
	
ul.mainMenuSub{
	position:absolute;
	top:-2px;
	left:-1px;
	padding:2px;
	border:1px solid #b4a291;
	background: white;
}

ul.mainMenuSub li{
	border:0;
	width:223px;	
}

ul.mainMenuSub li.seperator{
	width:223px;
	height:2px;
	display:block;
	background:url(/images/mainmenusep.png) repeat-x;
	margin-bottom:6px;
	margin-top:4px;
	overflow:visible;
}

ul.mainMenuSub li a:link{
	display:block; 
	font-weight:bold;
	text-align:left;
	overflow:hidden;
	padding:2px 4px 3px 19px; 
	color:#444444; 
	text-decoration:none;
}

ul.mainMenuSub li a:hover{
	background:#444444;
	color:white;
	text-decoration:none;
}

ul.mainMenuSub li a img{

	border:0;
}

ul.mainMenuSmall li{
	width:173px;
}

div.mainMenuSubTwo{
	display:none;
	left:220px; 
	position:absolute;
	top:3px;
	z-index:99;
	background:white;
}


div.mainMenuSubTwo ul{
	border:1px solid #b4a291;
	padding:2px;
	background:white;
}

a.MainSubExpandable{
	background:white url(/images/mainmenuexpandable.png) no-repeat right top;

}

ul.mainMenuSub li a.MainSubExpandable:hover{
	background:#444444 url(/images/mainmenuexpandable.png) no-repeat;
	background-position:right -20px;
}

Some sample html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="content-language" content="en"/>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		
		<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen, projection"/>
		<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection"/>
		<link rel="stylesheet" href="/css/presence_bar.css" type="text/css" media="screen, projection"/>
		
		<script type="text/javascript" src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/presence_bar.js"></script>
	
	</head>
	
	<body>	
<div class="mainbar">
	<div class="mainbarInner" style="overflow:visible; position:relative; display:block; height:26px;">
				<ul class="mainMenu">
                	<li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/applications" onclick="return false;">Applications</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a>There are no applications here</a></li>
                                </ul>
                            </dd>
                        </dl>
            		</li>             
                    <li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/places" onclick="return false;">Places</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Library</a> 

                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">Videos</a></li>
                                        		<li><a href="#">Favourites</a></li>                                                
                                            	<li><a href="#">Playlists</a></li>
                                            	<li><a href="#">Subscriptions</a></li>
                                            </ul>
                                       	</div>
									</li>
                                    <li class="seperator"><!-- --></li>                               
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Networks</a></li>                                       
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Groups</a></li>                                    
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Friends</a></li>                                    
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Inbox</a></li> 
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Channel</a></li>                                   
                                </ul>
                            </dd>
                        </dl>                    
                    </li>
                    <li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/settings" onclick="return false;">Settings</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Preferences</a>
                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">About Me</a></li>
                                        		<li><a href="#">Appearence</a></li>  
                                                <li><a href="#">Main Menu</a></li>                                              
                                            	<li><a href="#">Privacy</a></li>
                                            	<li><a href="#">Notifications</a></li>
                                            	<li><a href="#">Adverts</a></li>  
                                            	<li><a href="#">Safe Search</a></li>                                                                                                
                                            </ul>
                                       	</div>                                    
                                    </li>
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Administration</a>
                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">Block List</a></li>
                                        		<li><a href="#">Parental Controls</a></li>                                                
                                            	<li><a href="#">Email Options</a></li>
                                            	<li><a href="#">Username</a></li>
                                            	<li><a href="#">Password</a></li>  
                                            	<li><a href="#">Payments</a></li>                                                
                                            	<li><a href="#">Linked Accounts</a></li>                                                                                                
                                            	<li><a href="#">Security Question</a></li>                                                                                                                                                
                                            	<li><a href="#">Deactivate Account</a></li>                                                                                                                                                
                                            </ul>
                                       	</div>                                      
                                    </li>
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Help Center</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">About StageX</a></li>                                 
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Developers</a></li>                                                                           
                                </ul>
                            </dd>
                        </dl> 
                     </li>                    
                </ul>
                <div style='float:right;'>
                <ul class="mainMenu" style="float:right;">
                	<li style="border-right:0;">
                        <dl class="staticMenu">
                           <dt><a href="/settings" onclick="return false;">Sam</a></dt>
                             <dd>
                                    <ul class="mainMenuSub" style="right:-1px; left:auto;">
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="A" style="cursor:pointer;">Available</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Busy</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Away</a></li>  
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Appear Offline</a></li>                                                                                
                                        <li class="seperator"><!-- --></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Log out</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Switch User</a></li>                                 
                                    </ul>
                             </dd>
                       </dl>  
                   </li>
               </ul>               
                	<div class="notificationArea" style='float:right;'>
                    	Notification Icons
                    </div>                    
                </div>
	</div>
</div>
</body>
</html>
Javascript, Web Development

PHP Detect Whether User has JavaScript (JS) enabled

Author Note: To the people who wanna seem elite or 1337:- JavaScript checks are real and do need to be done in certain situations so before you say that javascript checks are noob take a look in the mirror and you’ll see noob.

Edit: after I made this post I saw this http://scvinodkumar.wordpress.com/2009/11/17/determine-whether-javascript-is-enableddisabled-via-php/. I have had my own theory of making a AJAX poll if the user has javascript otherwise the user don’t.

Now I recently came over a design flaw when building a JQuery IM for my site. I relised (just like facebook) I need a way to stop those without javascript from appearing online to people with javascript. This is since those with javascript can use the IM and those without can not.

I had my own idea of surrounding a html form with PHP variables and using Javascript to submit that form. Whether or not this form subbmitted would tell if the user has JavaScript or not. I tried to find a better version or method from the Internet but this was the best I found (taken from bluejon):

<?php
ob_start();
session_start();
//Needs html tags to work !!
//Needs html tags to work !!
?>
<html>
<body>
<a  href="http://snippets.bluejon.co.uk/index.php"/>MENU</a>
<?php
$_SESSION['js']= array_key_exists('js', $_POST) ? $_POST['js'] : '';
if (empty($_SESSION['js'])){
  
  ?>
    <form name="postJs" action="<?php echo $PHP_SELF ?>" method="post">
    <input type="hidden" name="js" value="on">
    </form>
    <script type="text/javascript">
            <!--
          document.postJs.submit();
        //-->
    </script>
  <?php
}

if ($_SESSION['js']== "on"){
  print"<h3>Javascript is ON</h3><br>";
  print"Php code can be added here!<br>";
}else{
  print"<h3>Javascript is OFF</h3><br>";
  print"Php code can be added here!<br><br><br>";
}
ob_end_flush();
?>

<a  href="http://snippets.bluejon.co.uk/check4-js-and-cookies/check4-js-enabled-v2-phpcode.php">Display php source code </a>
</body>
</html>

However there are problems to this I am currently working on a better version that wont redirect the page twice.

Javascript

Creating a JavaScript Overlay Window

This tutorial will enable the reader to create CSS div overlay dialogues using JavaScript. This tutorial was taken from another blog, however, since I first visited the blog it has lost most of the tutorial. I had to revisit a previous revision of my website in order to know how to do this so I thought I would make a new post on my blog to keep the knowledge going.

Now the main thing to understand is that there are extensions that will do this for you, however, I did not use these as they didn’t work…Yes that’s right, they didn’t work (due to certain JavaScript methods and where the window was being called from) so I revived the home made way.

First things first we need to create two divs, one to darken screen and one for the dialogue. I should also mention this is easy to convert into a facebook style message box if you simply make rounded corners for the divs (css can do it but only on some browsers and not many, this is how facebook do it) and making the back dark div only a little bigger than the message window (add a padding or margin).

The first two divs look like this:


<style>
.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}

.loginboxhover{
	z-index: 20;
	position:fixed;
}
</style>

<div id="darkBackgroundLayer" class="darkenBackground" style="display:none;"></div>

<div id="exitConfirm_D" class="loginboxhover" style="display:none;" align="center">
	<div id="uploadconfirmleave" style="width:712px; z-index:1;">
		 <div class="defaultContainerOuter">
	     	<h2 class="regTop" id="">Hey You! Yeah! You There!</h2>
		     <div class="defaultContainerInner" style="text-align:left; padding:0;">
			     <div style="padding-left:5px; padding-right:5px;">
				     <p>This page is attempting to redirect away from itself to another page. In order to stop my servers from exploding this action will stop any files you are currently uploading.</p>
				     <p>Are you sure you wish to navigate away from this page?</p>
			     </div>
			     <div style="background:#131313; border-top:1px solid #363636; padding:5px; padding-top:7px; color:#fff;">
				     <form action="usrcp.php?home">
					     <div align="right">
					     	<input type="submit" value="Yes, Take Me There" class="button7" style="margin-right:3px;"> Or <a id="N_RtnUP" class="normalHyp" style="cursor:pointer;">No, Take Me Back to The Uploads</a>
					     </div>
				     </form>
			     </div>
			 </div>
		</div>
	</div>
</div>

As you will notice this has been taken directly from one of my scripts. The first div is the “darkBackgroundLayer” this is the one that darkens our screen. the second is the div “exitConfirm_D” which holds a lot of code. This is the message box div. Everything within the main div is just for example reasons.

Now what we need to do is a good old hide and show:

function ShowExitConfirmPanel(){

	document.getElementById("darkBackgroundLayer").style.display = "block";
	document.getElementById("exitConfirm_D").style.display = "block";
	
	var newsletter_panel = document.getElementById("exitConfirm_D");
	
	w = 700;
	h = 346;
	
	xc = Math.round((document.body.clientWidth/2)-(w/2));
	yc = Math.round((document.body.clientHeight/2)-(h/2));
	
	var height = yc.toString();
	var temp = height.split("-");
	
	newsletter_panel.style.left = xc + "px";
	newsletter_panel.style.top = "10" + "em";

}

And hey presto! The function simply grabs the two divs by their id’s, sets their display to block (from none) and then changes the height and position of the main message box to suit my needs.

To close the message box simply use:

	function closeit(){
		document.getElementById("darkBackgroundLayer").style.display = "none";
		document.getElementById("exitConfirm_D").style.display = "none";		

	});