Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Posizionare un elemento fixed su iOS 4 con iFixedPos

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

link sponsorizzati

Consiglialo su Facebook

Scrivi un commento

Commenti totali: 3


  1. Ciao. Articolo molto interessante,complimenti.
    Una domanda.. cosa dovrei modificare per allineare il div “toolbar” in alto anziche in basso?

  2. ciao,

    basta modificare il css

    #toolbar {bottom: 0;}

    cambiando bottom con top

  3. 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?

Lascia un Commento

Iscriviti alle discussione senza commentare

link sponsorizzati

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,282 secondi dopo aver eseguito ben 53 query. Wordpress... prestazioni da urlo!