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
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.