04Sep
Πρίν απο λίγο γύρισα απο το τυπογράφο και καθώς περίμενα να έρθεις μιας και είχε πεταχτεί για δουλειές πάνω στο γραφείο του βλέπω το “Γραφίαστας και Web Design”, ένα περιοδικάκι που πάντα γούσταρα γιατί έχει μέγαλο εύρος θεματολογίας. Έκοψα να το παίρνω πρίν απο περίπου ένα χρόνο μιας και βρήκα κάποια άλλα περιοδικά που απλά γούσταρα περισσότερο.
Το πιάνω λοιπόν στα χέρια μου, βλέπω “tutorial photoshop: σχεδιασμός αφίσας”. Το διαβάζω μια, το διαβάζω δυο, ψάχνω για references, κοιτάω ότι ασχολήθηκαν 3 άτομα με το θέμα αυτό και είμαι έτοιμος να πάθω εγκεφαλικό. Αναφέρομαι στο Τεύχος 48 και για όσους δε το έχετε, κάντε μια βόλτα και πάρτε το διαβάστε το συγκεκριμένο tutorial και μετά δείτε αυτό και αυτό.
Τι να πω, τουλάχιστον ένα credit στους δημιουργους. Για όνομα του θεού δηλαδή.
01Sep
Σε περίπτωση που χρησιμοποιείτε κάποιο script για να πραγματοποιήσετε μια ψηφοφορία στο site σας, μπορείτε τα αποτελέσματα να τα εμφανίσετε μέσα σε ένα απλό UL tag. Δε θα μπώ στη διαδικασία να αναφέρω πως φτιάχνουμε ένα poll script μιας και κυκλοφορούν χιλιάδες. Αυτό που θα κάνουμε εμείς είναι από τη στιγμή που φέραμε τα αποτελέσματα στο site μας να τα εμφανίσουμε χρησιμοποιώντας ένα απλό UL tag και μια απλή .gif εικόνα.
Με άλλα λόγια θα κάνουμε αυτό
H λίστα UL που θα διαμορφώσουμε θα έχει την εξής μορφή:
Τι θα κάνουμε. Δείτε τον κώδικα και τα σχόλια του. Είναι πολύ απλό:
JAVASCRIPT:
-
$(document).ready(function(){
-
// για κάθε LI tag που θα βρείς κάνε τα εξής:
-
$('li').each(function(index){
-
//κρύψε το span. Θα το εμφανίσουμε αργότερα
-
$(this).find('span').hide();
-
//πάρε την τιμή που έχει μέσα του το span tag
-
var percentage = $(this).find('span').html();
-
-
//αφαίρεσε απο την παραπάνω τιμή το 100.
-
//θα μας δώσει ένα αρνητικό αριθμό ο οποίος θα χρησιμοποιηθει
-
// στο background-position του LI tag για να τοποθετήσουμε
-
// το γραφικό στη θέση που πρέπει
-
var actual = percentage - 100 + "px";
-
-
// βάλε για background sto LI tag το bar.gif
-
$(this).css("background-image","url(bar.gif)");
-
-
// η θέση του
-
$(this).css("background-position",actual);
-
-
// να επαναλαμβάνεται στον κάθετο άξονα
-
$(this).css("background-repeat","repeat-y");
-
-
// βάλε και ένα % χαρακτήρα μετά το ποσοστό.
-
$(this).find('span').append("%");
-
-
-
// στο hover εμφάνισε και το span που κρύψαμε παραπάνω
-
// ή κρύψτο, αναλόγως.
-
$(this).hover(function() {
-
$(this).find('span').slideDown("fast");
-
}, function() {
-
$(this).find('span').slideUp("fast");
-
});
-
});
-
})
Μπέρδεμα; Δε νομίζω. Όλο το παιχνίδι παίζεται με το background-position property όπου του περνάμε για τιμή το αποτέλεσμα της αφαίρεσης του 100 από το ποσοστό που βρίσκεται μέσα σε κάθε LI Tag. Με άλλα λόγια αυτός είναι ο αριθμός των pixels που πρέπει να "σπρώξουμε" αριστέρα το .gif αρχειάκι μας για να μας δείξει το ποσοστό. Αν π.χ το ποσοστό ειναι 80 τότε πρέπει να "σπρώξουμε" το gif 20 pixels αριστερα για να φανεί το "80%".
Όπως και να έχει κατεβάστε τα αρχεία που χρειάζεται και παίξτε μαζί του και θα το πιάσετε αμέσως. Είναι εύκολο.
29Aug
Το έχετε δεί σε πολλές φόρμες εγγραφής. Πρώτα μας ζητάνε το password και μετά μια επιβεβαίωση του. Ο συγκεκριμένος έλεγχος πρέπει να γίνει με javascript και με κάποιο τρόπο καλό είναι να ενημέρωνουμε το χρήστη κατα τη διάρκεια πληκτρολόγησης της επιβεβαίωσης του password οτι όλα πήγανε καλά (έγραψες το ίδιο password, ή όχι (τα σκάτωσες σε κάτι τόσο απλό).
Η ιδέα έχει ως εξής. Όσο ο μάγκας γράφει το password confirmation βάλε ένα κόκκινο πλαίσιο μέχρι να ταιριάξει με το password και κάντο πράσινο μόλις γίνει το match.
Η φόρμα μας:
HTML:
-
-
-
<label for="pass">Password
</label>
-
<input type="password" name="pass" id="pass" />
-
<label for="passconf">Confirm password
</label>
-
<input type="password" name="passconf" id="passconf">
-
</form>
-
</div>
Και ο κώδικας javascript:
JAVASCRIPT:
-
$('#passconf').keyup(
-
function()
-
{
-
var password = $('#pass').attr("value");
-
var passconf = $(this).attr("value");
-
if (password == passconf) {
-
$(this).removeClass("nomatch");
-
$(this).addClass("match");
-
} else {
-
$(this).removeClass("match");
-
$(this).addClass("nomatch");
-
}
-
});
-
});
Σε απλά ελληνικά γραμμή γραμμή:
Όταν πατήσει ο μάγκας πλήκτρο μέσα στο input με id passconf [$('#passconf').keyup()] πάρε το password από το πεδίο με id pass και ρίχτο μέσα σε μια μεταβλητή με το όνομα password [var password = $('#pass').attr("value");]. Επίσης φτιάξε μια μεταβλητή με το όνομα passconf και ρίξε εκει μέσα τους χαρακτήρες που γράφει στο πεδίο με id passconf [var passconf = $(this).attr("value");]. Μετά τσέκαρε [if] αν τα 2 πεδία ταιριάζουν. Αν ναι βάλε στο πεδίο passconf τo CSS Class match και βγάλε το CSS Class nomatch, αν όχι κάνε το αντίστροφο. Απλό ε;
CSS Classes
CSS:
-
.match {
-
border: solid 3px #0c0;
-
}
-
.nomatch {
-
border: solid 3px red;
-
}
Ορίστε και το παράδειγμα.
26Aug
Αναρωτιέμαι εδώ και καιρό. Μου αρέσουν δε λέω, είχα κάποτε (όχι για πολύ καιρό, στην Αγγλία συγκεκριμένα μιας και μου ανοίξαν το σπίτι και μου πήραν και τα εσώρουχα (be kind)) και ήμουν πολύ ευχαριστημένος. Από την άλλη ρε παιδί μου, ξέρω γώ, τόσα χρόνια με τα pc-ακια, εκτός από 2 - 3 προβλήματα όλα αυτά που διαβάζω κατά καιρούς σε περιοδικά για κάτι παραμυθένια προβλήματα, μένουν εκεί. Στα περιοδικά. Δεν έχω πάθει κάτι τόσο σοβαρό που να πω "γαμώ το φελέκι μου και το Pc μου".
Και μιλάμε για αρκετά χρόνια. Στην αρχή με το καψερό το DOS, μετα τα 3.1 , NT και πάει λέγοντας. Όλα πάντα δούλευαν ρολόι. Από την άλλη βλέπω μερικές εφαρμογές Mac και μου τρέχουν τα σάλια. Θα μου πείς την ομορφιά κοιτάς; Τη δουλεία σου δε τη κάνεις;
Μωρέ τη κάνω αλλά όποτε κάθομαι σε Mac, κάτι με φτιάχνει. Ίσως είναι το διαφορετικό. Ίσως και όχι. Ανακατεύομαι με πολλά πράγματα που βλέπω πως στο Mac γίνονται πιο γρήγορα. Γράφω μουσική, ασχολούμαι με video editing και όπου πάω και όπου γυρίσω, βλέπω Mac.
Να πάρω ένα λες;
22Aug
Γειά χαρά σε όλους. Μετά από αυτό το "break" και πάλι μαζί. Βασικά δεν ήταν break μιας και εκτός από μερικά μπανάκια έπαιξε τρελή δουλειά. Όπως και να έχει είμαι στην ευχάριστη θέση να σας παρουσιάσω το νέο μου blog που ακούει στο όνομα webtoolkit4.me.
Πρόκειται για ένα blog με links σε resources που αφορούν web designers και web developers. Το ξεκίνησα γιατί ρίχνω τρελό ψάξιμο καθημερινά όχι μαμακίες και ενώ παρακολουθώ κάποια αρκετά μεγάλα blogs με το θέμα διαπιστώνω ότι το έχω ρε παιδί μου. Βρίσκω πράγματα γρήγορα και εύκολα. Οπότε είπα να τα μοιραστώ. Το webtoolkit4.me μιλάει Αγγλικά γιατί βλέπω μέσω του portraitofageek.com (που δε θα πάψει να ανανεώνεται, ίσα ίσα το περιμένει καλή χρονιά) ότι εδώ στο Ελλάντα ρε παιδί μου τα ξέρουμε όλα οπότε δεν υπάρχει ανάγκη για τέτοιο site.
Μιας και μόνο ενός έτους ως blogger και χαίρομαι με τέτοια πράγματα ακόμα,θα ήθελα να μοιραστώ και μερικά στατιστικά του webtoolkit4.me έτσι για να χαρείτε και εσείς. Στις 15 μέρες λειτουργίας λοιπόν, έχει γύρω στα 2.500 uniques καθημερινά από προχθές και περίπου 8 - 10 RSS subscribers καθημερινά. Not bad hey?
Όπως και να έχει σας καλώ φιλαράκια μου καλά, να έχετε το νου σας και απο'κεί μεριά μιας και θα το παίξω σε διπλό ταμπλό πλέον. Μου χεχε!
Σχόλια ( 6 )
