Friday, August 31, 2007

Creating Modal Dialog With Javascript

I got inspired to write this post after reading Tyler Hall's post on modal dialog over at sitening

Nowadays when a web application does not necessary have to be a case of stuffing data through the browser and shipped to the server for processing, where the clients itself becomes a more active participant in the over all application, designing the web UI sometimes calls for methodologies that erstwhile wasn’t heard of in the browser’s domain.

One of such UI design methods is the modal dialog.

Modal dialog are not new. They have been around in the UI design of desktop application for donkey years.

You most likely interacts regularly with modal dialog in your everyday use of your computer.

A modal dialog, in a desktop application is a box or message that forces you to dismiss it by interacting with its options before you can continue using any other part of the program.

Here is a screen shot of a modal dialog:


Modal dialog is one of such design elements that is finding its foray into web applications, and thanks to JavaScript, it is easily implemented in the browser.
It is also simple.

The principle behind it is this: have a DIV that initially won’t be visible; that will contain the options to be presented via the modal dialog. Then have a javascript written that will make it visible when it is required. Once it is visible, any content beneath it will be “unclickable” by the user.

The code that will implement this can be divided into three parts: The HTML, the CSS and the JAVASCRIPT

THE HTML


The button (or whatever you choose to attach the modal dialog activation unto) that will fire the javascript when clicked:

<input type='button' value='show modal dialog' onclick='overlay()' />

Then the overlay DIV which initially will be invisible:

<div id="overlay">

     <div>

           <p>You are at liberty on what to use the dialog for.</p>

          <form method=" " action=" ">

          <input type='file'/>

          <input type='submit'/>

          </form>

          Click here to [<a href='#' onclick='overlay()'>close</a>]

     </div>

</div>


THE CSS


#overlay {

     visibility: hidden;

     position: absolute;

     left: 0px;

     top: 0px;

     width:100%;

     height:100%;

     text-align:center;

     z-index: 1000;

     background-color:#eee;

     opacity: 0.8;

     filter:alpha(opacity=80);

    -moz-opacity: 0.8;

}



#overlay div {

     width:300px;

     margin: 100px auto;

     background-color: #fff;

     border:1px solid #000;

     padding:15px;

     text-align:center;

}


The first style takes care of the full screen overlay: notice the opacity styles while the second style is applied to the modal dialog.

The margin style:
margin:100px auto;
Ensures the dialog is 100px from the top and it is centralized.

THE JAVASCRIPT


function overlay()
{
xyz = document.getElementById("overlay");
xyz.style.visibility = (xyz.style.visibility == "visible") ? "hidden" : "visible";
}


Put everything together and you have your modal dialog. As you can see, the whole stuff is incredibly simple.

Here is a screen shot before the activation of the modal dialog:



And this, after the button was clicked:

Thursday, August 23, 2007

Facebook's code Leakage...




“None is safe. Repent of thine evil. The gates of heaven will be hacked next, and the blueprint to creation posted on the web.”


Isn’t that cute?

I got that from one of the comments on techchruch’s post on facebook's source code leakage.

From all indications it appears that facebook is not under any serious security threat. And the reason why we have this entire hubbub over the code spill is simply because its facebook (that’s what happens when you are that big).

Apparently the cause of the leakage isn’t due to flaws in FB’s code or it being hacked, like I was initially made to believe, but it was due to lapses on the part of their sysadmin. It was simply human error.

According to Brandee Barker of facebook :
… Some of Facebook’s source code was exposed to a small number of users due to a bug on a single server that was misconfigured and then fixed immediately. It was not a security breach and did not compromise user data in any way…


So you might want to say that there is nothing to fear right?

Sure there was no leakage of any sensitive user centric data; nonetheless this little incidence will have put a scare in quite a number of people causing them to ask the question of security; how safe are all these social networks? How safe is it to give out accurate information about oneself on social networks? How vulnerable to identity theft does one become by getting too deep into socializing via social networks?

There have being incidence of people meeting with malicious experiences via contacts with social networks. Statistic even shows that online identity theft is one the increase, according to this article, that is.

So should we eschew social networks in its entirety? I think not! There are a whole lot of benefits that can be derived from them. I guess we just need to be a little more cautious of our interaction on social networks and the amount of information about ourselves we divulge.

As a developer, I guess one should pay more attention to security issues (one aspect that is often overlooked or relegated to an after thought), and making sure applications passes through adequate development-stage testing before implementation on the production server.

Sure this might just be a trivial slip (which I think it is) but it was a costly slip.

But come to think of it, a couple of days back I wasn’t able to sign in into my new [beta] yahoo mail, I kept being served pieces of codes instead…and the same thing too happened just yesterday. I’m I the only one to have experienced this? And why don’t we have people hollering over that like they are doing facebook?

Wednesday, August 22, 2007

Where have you been?

Where have you been?
Hmm...Been here and there. Caught up with activities that made sure I was cut off blogging and the internet in general.

It first started with exams in school. After about 2weeks of trauma; I mean, 2 weeks of jerking for exams, I was left with nights full of nightmares in which the integral sign kept changing into snakes which then engage me in terrifying chase throughout the night…

Then I had to leave school and get to Ibadan after exams since brother mikolo a.k.a Michael Faborode decided to have all students vacate the school premises for the mid-semester break as if we are all boarders in a boarding school. Any way, I had no choice but to leave for Ibadan since I couldn’t get a place to lodge off campus.

Got to Ibadan, Only to have the internet connection at home expired 3 days after my arrival. My aunt who normally foots the bill is not around which left me with no one to subscribe for the next couple of months. Going to cyber cafes isn’t an option. I hate going to those centers!

So I decided to find other means of getting me busy. I got myself caught up in the preparation for a forum I will be starting in school next semester (more on this will be coming soon). Also began work on some jobs I got. I also read Isaac Asimov’s I-robot, Sydney Sheldon’s ‘the other side of mid-night’ amongst many other books; some which I didn’t finish.

I also decided to use the time to catch my trips. One thing my mind have been telling me, recurrently is that my social life is atrophying (as if I had one before), that I should try as much as possible to enjoy the moments while it lasts since I have only one shot at being young.

Well, one way my mind thinks that can be accomplished is for me to spend less time with my laptop, and more time with other Homo sapiens like myself. So I decided to heed the wise prodding of my mind.

So I decided to have a time out at the zoo with one of my girl friends who came to say hi to me from ife

Here are some of the pictures I took…

Genga: The 102 years old tortoise



Haruna's wife


Isn't that Pumbaa?...o no! its just an ordinary warthog



Just Horses.


...and our dear dumb ostrich


The lions where having lunch when we came around so i couldn't get pictures of them in their "glory".

Still talking about socializing, I also used the time to hook up with another old pal of mine from way back in secondary school. Hmm…she was glad to see me again after how many years now? And I observed that time has actually been good to her; she has grown to be an attractive lady (if you know what I mean).

So Now I’m back in school, now I’m blogging again. Although resumption isn’t till 26th of this month, I had to come back to see my professor and also to help ipod out with a project he is working on.

So I guess I can say like S Carter does: “I’m back”