Style up your JavaScript confirm boxes

Per Lasse Baasch — Sun, 26 Apr 2009 22:13:21 +0000

When you start up or just join a project based on webapplications, the design of interface is maybe good. Otherwise this should be changed. In order to Web 2.0 applications you will work with dynamic contents, many effects and other stuff. All these things are fine, but no one thought about to style up the JavaScript alert and confirm boxes.

Here is the they way,.. completely dynamic, JS and CSS driven…

The HTML & CSS code:

body {
	background-color: white;
	font-family: sans-serif;
}
#jsconfirm {
	border-color: #c0c0c0;
	border-width: 2px 4px 4px 2px;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -1000px;
	z-index: 100;
}
 
#jsconfirm table {
	background-color: #fff;
	border: 2px groove #c0c0c0;
	height: 150px;
	width: 300px;
}
 
#jsconfirmtitle {
	background-color: #B0B0B0;
	font-weight: bold;
	height: 20px;
	text-align: center;
}
 
#jsconfirmbuttons {
	height: 50px;
	text-align: center;
}
 
#jsconfirmbuttons input {
	background-color: #E9E9CF;
	color: #000000;
	font-weight: bold;
	width: 125px;
	height: 33px;
	padding-left: 20px;
}
 
#jsconfirmleft{
	background-image: url(left.png);
}
 
#jsconfirmright{
	background-image: url(right.png);
}
-->;
 
="javascript:showConfirm('Please confirm','Are you really really sure to visit google?','Yes','http://www.google.com','No','#')" href="#">JsConfirmStyled>

The JS Code:

//Check for ie5+ and nn6
 
ie5=(document.getElementById&amp;&amp;document.all&amp;&amp;document.styleSheets)?1:0;
 
nn6=(document.getElementById&amp;&amp;!document.all)?1:0;
 
xConfirmStart=800;
 
yConfirmStart=100;
 
if(ie5||nn6) {
 
	if(ie5) cs=2,th=30;
 
	else cs=0,th=20;
 
	document.write(
 
		"
">"+
 
			"
0">"+
 
				"

"+
 
				"

"+
 
				"

"+
 
			"

">

">

">"+
 
					"
" onclick="leftJsConfirm()" type="button" />"+
 
					"  "+
 
					"
" onclick="rightJsConfirm()" type="button" />"+
 
				"

"+
 
		"
"
 
	);
 
}
 
document.write("");
 
function leftJsConfirm() {
 
	document.getElementById('jsconfirm').style.top=-1000;
 
	document.location.href=leftJsConfirmUri;
 
}
 
function rightJsConfirm() {
 
	document.getElementById('jsconfirm').style.top=-1000;
 
	document.location.href=rightJsConfirmUri;
 
}
 
function confirmAlternative() {
 
	if(confirm("Scipt requieres a better browser!")) document.location.href="http://www.mozilla.org";
 
}
 
leftJsConfirmUri = '';
 
rightJsConfirmUri = '';
 
/**
 
 * Show the message/confirm box
 
 */
 
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)  {
 
	document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
 
	document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
 
	document.getElementById("jsconfirmleft").value=confirmlefttext;
 
	document.getElementById("jsconfirmright").value=confirmrighttext;
 
	leftJsConfirmUri=confirmlefturi;
 
	rightJsConfirmUri=confirmrighturi;
 
	xConfirm=xConfirmStart, yConfirm=yConfirmStart;
 
	if(ie5) {
 
		document.getElementById("jsconfirm").style.left='25%';
 
		document.getElementById("jsconfirm").style.top='35%';
 
	}
 
	else if(nn6) {
 
		document.getElementById("jsconfirm").style.top='25%';
 
		document.getElementById("jsconfirm").style.left='35%';
 
	}
 
	else confirmAlternative();
 
}

You can dowload all scripts: Note: There is a file embedded within this post, please visit this post to download the file.

Session problems

Per Lasse Baasch — Sat, 21 Feb 2009 01:20:54 +0000

While you working with web applications it could happen that you get several errors.. Never underestimate real server problems. When you try to start a new Web 2.0 application or just the usage and/or visits of your application increase, maybe non-linear, you can login to your application but you can’t proceed.

On enterprise applications it’s recommended to set php display errors to off, so won’t see what really happened.

While tracking the problem to your browser and the customers and may the service provider, you should just login with a shell.
First thing you should do is, like all time, who and last. After that, may you try to find out what happen in the apache access and error log. You will find nothing, cause there is nothing critical, nothing new. May you see the session file in your filesystem, but why is it empty? A php bug?

Why? Ok just the answer, try this: df -h , you will see the a 100% full partition and when you try a du -shm /var/log/* you see your problem… GB’s of apache logs…

What happened? Your Web 2.0 application uses polling, and your apache got a custom, combined log which writes to access.log.

Solution 1: Drop the line in your apache virtualhost configuration for custom, combined log

Solution 2: Proceed a massive logrotation

Solution 3: Pipe the combined log to a perl or php-cli script which filters the polling events (I prefer)

On local, staging and or development installations you should switch the display errors for php to on,… then you get messages like this:
WARNING: session_write_close() [function.session-write-close]...

SKYCUBE.net » ajax

Style up your JavaScript confirm boxes

Session problems

ZMG-Project finally closed!