Archive

Archive for the ‘Projects’ Category

Style up your JavaScript confirm boxes

April 26th, 2009
1 comment

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…

screenshot-jsconfirmsyle

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);
}
-->
 
<a onclick="javascript:showConfirm('Please confirm','Are you really really sure to visit google?','Yes','http://www.google.com','No','#')" href="#">JsConfirmStyled</a>

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(
 
		"
<div id="jsconfirm">"+
 
			"
<table border="0">"+
 
				"
<tbody>
<tr>
<td id="jsconfirmtitle"></td>
</tr>
"+
 
				"
<tr>
<td id="jsconfirmcontent"></td>
</tr>
"+
 
				"
<tr>
<td id="jsconfirmbuttons">"+
 
					"
<input id="jsconfirmleft" onclick="leftJsConfirm()" type="button" />"+
 
					"  "+
 
					"
<input id="jsconfirmright" onclick="rightJsConfirm()" type="button" />"+
 
				"</td>
</tr>
"+
 
			"</tbody></table>
"+
 
		"</div>
"
 
	);
 
}
 
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:

  jsconfirmstyle.zip (33.5 KiB, 5,000 hits)

Projects , , ,

Image to html via php

February 14th, 2009
5 comments

Did you ever thought about to show an image on a website using a table?

The following script analyze the image and does a print out using a standard html table.

The CSS code:

1
2
3
4

<style type="text/css" media="screen">
.tableImage { padding: 0; margin: 0; border: 0; }
.tableImage TD { width: 1px; height: 1px; padding: 0; margin: 0; }
</style>

The php code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
$image='sample.jpg';
$im = imagecreatefromjpeg($image);
$info=getimagesize($image);
$width=$info[0];
$height=$info[1];
for ($i=0; $i<$height; $i++){
	$html .= "<tr>";
	for ($j=0; $j<$width; $j++){
		$color_index = imagecolorat($im, $j, $i);
		$color_tran = imagecolorsforindex($im, $color_index);
		$html .= "<td style=\"background-color: rgb($color_tran[red],$color_tran[green],$color_tran[blue]);\"></td>\n";
	}
	$html .= "</tr>\n";
}
?>

Begin of the output table:

1

<table class="tableImage" cellpadding="0" cellspacing="0">

Include the generated image:

1

<?=$html ?>

End of output table:

1

</table>

Please note, that this could crash your web-server or browser, if you use to large images…

Projects , ,

ZMG-Project finally closed!

October 26th, 2008
5 comments

Dear community,

the ZMG-Project is finally closed!

After long discussions, many ideas and hundreds of emails, we decided there is no way back… We can’t spend the time any longer and we have no youthful enthusiasm anymore to reanimate and produce a new stable version of ZMG for Joomla! 1.5.

May the force be with us ;)
Per Lasse Baasch for the ZMG-Team

Joomla!, Projects , , , , ,