WebSite X5Help Center

 
Fernando N.
Fernando N.
User

Problema gestione Responsive  it

Auteur : Fernando N.
Visité 1354, Followers 2, Partagé 0  

Salve a tutti, sono nuovo e ho comprato il programma da poco. Vi chiedo aiuto per la gestione del Responsive. In pratica io ho una pagina in cui incorporo due files .html presenti sul mio server, nel codice html che inserisco vado a definire anche la larghezza delle finestre una volta aperte.

Il mio problema è che, nelle versioni per tablet e cellulare, queste finestre risulteranno molto grandi e non visibili (tra l'altro vorrei far visualizzare altro nelle stesse pagine in modalità cellulare e tablet). 

Ho provato ad aggiungere una terza riga alla mia pagina impostando le prime due righe con nascondi nel menu responsive, e in effetti nelle modalità tablet e cellulare vedo solo la terza riga, il problema è che la stessa terza riga è presente anche nella modalità PC e da la non riesco ad oscurarla....cosa sbaglio???

P.s. non inserisco la url del sito pubblicato in quanto non l'ho ancora pubblicato, è in fase di attivazione.

Posté le
15 RéPONSES - 1 UTILES - 1 CORRECT
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... puoi nascondere gli oggetti nei breakpoint inferiori...

... poi bisognerebbe vedere l'esempio online, un click, per poter valutare il codice HTML EXTRA...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Fernando N.
Fernando N.
User
Auteur

Ciao, grazie per la risposta. Allora ho caricato il tutto su www.accerta.it/nuovosito/ 

La pagina in questione, sulla quale ho il problema, è la seguente: http://www.accerta.it/nuovosito/dove-siamo.html

Vedendo da PC, c'è una animazione nella prima riga, che ho deciso di eliminare nella visualizzazione da cellulari e/o tablet. Però avrei deciso di inserire a posto dell'animazione, un testo fisso (solo per cellulare e/o tablet) in cui scrivo l'indirizzo per intero. Come potrei fare??? Grazie

Lire plus
Posté le de Fernando N.
Luciana Ciolfi
Luciana Ciolfi
User

Se vuoi mettere l'indirizzo come oggetto fisso, puoi metterlo come immagine JPG o PNG e per vederlo solo alle risoluzioni inferiori lo inserisci come immagine di sfondo al passo 2 > in struttura del modello > sfondo dell'header (o in header) partendo dalla risoluzione che ti interessa.

Ciao.

Lire plus
Posté le de Luciana Ciolfi
Fernando N.
Fernando N.
User
Auteur

Grazie per la risposta Luciana, ma preferirei poter inserire un testo, magari con un link diretto a google maps con già impostata la destinazione. Mettendo una foto di sfondo non riuscirei a farlo.

Lire plus
Posté le de Fernando N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Fernando N.
... ... c'è una animazione nella prima riga, che ho deciso di eliminare nella visualizzazione da cellulari e/o tablet. Però avrei deciso di inserire a posto dell'animazione, un testo fisso (solo per cellulare e/o tablet) in cui scrivo l'indirizzo per intero. Come potrei fare??? Grazie

... visto che hai usato il mio metodo che carica l'animazione in IFRAME, potresti aggiungere un controllo JS che ne sostituisca il contenuto come avviene in > questa mia invenzione...

... quindi nell'IFRAME sostituire il contenuto con quello per esempio di una pagina che crei con il testo e con opzione NASCOSTA e SENZA GRAFICA...

... troverai il mio codice da catturare (Ctrl+u), studiare e personalizzare per quel che ti interessa tra le righe 6-19...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Luciana Ciolfi
Luciana Ciolfi
User
Fernando N.
Grazie per la risposta Luciana, ma preferirei poter inserire un testo, magari con un link diretto a google maps con già impostata la destinazione. Mettendo una foto di sfondo non riuscirei a farlo.

Ah sì, se vuoi mettere un link dei mettere un oggetto per forza. Poi scusa ma avevo confuso le animazioni, mi era sembrato che ti riferissi a quella in header, invece stavi parlando di una riga nella pagina. Quindi, come non detto. wink

Ciao

Lire plus
Posté le de Luciana Ciolfi
Fernando N.
Fernando N.
User
Auteur

Grazie KolAsim....ho visto la tua pagina sia da cell che da pc, e credo che sia proprio ciò che serve a me. 

Tramite ispeziona pagina ho preso lo script e lo ho incollato nel mio codice html inserito nella pagina, ma sembra non funzionare. Sicuramente manca qualcosa, daresti un'occhiata???

Code:

<head>
<script>
function risoluzioneK() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var larghezza = w;
if (larghezza >800) {
document.getElementById("iframek").src = "http://www.accerta.it/prova.html";
} else
if (larghezza <= 800) {
document.getElementById("iframek").src = "http://www.accerta.it/prova2.html";
}
}
</script>

