Option selected κάτω από το μενού

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 12 Ιουν 2013 20:35

Υπάρχει κάποιος τρόπος να βάλουμε πάνω από το option selected ένα div?
Με z-index δεν λειτουργεί, έχω ψάξει αρκετά στο Net αλλά δεν βρήκα άκρη.
Συνημμένα
image.jpg
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Option selected κάτω από το μενού

Δημοσίευση από alou » 12 Ιουν 2013 21:07

Μια χαρά θα λειτουργήσει το z-index αρκεί να είναι και positioned (relative ή absolute). Τσέκαρε και το positioning / z-index των container του select και του μενού.

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 13 Ιουν 2013 15:11

Το έχω δοκιμάσει αλλά δεν το βλέπω να δουλεύει εκτος αν κάτι κάνω λάθος.
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Option selected κάτω από το μενού

Δημοσίευση από alou » 13 Ιουν 2013 15:47

Έχεις δίκιο και μάλλον διαφέρουν ανά browser οι συμπεριφορές:
You can add OPTION elements only to a SELECT element that is located in the same window where the OPTION elements are created. Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.
http://docs.webplatform.org/wiki/html/elements/option

Που σημαίνει όμως ότι ίσως λύνεται το πρόβλημα με javascript (?) αλλά δεν έχω καταλάβει πότε δημιουργείται το πρόβλημά σου, στο select focus ή στο menu hover? θες πάντα να είναι ανοιχτό το submenu και να είναι πάνω από το select options?

edit:
Το πιο σωστό μάλλον θα ήταν να κλείνεις τα select όταν γίνεται hover στο μενού:

Κώδικας: Επιλογή όλων

$('.menu').hover(function(){ $('select').blur(); })

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 14 Ιουν 2013 11:16

Δες εδώ...
http://www.mixhost.gr/test/test.htm

Image: http://www.mixhost.gr/test/image.jpg

Όταν έχω ανοιχτό το select και κάνω mouse over την εικόνα εμφανίζεται κάτω από τα option.
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Option selected κάτω από το μενού

Δημοσίευση από alou » 14 Ιουν 2013 13:23

Οπότε σε hover της εικόνας, κλείνεις το select

$('.zoomContainer').hover(function(){ $('.product_descr select').blur(); })

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 14 Ιουν 2013 14:23

Σε ευχαριστώ πολύ alou να είσαι καλά!

Μπορείς να μου πεις σε ποια γραμμή στο html μπαίνει?
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Option selected κάτω από το μενού

Δημοσίευση από alou » 14 Ιουν 2013 15:49

Κάπου στο head, αφού έχεις φορτώσει jquery, βάλε αυτό:

Κώδικας: Επιλογή όλων

<script type="text/javascript">
		jQuery&#40;document&#41;.ready&#40;function&#40;$&#41; &#123;
			$&#40;'.zoomContainer'&#41;.hover&#40;function&#40;&#41;&#123; $&#40;'.product_descr select'&#41;.blur&#40;&#41;; &#125;&#41;
		&#125;&#41;
		</script>

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 14 Ιουν 2013 16:04

Δεν δουλεύει...

http://www.mixhost.gr/test/test.htm :(
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Option selected κάτω από το μενού

Δημοσίευση από alou » 14 Ιουν 2013 16:51

Ήταν λίγο πιο περίπλοκο γιατί το .zoomContainer φτιάχνεται μετά το dom ready με javascript.

Δοκίμασέ το έτσι:

Κώδικας: Επιλογή όλων

<script type="text/javascript"> 
		  $&#40;document&#41;.on&#40;
		 	&#123; 
				mouseenter&#58; function&#40;&#41;&#123; $&#40;'select'&#41;.blur&#40;&#41;; &#125; , mouseleave&#58; function&#40;&#41;&#123;  &#125;
		 	&#125;, 
			
			'.zoomContainer'&#41;
         //$&#40;'img'&#41;.hover&#40;function&#40;&#41;&#123; $&#40;'select'&#41;.blur&#40;&#41;; &#125;&#41;
		 
      </script>

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 14 Ιουν 2013 17:06

Σε ευχαριστώ πολύ, δουλεύει με FF και IE αλλά όχι με Chrome. Δεν πειράζει μην παιδεύεσαι άλλο!

Thank you my friend
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Option selected κάτω από το μενού

Δημοσίευση από alou » 14 Ιουν 2013 18:08

ΟΚ τίποτα αλλά περίεργο μου φαίνεται να μη δουλεύει σε chrome, μήπως απλά ήταν επειδή κασάρει και θέλει καθάρισμα?

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Option selected κάτω από το μενού

Δημοσίευση από DrJim » 14 Ιουν 2013 20:10

Όχι δεν φταίει η cache γιατί μπήκα και με ανώνυμη περιήγηση! Δεν πειράζει μην σε απασχολεί!
Σε ευχαριστώ και πάλι!
http://www.travelpassion.gr - Travel News Online

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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