Problema gestione Responsive
Autor: Fernando N.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.
... puoi nascondere gli oggetti nei breakpoint inferiori...
... poi bisognerebbe vedere l'esempio online, un click, per poter valutare il codice HTML EXTRA...
.
Autor
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
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.
Autor
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.
... 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...
.
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.
Ciao
Autor
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
... 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" ****.....
.
Autor
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?
... te l'avevo detto prima ....[...con opzione NASCOSTA e SENZA GRAFICA...] ... ...
... controlla nella Guida, qui: >> ▪Crea la Pagina senza applicare il Modello ... ...
(... casomai studieremo altra alterntiva extra...)
ciao
ps: ... per le news ed altre domande diverse conviene aprire singoli NUOVI argomenti a tema per evitare confusioni...
.
Autor
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.
... 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...
.
Autor
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.
Autor
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?
... 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...