You are viewing search results for order

Introducing MooTools ScrollSidebar

How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I’ve created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.

Search Type Options with MooTools

Advanced search engines like Google, Yahoo!, and Bing have discovered the obvious: one type of search isn’t good enough. The big search engines offer web search, video search, code search, blog search, image search, and any other type of search you can think of. Of course they could use different search boxes on different pages but that’s annoying. Using a bit of javascript we can consolidate all of our search types into one box.

When Webmasters Attack!

CSS-Tricks scribe Chris Coyier wrote a great post titled What Beautiful HTML Code Looks Like where he outlined (with a great image, no less) how a great HTML/PHP file looks when proper programming practices are used. The post was so popular that the featured image was promoted to the Digg homepage. Then the webmasters logged out of their guild chat long enough to bless the Digg comments with their wisdom. I present to you…

When Webmasters Attack!

Also, what kind of web designer doesn’t already know this? It’s called being organized. However, all that white-space is going to add-up and waste bandwidth, which makes this “beautiful code” (a self-serving, inaccurate, subjective description) not-so-perfect.

What kind of web designer doesn’t know how easy it is to GZIP content which compresses/eliminates all of the extra whitespace that makes code more maintainable?

I don’t think <?php .. is valid HTML 5 either.

This isn’t a “Hello Kitty” picture, Webmaster, so please don’t comment. This will get parsed by PHP and output as HTML.

Rounded Corners in Internet Explorer

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS:

.round	{ -moz-border-radius:12px; -webkit-border-radius:12px; }

As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer.

The CurvyCorners Javascript

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the usage of “-webkit-border-radius” and “moz-border-radius” on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to:

MooTools Documentation Search Favelet

I’m going to share something with you that will blow your mind: I don’t have the MooTools documentation memorized. I just don’t. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use a specified method. I’ve created a MooTools documentation search favelet which allows you to highlight a method name, click the favelet, and get search results in a new window.

javascript:(function()%7Bvar%20d=document,w=window,ds=d.getSelection,ws=w.getSelection,ss=d.selection,e=encodeURIComponent;t=(ws)%3Fws():(ds)%3Fds():(ss)%3Fss.createRange().text:'';t=(t.toString().length)%3Ft:prompt('Please select the code you would like to research.','');if(t)%7Ba='http://mootools.net/search/?search=1&query=';u=a+e(t);f=function()%7Bx=w.open(u,'nfx','scrollbars=1,toolbar=0,resizable=1,status=1,width=800,height=600');if(!x)w.location.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(f,0);else%20f();%7D%7D)();

Don’t worry about the mess of code…it works!

Feeds & Profiles

Sponsors

Tutorials & Topics

Script & Style Tweets