Elucubrato da saibal
Addì 22 dicembre 2011
Posizionare un elemento “fixed” su iOS 4 con iFixedPos
L’aggiornamento a iOS 5 ha finalmente risolto un problema legato al position:fixed degli elementi web su dispositivi Apple. Fino alla versione 4, infatti, non era possibile avere una toolbar fissa a fondo pagina sfruttando solamente le proprietà CSS. Si poteva ovviare con qualche soluzione javascript (alcune legate a jQuery) ma non sempre era facile implementare il codice.
Nonostante sia uscito nella seconda metà del 2011, iOS 5 non è ancora così diffuso come ci si potrebbe aspettare e sono ancora molti i device su cui gira la versione 4.
A questo punto, per contribuire alla causa, ho cercato anch’io di risolvere la questione in maniera semplice. Ne è venuto fuori jQuery iFixedPos, un plugin che potete vedere in azione in questa demo. Ovviamente siete pregati di andarci con versioni obsolete di Safari.
Il funzionamento è semplice: se il device che accede alla pagina è un iPod, un iPad o un iPhone con iOS inferiore al 5 allora il plugin entra in azione facendo sparire la barra al tocco dello schermo e facendola comparire successivamente, riposizionata a fondo pagina.
Dopo l’inclusione di jQuery (ovviamente), l’implementazione del codice prevede il richiamo al plugin e alla funzione:
1 2 3 4 5 6 7 8
<script type="text/javascript" src="jquery.ifixedpos.dev.js"></script> <script type="text/javascript"> $(document).ready(function() { $().ifixedPos({ s_div: '#toolbar' }); }); </script>
L’unico parametro da settare è s_div, ovvero l’elemento da impostare con position:fixed.
Download
Il pacchetto .zip contiene tutti i file necessari. Per scaricare lo script cliccate sul link: Saibal jQuery iFixedPos
- 1.087 visite
Vota: 100%
Loading ...
Elucubrazioni
Trash e dintorni
Pere di fosforo
My Ubuntu
Guide e Articoli
Editoriali
Motociclettando
Php for Geek
Tesi di Laurea
Ciao. Articolo molto interessante,complimenti.
Una domanda.. cosa dovrei modificare per allineare il div “toolbar” in alto anziche in basso?
ciao,
basta modificare il css
#toolbar {bottom: 0;}
cambiando bottom con top
Ciao Saibail, io ho un problemino, la toolbar contiente dei link che fanno partire un ancor in jquery:
$(function() {
$(’a').bind(’click’,function(event){
var $anchor = $(this);
$(’html, body’).stop().animate({
scrollTop: $($anchor.attr(’href’)).offset().top
}, 1500,’easeInOutExpo’, });
event.preventDefault();
});
});
Il tuo script mantiene la toolbar al suo posto ma se clicco su un link all’interno del div #toolbar non funziona, mi sapresti aiutare?