Javascript ερώτηση

[alex2005]

Καλησπέρα παιδιά.

 

Θέλω όταν ο χρήστης κάνει submit μία φόρμα να πετάγεται ένα jscript παραθυράκι και να "απενεργοποιείται" το περιεχόμενο της σελίδας από πίσω.

Αυτό που εννοώ είναι να γεμίζει όλη η οθόνη από πίσω με κάποιο semitransparent χρώμα.

 

Ελπίζω να καταλάβατε τι εννοώ γιατί δεν μπορώ να βρω τις κατάλληλες λέξεις να το περιγράψω....για αυτό δεν μπορώ να το βρω και στο google.

 

Παράθυρο με progress bar έχω φτιάξει.

Επίσης η υποβολή της φόρμας γίνεται με χρήση AJAX.

 

Οπότε το ερώτημα είναι πως κάνω την υπόλοιπη οθόνη ανενεργή.

 

Ευχαριστώ παιδιά

[alex2005]

Υπέροχα....νομίζω πως κατάφερα να το υλοποιήσω κάνοντας μία πατέντα.

 

Αλλά ακόμα θα με ενδιέφερε να μάθω αν υπάρχει κάποιος πιο στάνταρ τρόπος από αυτόν που μόλις έκανα.

Κυρίως για λόγους compatibility με παλαιότερους browser.

[Dikemou]

Αν κατάλαβα καλά, το εφέ που θέλεις το υλοποιούν τελευταία πολύ κάποια frameworks για προβολή εικόνων κτλ... Τσέκαρε για παράδειγμα αυτά:

 

http://mjijackson.com/shadowbox/

http://vikjavev.no/highslide/

 

από το sourcecode τους ίσως βγάλεις κάποια άκρη για το εφέ μόνο (να ξεφορτωθείς όλο το υπόλοιπο functionality δηλαδή)

[alex2005]

Dikemou κάτι τέτοιο θα ήθελα....μόνο που αυτά που μου έστειλες είναι κάτι πολύ παραπάνω από αυτό που χρειάζομαι.

 

Θα κάτσω να σκαλίσω λίγο τον κώδικα να δω που γίνεται αυτό το εφέ που θέλω,για να καταλάβω αν ο τρόπος μου είναι μπούρδα ή όχι.

 

Ευχαριστώ

[Dikemou]

Ωραία

 

Επίσης δες πιο απλές περιπτώσεις εδώ, εδώ κι εδώ.

 

 

Γενικά έψαξα για fading background javascript

κι αυτά ήταν απ' τα πρώτα αποτελέσματα. Ίσως έχει κι άλλα καλύτερα πιο κάτω...

[alex2005]

Τώρα μου τα χάλασες λίγο.

 

Δεν ψάχνω για fading background ακριβώς.

 

Αυτό που με ενδιαφέρει δεν είναι το εφέ....αλλά η ουσία του πράγματος.

Και αυτή είναι ο χρήστης να μην μπορεί να πειράξει τίποτα στην φόρμα όσο αυτή γίνεται submit.

 

Και αυτό θεώρησα πως είναι καλύτερο να γίνεται βάζοντας ένα jscript παράθυρο που θα δείχνει το progress της υποβολής και τίποτα άλλο....όλα τα άλλα θέλω να είναι μη editable.

 

Για να σου δώσω να καταλάβεις....να η λύση που έκανα.

 

Έφτιαξα ένα div το οποίο πιάνει όλο την οθόνη και έχει σαν background ένα semi transparent image.Δηλαδή με opacity 60% για παράδειγμα.

 

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

Και πάνω από αυτό έχω και το παραθυράκι μου με το progress bar.

 

Ο ενδοιασμός μου είναι ότι στο παρελθόν είχα προσπαθήσει πάλι να κάνω κάτι με opacity σε εικόνες αλλά δεν δούλευε....δυστυχώς δεν θυμάμαι σε ποιον browser.Αλλά τώρα το δοκίμασα σε FF,IE,Opera και δουλεύει μία χαρά.

 

Οπότε αυτή είναι και η ουσία της ερώτησης μου....γιατί δεν ξέρω τι γίνεται με compatibility με άλλους Browser....αν δηλαδή υποστηρίζουν opacity σε png images.

 

Και κατ' επέκταση ψάχνω να βρω ποια είναι η στάνταρ λύση που χρησιμοποιούν τα framework αυτά....έτσι ώστε να είμαι σίγουρος ότι δεν θα υπάρξει πρόβλημα με άλλους browser.

[alex2005]

Επίσης να κάνω μία παρατήρηση.

 

Ο τίτλος μου ίσως είναι ατυχέστατος καθώς δεν πρόκειται για jscript απαραιτήτως αλλά μπορεί να είναι και κάποια λύση με css.

 

Όπως για παράδειγμα....συνεχώς αναφέρω "jscript" παράθυρο....που στην ουσία είναι ένα div που απλά το εμφανίζω και το εξαφανίζω με jscript.

 

Αυτά

[Dikemou]

Μάστα κατάλαβα... δεν μπορώ να σε βοηθήσω περισσότερο μιας και δεν έχω κάνει κάτι τέτοιο στο παρελθόν.

 

Αυτό που κάνω σε αντιστοιχες περιπτώσεις είναι με το onsubmit τηε φόρμας / onclick του κουμπιού, να κάνω disable όλα τα control της φόρμας. Άμα λάχει τους αλλάζω και το css class με κάτι που να φαίνεται ακόμα πιο έντονα ότι είναι disabled, π.χ. γκρίζα backgrounds. Και βέβαια εμφανίζω κι ένα div ή span με το "loading" graphic. Αν κάνω κι έλεγχο στη φόρμα είτε server είτε client side, κι αν κάποιο πεδίο δεν είναι (σωστά) συμπληρωμένο, τα επαναφέρω κτλ...

 

