Autore Topic: iframe elastico  (Letto 97 volte)

giancarlobar

  • Nuovo arrivato
  • *
  • Post: 82
iframe elastico
« il: 02 Dicembre, 2017, 10:21:55 »

Buongiorno,
sto utilizzando un codice iframe messo a disposizione dal gentilizzimo KolAsim.


Il codice in oggetto mi permette di inserire wowslider sotto all'header della pagina.
Questo però mi crea due piccole anomalie:


1) Un effetto elastico di qualche secondo all'ingresso della pagina prima di adattarsi.
2) Va in conflitto con l'effetto parallasse e quindi ho dovuto disattivarlo.


E' possibile un'alternativa al codice che eviti questi piccoli inconvenienti.


Grazie.


http://www.giancarlob.altervista.org/apollinare-wowslider/
 

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1738
    • lemonsong's links
Re:iframe elastico
« Risposta #1 il: 04 Dicembre, 2017, 17:19:01 »
Non so se risolverai i tuoi problemi ma, l'integrazione di WOWSlider (come ben saprai), si può fare anche senza l'uso di iframe.

QUI un topic dove trovi un esempio (v13): menu il alto (non fisso), slider sotto.

Nel tuo caso puoi provare questa variante (v13):
http://quellidelcucuzzolo.altervista.org/appunti/ws-wowslider/variante-1.html

Anche qui però c'è un po' di ritardo prima del calcolo della nuova altezza dell'header.

Come già scritto, non so se risolverai i tuoi problemi!

Edit:
Ovviamente le immagini devono avere le stesse dimensioni.
« Ultima modifica: 04 Dicembre, 2017, 17:24:03 da lemonsong »

giancarlobar

  • Nuovo arrivato
  • *
  • Post: 82
Re:iframe elastico
« Risposta #2 il: 05 Dicembre, 2017, 09:47:54 »
Grazie Lemonsong, molto interessante ..... faccio qualche test per verificare come si comporta sul mio progetto.

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1738
    • lemonsong's links
Re:iframe elastico
« Risposta #3 il: 05 Dicembre, 2017, 14:33:10 »
Forse, per guadagnare qualcosa al caricamento della pagina, potresti sostituire lo script con qualcosa del genere:

Codice: [Seleziona]
<script>
//regolazione altezza header
$(document).ready(hD);
$(window).on('resize', hD);

function hD() {
  var hImg = $('#wowslider-container1 img').height();
  $('#imHeader').css('height', hImg);
}
</script>

giancarlobar

  • Nuovo arrivato
  • *
  • Post: 82
Re:iframe elastico
« Risposta #4 il: 07 Dicembre, 2017, 17:48:59 »

fatto il test, il codice sembra inserito correttamente, ho provato a giocare con le z-index ma l'header mi resta sotto allo slider... ???


http://www.giancarlob.altervista.org/apollinare-wowslider/

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1738
    • lemonsong's links
Re:iframe elastico
« Risposta #5 il: 07 Dicembre, 2017, 22:09:36 »
Il CSS dell'esempio che ti ho postato deve essere inserito dopo il file engine1/style.css oppure devi aggiungere !important alle due proprietà; ti consiglio la prima.
Inoltre, devi riassegnare z-index:1; a #imHeaderBg

Ti allego lo screenshot della tua pagina editata con gli strumenti di sviluppo di Firefox:

[ Guests cannot view attachments ]

giancarlobar

  • Nuovo arrivato
  • *
  • Post: 82
Re:iframe elastico
« Risposta #6 il: 08 Dicembre, 2017, 00:00:27 »
perfetto !!!! Grazie Lemonsong .....  :)

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1738
    • lemonsong's links
Re:iframe elastico
« Risposta #7 il: 08 Dicembre, 2017, 12:52:04 »
Prego  :)