mooReadAll demo page -

Welcome to the mooReadAll demo page!
Enjoy with the six examples provided, for full documentation click here.

First

Takes the #myreadll1 div element content, cut it to 80 words, provides a "read all" link which when clicked shows up a layer with the whole content. The display style property of the element is set to block when the computation ends.

Clearly you have to include mootools 1.3 core, the drag and resize more modules and the mooReadAll plugin.
Javascript

var mra_instance = new mooReadAll({words: 80, "display_style": "block"}); mra_instance.add("#myreadall1");

This code may be attached to an addEventListener event, an onclick event etc...
So let's see the result:

The next (with gray background) is a div element which has an id attribute equal to "myreadall1", a data attribute "data-title" equal to "my div element title" and some formatted content

run javascript

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse ligula magna, ornare et luctus nec, porta et odio. Vestibulum non sapien sit amet tellus eleifend tincidunt. Mauris turpis ipsum, auctor vitae porta nec, consectetur in felis. Maecenas elit ante, lobortis non rhoncus eget, sodales id nisi! Suspendisse potenti. Quisque mi tortor, ~~venenatis lobortis venenatis~~ a, eleifend a neque. Quisque scelerisque metus eget mi iaculis viverra. Nam rhoncus nunc nec erat accumsan id posuere lacus consectetur. Etiam at libero mi. Donec ac orci id sapien porta placerat. Donec eu enim sapien. Praesent ut vestibulum diam. Ut sed dolor ligula, in varius leo. Vestibulum vehicula, quam at aliquam hendrerit; lectus elit venenatis dui, scelerisque congue elit est quis tellus. Proin vel ante sapien. Maecenas eget tortor sit amet nunc facilisis posuere et ac nisi.

Aliquam fringilla, risus vel tincidunt gravida, nisl nulla tincidunt nulla, eleifend mattis lorem nunc vitae odio. Donec pharetra tincidunt urna eu sollicitudin. Phasellus iaculis, mi sit amet tempor scelerisque, felis eros volutpat augue, pharetra ultricies tellus magna non odio. Mauris tempor; nisl ac ullamcorper gravida,
sem metus sollicitudin dui, ut vestibulum dolor justo at purus. Pellentesque pulvinar malesuada quam, eu convallis lacus ullamcorper luctus. Nullam eu enim libero . Curabitur et imperdiet sem. Nunc turpis dui, ultricies ut laoreet eu, rutrum feugiat urna. Integer libero erat; mollis at ultricies in, pretium nec arcu. Vestibulum consectetur orci at metus semper nec malesuada leo imperdiet.

Second

Takes the #myreadll2 div element content, cut it to 160 words, provides a "read all" link which when clicked shows up a draggable and resizable layer with the whole content. The text of the content may also be resized. The characters shown after the 160 words are '->' instead of '...'.The visibility style property of the element is set to visible when computation ends.

Javascript

var mra_instance = new mooReadAll({words: 160, "display_style": "visible", "layer_draggable": true, "layer_resizable": true, layer_text_resizable: true, truncate_characters:'->'}); mra_instance.add("#myreadall2");

The next (with gray background) is a div element which has an id attribute equal to "myreadall2", no data-title attribute and some formatted content

run javascript

Third

Takes the #myreadll3 div element content, cut it to 160 words removing all html tags, provides a "read all please!" link which when clicked opens a new window pointing to google.

Javascript

var mra_instance = new mooReadAll({words: 160, remove_tags: "all", action_label: " read all please!", action: "link", link_href:"http://www.google.it", link_target:"_blank"}); mra_instance.add("#myreadall3");

The next (with gray background) is a div element which has an id attribute equal to "myreadall3", and some formatted content. Now we cut the html text removing all tags and linking google for the whole content.

run javascript

Fourth

Takes the #myreadll4 div element content, cut it to 20 words, provides a "read all" link which when clicked expand the whole content in the same element. Then a "back" link appears to compress another time the content.

Javascript

var mra_instance = new mooReadAll({words: 20, "display_style": "visible", action:'inplace'}); mra_instance.add("#myreadall4");

The next (with gray background) is a div element which has an id attribute equal to "myreadall2", and some formatted content

run javascript

Fifth

Takes the #myreadll5 div element content, cut it to the default 60 words, provides a "read all" link which when clicked calls the mycallback function passing some parameters and the object context.

Javascript

function mycallback(element, param) { alert("this points to the mooReadAll instance, global words option: "+this.options.words); alert("the element id: "+element.id); alert("custom parameter: "+param); } var mra_instance = new mooReadAll({action:'callback', callback: mycallback, callback_param: 'lol'}); mra_instance.add("#myreadall5");

The next (with gray background) is a div element which has an id attribute equal to "myreadall2", and some formatted content

run javascript

Sixth and last

Let's play with global and local options with all div elements above. Run the script and then look at the previous div elements, without running single scripts again.

Javascript

// global options passed to constructor var mra_instance = new mooReadAll({words: 120, display_style: 'block', action:'layer'}); mra_instance.add($$($('#myreadall1'), $('#myreadall2'))); // add readall3 but with custom "local" options mra_instance.add('#myreadall3', {words: 15, action:'inplace', 'return_label': 'atras'}); // add readall4 but with custom "local" options, remove some tags mra_instance.add('#myreadall4', {words: 160, remove_tags: ['img', 'b'], action:'callback', callback:mycallback, callback_param: 'ahi senorita'});

Refresh the page before running this test.

run javascript

... and look at the previous demos

project page documentation download

abidibo.net

mooReadAll demo page

First

Second

Third

Fourth

Fifth

Sixth and last

Comments