MooTools Window Object Dumping
Ever want to see all of the information stored within the window property of your browser? Here's your chance.
The XHTML
<div id="console"></div>
We need a wrapper DIV that we'll consider a console.
The CSS
#console pre { font-family:Courier; font-size:11px; background:#000; color:lightgreen; margin:0 0 20px 0; padding:10px; }
#console h3 { color:navy; padding:3px 0; }
I like making this look like a command-line console.
The MooTools JavaScript
window.addEvent('domready',function() {
new Hash(window).each(function(value,property) {
new Element('h3',{ text: property }).inject('console');
new Element('pre',{ text: value }).inject('console');
});
});
Depending on what you have loaded into the page as a JavaScript framework, the amount stored within the window object will vary.
Fun! You could opt to just log all of this to Firebug's console but the above works in all browsers.
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Telephone Link Protocol]()
We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more; they're an excellent convenience to visitors. With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers:
The tel...
![Duplicate the jQuery Homepage Tooltips Using MooTools]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using MooTools.
The XHTML
The above XHTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...
This is really helpful. I find myself doing something similar all the time. But usually I am
console.log-ingJSON.encode(window)which does not look very niceHey David, that’s pretty cool, I like it!