View previous topic :: View next topic |
Author |
Message |
garden
Joined: 26 May 2005 Posts: 1122 Location: Zadar / Split
|
Posted: 06.11.2005 14:13 Post subject: Explain me this... |
|
|
http://moofx.mad4milk.net/#methods . Molim vas nek netko ako zna odpočetka objasni
totalnom početniku kako implementirati ovo. Fala ljudi. Zahvalan do neba. Uglavnom mi treba opacity change kad se dođe mišem(iliti rollover sa polaganim mjenjanjem) |
|
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 06.11.2005 15:58 Post subject: |
|
|
Opacity change ... kakav? Da se nešto pojavi? Da nešto nestane? Da se nešto pretvori u drugo? Objasni mi točno i napisat ću ti kako to napraviti - koristim moofx i zaista je lagan. |
|
|
Back to top |
|
|
garden
Joined: 26 May 2005 Posts: 1122 Location: Zadar / Split
|
Posted: 06.11.2005 16:07 Post subject: |
|
|
da da. super. imao bi button i preko javascripta bi riješio rollover. znači taj rollover bi se polako prikazivao jer bi bio izveden s tim opacity changeom. Znači kad bi doša na button bia bi rollover s tim javascriptom di bi se polako prikazao rollover. slično kao buttoni na mi3iju oni flashani. Ajde baci i neki tut. Mi3iju i onako fali... Vidio sam da je jednostavno al to je taj talijan tako zbrka da ne znam di bi počea i di što ( govoreći o njubu jel). Sorry za late post |
|
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 06.11.2005 19:37 Post subject: |
|
|
Pri korištenju moofx korisno je znati prototype.js - na žalost, njega je teško znati jer postoje samo dvije (neslužbene) nepotpune dokumentacije.
Napisat ću ti rješenje čim stignem, sad idem na par sati. |
|
|
Back to top |
|
|
andrej` Guest
|
Posted: 06.11.2005 20:18 Post subject: |
|
|
O bilo bi ljepo to od tebe suljo. I mene fakat zanima. |
|
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 07.11.2005 14:04 Post subject: |
|
|
Sklepao sam na brzinu mali demo (testirano u IE i Mozilla).
Prikazuje osnovnu primjenu moo.fx za mali efekt na linkovima i primjenu moo.fx.pack efekta za 'accordion' kao na moo.fx sajtu. Ako idete polako preko linkova efekt je željeni, no efekt se 'obrne' kad se jako brzo mišem prelazi preko linkova zbog internog problema unutar moo.fx. Problem je jednostavan - onmouseout event se ne registrira dok traje onmouseover (odnosno dok efekt traje) i obrnuto. Tip koji je složio library nije mislio na to - to je nešto što bi trebalo ispraviti i pokušat ću se tome posvetiti kad budem našao vremena.
Sav CSS i JS je inline osim includanog prototype.lite.js (olakšana verzija malo većeg prototype.js) i moo.fx skripti.
1. efekt: Navigacija
Code: | <ul id="menu">
<li><a href="#nogo">Trippy</a></li>
<li><a href="#nogo">Cloric</a></li>
<li><a href="#nogo">OMG moo.fx</a></li>
<li><a href="#nogo">Sexy!</a></li>
</ul> |
no rocket science here
Ono što treba imati na umu kod korištenja moo.fx efekata jest da većina uključuje sakrivanje/otkrivanje pojedinog elementa. Odmah na počektu sam uvidio da ne mogu jednostavno sakrivati/otkrivati A element sa link tekstom jer bi onda i tekst nestao, ne samo pozadina. Za efekt prikazan u primjeru sam skriptiranjem ubacio u svaki A element još po jedan prazan SPAN (sa classom 'extra') kojem sam dao visinu 4px, crvenkastu pozadinu, deklarirao ga kao block i apsolutno/relativnim pozicioniranjem namjestio točno ispod gumba navigacije.
Code: | function menuExtra(menu){
var links = $(menu).getElementsByTagName('a'); // dohvaćam linkove iz navigacije
for(var i=0; i<links.length; i++){
var link = links[i]; // petlja prolazi za svaki link pojedinačno
var extra = document.createElement('span'); // radim extra SPAN
extra.className = 'extra';
// ova superkorisna funkcija dio je prototype.js:
var dim = Element.getDimensions(link);
// želim da 'extra' bude širok kao link button
extra.style.width = dim.width + 'px';
link.appendChild(extra);
// koristim moo.fx 'Width', spremam je na property od linka
// kao parametar dajem joj gore napravljeni 'extra' element
link.moofx = new fx.Width(extra, {duration: 300});
link.moofx.hide(); // na početku želim da crvena crta bude sakrivena
link.onmouseover = function(){ this.moofx.toggle(); } // tu se otvara
link.onmouseout = function(){ this.moofx.toggle(); } // na mouseout se zatvara
}
} |
Element.getDimensions() je korisna funkcija koja je dio prototype.js ali se ne nalazi u prototype.lite.js kojeg koristi moo.fx. Ja sam je zato izvukao van i pejstao inline da je mogu koristiti, u sourceu to izgleda ovako (izrezao sam sadržaje funkcija da ovdje ne zauzmu puno prostora):
Code: | // I need these functions from full prototype.js v1.4.0_rc2
if(!window.Element) var Element = new Object();
Object.extend(Element, {
getStyle: function(element, style) { /* ... */ },
getDimensions: function(element) { /* ... */ }
});
Object.extend(String.prototype, {
camelize: function() { /* ... */ }
}); |
Naposlijetku, CSS:
Code: | #menu {
padding:0;
margin:2em 0;
float:left;
}
#menu li { display:inline; }
#menu a {
display:block;
float:left;
padding:3px 12px;
background:#e1e9f2 url(grad-white.png) repeat-x bottom;
margin:0 0.3em;
color:black;
border:1px solid silver;
text-decoration:none;
position:relative; /* apsolutno pozicionirani elementi unutar ovoga
će se pozicionirati relativno prema njemu, jako korisno za CSS layoute */
}
* html #menu a { background:#f8f8f8 none; } /* IE ne podržava transparentni PNG */
#menu a .extra {
position:absolute;
bottom:-5px; /* spustimo ga dolje */
left:-1px;
display:block;
height:4px;
background:firebrick;
color:firebrick;
overflow:hidden;
} |
JavaScript funkcija menuExtra() neće se sama pozvati. Znamo da je moramo pozvati kad se dokument loadira: Code: |
// on document load, the magic happens:
function init(){
new AccordionDL('defList'); // accordion efekt za definition liste (u nastavku)
menuExtra('menu'); // oh yeah, radimo navigaciju
}
if(window.attachEvent) window.attachEvent("onload", init); // IE
else document.addEventListener("DOMContentLoaded", init, null); // Mozilla |
2. efekt: AccordionDL
Drugi moo.fx efekt (odnosno pack effect) je MultiFadeSize kojemu se daje array elemenata nakon čega se on brine za to da se na neki event (kao click) jedan element otvara dok se prethodno otvoreni zatvara (kao na moo.fx sajtu). To se još naziva i accordion zato što je poput harmonike. Na moofx sajtu klikabilna područja su headings (h3) a područja sa sadržajem koja se zatvaraju/otvaraju su DIV-ovi nakon njih. Ja sam odmah primijetio da se accordion efekt da lako primijeniti na definition listu, gdje bi klikabilna područja bila DT, a sadržaj pripadajući DD. Stvar bi ispravno radila ako bi jedan term (DT) imao samo jedan DD:
Code: | <dl id="defList">
<dt>Trippy & Cloric Inc.</dt>
<dd>
<p>Mozart's musical ability started to become apparent...</p>
</dd>
<dt class="critical">Macrosoft Computers</dt>
<dd>
<p>After one year spent in ...</p>
</dd>
<dt>Pennyless Consulting</dt>
<dd>
<p>During his formative years, Mozart completed several journeys throughout Europe...</p>
</dd>
</dl> |
no rocket science here either
Bio sam tako slobodan da sam napravio AccordionDL objekt kojemu se samo daje ID od definition liste, a on se brine za postavljanje moo.fx tehnikalija.
Code: | // AccordionDL class - create with: "new AccordionDL(element);"
var AccordionDL = Class.create();
AccordionDL.prototype = {
initialize : function(list){
list = $(list);
if(!list) return;
Element.cleanWhitespace(list);
this.accordion = new fx.MultiFadeSize(list.getElementsByTagName('dd'), {duration: 400});
var dts = list.getElementsByTagName('dt');
for(var i=0; i<dts.length; i++){
dts[i].onclick = function(){
this.parentNode.accordion.showThisHideOpen(this.nextSibling, 100, 'height');
}
if(i>0) this.accordion.hide(dts[i].nextSibling, 'height');
}
// create a reference for clicks
list.accordion = this.accordion;
}
}; |
Ovako definirani AccordionDL objekt se može primijeniti na bilo koju definition listu. Naravno, istu treba ispravno style-ati CSS-om. AccordionDL sam u ovom primjeru pozvao u gore navedenoj init() funkciji koja se izvršava na document load:
Code: | new AccordionDL('defList'); |
Jedna linija i vaš definition list accordion je spreman.
CSS za listu je:
Code: | dl { width:50%; background:white; border-bottom:1px dotted gray; }
dt {
padding:0.1em 0.5em;
font-size:1.3em;
background:#273E62;
color:white;
border:1px outset Teal;
}
dd { text-align:justify; padding:0 1em; border:1px dotted gray; border-width:0 1px; }
dd p { margin:0.5em 0; }
* html dl, * html dd { border-style:solid; } |
Sljedeće na ovom topicu:
Garden, opisati ću kako napraviti i efekt kojeg si mi ti spomenuo na PM. To će isto uključivati generiranje novih elemenata kao što je ovdje bilo dodavanje jednog SPAN-a. Također ću se još poigrati sa drugim efektima koji bi se mogli dobiti sa moo.fx library-em i koji su mi pali na pamet dok sam radio ovo. |
|
|
Back to top |
|
|
carr
Joined: 13 Nov 2003 Posts: 1397 Location: Karlovac
|
Posted: 07.11.2005 18:00 Post subject: |
|
|
Sulien wrote: | Sklepao sam na brzinu mali demo (testirano u IE i Mozilla). |
kul, meni u mozilli su inputovi malo "glitchy", na mouseover se "cimnu" 1px gore (svaki put kad pokazes ovaj srednji div s njima..)
neki bug u mozilli vjerojatno.. |
_________________ Bolje biti malo lud, nego malo pametan. |
|
Back to top |
|
|
garden
Joined: 26 May 2005 Posts: 1122 Location: Zadar / Split
|
Posted: 07.11.2005 19:20 Post subject: |
|
|
super. radiiiiii. ejureka |
|
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 07.11.2005 22:05 Post subject: |
|
|
svaka čast suliene, možda da to stave mi3jevci u tutoriale? evo, ja te nominiram |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
garden
Joined: 26 May 2005 Posts: 1122 Location: Zadar / Split
|
Posted: 07.11.2005 23:19 Post subject: |
|
|
ja pogotovo kao tražitelj tutorijala . triba i mene . šalim se i reda koji je posta to. svaka čast. sigurno ću primijeniti ovo |
|
|
Back to top |
|
|
|