Wednesday, May 21, 2008

IE6 Png Fix...Dotnetnuke

Some days ago, I had to add a transparent png image to my webpage. EVerything was displaying just fine, except in Internet Explorer 6.0. The problem was that my PNG image had some transparent layers and those regions were displayed as a kind of light blue color. In otherwords, PNG images with transparency don't show the transparent areas in IE6, and thus you will have to apply some filters to get your work done.

CSS

#curvature{
position:absolute;
top:0px;
left:340px;
height:75px;
width: 106px;
background-image:url(images/curvature.png);
z-index:2;
}

* html #curvature{
background-image : none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='/Portals/_default/Skins/CompanyName/images/curvature.png');
}

In fact, in normal case, you would use just "images/curvature.png" as relative pathname, but the fact that I was using this inside DotNetNuke, and I don't know for what reason, I had to put the image path from the Portal directory. Otherwise it was not working.
So in normal case, you would use

* html #curvature{
background-image : none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/curvature.png');
}

Also, in my case, I used the image filename same as its container Div, but it's just a matter of choice. They don't need to be the same name

PHP With Oracle

You don't need to install the Oracle Client tool to use Oracle in PHP5. Instead, there is the Oracle Instant Client from Oracle available freely for download: Oracle Instant Client

The package available contains several dlls. You can either copy all of them and put them in the windows system directory, or you can add the folder containing the files to your system path.

Next, you just need to enable the oci8 extension in your php.ini configuration file, and restart your web server. You should normally see OCI8 displayed when running phpinfo()

Using PHP Sessions

Ever wonder how the state of the user is saved while browsing through web pages? An obvious example is when a user buys something online. At the end, when ready to check out, the user gets a list of the items he added earlier to his cart, say some few pages before on the web site.

This is made possible because the website keeps track of the entire user session. In PHP, there is a “Session” feature that allows doing this. It saves the state of the user while browsing through

Sessions are like cookies, with the difference that they are stored on server rather than on client machines. In this way, sessions are more secure than cookies, since information are not exchanged between server and client

Creating PHP Sessions

To create a session in PHP, you need to call “session_start()” at the very beginning of your page, before your html tags.

session_start();

This method causes a session ID to be created and stored in a cookie on the client machine. The file name, by default is PHPSESSID, which can be configured in php.ini. To get this id, just use $phpsessid

If another successive webpage contains the session_start(), PHP checks if a session already exists, and ignores this call if yes.

Accessing and Storing PHP Sessions

You need to register a variable with the session created, as follows

session_register(“session_var”)

You can then use the variable to store the information you need.

$session_var = “Information needed”

Destroying PHP Sessions

Normally, when a user has completed his sale, the entire session should be destroyed for security reasons. First, all variables associated with the session need to be unset, and then the session is destroyed, because only destroying the session does not destroy the session cookie. To unset the variables, we need to call “session_unset()” or $_SESSION= array() . Then we need to destroy the cookies created, which is done as follows:

If (isset($_COOKIE[session_name()])){

setCookie(session_name(), “”, time()-42000, “/”);

session_destroy()

}

Modal Windows with Javascript/CSS

Recently, I had to implement a feedback window while my AJAX code was running in the background, like a modal window in desktop applications. I haven't really seen a simple example to do this. I've seen some stuff but I wanted to tie up everything here.

CSS

#modal {
z-index: 998;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display:none;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
background: #CCCCCC;
}

#loading {
z-index: 999;
position: fixed;
top: 40%;
left: 40%;
background-image: url("progress-running.gif");
background-repeat: no-repeat;
background-position: 5px;
background-color: white;
padding-left: 25px;
padding-top: 8px;
border-style: double;
border-color: #c0c0c0;
width: 120px;
height: 30px;
font-size: 1.5em;
font-weight: bolder;
}

HTML

<div id="modal">
<div id="loading" onclick="javascript:document.getElementById('modal').style.display = 'none'">Loading...
<div style="background-color: white; position: absolute; top: 0px; right: 0px; width: 5px; height: 5px;"></div>
</div>
</div>
<div>
<input type="button" name="btn" value="Show Modal Window" onclick="javascript:document.getElementById('modal').style.display = 'block'" />
</div>

As always, we need a tweak for it to run properly in IE, just add the following to the CSS
body{
margin: 0px;
}


Demo Sample 1 from Busydev.Com

Here is second way of doing this. The sample above has a small problem. The modal div showing the "Loading..." is not 100% opaque, it has some filter applied to it. This can be a problem when you need some information to be input by the user before you submit, or requesting to login again after a session timeout. In these cases, it would be more appropriate to display the information fully visible. The sample below uses a separate div for the background, and creates a div for the middle part.

CSS

#modalPage{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}

.modalBackground{
filter: Alpha(Opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #999999;
position: fixed;
z-index: 500;
top: 0px;
left: 0px;
}

.modalContainer
{
background-color: white;
border: solid 4px black;
position: absolute;
top: 35%;
left: 38%;
z-index: 1000;
width: 250px;
height: 100px;
padding: 0px;
}

.modalTitle
{
width: 242px;
background-color: #009900;
padding: 4px;
color: #ffffff;
text-align: right;
cursor:pointer;
}

.modalBody
{
padding: 10px;
}

HTML

<div id="modalPage">
<div class="modalBackground"></div>
<div class="modalContainer">
<div class="modalTitle"><a onclick="document.getElementById('modalPage').style.display = 'none';">X</a></div>
<div class="modalBody">
Comment: <input type="text" name="textbox" value="" /> </div>
</div>
</div>

<div>
<input id="Button1" type="button" value="Show Modal Window" onclick="document.getElementById('modalPage').style.display = 'block'" />
</div>

Demo Sample 2 from Busydev.Com

Thursday, April 17, 2008

Flash Game

Maztermind is a strategic game which is developped in Flash, using ActionScript 1.1. It has a nice and an easy to use Graphical User InterfaceI. You just have to drag the coloured pegs and place them in the holes to break the colour code randomly generated by the computer.

You can download the game for free

Download MazterMind