Joomla.it Forum
Joomla! 3 => Joomla! 3 => : Paolo.VR 06 Sep 2017, 20:57:43
-
salve,
negli articoli e nelle immagini del sito ho applicato gli effeti testo con "animate" su template responsive il punto è che per quanto riguardo il desktop mi vanno bene ma vorrei toglierle in quelle risoluzioni da mobile perchè aumentano troppo l'attesa di visualizzazione pagina.
Qualcuno sa dirmi come fare e soprattutto se si può?
grazie
-
Con le media queries
-
ciao marine,
e già questo è un indizio almeno so cosa cercare, c'è qualche modulo o plug in da installare che lavora sulle media queries?
le media queries le ho già trovate nel css ma non so cosa inserire per togliere l'effetto anche perchè è inserito tramite codice nell'articolo
-
c'è qualche modulo o plug in da installare che lavora sulle media queries?
Sinceramente non saprei, prova a vedere nella jed
-
codice nell'articolo
Potresti postare uno di questi codici che hai utilizzato?
-
certo Limma,
{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="fadeInDown"|data-eds-entry-delay="0"|data-eds-entry-duration="1.5"|data-eds-entry-timing="linear"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="scroll"|data-eds-scroll-offset="75"}
è il codice che crea il plug in animate it
-
... ho scaricato il plugin e ho fatto un po' di prove.
Una soluzione l'avrei trovata, un po' macchinosa, ma fa quello che ti serve...
Il template che usi su quale versione di Bootstrap è basato ?
-
dove posso vederla la versione di bootstrap?... perchè non ricordo di averla vista
-
ovviamente nel css di bootstrap..chiedo venia.. mi da "Bootstrap v2.1.1"
-
L'esempio che vedi qui sotto serve per non visualizzare un paragrafo di testo e relativa animazione in uno smartphone (vedi l'inserimento della classe "hidden-phone" nell'html del paragrafo), e per visualizzarlo senza animazione solo nello smartphone ( vedi l'inserimento della classe "visible-phone").
{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="slideInLeft"|data-eds-entry-delay="0"|data-eds-entry-duration="1"|data-eds-entry-timing="linear"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}
<p class="hidden-phone">testo testo testo</p>
{/edsnewanimate}
<p class="visible-phone">testo testo testo</p>
La soluzione non è molto "elegante", e la macchinosità sta nel fatto che devi inserire due volte lo stesso testo. Ma col copia incolla fai in attimo.
Io l'ho provato, e funziona benissimo, con le classi di Bootstrap 3, ma dovrebbe funzionare senza problemi anche con le classi di Bootstrap 2 (quelle che ho usato sono riferite alla versione 2.3.2 di Bootstrap, e le puoi vedere qui (http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem) al paragrafo "Responsive design").
-
La soluzione non è molto "elegante", e la macchinosità sta nel fatto che devi inserire due volte lo stesso testo
A parere mio è la soluzione corretta, bravo Limma.
-
grazie Limma,
stasera provo il tuo metodo e ti faccio sapere, grazie ancora
-
ho provato ha inserire quel codice con il testo ricopiato ma non funziona, quando vado a vedere con smartphone visualizza il secondo testo e anche la riga di comando del codice.
Secondo te è dovuto dalla versione di Bootstrap o sto sbagliando qualcosa io?
-
... Ho appena provato col Template Protostar (Bootstrap 2) e funziona benissimo. Anche da smartphone.
Vedi qui (https://disegnareilweb.it/test-page/test-page-1/bootstrap-2-grid).
Naturalmente ho fatto un copia incolla del codice che ti postato sopra.
-
ok...mi chiedo dove sbaglio allora...
ho inserito il codice con testo subito sotto {/edsnewanimate} incollando il testo tra
<p class="visible-phone"...............</p>
da telefono però mi appare il testo che già c'era e il duplicato compreso di codice il tutto con ancora l'effetto di transizione
-
... Prova facendo un copia incolla del codice di cui sopra.
In ogni caso controlla la sintassi. Il tag di apertura <p class="visible-phone"> va chiuso come ho scritto ora. Nel tuo post precedente non l'hai chiuso...
-
ho controllato ma il codice è giusto...non capisco dove sbaglio..ho modificato solo una pagina al momento se vuoi vedere anche tu è questa
-
un momento..io l'ho inserito normalmente nell'editor come quello di animate it dove in pratica ho scritto l'articolo..lo devo inserire nella versione codice dell'editor?
-
niente..ho provato a inserire nella parte "code" dell'editor ma si vede la copia del testo...una con la transizione e l'altra fissa
-
Ho dato un'occhiata al codice sorgente della pagina che hai linkato, e l'html risultante è alquanto diverso da quello del mio esempio con Protostar... E alcune cose mi sono poco comprensibili.
Se sei davanti al pc - fallo per me - copia e incolla il codicetto che ti ho postato all'inizio dell'articolo del tuo sito che hai linkato prima, lo incolli nell'editor in modalità codice.
Non può non funzionare... All'esempio che ho fatto ho anche aggiunto un'immaginina (https://disegnareilweb.it/test-page/test-page-1/bootstrap-2-grid)...
-
l'ho incollato lato codice ed in effetti funziona, il testo appare statico solo che sopra si vede ancora il testo con l'animazione quindi appare doppio, uno dinamico e l'altro statico
-
l'ho incollato lato codice ed in effetti funziona, il testo appare statico solo che sopra si vede ancora il testo con l'animazione quindi appare doppio, uno dinamico e l'altro statico
Vabbé, mi arrendo... :'(
Come hai visto nel mio piccolo esempio il problema che rilevi tu non c'è.
Magari qualcun altro troverà l'inghippo.
-
si infatti ho visto che nell'esempio funziona...non mi spiego continuo a guardare che non sto sbagliando io ma mi sembra di inserire tutto corretto...grazie molte davvero dell'aiuto e dell'interessamento!!! in caso mi arrenderò anche io a lasciarlo così o solo fisso senza alcun effetto..vediamo se qualcuno magari nota dove sbaglio
-
Potresti postare qui uno dei codici che hai usato tu nel tuo articolo, ma non solo il codice creato da Animate It, intendo anche con i paragrafi di testo (o quello che è) che hai animato.
-
Allora, non mi davo pace per cui ho prelevato il codice sorgente della tua pagina e ho fatto una prova.
Per la prova ho utilizzato i testi iniziali che hai animato col "fadeInDown".
Ecco il risultato (https://disegnareilweb.it/test-page/test-page-1/bootstrap-2-grid). Naturalmente confronta PC e smartphone.
C'erano alcuni errori nei tag, errori che una volta emendati producono il risultato che vedi.
P.S. Ho anche cambiato, nella prova che vedi, questi due paragrafi di testo:
<h1><span style="color: #ffffff;"><span style="font-size: 14px;">Box doccia in vetro</span></span></h1>
<h2><span style="color: #ffffff;"><span style="font-size: 12px;">I box doccia con vetro trasparente o satinato e trattamento anti goccia apertura porta scorrevole o battente</span></span></h2>
paragrafi che risultano invisibili nella tua pagina in quanto testi di colore bianco (#ffffff) su background pagina bianco!
-
non mi davo pace nemmeno io e stamattina credo di aver trovato l'inghippo e ora sta capirne il motivo!
in sostanza io copio il testo tra i tag del codice <p class="visible-phone">...............</p> inserisco tutto correttamente, clicco su salva ma quando si ricarica la pagina dell'editor torna il testo senza il codice...ho provato più volte anche cancellando la cache ma si elimina sempre la riga di comando
-
Se fosse un problema di "rimozione" del codice dai un'occhiata a questo thread (http://forum.joomla.it/index.php/topic,263476.0.html), troverai info in merito relativamente agli editor TinyMCE e JCE.
In verità, guardando l'html risultante della tua pagina il codice necessario c'è tutto, ma, mi ripeto, ci sono degli "errori" nei tag che ne impediscono il funzionamento...
Prova questo (fai copia incolla):
<div class="hidden-phone">
<div class="eds-animate edsanimate-sis-hidden " data-eds-entry-animation="fadeInDown" data-eds-entry-delay="0" data-eds-entry-duration="2.5" data-eds-entry-timing="linear" data-eds-exit-animation="" data-eds-exit-delay="" data-eds-exit-duration="" data-eds-exit-timing="" data-eds-repeat-count="1" data-eds-keep="yes" data-eds-animate-on="scroll" data-eds-scroll-offset="75">
<h1><span style="color: #000000;"><span style="font-size: 14px;">Box doccia in vetro</span></span></h1>
<h2><span style="color: #000000;"><span style="font-size: 12px;">I box doccia con vetro trasparente o satinato e trattamento anti goccia apertura porta scorrevole o battente</span></span></h2>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La stanza da bagno diventa sempre più una parte di casa dove il gusto e l'estetica la fanno da padrona. I <strong>box doccia</strong> in solo vetro si integrano nella stanza salvaguardando lo spazio con la versione in vetro trasparente donando eleganza con la loro semplicità mentre per chi non teme la riduzione degli spazi la versione con vetro satinato in diversi colori disponibili sa inserirsi in qualsiasi tipologia di rivestimento esistente all'interno. Vasta è la scelta delle aperture e delle parti metalliche che lo compongono con la possibilità di scegliere la finitura di quest'ultime per meglio integrarsi alla rubinetteria dei sanitari. La pulizia viene facilitata dal trattamento antigoccia che rende il vetro brillante in pochi passi senza fatica.</span></span></p>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La continua evoluzione di questo affascinante materiale porta a poter proporre diverse tipologie di vetro oltre alle più classiche. I satinati possono essere con finitura decorata o a gradiente per creare della privacy ma nel contempo dare sempre il tocco della trasparenza dove ed il trattamento anti goccia può essere reso permanente. </span></span></p>
</div>
</div>
<div class="visible-phone">
<h1><span style="color: #000000;"><span style="font-size: 14px;">Box doccia in vetro</span></span></h1>
<h2><span style="color: #000000;"><span style="font-size: 12px;">I box doccia con vetro trasparente o satinato e trattamento anti goccia apertura porta scorrevole o battente</span></span></h2>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La stanza da bagno diventa sempre più una parte di casa dove il gusto e l'estetica la fanno da padrona. I <strong>box doccia</strong> in solo vetro si integrano nella stanza salvaguardando lo spazio con la versione in vetro trasparente donando eleganza con la loro semplicità mentre per chi non teme la riduzione degli spazi la versione con vetro satinato in diversi colori disponibili sa inserirsi in qualsiasi tipologia di rivestimento esistente all'interno. Vasta è la scelta delle aperture e delle parti metalliche che lo compongono con la possibilità di scegliere la finitura di quest'ultime per meglio integrarsi alla rubinetteria dei sanitari. La pulizia viene facilitata dal trattamento antigoccia che rende il vetro brillante in pochi passi senza fatica.</span></span></p>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La continua evoluzione di questo affascinante materiale porta a poter proporre diverse tipologie di vetro oltre alle più classiche. I satinati possono essere con finitura decorata o a gradiente per creare della privacy ma nel contempo dare sempre il tocco della trasparenza dove ed il trattamento anti goccia può essere reso permanente. </span></span></p>
</div>
-
ma non capisco...perchè allora io dall'editor non vedo il codice!?...
altra cosa...gli errori neli tag dici il colore del font?
-
Limma...ho copiato e incollato e ....funziona!!...ora lo dovrò applicare a tutti gli altri articoli, quindi non funzionava per i tag con gli errori!?
PS: il titolo bianco è fatto di proposito perchè essendo già presente nella slide sopra non lo volevo ripetere visivamente
-
E ci mancava anche che non funzionasse...! ;)
Scherzi a parte, il codice di cui hai fatto copia/incolla funziona come funzionavano tutti gli altri esempi che ti ho linkato.
In realtà, guardando l'html della tua pagina, c'è qualcosa che non mi quadra nella procedura che attui per applicare le animazioni col codice fornito da Animate It.
Per esempio: prima che incollassi il mio codice avevi un TAG <p> anteposto a <div class="eds-animate ecc. ecc. che non capisco proprio da dove saltasse fuori. Nelle prove che ho fatto io non c'era mai, e non ci dovrebbe proprio essere.
Forse - passami il termine - "pasticci" un po' tra editor in modalità visuale e in modalità codice...
Vedi un po' quando applichi nuovamente la procedura.
P.S. Non è fondamentale, ma piuttosto che rendere "invisibile" un testo, lo toglierei proprio, o lo modificherei per dargli un senso come titolo diverso da quello che usi nella slide.
Poi quello spazio bianco tra slide e testo è un po' troppo per i miei gusti, soprattutto nella visualizzazione da mobile.
Ma è solo un'opinione, naturalmente.
-
ahahah...ero sicuro di essere io a sbagliare qualcosa!...solo che non riuscivo a capire cosa e dove...il codice di animate lo copiavo semplicemente dal sito ma ho notato spesso e volentieri, pasticci a parte miei che confermo!, che molte volte scrivo l'articolo salvo e lato codice ci sono cose come tag <p> o spazi vuoti che fanno saltare la riga che io non ho mai inserito e a fatica riesco a togliere se non ricreando un nuovo articolo...
nella visione da mobile sono pienamente d'accordo neanche a me piace tutto quel vuoto e ci dovrò lavorare, toglierli se ho ben capito a livelli SEO è come non essere visualizzati nella serp (serp locale in questo caso)
..grazie infinite per il tempo e la pazienza che hai dedicato al mio enigamtico "problema"..sono in debito...birra pagata se passi da queste parti... ;) ...
..non escludo di tornare con nuovi quesiti però eh!?
-
..grazie infinite per il tempo e la pazienza che hai dedicato al mio enigamtico "problema"..sono in debito...birra pagata se passi da queste parti... ;) ...
Di nulla. Se VR sta per Verona (visto anche il sito), io non abito molto distante, e una birra non si rifiuta mai! ;D
..non escludo di tornare con nuovi quesiti però eh!?
A volte ritornano...! ;D
P.S. I moderatori scusino l'OT...
-
PS: il titolo bianco è fatto di proposito perchè essendo già presente nella slide sopra non lo volevo ripetere visivamente
toglierli se ho ben capito a livelli SEO è come non essere visualizzati nella serp (serp locale in questo caso)
Nascondere contenuti con vari escamotage (es. testo bianco su sfondo bianco) è una pratica che a google non piace proprio!
-
vedrò di cambiare o toglierli
-
solo una domanda pur sapendo di essere OT...il doppio tag H1 non crea problemi per l'indicizzazione!?