Garrick Cheung » MoreSimple http://www.garrickcheung.com Sharing what I know and learn about CSS, MooTools, Javascript, PHP and etc. Wed, 28 Apr 2010 02:52:47 +0000 en hourly 1 http://wordpress.org/?v=abc MooTools TextOverlay Class http://www.garrickcheung.com/mootools/textoverlay-class/ http://www.garrickcheung.com/mootools/textoverlay-class/#comments Tue, 19 May 2009 06:55:50 +0000 Garrick http://www.garrickcheung.com/?p=328 Some classes I’ve come across do a lot and are inflexible. I’ve seen some that are semantically incorrect when it comes to creating/using elements that the user has no control over. So I’ve been mulling over the idea of rewriting/cleaning/correcting some of these classes that I come across in hopes to make them flexible and simple. Well, I decided to have a go at it, obviously

I understand it’s like re-inventing the wheel. But in order to improve, we should always scrutinize work because a better solution may be available.

Here’s my first attempt, with the MooTools class, TextOverlay. If you look closely, it’s MooTools-More OverText modified to give the user more options.

What’s the Difference?

You must be wondering what’s different between the two. Well, I felt that positioning of the element should be handled by css, so I removed the reposition method. In OverText, the text-overlaying was created for you with MooTools and the default element was a ‘div’ with ‘label’ as your option. I did away with that and you now can either pass in an existing DOM element, or create one on the fly (though you’ll need to inject it into the DOM yourself). OverText ‘show’ and ‘hide’ methods explicitly call’s the text-overlay’s show/hide methods and then fires custom events ‘textShow’ and ‘textHide’. I decided to give the user flexibility by removing the explicit call’s to the text-overlay’s and only firing the custom events.

Example

The HTML, CSS, and JavaScript below is an example of how to set things up.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
    <form id="textoverlay_test" name="textoverlay_test" action="" method="post">
        <fieldset>
            <legend></legend>
            <div class="fields">
                <input id="first_name" type="text" name="first_name" value="" />
                <label for="first_name">First Name</label>
            </div>
            <div class="fields">
                <input type="text" name="last_name" value="" />
                <label for="last_name">Last Name</label>
            </div>
        </fieldset>
    </form>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.container {
    margin:0 auto;
    width:500px;
}
 
input, label {
    border:0;
    display:block;
    font:11px arial, veranda, helvetica, sans-serif;
    height:16px;
    line-height:16px;
    margin:0;
    padding:0 5px;
    width:100%;
}
 
label {
    display:none;
    cursor:pointer;
    margin-top:-16px;
}
 
.fields {
    border:1px solid #333;
    margin-bottom:10px;
    overflow:hidden;
    padding:5px;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

window.addEvent('domready', function(){
    var input, label, fields = $$('#textoverlay_test .fields').each(function(item){
        new TextOverlay(item.getElement('input'), item.getElement('label'),{
            onTextHide: function(element, text){
                text.setStyle('display','none');
                alert('hide'); //added to differentiate from default textHide event
            },
            onTextShow: function(element, text){
                text.setStyle('display','block');
                alert('show'); //added to differentiate from default textShow event
            }
        });
    });
});

Doing all this should simplify things and decrease the number of function calls. If you did a ‘console.profile’ in Firebug, I’m sure you’ll notice the difference between OverText and TextOverlay. Give it a try and let me know what you think! I’ve set it up in Github.

]]> http://www.garrickcheung.com/mootools/textoverlay-class/feed/ 2