Smilie Box Scrolling
Description
For my CHum 284 class, I constructed a simple PHP Forum from scratch. One of the more popular things on a forum is the use of smilie faces to mark up a message. I wanted this option to be available for my students.
I went and took a look at what other forums were doing and most of them had a few smilies showing and then you clicked on a link to view them all. However, clicking on this link normally opened the smilies in a popup window. I was curious is there was another way to do it without having to use the popup window.
I decided that I could still show only a limited amount of smilie faces on the page but add scroll buttons on either side of the smilies that would allow you to switch to the next group of smilie faces either forwards or backwards.
Now, I had a problem. I needed to be able to pull the list of smilie faces from the database but I needed to use some kind of client-side scripting language to be able to loop through the different groups.
I decided on using a mix of JavaScript and PHP. PHP pulled the list of smilie faces from the database and then converted this information into a JavaScript Array. JavaScript was then added to the scroll buttons to allow you to move through the array and access different smilie faces.
The challenge was getting the smilies to load correctly from the array. I didn't want to scroll through smilie faces one a time. I needed to be able to move forward or backwards eight smilie faces (only four in this example) at a time. This page is where I hammered out the JavaScript to accomplish this. Take a look at it if you're interested.