In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:

"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."

Read More...

In the last weeks I frequently received a question about how to use CSS3 border-radius property to draw HTML elements with rounded corners in Internet Explorer. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer.

So to draw rounded corners in IE you have to use some trick, for example using CSS classes with a background image (take a look at this post).

Read More...

A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.

In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:

Download this tutorial Live preview


Read More...

After my previous post about the Art of reusing code in your web projects I received many messages which asked to me to release an improved version of the slider I illustrated in the example number 3 of that post.

So, in this tutorial I'll explain a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools. This is a basic proposal you can improve how you prefer. I included a link to the source code you can customize and reuse quickly in your web projects. The result is something like this:

Take a look at the live preview and download the source code.


Read More...

In this tutorial I explain how to design a vertical menu which use motion and change opacity effect. I wrote this post to show a better use of elastic effect which I illustrated in my latest post.

The effect I want to realize is the following. I have a vertical menu with some links. On "mouse over" the select link goes to the right with an animated elastic effect and change its opacity. When you release the element, it goes in its initial position with original opacity value. The result is something like this:

Take a look at the live preview to see this script in action.


Read More...

This tutorial explais how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework. The effect is simple to develope and reuse in your web projects changing only HTML code and CSS. Take a look!

The effect I want to realize is the following. I have a "layer cloud" with some layer overlapped to the others. On "mouse over" the select layer goes down with a nice animation effect and when you release the element this goes up with an elastic effect:

Take a look at this live preview to see this script in action.


Read More...

About the Author

Eduardo Sada
Programmer and Web Designer
Coders.me

The Script

This tutorial explains how to design a stunning Alert Box which changes and improves the classic look of JavaScript Alert Boxes.

Read More...

After my previous post about MooTools Basic Tips for web designer I received a lot of excited messages from my readers, lovers of this beautiful framework, for this session of lessons dedicated to MooTools. Thanks a lot guys! I really appreciate your support! So... a question which a lot of peopole asked to me was how it's possible to get the ID of an element (for example the ID of an element into a list) and associate to this element some event (change background, display an alert message...). In this post I want to illustrate how to get the ID of DOM elements using MooTools and unobtrusive elegant code.

Read More...

After a lot of requests, in this article I want to illustrate some simple tips to start to work with MooTools. In this first lesson you can see how to manipulate element properties, in particular how to get DOM element by ID, how to use getStyle(), setStyle() (to get and set CSS properties), toInt() to convert string to number and some examples to introduce how to write unobtrusive JavaScript code with MooTools.

Read More...

In the past months I already dedicated several posts about forms design and usability. In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of <select> tag, simple check during data input and how to show hidden fields selecting a radio element option.

Read More...