JavaScript RegExp based highlighting for MooTools and jQuery

How it works

A regular expression looks for text outside HTML tags. It uses a callback function to perform replacements to simulate native lookahead support.

When is this sort of replacement suitable ?

  • Remote HTML responses (ajax) highlighting
  • Autocompleters suggestion highlighting
  • User-typed HTML, WYSIWIGs, etc.

Generally speaking, the only downside of this method, since it deals with the innerHTML, is that all attached events and properties are lost when the replacement is performed.

Continue reading

This post has 8 responses

Posted in Client side about 1 year ago

More please.

mootools

You wanted more, we give you More. Today the new MooTools More RC1 is being released, with an outstanding number of new plugins. More functionality, but with the quality you come to expect from the MooTools framework.

Most of the new components come from the excellent Aaron’s Clientcide library. I contributed to the improvement, refining and testing of some of his vast code, which brings More to its present state.

The goal here is to provide more great, simple and extensible tools to make developers’ lives easier. I suggest you head to the Docs or Builder page right away to start trying out the new stuff. As always, head to Lighthouse to report the bugs you encounter, or even to suggest new additions or features.

This post has 1 response

Posted in Client side about 1 year ago

Don’t repeat your moo

Given the Object-Oriented nature of the MooTools framework, code repetition is something that is long forgotten (or should be) in the scripts your write. With the avoidance of code repetition comes code reusability, which results in your website being easier to read, extend and maintain, and your scripts smaller in size.

At this point there’s no doubt in anyone’s mind that DRY is a principle we should stick to. However, let’s examine how to achieve this in the right way.

Continue reading

This post has 22 responses

Posted in Client side about 1 year ago

BarackSlideshow and MorphList updated

These two widely used scripts have been updated. BarackSlideshow now supports transition effects and can autoplay (requested by the community many times).

MorphList is now even more flexible, supporting custom markup for the dynamic background.

This post has 13 responses

Posted in Projects about 1 year ago

BarackSlideshow – An elegant, lightweight slideshow script

Demo

I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.

I decided to imitate the homepage slideshow. I had already experimented with similar animated lists, which allowed me to have it ready within minutes

Continue reading

This post has 238 responses

Posted in Projects over 2 years ago

TextboxList meets Autocompletion

TextboxList Autocompletion

Demo here

In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!

Continue reading

This post has 301 responses

Posted in Projects over 2 years ago

TextboxList: Fancy Facebook-Like dynamic inputs!

Check out a demo of TextboxList before reading!

While working on my big and exciting new project, I decided to include an input that resembles the famous Apple Mail to: textfield. I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)

I created my own, MooTools 1.2 compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.

Continue reading

This post has 59 responses

Posted in Projects over 2 years ago

CSS+Javascript power. Fancy menu

Let me introduce you to Fancy Menu:

fancymenu

When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style as tabs. Lately, such navbars are everywhere, as many people believe they’ll make their site more Web 2.0-compatible. Personally, I just think they’re semantically better and accessible.

In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

Continue reading

This post has 676 responses

Posted in Projects over 3 years ago