Ajax loading overlay with YUI

Posted by Nick Ashley – July 7, 2007

First off, let me say that I love Yahoo’s YUI Library. It seems to be very well thought out, and makes many tasks much simpler.

For Example, let say you upgrade your web app with some tasty Ajax. Now lets assume some of these ajax requests are working a little slow. The proper thing to do would be inform the user that something is happening in the background, so they aren’t lost. YUI makes it easy to display an overlay window with a loading image during the requests.

To do this, we use a Panel object. A panel object is basically a DIV with methods to hide and display itself, as well as advanced display options. Here is some starter code:


ajaxLoadingPanel = new YAHOO.widget.Panel("ajaxLoadPanel", {
width:"240px",
fixedcenter:true,
close:false,
draggable:false,
modal:true,
visible:false,
effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5}
}
);

What we did here is create a basic panel. The first argument is the elements ID. This can either be an ID of an existing DIV in your DOM, or can be a new ID which will be applied to a dynamically created DIV. The next argument is an Object containing configuration options. These are pretty self explanatory: we set a width, tell it to display in the exact middle of the screen, don’t display a close button, don’t allow the user to drag it, make it a model window, and have it fade in and out. (FYI – a model window just means that it fades everything else on screen).

Next, we fill the DIV with content. If you used an ID of a pre-existing DIV, you can skip this code:


ajaxLoadingPanel.setHeader("Loading, please wait...");
ajaxLoadingPanel.setBody(' ');
ajaxLoadingPanel.render(document.body);

Here we simply set the header and body content of the div, and then add it to the DOM as a child of the body tag.

Good News! We are almost done! The panel is created, now all we need to do is trigger it to open, and close. This is done with the following 2 methods:


ajaxLoadingPanel.show();
ajaxLoadingPanel.hide();

All you need to do is call the show method right before your ajax call, and then the hide method right after recieving your ajax response. Thats it!

Associative Arrays in VB.NET

Posted by Nick Ashley – July 5, 2007

I am a PHP programmer at heart (by that I mean it is what I know best). However I program in .NET for work (its hard to find php jobs). As such, I often find myself wanting to solve quick tasks with an associative array. Unfortunately, they don’t really exist in .net.

What I usually end up doing is create a Collection instead. A Collection allows you to add any object as an item, and you can also assign a String as a key to it. So for example, if I wanted to create a collection of my family, I could do something like:


dim myFamily as Collection = new Collection
myFamily.add("Leah","wife")
myFamily.add("Cal","father")

This is similar to a php associative array, but note that the first argument is the information, or Object, itself. The second argument is the key. In this case I am simply using strings for the Object, but I could have put anything there.

Now that I have my “Associative Array”, which is actually a Collection, I can lookup values like so:


If myFamily.Contains("dad") Then
Response.Write("My father is: " & myFamily("father").ToString)
End If

The downside to a collection is that you cannot edit items in a collection. A workaround is to delete the item, then create a new one with a same key. However, collections really seem to be meant more for static information you don’t want to change. If you are looking to change the items, check out my article The Dictionary Object: similar to PHP arrays.

Getting Coordinates of a mouse click

Posted by Nick Ashley – June 30, 2007

Today I was working on an image editing program, and wanted to determine the x and y coordinates on an image. I knew that imagemaps will give you the coordinates that you clicked on, but I wanted to mimic this behavior in javascript.

It turns out there are 2 ways to do this: If you are using IE (then shame on you!) you can get the coordinates using an offsetX and offsetY.For example, an an onclick handler to your image, passing in the event (ex: <img onclick=’getCoords(e)’ …) then inside the getCoords function, you can use e.offsetX and e.offsetY.

But what If I am awesome, and thus don’t use IE, you might ask. Well, it is only slightly more work. Other browsers give you a pageX and pageY, so you simply have to compare those values with the images values, and do some math to get your coordinates. The image offsets can be found with offsetTop and offsetLeft so to get the x value, you would do:


var xOffset = e.pageX - document.getElementById("thePictureId").offsetLeft

Problem Solved!

phpBB Admin Email Search Mod Version 1.0.1

Posted by Robert Gentel – August 14, 2004

Many times a user will contact a board admin saying that they can’t log in. Unfortunately because phpBB’s log in system does not use the email for the log in the user often forgets their username they used on the board.

With a small board it is easy to find the username based on the email, with a larger board it is not.

So this mod adds an admin panel email lookup. Just type in an email and it will show what account name that email is registered to. It also has direct links to view or edit the profile.

The installation is simple, and does not involve any file editing at all. Just upload the files and the email search will appear in the admin panel.

Download the Code

Get Support

phpBB SEO Mod – able2know SEO 2.0.0

Posted by Robert Gentel – November 16, 2003

I get so many questions about phpBB search engine optimization that I am finally writing up the definitive mod for this.

Read more at the original phpbb SEO Mod thread on able2know or download the mod.