[JS] Έλεγχος υποστήριξης CSS ιδιότητας χωρίς browser detection

11 11 2008

Παραδείγματος χάριν, έστω ότι θέλετε να διαπιστώσετε αν υποστηρίζεται η ιδιότητα opacity. Αντί να μπλεχτείτε σε δαιδαλώδεις και μη forward-compatible λύσεις, μπορείτε απλά να ελέγξετε αν η ιδιότητα αυτή είναι ορισμένη (defined) στο αντικείμενο style οποιουδήποτε στοιχείου. Ακόμη κι αν είναι κενή, αν υποστηρίζεται, δεν υπάρχει περίπτωση να είναι undefined.

Ένα ερώτημα που προκύπτει όταν πρόκειται για επαναχρησιμοποιήσιμα scripts είναι “Σε ποιό στοιχείο να το δοκιμάσω;”. Ένας καλός υποψήφιος για αυτό είναι το body: Υπάρχει πάντα, και διαθέτει style object.

Για να συνοψίσουμε, ο τελικός έλεγχος θα ήταν της μορφής:

if(typeof document.body.style.opacity != 'undefined')
{
/* Εδώ μπορείτε να κάνετε ο,τι θέλετε που χρησιμοποιεί
την εν λόγω ιδιότητα, βέβαιοι ότι θα δουλέψει σωστά */
}

Έχετε υπόψιν ότι για το παραπάνω θα πρέπει να χρησιμοποιήσετε τη JavaScript μορφή της ιδιότητας (πχ backgroundColor και όχι background-color).


Σχόλια : Leave a Comment »
Ετικέτες: , ,
Κατηγορίες : CSS, Javascript, Web design, Web development

Math.round με συγκεκριμένο πλήθος δεκ. ψηφίων

3 10 2008

Όλοι ξέρουμε ότι μπορούμε πολύ εύκολα να φτιάξουμε μια δική μας συνάρτηση που να στρογγυλοποιεί έναν αριθμό βάσει δοσμένου πλήθους δεκαδικών ψηφίψν. Ωστόσο δεν θα ήταν πολύ πιο κομψό και όμορφο να μπορούσαμε αυτή η συνάρτηση να είναι η Math.round που όλοι ξέρουμε και αγαπάμε?

Δεδομένου του τρόπου που η javascript χειρίζεται τις συναρτήσεις (ουσιαστικά μια συνάρτηση είναι ένας ειδικός τύπος μεταβλητής), κάτι τέτοιο είναι εφικτό. Διαβάστε την συνέχεια του άρθρου »


Σχόλια : Leave a Comment »
Ετικέτες: , , ,
Κατηγορίες : Javascript, Web development

Scrolling ενός iframe με mousewheel σε IE

29 09 2008

Ο Firefox έχει ένα ιδιαίτερα χρήσιμο feature, από αυτά που φαίνονται τόσο φυσικά που δεν τα παρατηρείς καν, εκτός αν σταματήσουν να υπάρχουν: Επιτρέπει να κάνεις scrolling ενός iframe με τη ρόδα του ποντικιού.

Πρόσφατα κλήθηκα να σχεδιάσω ένα Windows Vista sidebar gadget. Όσοι δεν το ξέρετε, σίγουρα θα το υποψιάζεστε: Τα Windows Vista Sidebar Gadgets χρησιμοποιούν τη “μηχανή” του IE. Γνώριζα από παλαιότερη παρατήρηση ότι ο IE δεν διαθέτει αυτό το τόσο χρήσιμο feature, αλλά συνειδητοποίησα πόσο πραγματικά ενοχλητική είναι η απουσία του, καθώς ανέπτυσσα το gadget. Κάτι έπρεπε να κάνω. Αφού δεν υπήρχε το feature, θα το δημιουργούσα εγώ. Διαβάστε την συνέχεια του άρθρου »


Σχόλια : Leave a Comment »
Ετικέτες: , , , ,
Κατηγορίες : Javascript, Web development

CSS.getElementsBySelector() v1.0.3

31 08 2008

Μια μικρή ενημέρωση ότι το μικρούλι js library μου έφτασε αισίως στην έκδοση 1.0.3 με τη διόρθωση ενός σημαντικού bug.

Θα το βρείτε στο γνωστό μέρος. ;)


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

CSS.getElementsBySelector() v1.0.2

22 08 2008

Μια μικρή ενημέρωση ότι το μικρούλι js library μου έφτασε αισίως στην έκδοση 1.0.2 με 3 νέους υποστηριζόμενους selectors, 2 νέες functions και ένα bugfix.

Θα το βρείτε στο γνωστό μέρος. ;)


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

min-height:100% στο body: Μια javascript λύση

