Forum FAQForum FAQSearchSearch MemberlistMemberlist Forum ignore listForum ignore list RegisterRegister ProfileProfile Log in to check your private messagesLog in to check your private messages Log inLog in
Explain me this...

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side
View previous topic :: View next topic  
Author Message
garden



Joined: 26 May 2005
Posts: 1122
Location: Zadar / Split

PostPosted: 06.11.2005 13:13    Post subject: Explain me this... Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Send e-mail MSN Messenger
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 06.11.2005 14:58    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
garden



Joined: 26 May 2005
Posts: 1122
Location: Zadar / Split

PostPosted: 06.11.2005 15:07    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Send e-mail MSN Messenger
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 06.11.2005 18:37    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
andrej`
Guest





PostPosted: 06.11.2005 19:18    Post subject: Reply with quote

O bilo bi ljepo to od tebe suljo. I mene fakat zanima.
Back to top
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 07.11.2005 13:04    Post subject: Add user to your forum ignore list Reply with quote

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 Smile

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 &amp; 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 Smile

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. Cool
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
View user's profile Send private message Send e-mail Visit poster's website
carr



Joined: 13 Nov 2003
Posts: 1397
Location: Karlovac

PostPosted: 07.11.2005 17:00    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
garden



Joined: 26 May 2005
Posts: 1122
Location: Zadar / Split

PostPosted: 07.11.2005 18:20    Post subject: Add user to your forum ignore list Reply with quote

super. radiiiiii. ejureka Very Happy
Back to top
View user's profile Send private message Send e-mail MSN Messenger
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 07.11.2005 21:05    Post subject: Add user to your forum ignore list Reply with quote

svaka čast suliene, možda da to stave mi3jevci u tutoriale? evo, ja te nominiram Wink

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
garden



Joined: 26 May 2005
Posts: 1122
Location: Zadar / Split

PostPosted: 07.11.2005 22:19    Post subject: Add user to your forum ignore list Reply with quote

ja pogotovo kao tražitelj tutorijala Very Happy . triba i mene Very Happy . šalim se i reda koji je posta to. svaka čast. sigurno ću primijeniti ovo
Back to top
View user's profile Send private message Send e-mail MSN Messenger
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group