I have been working with Javascript and AJAX quite a bit recently. I always used alert() to debug something. At least to know that the script was able to call the method or something.

saveBtn = dojo.widget.createWidget(“Button”, {caption: “Save Settings”}, dojo.byId(“saveBtn”));
alert(saveBtn.caption);

This is annoying & traditional way. I’m lazy to use Venkman. After doing some Googling about Firebug functionality, I found console.log(). Now, I can do same thing by using Firebug Console.

saveBtn = dojo.widget.createWidget(“Button”, {caption: “Save Settings”}, dojo.byId(“saveBtn”));
console.log(saveBtn.caption);

At least it’s not messing up my screen. w00f! It also has different logging levels:

• console.debug()
• console.info();
• console.warn();
• console.error();
• console.trace();

For more, Console API

I have change the look and feel of my blog. I can say it’s simple & “sexy?”. What say you?

If you can see, “Archive” block on the right sidebar is hidden onload. The block will expand on mouse click. There is a simple way to do this in wordpress. Actually, you’ll need prototype (a javascript framework). You can include prototype.js in wordpress by using wp_enqueue_script(). No need to download prototype.js because it’s already in your wp-includes/js/ folder. All you need to do is to insert this code into your header.php (it should be in /wp-content/themes/<your theme folder>/).

<?php wp_enqueue_script(‘prototype’); ?>

Prototype is not the only script that can be loaded with wp_enqueue_script(). Take a look in wp-includes/script-loader.php to see some of the other scripts that wp_enqueue_script() can load by default.

Okey! We’re now able to use prototype. It means we can use all its functions and Element.Toggle is one of them. We need to modify the sidebar.php (it depends on your theme). This is the code :

<li> <h2 onclick="$('archives').toggle();" style="cursor: pointer"><?php _e('Archives'); ?></h2> <ul id="archives" style="display:none;"> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <p>

In prototype, $('archives') is the same as document.getElementById('archives'). That’s it! Hope it’s useful for those who want to make their “Archive” block looks nice.