1 08 2008

To <body> είναι ουσιαστικά άλλο ένα block level element, με τα θετικά και τα αρνητικά του. Ενίοτε αυτό μπορεί να μας προκαλέσει πρόβλημα, όπως μου συνέβη πρόσφατα.

Στο site που δουλεύω, έχω ρθυμίσει το html και το body να έχουν διαφορετικά (ημιδιαφανή) φόντα, ώστε συνδυαστικά να δίνουν το εφέ φόντου που θέλω (αφού τα CSS3 multiple backgrounds αργούν ακόμα…). Οι περισσότερες σελίδες του site έχουν μεγαλύτερο ύψος από το viewport του browser, ακόμα και σε μεγάλες αναλύσεις, οπότε δεν μου είχε τύχει περίπτωση να είναι το περιεχόμενο μικρότερο από το viewport, μέχρι που ασχολήθηκα με τα μηνύματα λάθους που εμφανίζονται αν κάτι πάει στραβά. Ο σχεδιασμός που αποφάσισα ήταν τέτοιος, που τα περισσότερα οδηγούσαν το body να έχει μικρότερο ύψος από το viewport, ακόμα και στο laptop μου που έχει ανάλυση μόλις 1280×800. Το αποτέλεσμα ήταν να “κόβεται” απότομα το φόντο του body και να φαίνεται άσχημο.

Η πρώτη μου σκέψη ήταν να δώσω ένα height:100% σε html και body. Το αποτέλεσμα ήταν να φτιάξει μεν στις περιπτώσεις που το ύψος του περιεχομένου ήταν μικρότερο από το viewport και να χαλάσει στις υπόλοιπες (που αποτελούσαν και την πλειοψηφία). Η δεύτερη σκέψη μου ήταν να αλλάξω το height:100% με min-height:100%. Τίποτα, σαν να μην υπήρχε. Η τρίτη μου σκέψη ήταν να συμβουλευτώ τον παλιόφιλο γούγλη :P . Μετά από πολλαπλές αναζητήσεις κατέληξα ότι λύση δεν υπάρχει, τουλάχιστον χωρίς tables και χωρίς javascript, οπότε το πήρα απόφαση ότι θα χρειαζόταν να γράψω λίγη javascript για να λυθεί. Διαβάστε την συνέχεια του άρθρου »


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web design

CSS.getElementsBySelector() v1.0.1

30 07 2008

Καταρχάς ντοντ γουόρι, δεν πρόκειται να μετατραπεί το blog σε dev blog του εν λόγω script επειδή 2 συνεχόμενα ποστ το αφορούν :P

Απλά δεν έτυχε να βρω κάτι άλλο αξιόλογο να γράψω στο ενδιάμεσο και να έχω και όρεξη να γράψω για αυτό :P .

Λοιπόν, ενημερώνω if anyone is interested ότι έκανα ένα “update” στο εν λόγω script, διορθώνοντας 2 bugs και προσθέτοντας 2 νέες μεθόδους (CSS.setEvent() και Array.prototype.iterate()). Θα το βρείτε στη σελιδούλα του.

Και ένα trackback για όσους παρακολουθούν ή θα παρακολουθήσουν στο μέλλον μόνο το προηγούμενο ποστ (λέμε τώρα): trackback

PS: Προσωπικά πάντως, οι μέρες που αφιέρωσα να το γράψω έχουν ήδη αποδώσει, μιας και έκανε τη δουλειά μου πολύ ευκολότερη. Ακόμα και κανείς άλλος να μην το χρησιμοποιήσει, έχει εκπληρώσει το σκοπό του. :)


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

getElementsByCSSSelector() and more…

21 07 2008

H JavaScript διαθέτει τις ενσωματωμένες μεθόδους getElementById() και getElementsByTagName() (και σε κάποιους browsers επίσης την getElementsByClassName()). Παρόλο που οι μέθδοδοι αυτές επαρκούν για τις περισσότερες καθημερινές απαιτήσεις των scripts σας, ορισμένες φορές χρειάζεται να επιλέξετε στοιχεία χρησιμοποιώντας πιο εξειδικευμένα κριτήρια. Οι επιλογείς CSS προσφέρουν αυτή τη δύναμη, αλλά η JavaScript δεν διαθέτει μέθοδο getElementsByCSSSelector().

Μιας και είχα παρατηρήσει να χρειάζομαι συχνότατα κάτι τέτοιο, τις τελευταίες ημέρες τις αφιέρωσα γράφοντας το και ευελπιστώ να μου γλιτώσει περισσότερες εργατώρες από αυτές που αφιέρωσα για να το γράψω. Μη με ρωτήσετε γιατί δεν χρησιμοποίησα κάποιο framework: Αφενός μεν δεν ήθελα να φορτώσω ολόκληρο επιπλέον framework μόνο και μόνο για αυτό, αφετέρου μου αρέσει να γνωρίζω τι κώδικας υπάρχει στη σελίδα, όσο είναι εφικτό.

