Images σε select lists?

PHP, ASP, Javascript, MySQL, WordPress, Joomla, phpBB, OpenSource λογισμικό.

Images σε select lists?

Δημοσίευσηαπό notis » 27.02.08, 11:01 am

Με αφορμη αυτο που μπορειτε να δειτε στο
http://mobile.deviantart.com/verification/
θελω να ρωτησω αν καποιος εχει βρει μια βατη (και μη copyrighted) λυση στο να εχουμε images σε select lists των φορμών μας.

Ο ανωτέρω τρόπος ειναι συνδυασμός advanced css & Javascript (Copyrighted απο το deviantart) και οσο αν προσπαθησα δεν μπορεσα να αποκωδικοποιησω την λογικη ωστε να φτασω σε ενα "δικο μου" αποτελεσμα...

Θα χαιρομουν αν καποιος απο σας εχει οδηγηθει σε καποια λυση...
Άβαταρ μέλους
notis
Master Admin
 
Posts: 3697
Εγγραφή: 23.02.04, 1:36 pm
Τοποθεσία: Corinth

Δημοσίευσηαπό mentos » 27.02.08, 12:09 pm

στην ουσία πρόκειται για ένα div με overflow (η scrollbar που εμφανίζεται) το οποίο σου δίνει την αίσθηση της λίστας. Το σημείο που λέει "Select your phone" κλπ είναι και αυτό ένα div με class που είναι ίδιο με το select. πχ άμα δεις όλα είναι images (http://s.deviantart.com/styles/down.png). Αυτό που κάνουν είναι το εξής..

με javascript όταν πατάς το "Select your phone" αλλάζουν τα class (και από inactive η λίστα φαίνεται active) και ταυτόχρονα κάνουν και visible το div με τα κινητά. Όταν κάνεις mouseover αλλάζει το background color και πάλι σου δίνει την αίσθηση της λίστας. Όταν κάνεις κλικ απλά περνάει το value/id του τηλεφώνου σε κάποιο hidden field και αυτό ήταν.

Για το overflow τσέκαρε εδω: http://www.quirksmode.org/css/overflow.html ;)

ελπίζω να βοήθησα :)
Άβαταρ μέλους
mentos
Senior Member
 
Posts: 748
Εγγραφή: 27.10.05, 5:32 pm
Τοποθεσία: Βύρωνας, Αθήνα

Δημοσίευσηαπό notis » 27.02.08, 12:54 pm

thanks mentos! :D
Επι της ουσιας τζιφος, αφου καταληγουμε πως ενα select list δεν μπορει να περιεχει images (εστω ενα bullet βρε αδερφε).
Άβαταρ μέλους
notis
Master Admin
 
Posts: 3697
Εγγραφή: 23.02.04, 1:36 pm
Τοποθεσία: Corinth

Δημοσίευσηαπό mentos » 27.02.08, 1:00 pm

yeap ένα select δεν μπορεί να περιέχει HTML Tags γενικότερα νομίζω... και εκεί μπαίνει το CSS :D
Άβαταρ μέλους
mentos
Senior Member
 
Posts: 748
Εγγραφή: 27.10.05, 5:32 pm
Τοποθεσία: Βύρωνας, Αθήνα

Δημοσίευσηαπό tsiger » 02.03.08, 11:11 pm

Premium WordPress themes cssigniter.com
Άβαταρ μέλους
tsiger
Member
 
Posts: 115
Εγγραφή: 05.07.06, 7:54 am
Τοποθεσία: SALONICA OBSERVATION CENTER

Δημοσίευσηαπό Michelle » 03.03.08, 1:57 am

mentos έγραψε:yeap ένα select δεν μπορεί να περιέχει HTML Tags γενικότερα νομίζω... και εκεί μπαίνει το CSS :D


