The title is fairly generic, so if you have found this, congratulations, your life is about to become far simpler. When working on or with ajax enabled web sites we usually run into the issue of request times, users need to be shown that something is happening in the background and visually we accomplish this with an Ajax Loader. You would have seen plenty of these by now, little animated gifs that give you a sense the web-page is loading something.
Now the drama here is they are a PITA to create all the time on the fly while your writing those fancy ajax queries, some of the framework simplify the task by letting you specify a loading attribute, but the behaviour isn’t standard and I find the implementation is lacking because it is usually an after thought of the original Ajax request in the framework. Also you don’t want to create useless mark-up in you page by having a permanent but hidden until needed ajax overlay like I see a lot of sites doing. Less code = better at everything, remember that.
So here is the solution, create on the fly ajax loaders when and where-ever you may need them!
Demo
Ok guys and girls, I won’t write too much on this topic, except to say that over the years I have seen literally hundreds of forum threads about nested sortable lists in MooTools, many of these threads end with horrible patchwork solutions cobbling together 10 random unsupported plugins to get an outcome that works (miserably)…
This solution came about while working for a really cool start-up venture, they are not around any more so the code is going public with the intention that others may benefit from the work, enjoy 
Demo
Anyone else noticing a trend in web browsing these days? Well I certainly have and so have the good people over at SitePoint.com. Mega Menu’s are similar to your standard navigation bars, but tend to have some javascript to help you navigate down the many levels you might find within one, but they are rife with issues, such as complexity, hidden content and use-ability concerns. So what is the solution when you have a lot of content or products that you wish to show in your nav without angering or frustrating your users, easy, enter the Mega Drop Down Menu. They have the extra cool and unique advantage of having larger area’s for sub-links or inner pages, sometimes even including images, descriptions and popular items in that category within the newly shown element.
Here is a decent example of a Mega Drop Down Menu to illustrate what I’m talking about. But it certainly takes way too long to load, and uses images for the drop down box, which I personally don’t like because you have to wait for it to load on a slow connection, such as this wireless laptop I’m on.
So I was looking around for a better implementation of a mega drop down menu and noticed that a couple I found were using jQuery wizardry to effectively prevent instant hover effects, because you don’t want the mega drop down from appearing every time a user rolls over your top level navigation items, and a few were using neat CSS3 effects instead of images.
Then I thought it would be nice to have all the positives in one Mega Drop Down combined together and since there were already a few jQuery implementations doing one or the other, I figured I’d do it in MooTools, since I still have a penchant for that framework, so I’ve converted one of the jQuery plugins to MooTools for you all, added some other nifty features and given you some basic css to play with. So without further ad-due, here is the code for a MooTools – Mega Drop Down Menu .
Demo
Funny title I know, but really that is what this code will allow you to achieve. Recently I was working on a project that let users edit some source code in a HTML textarea box and send it back to us, so to provide some simple functionality and formatting whilst editing code in a textarea I needed to find a way to mimic tab based behaviour from a text editor.
Key features
- Single tabbing from any point
- Selection tabbing
- Multiple line tabbing
Demo
View Demo – MooTools
View Demo – jQuery
The demo has a textarea that has tabbing enabled and one below it that does not. That way you can see what pressing tab does normally in a textarea and how it would be a real pain for someone trying to edit code. Basically tabbing in a normal textarea will move your focus elsewhere, if you are trying to tab a selection, it will in some browsers delete the selection.
Ok this is thinking outside the box to solve a somewhat annoying and completely arguable problem.
The problem: I want my websites heading to have two words and one of those words I want to be in bold, or, and maybe even in a different colour.
The usual solution:
<h1>firstWord <span>secondWord</span></h1>
Looks something like this after some CSS – “firstWird secondWord”
The question I ask myself is simple, does Google like me putting spans, an element with no semantic value inside of my h1′s, h1′s being an element with very important semantic value?
If it doesn’t, why should I be punished for using text instead of an image to make my title stand out? Seems annoying doesn’t it. Well it annoyed me so much I came up with a solution.
Have you ever wanted to immediatly create a valid URL from a text input field or some kind of semantic input filed, I know I’ve had to implement it a few times now for different projects. Typically it will be something like, this new created object needs a name or title and that name or title needs to be converted into a URL which the user can see, and then edit to something more meaningful should they choose to. A good example of this already in action is in your wordpress blog, when you type in your post title Worpress automatically creates a URL for you and allows you to then edit and change the URL without also annoyingly changing the original title.
I’ve implemented this a few times now for different applications so here is the base code I tend to start with.
View Demo – MooTools
View Demo – jQuery
Notice how after editing the URL field the title will stop changing the URL value. The logic being that once you have edited the URL to your liking, updating the title will cease to overwrite your new URL.
This is a follow up to Speed up heavy Twitter feeds
The original post was quite simply a way for you to get yours or someone elses public Twitter timeline and display it on your own site. Twitter decided to kill off basic authentication for their API preventing simple Ajaxian requests to the API. So here is the solution and it comes in the form of JSONP (cross site scripting request).
Ok found this bug while working on a project that required a scrolling content bar that wound up needing widths defined in the stylesheet greater then 32,767 px.
Some people will immediatly notice the 32,767 as the programatic max value for an ‘Integer’, which is exactly what the problem is. Opera for some reason, and it is completly alone here, as all other browsers even the dreaded Internet Explorer 6, can handle CSS values that exceed this limit. Opera will silently fail, throw no warning about it and ignore all styles that follow non integer numbers in your selector.
There was no way around this I could find to make it work in Opera, simply put.
Any number bigger then 32,767 for a value in CSS when displaying with Opera 10, will be ignored and cause all following styles in that selector to be dropped.
Heres an example.
div #myElement {
position:absolute;
height:500px;
width:50000px;
background:#444;
font-weight:bold;
}
The above code will cause the div ‘myElement’ to have no selectable width, and will never apply the background or font-weight properties!
Ok so hands up if your a fan of Ajax, you can’t see it but I certainly have my hands up as do many of the other developers out there, so what is this post about? Well if you have ever built an Ajax application or website you would know that Ajax breaks the browsers natural navigation, things like the ‘back button’, ‘forward button’, history, favouriting a page or browsing to it via the URL input all become useless because there is no physical URL for those elements to use or save.
Now yes there are some solutions out there for providing Ajaxified links that keep your back buttons working, they are complex and usually written in a specific framework, so if you want to use them well your going to be adding a lot more code then you thought to your web site. Plus this is how Gmail and Facebook do it, you won’t find there code or get any help from them on the topic so I decided to build it myself so everyone could get the benefits of Ajax URL navigation. Below is an example of a simple yet elegant Ajax Pagination system I’ve written to relieve the navigation hicups Ajax causes.
Demo
Easy Ajax Pagination – MooTools
Easy Ajax Pagination – jQuery
Speed up JavaScript by making it execute exceedingly fast with these Google certified techniques
Ok everyone’s good friend David Walsh over at davidwalsh.name posted a link to a Google Talks presentation – Javascript and speed from back in 2009 in which they discuss some simple yet amazingly important JavaScript optimisation techniques. Ranging from Dom interaction and Scope , all the way through to Reflow. Now if your not sure what Reflow is I will explain that below, but put simple it is the name given when the browser has to redraw the page because user interaction or JavaScript has changed its geometry.
So here is what I’m going to cover in this post for you optimisation fanatics, with code examples of the good, the bad and the ugly!
- Scope Management
- Data Access
- Loops
- The DOM