Μαζί με αυτό θα βρείτε και διάφορες ακόμα βοηθητικές συναρτήσεις που θεωρώ αρκετά πιθανό να σας χρησιμεύσουν. Έχω φτιάξει μια μικρή σελιδούλα για την παρουσίαση του, την οποία θα βρείτε στο http://code.e-steki.gr/cssselect/ . Θα με ενδιέφερε να μάθω τις σκέψεις για αυτό, όποιες και να είναι. :-)

ΥΓ: Ο τίτλος είναι ελαφρώς παραπλανητικός: Η συνάρτηση μου δεν ονομάζεται getElementsByCSSSelector() αλλά CSS.getElementsBySelector().


Σχόλια : 1 σχόλιο »
Ετικέτες: , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

Εκτέλεση διαφορετικών συναρτήσεων σε loop (javascript)

27 06 2008

Έστω ότι έχετε μια λίστα από checkboxes. Όταν πατηθεί ένα κουμπί στη φόρμα σας, θα πρέπει να εκτελέσετε μια συνάρτηση για το κάθε κουμπί. Πώς θα το κάνετε;

Και για να γίνω πιο συγκεκριμένη, έστω ότι το markup σας ήταν το παρακάτω:

<fieldset id="optionsFieldset">
	<legend>Επιλογές μετατροπής</legend>
	<label><input type="checkbox" id="deCapitalize" checked="checked" tabindex="3" />Πεζοποίηση</label>
	<label><input type="checkbox" id="convertGreeklish" tabindex="4" />Στοιχειώδης μετατροπή από Greeklish</label>
	<label><input type="checkbox" id="fixAbbreviations" checked="checked" tabindex="5" />Διόρθωση συντομεύσεων</label>
	<label><input type="checkbox" id="accentuate" checked="checked" tabindex="6" />Τονισμός</label>
	<label><input type="checkbox" id="fixPunctuation" checked="checked" tabindex="7" />Διόρθωση σημείων στίξης</label>
</fieldset>

Κάθε ένα από αυτά τα checkboxes επιθυμείτε να εκτελεί μια συγκεκριμένη συνάρτηση αν είναι τσεκαρισμένο και ο χρήστης πατήσει το κουμπί “Μετατροπή” Διαβάστε την συνέχεια του άρθρου »


Σχόλια : Leave a Comment »
Ετικέτες: , ,
Κατηγορίες : Javascript

Πολλαπλή δυναμική εισαγωγή και εκτέλεση script tags

14 06 2008

Τις προάλλες αντιμετώπισα ένα ιδιαίτερα ενοχλητικό και εκνευριστικό πρόβλημα που με απασχόλησε για 2 μέρες μέχρι που μόλις πριν λίγο το έλυσα και αποφάσισα να μοιραστώ μαζί σας τη λύση στην οποία κατέληξα.

Ας πάρουμε τα πράγματα από την αρχή. Το πρόβλημα ήταν το εξής: Σε ένα div εντός μιας σελίδας, φόρτωνα με AJAX κάποιο κομμάτι HTML από άλλη σελίδα του site (το ποιό ακριβώς εξαρτείτο από την επιλογή του χρήστη). Το κομμάτι HTML αυτό, ενίοτε περιείχε και <script> tags, είτε προς εξωτερικό js αρχείο, είτε inline, είτε διάφορων ειδών, τα οποία έπρεπε να τρέξουν με τη σειρά που υπήρχαν στην HTML για να λειτουργεί σωστά. Αρχικά σκέφτηκα να τα παίρνω με τη σειρά και να τα εισάγω με DOM manipulation στο head της σελίδας, λύση που προτεινόταν σε αρκετά σχετικά άρθρα. Δεν είχα υπολογίσει όμως κάτι: Ο browser δεν θα καθόταν να περιμένει να φορτώσει το καθένα τους, όπως όταν φορτώνει μια σελίδα. Θα μπορούσα να περιγράψω τη συμπεριφορά του σαν τη συμπεριφορά του ΙΕ στην ιδιότητα defer ενός script, μόνο που το έκαναν όλοι οι browsers, χωρίς να υπάρχει καμία ιδιότητα defer στα εν λόγω! Διαβάστε την συνέχεια του άρθρου »


Σχόλια : 2 σχόλια »
Ετικέτες: , , , , , ,
Κατηγορίες : Javascript

« Προηγούμενες Καταχωρίσεις