la verità sui Flip 3d ?

[stardom]

up

[Experiment8]

Ciao Stardom,

perdonami ma ho avuto degli impegni e non ho potuto studiare la cosa approfonditamente, conto stasera di dargli un'occhiata per capire come fare.

A presto

[stardom]

'sera Experiment, non è che per caso sei riuscito a capire dov'è il problema? Io non so cavarmela con javascript, senza l'aiuto della community non so che strada prendere... grazie

[Experiment8]

Wei ciao,

si scusa il ritardo ma tra mille cose... comunque ho messo giù un altro codice:

$(document).ready(function(){

                // set up hover panels
                // although this can be done without JavaScript, we've attached these events
                // because it causes the hover to be triggered when the element is tapped on a touch device
                $('.hover').hover(function(){
                    $(this).addClass('flip');
                },function(){
                    $(this).removeClass('flip');
                });

                // set up click/tap panels
                $('.click').toggle(function(e){
                    if(
                        e.target.tagName.toLowerCase() == 'input'
                        || e.target.tagName.toLowerCase() == 'select'
                        || e.target.tagName.toLowerCase() == 'textarea'
                        || e.target.tagName.toLowerCase() == 'label'
                        )
                        { return false };
                    $(this).addClass('flip');
                },function(e){
                    if(
                        e.target.tagName.toLowerCase() == 'input'
                        || e.target.tagName.toLowerCase() == 'select'
                        || e.target.tagName.toLowerCase() == 'textarea'
                        || e.target.tagName.toLowerCase() == 'label'
                        )
                        { return false };
                    $(this).removeClass('flip');
                });

                // set up contact form link
                $('.contact .action').click(function(e){
                    $('.contact').addClass('flip');
                    e.preventDefault();
                });
                $('.contact .edit-submit').click(function(e){
                    $('.contact').removeClass('flip');
                    e.preventDefault();
                });

            });

Prova con questo e fammi sapere

[stardom]

Dunque, il tuo codice non riesco a capirlo (già con le mie scarse conoscenze in .js) ma funziona, nel senso che se clicco nella form non flippa e posso compilare i suoi campi.
Però la form non ha tutte le sue funzionalità (invio, messaggi, etc.) che invece aveva, se pur da migliorare, prima che la inserissi nel flip. Devo aprire un altro post per risolvere, oppure tu puoi dedicarmi del tempo?

[Experiment8]

Ciao stardom,

perfetto , in realtà ho praticamente aggiunto solamente questa porzione di codice:

if(
   e.target.tagName.toLowerCase() == 'input'
   || e.target.tagName.toLowerCase() == 'select'
   || e.target.tagName.toLowerCase() == 'textarea'
   || e.target.tagName.toLowerCase() == 'label'
   )
   { return false };

che fa detect dell'oggetto che è stato cliccato (e.target) e compara il suo tagname con una serie di valori (input, select,textarea e label), per cui se l'elemento cliccato è uno di quelli da "return false" e blocca la continuazione dello script.

Per le funzionalità della form è un'altra storia, se intendi l'invio di messaggi di conferma all'utente o di messaggi di notifica a te, devi appoggiarti al server (vedo che la form punta ad una pagina php per l'action), in questo caso dovresti vedere che possibilità hai con il tuo hosting (mi sembra che il tuo sito sia statico giusto?) e qui ti consiglio di rivolgerti alla sezione programmazione lato server
Se comunque hai bisogno d'altro fammi sapere

[stardom]

...si, aprirò un altro post, però ho notato che questo flip funziona solo su FF e Chrome, mentre sugli altri (e sui mobile) si vedono entrambe le facciate, come se la backface-visibility:hidden non funzionasse. Dove può essere il prblema?

[Experiment8]

Ciao stardom,

la proprietà backface-visibility è una proprietà CSS3 che al momento è supportata soltanto dai browser più moderni (e soltanto da IE10 in poi), per quello probabilmente su molti dispositivi/browser non funzionerà correttamente, non c'è modo comunque di fare un flip CSS3 su browser che non lo supportano, dovresti per forza di cose trovare una soluzione di ripiego, evitando la proprietà e magari facendo un semplice toggle della visualizzazione di uno o dell'altro.

[stardom]

Ma scusa Experiment se ti disturbo ancora, tornando all'origine di questo post, ovvero che fra i tanti flip 3D l'unico veramente utilizabile anche per gli altri browser era l'ultimo della lista http://css3playground.com/3d-flip-cards (tant'evvero che su IE funzionava come un toggle), allora perchè ora non mi funziona? E poi mi chiedo, proprio i dispositivi mobili non son quelli che hanno i browsers più recenti?
Allora ci deve essere un problema nel codice scritto, perchè il demo di cui sopra va bene per tutti mentre il mio va bene per pochi. Eppure io solo copiato il codice del demo....

[stardom]

up qualcuno mi aiuti, perchè sono veramente bloccato su questo problema. Spero qualcuno abbia la pazienza di rileggersi il post, altrimenti aggiorno di seguito:
1) ho seguito il tutorial http://css3playground.com/3d-flip-cards che sul demo funzionava anche in IE, per inserire una contact form nella facciata back di un flip3D.
2) la contact form non funziona, nel senso che all'invio della mail non succede nulla
3) se presa per conto suo, la contact form funziona solo in parte, nel senso che va migliorato lo script di file attachment
4) una volta risolti i punti 2 e 3, vorrei che i messaggi di successo/errore venissero mostrati con un nuovo flip

Ho veramente bisogno di un aiuto a livello scripting, anche dietro piccolo compenso. Help!