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.
![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...
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Implementing Basic and Fancy Show/Hide in MooTools 1.2]()
One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to...
![CSS :target]()
One interesting CSS pseudo selector is :target. The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash. Let's have a quick look at how the CSS target pseudo selector works!
The HTML
Assume there are any number of HTML elements with...
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!