Για τον Firefox...
Γιατί o IE sadly δεν εφαρμόζει ξεχωριστό css ανά <option> αλλά μόνο σε όλο το select. :( :( :(
Άβαταρ μέλους
Michelle
Old Member
 
Posts: 1610
Εγγραφή: 09.03.06, 12:29 pm
Τοποθεσία: Γλυφάδα

Δημοσίευσηαπό tsiger » 03.03.08, 1:03 pm

Γιατί o IE sadly δεν εφαρμόζει ξεχωριστό css ανά <option> αλλά μόνο σε όλο το select.


says who?

Κώδικας: Επιλογή όλων
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<style type="text/css">
.odd {
   background-color:#666666;
   }
   
.even {
   background-color:#FFFFFF;
   }
</style>
</head>

<body>
<select>
<option class="odd">row 1</option>
<option class="even">row 2</option>
<option class="odd">row3</option>
<option class="even">row 4</option>
</select>
</body>
</html>
Premium WordPress themes cssigniter.com
Άβαταρ μέλους
tsiger
Member
 
Posts: 115
Εγγραφή: 05.07.06, 7:54 am
Τοποθεσία: SALONICA OBSERVATION CENTER

Δημοσίευσηαπό Michelle » 03.03.08, 1:20 pm

Χααα, για δοκίμασε font-family ή border...
Άβαταρ μέλους
Michelle
Old Member
 
Posts: 1610
Εγγραφή: 09.03.06, 12:29 pm
Τοποθεσία: Γλυφάδα

Δημοσίευσηαπό tsiger » 03.03.08, 4:44 pm

είναι διαφορετικό να λέμε οτι δε δέχεται CSS απο οτι υπαρχει περιορισμός.

Παντως οπως και να εχει η EXT JS λύση παιζει μια χαρα, το format αποσυρεται πληρως απο browsers που δεν τη παλευουν με το script και ειναι πολυ ευελικτο.
Premium WordPress themes cssigniter.com
Άβαταρ μέλους
tsiger
Member
 
Posts: 115
Εγγραφή: 05.07.06, 7:54 am
Τοποθεσία: SALONICA OBSERVATION CENTER

Δημοσίευσηαπό tsiger » 03.03.08, 4:46 pm

For future reference παντως:

* IE can give a styled background color and text color, no more.
* Opera (8.01) can display the text color only.
* Firefox and Netscape can apply background color, text color, font-weight, (separation) border lines, and they can suppress the first (repeating) line with the default option.
Premium WordPress themes cssigniter.com
Άβαταρ μέλους
tsiger
Member
 
Posts: 115
Εγγραφή: 05.07.06, 7:54 am
Τοποθεσία: SALONICA OBSERVATION CENTER

Δημοσίευσηαπό Michelle » 03.03.08, 7:09 pm

tsiger έγραψε:είναι διαφορετικό να λέμε οτι δε δέχεται CSS απο οτι υπαρχει περιορισμός.


Απλώς "περιορισμό" το λες εσύ το ότι δεν δέχεται το ~98-99% των css properties?
Άβαταρ μέλους
Michelle
Old Member
 
Posts: 1610
Εγγραφή: 09.03.06, 12:29 pm
Τοποθεσία: Γλυφάδα

Δημοσίευσηαπό tsiger » 03.03.08, 8:25 pm

βρε δικιο εχεις για τον ΙΕ6 μιλαμε. για οτι χειροτερο κυκλοφορει μεσα σε αυτα τα καλωδια. απλα εστω κι αυτο που δεχεται ε, κατι ειναι. και γι αυτο προτεινω και την λυση της Ext Js.

Και για τους fan της jQuery http://www.whitespace-creative.com/jquery/jNice/ :D
Premium WordPress themes cssigniter.com
Άβαταρ μέλους
tsiger
Member
 
Posts: 115
Εγγραφή: 05.07.06, 7:54 am
Τοποθεσία: SALONICA OBSERVATION CENTER

Δημοσίευσηαπό Michelle » 03.03.08, 8:32 pm

tsiger έγραψε:βρε δικιο εχεις για τον ΙΕ6 μιλαμε. για οτι χειροτερο κυκλοφορει μεσα σε αυτα τα καλωδια. απλα εστω κι αυτο που δεχεται ε, κατι ειναι. και γι αυτο προτεινω και την λυση της Ext Js.

Και για τους fan της jQuery http://www.whitespace-creative.com/jquery/jNice/ :D


Εγώ για τον ΙΕ7 μίλαγα :(
Αυτό είναι το θλιβερό...
Αν επρόκειτο για τον 6, σιγά τα ωά. :(
Άβαταρ μέλους
Michelle
Old Member
 
Posts: 1610
Εγγραφή: 09.03.06, 12:29 pm
Τοποθεσία: Γλυφάδα

Δημοσίευσηαπό notis » 03.03.08, 8:53 pm

Μηπως ειστε πλεον off topic? :P
Άβαταρ μέλους
notis
Master Admin
 
Posts: 3697
Εγγραφή: 23.02.04, 1:36 pm
Τοποθεσία: Corinth

Δημοσίευσηαπό lollypop » 03.03.08, 10:48 pm

May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό tsiger » 04.03.08, 11:06 am

Κώδικας: Επιλογή όλων
Μηπως ειστε πλεον off topic?


Μεσω της συζητησης προεκυψαν τοσα links :D
Premium WordPress themes cssigniter.com
Άβαταρ μέλους
tsiger
Member
 
Posts: 115
Εγγραφή: 05.07.06, 7:54 am
Τοποθεσία: SALONICA OBSERVATION CENTER


Επιστροφή στο II.III Προγραμματισμός + Τεχνολογία ανοιχτού κώδικα

Μέλη σε σύνδεση

Μέλη σε αυτή την Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 3 επισκέπτες

Visual Communication Designers Club

Το Visual Communication Designers Club, το μεγαλύτερο Ελληνικό online design forum, αποτελεί μια Ελληνική κοινότητα σχεδιαστών οπτικής επικοινωνίας, υπό την ευρύτερη έννοια του όρου, θέλοντας να συμπεριλάβει στα μέλη της κάθε ειδικότητα και βαθμίδα όσων σπουδάζουν ή εργάζονται στον χώρο της επικοινωνίας, έντυπης, διαδικτυακής, τρισδιάστατης ή εφαρμογών πολυμέσων