Breadcrumb cu jQuery

17 Apr

Aici (click).

Am vrut să imit un pic din funcţionalitatea breadcrumb-ului din Vista care mi se pare foarte bun. Am reuşit ?

Scris în categoria: Css, Development, My work, jQuery 2 Comentarii

Bară de navigare 2

2 Apr

Aşa cum am spuneam aici, puneam la cale o bară de navigare asemănătoare cu asta cu diferenţa că cea din urmă are şi un efect drăguţ.

Trebuie să precizez întâi de toate dezavantajele acestei metode (da, există nişte dezavantaje):

  • Fiecare link necesită o imagine. Asta înseamnă că în momentul în care vrei să schimbi textul trebuie să modifici imaginea. Dacă este pentru un site ce nu-şi schimbă prea des link-urile, nu este o problemă serioasă;
  • Cod suplimentar. La fel ca şi prima bară de navigare de altfel. În locul unui span se poate folosi orice element inline: em, strong, etc.

Codul este asemănător cu cel anterior, cu diferenţa că fiecare link are o clasă:

1
2
3
4
5
6
<ul id="fadeMenu">
    <li><a href="#" class="m1"><span>Home</span></a></li>
    <li><a href="#" class="m2"><span>About</span></a></li>
    <li><a href="#" class="m3"><span>Faq</span></a></li>
    <li><a href="#" class="m4"><span>Contact</span></a></li>
</ul>

(Mai mult…)

Scris în categoria: Css, Tutoriale, jQuery 7 Comentarii

jQuery 1.2.3. UI 1.5a. Enchant

7 Feb

Azi a fost lansată o nouă versiune de jQuery. Odată cu noua versiune de jQuery vine şi o nouă versiune de UI şi o şi mai nouă versiune de Enchant ce vrea să reproducă toate efectele din Interface (şi se pare că reuşeşte). Deoarece se pare că s-au ars când au lansat prima versiune a UI, versiunea 1.5 este în stadiul alpha. După ce va ieşi o versiune stabilă (sau măcar un RC), mă voi gândi serios să fac upgrade. Până atunci însă, voi folosi în continuare Interface. Totuşi sper ca noua versiune să aibe o documentaţie ceva mai solidă decât actuala….

Via Ajaxian.

La mulţi ani jQuery & Eminescu!

15 Jan

Se pare că jQuery a împlinit azi doi anişori şi, cu această ocazie s-a lansat o nouă versiune 1.2.2 ce se spune că aduce îmbunătăţiri de viteză (300%) şi ceva features noi. Ultima dată când s-au lăudat că au avut o îmbunătăţire de 800%, au avut ceva probleme şi la câteva zile după, au scos o altă versiune. Să sperăm că nu va fi aceeaşi problemă şi acum.

Din păcate, eu sunt blocat cu 1.1.2, deoarece Interface nu merge cu versiuni mai noi iar UI este în continuare naşpa. Alte librării nu îmi plac :|

În aceeaşi zi în care Eminescu are ceva ani de când s-a născut. Poetul nepereche, poetul românilor, poetul dragostei, and so on. Nu mi-a plăcut niciodată literatura, dar… fie, la mulţi ani băi Mihăiţă! (bine, cât de ciudat e să-i spui unuia ce a murit acum aproape 120 ani la mulţi ani?)

Despre formulare

5 Jan

Azi am început să tai un layout ce avea o parte dintr-un formular un pic… diferit de cum ar fi normal. Şi anume un alt buton de upload. Şi m-am gândit eu puţin şi am ajuns la concluzia că elementele ce intră într-un tag form sunt cel mai greu de customizat:

  1. <legend> se comportă diferit pe firefox comparativ cu IE sau Opera, neputând fi poziţionat în niciun fel - padding/margin. Singura soluţie ar fi poziţionare relativă a fieldset-ului şi poziţionare absolută a tag-ului legend. Sau folosirea unui titlu în locul lui <legend> (<h4> sau <h5>)
  2. <input type=”checkbox” /> şi <input type=”radio” /> nu poţi sa le convingi prea uşor de un anume background/culoare. Cred că ţine şi de setările sistemului de operare :)
  3. <input type=”text” /> şi <textarea> au un „mic” bug în IE: dacă are o imagine ca background iar textul depăşeşte lătimea definită, background-ul pleacă la pădure. Fix? Pentru IE6 se defineşte bg ca fixed. Pentru IE7 nu am găsit altă soluţie decât să pun input-ul sau textarea într-un alt element (span/div) şi schimb background la acest element.
  4. <select> & <option> padding-ul se aplică după ureche, în funcţie de browser. În plus, în IE6 este un bug criminal: niciun element nu poate apărea deasupra unui <select>. Soluţia? Dacă foloseşti jQuery, găseşti o mulţime.
  5. Am lăsat cireaşa de pe tort (bomboana de pe colivă?!) la urmă: <input type=”file” />. Un simplu style=”border:1px solid #000″ îi strică rău de tot aspectul. Soluţii sunt multiple:
  • nu te legi sub nicio formă de file şi te mulţumeşti doar cu lăţime;
  • foloseşti o şmecherie făcută în flash (ai nevoie şi de cunoştinţe server side);
  • foloseşti o şmecherie făcută în javascript. Sau un plugin pentru jQuery (download AICI deoarece nu prea merge site-ul).

Pentru primele patru probleme există o rezolvare foarte simplă all in one. Este o versiune recentă ce rezolvă o parte din problemele iniţiale (select-ul nu funcţiona decât dacă se făcea click pe săgeată, nu se putea folosi tastatura).

Enjoy!