iframe elastico

[giancarlobar]

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]

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.

[giancarlobar]

Grazie Lemonsong, molto interessante ..... faccio qualche test per verificare come si comporta sul mio progetto.

[lemonsong]

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]

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]

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]

perfetto !!!! Grazie Lemonsong ..... 

[lemonsong]

Prego