A Beautiful JavaScript Library
Posted by Jonathan Ng | Filed under Technical
Recently, I stumbled on a 3D model of the universe on Digg, entirely made with JavaScript. Clicking on the link, I thought it would probably not work in Opera, since it’s JavaScript support has yet to match Gecko’s. To my surprise, it worked without a hitch in Opera. I was impressed.
A “Powered by jQuery” badge was clearly visible, and since I never heard about it before, I clicked on it. I’ve heard of stuff like Prototype, Dojo and so on. But the main reason I shunned away from the is the lack of documentation and probably the learning curve. What’s more, most of them are really heavy, none of them are < 10 KB if not mistaken. Read the rest of this entry »
Tags: javascript, out_there
Introducing, the Explore Box
Posted by Jonathan Ng | Filed under Technical
Finally, as promised weeks ago, I’ve update/upgraded the site a little. The “Recent” box is now upgraded to an “Explore” box. There was originally a “Expore” text there but it made the wholoe area look so cramped. The “Explore” box, is party inspired by Binary Bonsai, one of my favourite sites when it comes to usability/navigation.
As for compatibility, I’m not sure whether the “Recent” box works with IE as I didn’t really test it out, but I think it probably didn’t. I just tested it in IE recently and the whole “Explore” box looks pretty f***ed up. I might do some further work with the CSS to get the tabs to display properly in IE. Not sure whether it works in IE7. Read the rest of this entry »
Tags: ajax, javascript, jnls.net
Setting Element Styles with JavaScript
Posted by Jonathan Ng | Filed under Technical
Since I couldn’t figure out a pure CSS method to perform the rollover effect on the navigation menus, I used JavaScript instead. Besides, it’s much more simple and easier to maintain, rather than a complex mangle of CSS. So to change the curved image from green to pink, I used something like the following to change the CSS background properties:
function naviOver(e) {
gE('active').style.background = "url(Images/pink.png) top right no-repeat";
}
It worked of course, but I was late to realize that it worked only on the home page, with the rollover images in an Images folder located at /jnls (root folder for my blog). I tried using some alert()s to determine whether the background property was set. The result: it works.
So what could be the darn problem be? Next thing on my mind: the bloody images aren’t loading. After some probing, it turns out then when you set an element’s style with JavaScript, the relative path becomes that of the page. For example, for the page /folder/index.htm, url(Images/pic.png) would refer to /folder/Images/pic.png, and NOT where the original CSS file was located (the wordpress themes folder in my case).
Sigh, so that was what’s wrong. So my solution was to create seperate classes for the normal and hover states for the elements concerned, and use JavaScript to change their classes onmouseover.
gE('active').className = "hover";That pretty much did the trick. Ease of maintenance ensured at the same time!
Note:
function gE(e) { return document.getElementById(e); }Tags: css, javascript, xhtml
