Billboarding and Scripting: The Mysterious Spacer Image

A lot of progress has been made on the Kukui Kup Billboard and most of the functionality we set out to do has been implemented. We did get a little lost on the way with four people doing the same project and all, but we just had to keep reminding each other what things needed to be done and someone always stepped forward to do it. This is one huge advantage that I realized when working in a group where there seems to be more than enough people. When you finally identify some specific task that needs to be done, there will always someone willing to take on the job, or at least there will be someone to delegate the task to. ;)

When we decided on the layout we were going to use last week, we also needed to lay out the functionality we wanted the Billboard to have and we essentially came out with this list:

• Apply more advanced CSS concepts
• Transitions for modules
• Create Google Visualization mock-ups
• Energy Tips

Currently, the most up-to-date version features all of the above objectives, and can be found at our project hosting site.

For now here's one screen shot of the billboard in action:

There's been a lot more style applied to it from last week's mock-up. There has been more style applied to the billboard overall and especially the ticker on the bottom. We also incorporated a BioHeatMap Visualization, sadly the gadgetized BioHeatMap that I worked on previously is incompatible with web pages due to proprietary gadget methods being called. But since this is more of a read-only type of deal, it doesn't matter if the gadget was used or not.

Next, here's another screen shot of the billboard:

I got it mid way through a transition showing that it fades out to do so. It is also showing an energy tip in the middle.

My work throughout the project has mainly dealt with the ticker and the visualizations. One problem that I did come across with the ticker was that when it first started, it never started entering from the right.

Here's a screen shot of the desired entrance when the page first loads:
(Notice it entering from the right side)


Where as here's a screen shot of where it was actually starting out from:
(Started from the left side and started scrolling)


Reading the semi-instructions for the ticker, it seemed like I was doing nothing wrong. I mean, how would I error if I was just copying/pasting code. I finally decided to ask Kendyll to help me in identifying what was going on. So we sat down together and we both were staring at JavaScript for about an hour... What we came across was that in the source code, the JavaScript uses a spacer image that stretches the length of the ticker to make it appear that it is entering from the right. But the instructions just said to use the .js source code and that's all you need. But we needed to make our own spacer image in order to get the desired affect. I guess the lesson here is that you can't fully trust instructions from another developer, and that even the most simple of instructions might be too simple and you forget a step to include.