You see that neat menu on Greysheets ? It’s called the lavalamp menu and unfortunately I can’t take credit for it myself. However, the author of it can’t take full responsibility either since it’s built on top of the fantastic jQuery javascript framework.
You can find the source code for the lavalamp menu on the author’s page. On Greysheets I’ve used version 0.2.0 which is really a rather old version already as the latest version is version 1.3.2. My version is still the one written by Ganeshji Marwaha, the 1.3.2 version is simply a version that has been adapted to jQuery 1.3. When I set up lavalamp I was not yet aware this 1.3.2 version existed, but I got the 0.2.0 version to work with jQuery 1.3 anyway!
Setting up lavalamp on Greysheets wasn’t as simple as one might hope because of using an older version. First of all, lavalamp does not only depend on jQuery, it also depends on the easing library for jQuery. The easing library included with the 0.2.0 version of lavalamp however did not work well together with jQuery 1.3.
So after installing lavalamp 0.2.0 I also installed the 1.3 version of the easing library, which works with jQuery 1.3. However…. the interface functions of the easing library had changed so I had to also load the ‘compatibility’ script for the easing library. One big mess huh? Anyway, the result wasn’t all that complicated after all:
<link type="text/css" href="/css/lavalamp.css" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.lavalamp.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/jquery.easing.compatibility.js"></script>
That’s really all there is to it! Ofcourse you’re probably better off to simply load the latest version of lavalamp but be prepared to also dig into it like I did because the version numbers of libraries and frameworks tend to move faster than those of individual plugins.
I also ran into another small issue; the picture used as background for the lavalamp menu was not wide enough for the menu I wanted to display. This causes the menu options that overflow on the right to become nearly invisible on the left! I have fixed this by simply starting up Gimp on the supplied image and stretch up bg.gif horizontally somewhat.