<div id="div_iframe">
<iframe name="iframek" src="http://www.accerta.it/prova.html" width="800" height="400">
</iframe>
</div>
</head>

Grazie

Lire plus
Posté le de Fernando N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... scusami, mi ero dimenticato di dirti anche le righe 42 e 43:
window.onload = function () {risoluzioneK() }
window.onresize = function () {risoluzioneK()}
... che in aggiunta e completamento nel tuo codice diventerebbe così:
<script>
function risoluzioneK() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var larghezza = w;
if (larghezza >800) {
document.getElementById("iframek").src = "http://www.accerta.it/prova.html";
} else
if (larghezza <= 800) {
document.getElementById("iframek").src = "http://www.accerta.it/prova2.html";
}
}
window.onload = function () {risoluzioneK()}
window.onresize = function () {risoluzioneK()}
</script>
... prova e   fammi sapere...
ciao

ps:  ... iframek è il nome ID/NAME dell'IFRAME:  

<iframe id="iframek" name="iframek" ****.....

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Fernando N.
Fernando N.
User
Auteur

Grazie mille!!! 

Appena provato e sembra funzionare.

Io avevo creato la pagina da visualizzare nel formato cellulare all'interno di X5 Evolution, ma a quanto sembra devo farla a mano fuori dal programma, in quanto inserendo una pagina creata con lo stesso, ovviamente, mi riporta anche Header, footer ecc....c'è un modo per avere solo il testo che mi interessa dall'interno di X5, o mi conviene crearla con un editor normale e salvarla sul server???

P.s. avrei una richiesta per la gestione delle news sempre sul sito, mi sai consigliare qualcosa di già pronto? (magari con pannello esterno per inserire/cancellare le notizie?

Lire plus
Posté le de Fernando N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Fernando N.
... ...  in quanto inserendo una pagina creata con lo stesso, ovviamente, mi riporta anche Header, footer ecc....c'è un modo per avere solo il testo che mi interessa dall'interno di X5, o mi conviene crearla con un editor normale e salvarla sul server??? ... ... 

... te l'avevo detto prima  ....[...con opzione NASCOSTA e SENZA GRAFICA...] ... laughing...

... controlla nella Guida, qui: >> ▪Crea la Pagina senza applicare il Modello ... wink...

(... casomai studieremo altra alterntiva extra...)

ciao

ps: ... per le news ed altre domande diverse conviene aprire singoli NUOVI argomenti a tema per evitare confusioni...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Fernando N.
Fernando N.
User
Auteur

Si si avevo letto opzione nascosta e senza grafica ma ero riuscito a fare solo la prima cosa.

Con la guida è andata decisamente meglio, unico problema però è che quando seleziono di non applicare il modello mi chiede la larghezza della pagina e di conseguenza poi ho problemi di visualizzazione del testo. 

Lire plus
Posté le de Fernando N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... senza vedere niente non posso valutare (*), ma secondo me non dovresti avere problemi di sorta...

... se l'assegnazione della larghezza fosse  obbligatoria, ...allora puoi fare delle prove per valutare i valori più adatti allo scopo...

... secondo me dovresti controllare anche che l'iframe abbia larghezza elastica...

(*) ... appena puoi posta l'esempio, basta un click...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Fernando N.
Fernando N.
User
Auteur

http://www.accerta.it/NUOVOSITO/dove-siamo.html

Questa è la pagina.

Ho inserito il codice che mi hai suggerito ed effettivamente è tutto ok, nel senso che da cellulare mostra la pagina che vado a richiamare, il problema è solo nella visualizzazione di quest'ultima.

<iframe id ="iframek" name="iframek" width=800 height=400 scrolling=no></iframe>

<script>
function risoluzioneK() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var larghezza = w;
if (larghezza >800) {
document.getElementById("iframek").src = "http://www.accerta.it/dovesiamo.html";
} else
if (larghezza <= 800) {
document.getElementById("iframek").src = "foffo.html";
}
}
window.onload = function () {risoluzioneK()}
window.onresize = function () {risoluzioneK()}
</script>

E nella pagina foffo.html ho solo un testo, che però mi viene troncato. 

Se hai due minuti da perdere, prova ad aprire la pagina da un cellulare, grazie.

Lire plus
Posté le de Fernando N.
Fernando N.
Fernando N.
User
Auteur

In pratica noi diciamo che se la larghezza è meno di 800, deve visualizzare la pagina foffo.html. 

Di conseguenza, credo che forse bisognerebbe inserire nella pagina foffo.html un resize del testo a seconda della risoluzione? E' questa la strada da prendere?

Lire plus
Posté le de Fernando N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... come detto poco fa, prova a rendere elastico l'iframe...

... sostituisci il valore width assegnando 100%, così:

<iframe id ="iframek" name="iframek" width="100%"  height="400"  scrolling="no" ></iframe>

... se il testo non ci sta dentro in altezza, elimina scroling no...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