Text Subxtractor

//5. get text and replaces them with shorter one in selected elements
text_substractor('div.article.xx', 'div.message',300);

function text_substractor(parent, children, limitText){
var myparent = document.id(document.body).getElements(parent);
myparent.each(function(element) {
var myChildren = element.getElement(children);
//get full text of div.message
var myText = myChildren.get('text');
var newText = myText.substr(1,limitText) + '...';
//destroy all elements inside myChildren.
myChildren.empty();
//set the new text on myChildren
myChildren.set('text', newText);
//add new element after text
var test = new Element('span', {class: 'test'});
test.inject(myChildren);
var mySpan = myChildren.getElement('span');
mySpan.setProperties({text:'readmore...',style:'background:yellow;'});
});
}
//5. end of text replacer

Element Width Adjuster

Html:
<div id="parent">
     <div id="child" class="columns-3">
     </div>

     <div id="child" class="columns-3 right">
     </div>
     <div id="child" class="columns-3 right">
     </div>
     <div id="child2" class="columns-2">
     </div>
     <div id="child2" class="columns-2 right">
     </div>
</div>

CSS:

#parent {width:900px; height:100px;float:left;}
#child {float:left;height:80px;background:#fdfdfd;}
#child2 {float:left;height:80px;background:#ffaaff;}

JavaScript

// Call the width setter function. commands: column_setter(name of element, name of element to have left margin , margin between element, and number of width set).
column_setter('.columns-3', 'right', 10, 3);
column_setter('.columns-2', 'right', 10, 2);

//6. function set elements width with element_name according to the parent's width;
function column_setter(myEls, myNextEls, marginBetweenElements, numberOfElements) {
var mycolumn = document.id(document.body).getElements(myEls);
var mydown2 = document.id(document.body).getElements(myEls +  myNextEls);
mydown2.setStyle('margin-left',marginBetweenElements);
mycolumn.each(function(element) {
//get Parent div
var myParent = element.getParent('div');
//measure Parent div's width
var parentsize = myParent.getSize();
var parentWidth = parentsize.x;
//measure Parent div's padding
paddingRight = myParent.getStyle('padding-right').toInt();
paddingLeft = myParent.getStyle('padding-left').toInt();
//measure Parent div's border
parentBorderLeft = myParent.getStyle('border-left').toInt();
parentBorderRight = myParent.getStyle('border-right').toInt();
// measure the margin. 3 columns has 2 margin. assume they are 5px each
var mycolumnwidth = (parentWidth - paddingRight - paddingLeft - parentBorderLeft - parentBorderRight - (marginBetweenElements*(numberOfElements-1)))/numberOfElements;
element.setStyle('width',mycolumnwidth);
});
}
//6. set elements width and height width 

Tambah CSS dan JScript pada module

Pada file mod_moduleku.php, tambahkan sbb:

//add script and css
$document = &JFactory::getDocument();
$document->addStyleSheet( JURI::root() . 'modules/mod_moduleku /css/moduleku_css.css' );
$document->addScript("modules/ mod_moduleku /js/javascript.js"); 

Tutorial Efek Toggle Sekelompok Element pada Joomla.

Tutorial Efek Toggle Sekelompok Element pada Joomla.

Di script ini, hanya satu element yang terbuka. Ketika suatu element diklik, maka element yang sedang terbuka akan ditutup dulu, baru membuka element child yang diklik. Apabila element yang sedang terbuka diklik, maka element tersebut ditutup.

variable yang digunakan di script tutorial berikut:
element parent = div.regular (div dengan class bernama regular);
element child = div di dalam element parent.
nama function yang digunakan: nextSlider;
teknik yang digunakan: addClass, removeClass dan check hasClass.
nama class penanda element child yang terbuka: toggleslide.
nama class penanda sementara element child yang sebelumnya dibuka: togglechecker.

// 1. Pemanggil semua element div.regular.
var myparent = document.id(document.body).getElements('div.regular');
myparent.each(function(element) {
element.addEvent('click', nextSlider);
var mynext = element.getChildren('div');
//set status semua element saat pertama, yaitu ditutup semua.
mynext.setStyle('overflow','hidden');
mynext.setStyle('height',0);
mynext.setStyle('list-style-type','none');
});


// 2. function yang dipanggil.


function nextSlider() {
//cek semua element dengan div.regular, jika ketemu yang terbuka, ditutup.
var myparentEls = document.id(document.body).getElements('div.regular');
myparentEls.each(function(element) {
var mychildEls = element.getChildren('div');
if(mychildEls.hasClass('toggleslide') == "true")
{
                        // tutup element yang terbuka.
mychildEls.removeClass('toggleslide');
mychildEls.tween('height', 0);
                        //setelah tutup, element tersebut ditandai utk cek apakah element itu jg yang di-klik.
mychildEls.addClass('togglechecker');
}
else
{
mychildEls.removeClass('togglechecker');
}
});
var mychildren = this.getChildren('div'); //ini element yang di-klik.
if(mychildren.hasClass('togglechecker') == "true") //cek apakah element yg sama
{
//True, artinya element yang ditutup = element yang diklik. tidak perlu lakukan apa-apa
mychildren.removeClass('togglechecker');
}
else
//False, maka bukalah element baru tersebut.
{
mychildren.addClass('toggleslide');
var mychildren = this.getElement('div');
mychildren.setStyle('height', 'auto');
var mychildrenSize = mychildren.getSize();
var mychildrenHeight= mychildrenSize.y;
mychildren.setStyle('height', 0);
mychildren.tween('height', mychildrenHeight);
}
// Cek semua div regular, kita hapus penanda sementara, si togglechecker.
myparentEls.each(function(element) {
var mychildEls = element.getChildren('div');
if(mychildEls.hasClass('togglechecker') == "true")
{
mychildEls.removeClass('togglechecker');
}
});
}

