You are using Internet Explorer. Have you considered upgrading?
Tables are a rather unchallenged interface element. In most cases, they are a forgetten element, an undesired element and a seldom-used element.
In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.
Learn how to set up an Apache server to handle custom file extensions.
An excellent article about 2 very popular CMS’s.
In the interest in full disclosure, I was sent this book by Packt Publishing in hopes that I would review it. I’m reviewing this book, however, in the interest of my audience.
Unless you live under a rock or simply check my site for Christina Ricci pics every morning, you know I’m a bit of a MooTools fanboy. I spend hours every day writing MooTools tutorials, getting in touch with the MooTools community and development team members, and oh yeah…coding a bit too. When it was brought to my attention that Jacob Gube and Garrick Cheung had written a MooTools book for beginners, I was really excited to check it out. The following are my thoughts on their book.
Jacob Gube, Garrick Cheung
Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework.
Instead of giving you this super long review that you wont read, I’ve decided to put my thoughts into bullet format. How clever!
I was very impressed with this book and I believe it’s the perfect book for any developer looking to enter the MooTools pastures. My only major desire is that the book cover MooTools’ native object prototype modification; beside that oversight, I’d recommend this book to both rookie and novice MooTools developers. MooTools 1.2 Beginner’s Guide should be required reading for MooTools developers looking to master the basic of MooTools.
Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!
Book Review: MooTools 1.2 Beginner’s Guide
Related posts:
One of Twitter’s stylish touches is the “Login” dropdown on their homepage. I’ve taken some time to duplicate that functionality with MooTools.
Twitter does some great stuff with javascript. What I really appreciate about what they do is that there aren’t any epic JS functionalities — they’re all simple touches. One of those simple touches is the “Login” dropdown on their homepage. I’ve taken some time to duplicate that functionality with MooTools.
<div id="menu1"><div class="relative"> <a href="/demos" title="Popular MooTools Tutorials" id="dd1" class="dropdown" style="width:170px;text-decoration:none;"><span>Menu 1</span></a> <div id="dropdown1" class="dropdown-menu"> <a href="/about-david-walsh" title="Learn a bit about me.">About Me</a> <a href="/page/1" title="The David Walsh Blog">Blog</a> <a href="/chat" title="#davidwalshblog IRC Chat">Chat</a> <a href="/contact" title="Contact David Walsh">Contact Me</a> <a href="/demos" title="CSS, PHP, jQuery, MooTools Demos">Demos & Downloads</a> <a href="/js" title="ScrollSpy, Lazyload, Overlay, Context Menu">MooTools Plugins</a> <a href="/network" title="David Walsh Blog, Script & Style, Band Website Template, Wynq">Network</a> <a href="/web-development-tools" title="JS, CSS Compression">Web Dev Tools</a> </div> </div></div> <div id="menu2"><div class="relative"> <a href="/demos" title="Popular MooTools Tutorials" id="dd2" class="dropdown" rel="dropdown2" style="width:170px;text-decoration:none;"><span>Menu 2</span></a> <div id="dropdown2" class="dropdown-menu"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div></div>
A series of DIVS wrapping a link (the dropdown “trigger”) and a DIV containing the menu items.
/* dropdowns: general */
a.dropdown { background: #88bbd4; padding: 4px 6px 6px; text-decoration: none; font-weight: bold; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
a.dropdown:hover { background: #59b; }
a.dropdown { position: relative; margin-left: 3px; }
a.dropdown span { background-image: url(toggle_down_light.png); background-repeat: no-repeat; background-position: 100% 50%; padding: 4px 16px 6px 0; }
a.dropdown.dropdown-active { color:#59b; background-color:#ddeef6; }
a.dropdown.dropdown-active span { background:url(toggle_up_dark.png) 100% 50% no-repeat; }
.dropdown-menu { background:#ddeef6; padding:7px 12px; position:absolute; top:16px; right:0; display:none; z-index:5000; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
.dropdown-menu p { font-size:11px; }
.dropdown-menu a:link, .dropdown-menu a:visited { font-weight:bold; color:#59b; text-decoration:none; line-height:1.7em; }
.dropdown-menu a:active, .dropdown-menu a:hover { color:#555; }
/* dropdowns: specific */
#menu1 { float:left; margin-right:20px; }
#dropdown1 { width:150px; }
#dropdown1 a { display:block; }
#menu2 { float:left; }
#dropdown2 { width:150px; font-size:11px; }
.relative { position:relative; }
There’s a lot of CSS involved but most of it is simple visual styling as opposed to styling for javascript’s sake. Do, however, note where relative and absolute positioning is used. The outermost DIV may be positioned absolutely if you’d like. Also note that I’m not doing anything to accommodate for rounded corners in IE — I recommend DD_Roundies for that.
window.addEvent('domready',function() {
(function($) {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
/* hides the current menu */
var hideMenu = function() {
if(showingDropdown) {
showingDropdown.removeClass(activeClass);
showingMenu.setStyle('display','none');
}
};
/* recurse through dropdown menus */
$$('.dropdown').each(function(dropdown) {
/* track elements: menu, parent */
var menu = dropdown.getNext('div.dropdown-menu'), parent = dropdown.getParent('div');
/* function that shows THIS menu */
var showMenu = function() {
hideMenu();
showingDropdown = dropdown.addClass('dropdown-active');
showingMenu = menu.setStyle('display','block');
showingParent = parent;
};
/* function to show menu when clicked */
dropdown.addEvent('click',function(e) {
if(e) e.stop();
showMenu();
});
/* function to show menu when someone tabs to the box */
dropdown.addEvent('focus',function() {
showMenu();
});
});
/* hide when clicked outside */
$(document.body).addEvent('click',function(e) {
if(showingParent && !e.target || !$(e.target).getParents().contains(showingParent)) {
hideMenu();
}
});
})(document.id);
});
I’ve commented to the code to illustrate what each block does. In a nutshell:
That’s it!
Look forward to a MooTools Class version soon. Also look forward to jQuery and Dojo versions!
Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!
Create Twitter-Style Dropdowns Using MooTools
Related posts:
We’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.
Today we presents collection of best Wordpress plugins for February 2010.
It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. Below i’ve listed 25 Useful CSS3 Techniques and Tutorials to get you started with CSS3, hope you find this collection useful
Authors
