[align=center][b]Fx.Slide - Toggle[/b] [sup]Show/Hide with toggle effects using MooTools - Easy Ways[/sup] [sup]all major browser compatible[/sup] [hr][hr] [/align] Langsung aja yah, semoga bermanpaat [b]pertama :[/b] check MooTools Javascript Libary, untuk memastikan profile kamu ada MooTools nya. [quote]buka halaman profile kamu, setelah kebuka semuanya copas ini ke addressbar/location(Firefox) di browser kamu : [b]javascript:alert(MooTools.version)[/b] [img]http://i38.tinypic.com/2uogffs.gif[/img] lalu tekan enter setelah ada jawaban alert [b]1.1[/b] baru lakukan langkah kedua.[/quote] [b]kedua :[/b] [spoiler][sup][b][i]sebelumnya back-up dulu script asli kamu ![/i][/b][/sup] lalu simpan code ini di dalam [b]onProfileLoad function[/b] : // Fx.Slide Code - Start $$( '#flo_wrapper' ).each(function(item){ //controlpanel var scumSlide1 = new Fx.Slide( item.getElement( '#content_0' ), { duration: 500 } ); item.getElement( '.controlpanel h1' ).addEvent( 'click', function(){ scumSlide1.toggle(); } ); //photo gallery var scumSlide2 = new Fx.Slide( item.getElement( '#content_1' ), { duration: 500 } ); item.getElement( '.photos h2' ).addEvent( 'click', function(){ scumSlide2.toggle(); } ); //friends var scumSlide3 = new Fx.Slide( item.getElement( '#content_2' ), { duration: 500 } ); item.getElement( '.friends h2' ).addEvent( 'click', function(){ scumSlide3.toggle(); } ); //more about var scumSlide4 = new Fx.Slide( item.getElement( '#content_6' ), { duration: 500 } ); item.getElement( '.moreabout h2' ).addEvent( 'click', function(){ scumSlide4.toggle(); } ); //public comment var scumSlide5 = new Fx.Slide( item.getElement( '#content_18' ), { duration: 800 } ); item.getElement( '.publiccomments h2' ).addEvent( 'click', function(){ scumSlide5.toggle(); } ); //media box var scumSlide6 = new Fx.Slide( item.getElement( '#content_10' ), { duration: 500 } ); item.getElement( '.scrapbook h2' ).addEvent( 'click', function(){ scumSlide6.toggle(); } ); [b]//tambahan addBox dan seterusnya disinih[/b] }); //Fx.Slide Code - End[/spoiler] kalau untuk kode addBox bisa di customize sendiri, soalnya class buat addbox berbeda2. misalkan addBox nya : [quote][i]addBox("RIGHT","my addBox Header",code,"[b]moo[/b]",null);[/i] [b]moo[/b] adalah class dari box (class="commonbox moo") sedangkan output ID untuk box adalah [b]content_moo[/b](id="content_moo")[/quote] maka kode nya kira2 seperti inih: [quote]var slideVariable = new Fx.Slide( item.getElement( '[b]#content_moo[/b]' ), { duration: 500 } ); item.getElement( '[b].moo h2[/b]' ).addEvent( 'click', function(){ slideVariable.toggle(); } ); [i]titik([b].[/b]) untuk class pagar([b]#[/b]) untuk ID sama seperti css [/i][/quote] [b]konfigurasi :[/b] [quote][b]duration:[/b] durasi dalam milisecond [b] 500 = normal > 500 = lambat < 500 = cepat [/b][/quote] untuk mengetahui class/id dari box silahkan masuk ke sinih : http://theftalk.com/t13870-Friendster-Div-ID-Class.html Demo : http://profiles.friendster.com/mad4moo (addBox Lorem Ipsum) [b]good luck[/b] [i]script issue, pertanyaan, kritik & saran silahkan reply disini, terimakasih[/i]

Last edited by gumscumbag (2008-08-04 17:17:17)