Το PNG opacity παίζει και σε IE < 7;; Εντύπωση μου κάνει γιατί δεν παίζει καν το transparency... Να μου πεις άλλο το ένα άλλο τ' αλλο... oh well

[alex2005]

OK Dikemou ευχαριστώ πολύ.

 

Κανένας άλλος για το θέμα compatibility ή γενικότερα για κάποια άλλη λύση?

[QSpec]

Όσον αφορά την διαφάνεια των png είχα κι εγώ ένα προβληματάκι παλαιότερα (με τον IE<7 βέβαια), το οποίο με βοήθησαν να το λύσω οι insomniacs. Παραθέτω το thread και ελπίζω να βοηθήσει: http://www.insomnia.gr/forum/showthread.php?t=227742&highlight=%EA%E1%F4%E1%F1%E1%EC%DD%ED%EF%F2

[alex2005]

Μάλιστα....καλά το θυμόμουν λοιπόν ότι παίζει αυτό το πρόβλημα.

 

ΑΑΑΧΧΧΧ αυτός ο ΙΕ.Από ότι βλέπω όμως παίζει σε όλους τους άλλους browser εκτός από τον ΙΕ<6 ε?

 

Το έχεις δοκιμάσει σε browser άλλων λειτουργικών?

πχ. σε Konqueror?

 

Αν ναι τότε από την στιγμή που δεν είναι και απολύτως απαραίτητο το εφέ αυτό στην εφαρμογή μου μπορώ να ακολουθήσω την ιδέα σου στο post σου.

 

Κι' όλα αυτά εξαιτίας του ΙΕ. Πφφ, αν ο χρήστης χρησιμοποιεί ΙΕ6 θα του βγάζω μήνυμα που να του λέει να τον πετάξει. Καταραμένη Microsoft...

 

:-)

 

Πέρα από την πλάκα...επειδή δεν είναι δική μου η εφαρμογή και είναι επαγγελματική,να σου θέσω το ερώτημα:

 

Ποιες από τις 3 λύσεις που σου πρότειναν οι insomniacs χρησιμοποίησες και έλυσες το πρόβλημα?

Και λύθηκε οριστικά να υποθέσω ε?

[QSpec]

Έτυχε να δοκιμάσω την λύση του pOLoS πρώτα και αφού δούλεψε δεν δοκίμασα και τα άλλα.

http://www.twinhelix.com/css/iepngfix/

Εδώ θα βρεις ό,τι χρειαστείς.

 

Από browsers άλλων λειτουργικών μόνο στον Safari το δοκίμασα όπου φαινόταν χωρίς κανένα πρόβλημα. Δεν υπήρχε πρόβλημα ακόμα και στον Opera που τρέχει στο Wii!Το site στο οποίο το εφάρμοσα είναι το http://www.orac.gr (θεόβαρο, το ξέρω ), στα κουμπιά των επιλογών, μπορείς να το τσεκάρεις με διάφορους browsers.

 

Ναι, ορίστικά λύθηκε, απλά φαντάζομαι πως στα CSS του κάθε site το οποίο θέλω να έχει διάφανα png θα πρέπει να βάζω και το fix.

 

Edit: Διάβασα αυτό στην σελίδα με το fix "It will also not help IE4.0 and IE5.0, which don't include the necessary IE filter". Δεν το έχω δοκιμάσει σε αυτούς, καλύτερα να το ψάξεις λίγο.

[alex2005]

Μάλιστα δηλαδή αυτό το fix θα φτιάξει την κατάσταση μόνο σε έναν browser και σε μία συγκεκριμένη έκδοση του browser.

 

Τι να πω....

 

Μάλλον ή θα βγάλω τελείως το εφέ αυτό ή θα αποφασίσω να βγάλω κάποιο μήνυμα στους χρήστες IE<=6 στην homepage που να τους προειδοποιεί ότι ο browser τους είναι μπούρδα και κάποια πράγματα δεν θα δουλεύουν.

 

Ευχαριστώ πολύ για τις απαντήσεις σας παιδιά.

[StavrosD]

Συμπτωματικά αυτό το έκανα χτες για μια δική μου εφαρμογή.

Βάζεις αυτά που θες σε ένα div (έστω με id=div1) και φτιάχνεις και ένα άλλο div το οποίο πιάνει όλο το παράθυρο του explorer(έστω με id=div2).

 

Δίνεις στο div1 z-index μεγαλύτερο του div2 ώστε να είναι μιο μπροστά.

Το div2 το έχεις κρυμμένο και το εμφανίζεις όταν θες να κάνεις modal το div1.

Αν θες μπορείς να κάνεις το div2 ημιδιαφανές ή διαφανές, και επειδή θα είναι πιο μπροστά από τα υπόλοιπα elements της σελίδας θα λαμβάνει όλα τα event και θα είναι σαν να μην λειτουργούν τα πίσω του.

 

Όύτε png, ούτε gif, ούτε τίποτα άλλο. Με απλό CSS+Javascript (στο CSS για το div2 ορίζεις transparency + z-index για ευκολία) .

[alex2005]

Ναι αυτός είναι και ο τρόπος που το έκανα και εγώ αν δεις πιο πάνω.

 

Το ερώτημα είναι το transparency πως το ορίζεις?

Γιατί εγώ απλά έχω ένα background image με 70% opacity στο div2.

Πως αλλιώς γίνεται πετυχαίνεις το εφέ χωρίς image αλλά μόνο με css??

 

Ευχαριστώ που ξέθαψες το θέμα .