Tutorial Menambah Event pada Element

Setelah memahami script untuk memilih element dengan class tertentu, maka kita kembangkan lagi script yang kita sudah miliki.

Tutorial -2 Kali ini kita tambahkan "event" pada element, dan "event" ini akan memanggil suatu "function". Event dan function ini yang membuat element-element dalam web menjadi interaktif.

Untuk contoh kali ini, kita coba membuat semua element li.parent untuk menampilkan element anak-anaknya muncul saat li.parent di-hover mouse, dan menyembunyikan element anak saat li,parent tidak lagi di-hover mouse.

Kita gunakan basic script yang sebelumnya.

window.addEvent('domready', function() {

//masukan script2 di sini

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {

//masukan script untuk element-element dalam myparent

element.setStyle('display','none');                             

});

)};

Pada setiap element li.parent yang dimasukan ke myparent, akan kita tambahkan 2 event berbeda yang masing-masing akan memanggil function yang berbeda pula, yaitu:

Event 'mouseover' akan memanggil function "showChildren" saat element myparent di-hover mouse.

Event 'mouseout' akan memanggil function "hideChildren" saat element myparent tidak lagi di-hover mouse.

Script untuk menambahkan event pada element-nya:

      element.addEvent('mouseover', showChildren);

      element.addEvent('mouseout', hideChildren);


Dalam efek ini, kita hendak membuat element-element anak tidak ditampilkan, sebelum di-hover. Oleh karena itu, kita harus menghilangkannya dengan script:

//panggil anak-anak element myparent menjadi myChildren

var myChildren = element.getChildren('ul');

//sembunyikan myChildren sebagai kondisi awal

myChildren.setStyle('display','none');

Berikutnya, kita buat script function showChildren dan hideChildren. Script-nya:



function showChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


function hideChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


Lengkapnya menjadi sbb:

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {
element.addEvent('mouseover', showChildren);
element.addEvent('mouseout', hideChildren);
var mychildren = element.getChildren('ul');
mychildren.setStyle('display','none');
});

function showChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','block');
}


function hideChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


End of tutorial script - 2.

Tutorial yang lain:
Tutorial Menambah Efek Toggle pada Element Joomla.

Tutorial Efek Toggle pada Element Joomla

Kali ini kita membuat script efek pada elemen dengan cara yang lain.

Script ini adalah untuk menampilkan element child ketika element parent di-click, dan element child akan dihilangkan ketika element parent di-click kembali.

Di metode sebelumnya, kita menambahkan event "mouseover" dan "mouseout" pada element parent, dimana masing-masing event akan memicu function yang berbeda. Kesulitan kali ini, kita menambahkan hanya satu event "click" pada element parent, dan function yang dipanggil event ini harus memeriksa status elementnya utk menentukan function apa yang di-execute, apakah akan di-"hide" atau "show".

Untuk menambahkan status yang dapat di-cek oleh function, metode yang saya gunakan adalah dengan cara menambah class penanda pada element saat di-click pertama kali, dan menghapus class penanda tersebut saat di-click kedua kalinya. Function tambahan di sini adalah untuk mengecek apakah element sudah memiliki class penanda tadi.

Script function saat di-click adalah seperti ini:

function toggleElement() {
var mychildren = this.getChildren('ul');
if(mychildren.hasClass('toggler') == "true")//cek apakah element children memiliki class penanda bernama "toggler".
{
   //jika true, sembunyikan element, hapus class penanda.
mychildren.removeClass('toggler');
mychildren.morph({'opacity':0,'filter':'alpha(opacity=0)'})
}
else
{
   //jika false, munculkan element child, tambah class penanda.
mychildren.addClass('toggler');
mychildren.morph({'opacity':1,'filter':'alpha(opacity=100)'})
mychildren.setStyle('display','block');
}
}

Dengan demikian, pembentuk script secara lengkap adalah:
1. Script pemilih element yang diberikan efek.
2. Script menambahkan event.
3. Script function yang dipanggil saat event tersebut terjadi.

//1. script pemilih element, pilih element "li" dengan class "parent"

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {
element.addEvent('click', toggleElement); //2. script menambah event, panggil function "toggleElement" saat diklik.

//set style mychildren mula-mula, yaitu dihilangkan dari layar.
var mychildren = element.getChildren('ul');
mychildren.setStyle('position','absolute');
mychildren.setStyle('opacity',0);
mychildren.setStyle('display','none');
});

//3. script function
function toggleElement() {
var mychildren = this.getChildren('ul');
if(mychildren.hasClass('toggler') == "true")
{
   mychildren.removeClass('toggler');
 mychildren.morph({'opacity':0,'filter':'alpha(opacity=0)'})
 }
 else
 {
 mychildren.addClass('toggler');
 mychildren.morph({'opacity':1,'filter':'alpha(opacity=100)'})
 mychildren.setStyle('display','block');
 }
}

This is the end of tutorial 3.