Archivi autore: alemux

Come effettuare lo scroll di un testo in jQuery Mobile

Pubblicato il da
Rispondi

Il problema con jQuery Mobile

A molti di voi sarà capitato di dover realizzare una qualche interfaccia in jQuery Mobile, eccezionale soluzione per dare un appeal mobile alle vostre interfacce.
Il mio problema nasceva dal fatto che per alcuni contenuti particolarmente lunghi, dove non bastava lo spazio renderizzato in pagina, non potevo contare su un effetto Scroll On Tap, tipico dell’interfaccia sugli SmartPhone.

Alcune soluzioni esterne

Una delle soluzioni più usate è quella di usare iScroll 4, che trovate qui, realizzato Matteo Spinelli: la sua soluzione è molto usata, funziona bene e bisogna apporre qualche modifica agli stili CSS dei vari DIV che contengono i vostri dati.

La mia soluzione con Scrollview.js

Io ho risolto il mio problema utilizzando il plugin di Adobe jquery.mobile.scrollview.js.
Non ho avuto alcun bisogno di modificare le mie pagine e l’effetto è abbastanza fluido. Ad esser completamente sinceri, iScroll4 permette una maggiore fluidità di scroll ma il livello di  smooth raggiunto da scrollview.js raggiungeva lo scopo adeguatamente.

La libreria stessa è offerta con la seguente dicitura:
” Note: Code is in draft form and is subject to change “

Siccome ho effettuato numerose prove di funzionamento, ho raggiunto la ( mia personalissima ) conclusione che l’ordine di caricamento in pagina dei vari file .js dovrebbe essere il seguente:

        <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
        <link rel="stylesheet" href="my.css" />

        <script src="jquery.min.js"></script>
        <script src="jquery.mobile-1.1.0.min.js"> </script>
        <script src="jquery.easing.1.3.js">
        </script>
        <script src="jquery.mobile.scrollview.js">
        </script>
        <script src="scrollview.js">
        </script>

Per praticità, vi posto i links diretti su demo.oneblackcat.it, ma tenete conto che potrebbero esserci delle versioni più aggiornate sul web, quindi il mio consiglio è quello di cercare su Google, non vi sarà difficile trovare le fonti ufficiali.

<link rel=”stylesheet” href=”jquery.mobile-1.1.0.min.css” />
<link rel=”stylesheet” href=”jquery.mobile.scrollview.css” />
<link rel=”stylesheet” href=”my.css” />

<script src=”jquery.min.js“></script>
<script src=”jquery.mobile-1.1.0.min.js“> </script>
<script src=”jquery.easing.1.3.js“></script>
<script src=”jquery.mobile.scrollview.js“></script>
<script src=”scrollview.js“></script>

E’ molto semplice attivare lo scrollview sul content di una pagina:

        <div data-role="page" id="page5">
            <div data-theme="b" data-role="header">
                <h3>
                   Titolo della pagina
                </h3>
            </div>
            <div data-role="content" class="ui-scrolllistview">
                <div style="" data-role="listview">
                	<div class="mydetail">
                    	Lorem ipsum...
                        </div>
                </div>
            </div>

        </div>

Aggiungete solamente, al DIV con data-role=content la classe ui.scrolllistview, mentre al DIV interno assegnate il ruolo di data-role=listview.

ASP: dividere una stringa mediante un carattere

Pubblicato il da
2

La mia attività di nerd totale mi porta spesso a scrivere, partecipare e rispondere a quesiti, più o meno facili, riguardanti ASP, jQuery, jQuery Mobile, Sencha e tutti quei linguaggi per i quali credo di essere ferrato.

In questi giorni mi sono accorto che c’è ancora un grandissimo numero di persone che hanno a che fare con il Classic ASP, volenti o nolenti, e che sono ad un livello piuttosto basso, tale da dover chiedere continuamente suggerimenti su come procedere in date situazioni che, a mio avviso, sono un po’ l’ABC del VBScript.

E’ altresì vero che, ovviamente, non tutti sono allo stesso livello, e tutti devono avere la possibilità di superare i proprio ostacoli, facili o difficili che siano.

Nel caso specifico, il problema era dato da un elenco di nomi e cognomi, divisi da una virgola, che dovevano essere listati in una certa maniera.
Posto il caso e la soluzione, non sia mai che qualcuno ne ha bisogno e riesce, navigando nei meandri del web, a trovarla.


' la stringa in questione è la seguente
elencoNomi = "Mario Rossi, Gianni Verdi, Alessandro Bianchi, Ivano Azzurri"

' la necessità è quella di avere, uno sotto l'altro, un elenco di nomi linkati ad una pagina X
' l'ultimo nome non dovrà avere la virgola dopo il nome e non dovranno comparire spazi prima o dopo

ar_elencoNomi = Split( elencoNomi, "," )

' carico nella variabile ar_elencoNomi l'array di tutti i nomi presenti nella lista elencoNomi
' ora devo fare un ciclo che, per ogni voce, mi scrive a video un link ed il relativo nome e cognome

for x=0 to UBound(ar_elencoNomi)    ' un ciclo che va da zero all'ultimo valore dell'array ar_elencoNomi

   if ar_elencoNomi(x)<>"" then    ' tengo in considerazione solo quelle voci che sono diverse da "", ossia vuote. Può tornare utile

      nome = Trim( ar_elencoNomi(x) )   ' il Trim() mi elimina gli spazi prima e dopo il valore del nome

      if int(x) < int( UBound(ar_elencoNomi) ) then    'controllo che non sia l'ultima voce
          stringa = "<a href="pagina1.html">" & nome & "</a>, "
      else
          stringa = "<a href="pagina1.html">" & nome & "</a>"
      end if

   end if

next   ' prossima voce del ciclo

CSS: selezionare ed illuminare le textbox

Pubblicato il da
2

Ecco una piccola soluzione ad un problema piuttosto comune: mi hanno chiesto di trovare la soluzione più semplice possibile per selezionare tutte le INPUT di tipo TEXT e illuminarne lo sfondo con effetto glow di colore verde.

Sicuramente la necessità era quella di utilizzare esclusivamente codice CSS, senza jQuery, javascript o altro: tutto quello che serve è li, nel file CSS, senza bisogno di altro.
La compatibilità con i browser meno recenti non è stata affrontata, ma può essere facilmente risolta con Modernizr o altro di simile.

Non potevo, ovviamente, fare riferimento a tutte le input con:

input{
   /* codice css */
}

Questo si può facilmente risolvere inserendo:

input[type=text]{
   /* codice css */
}

Assegnamo alle input delle proprietà di base:

input[type=text]{
  outline: none;
  padding: 2px;
  border: 1px solid #CCC;
}

Ora assegnamo il solito indigesto codice ad IE9 &

input[type=text]{
  outline: none;
  padding: 2px;
  border: 1px solid #CCC;

  -webkit-transition: all 0.40s ease-in-out;
  -moz-transition: all 0.40s ease-in-out;
  -ms-transition: all 0.40s ease-in-out;
  -o-transition: all 0.40s ease-in-out;

}

Ora assegnamo un’ombra all’onmouseover:

input[type=text]:hover{
   box-shadow: 0 0 5px #43d034;
   border:1px solid #35bf26;
}

Et voilà, il gioco dovrebbe essere fatto!

IE contro Chrome: Google sta vincendo la battaglia?

Pubblicato il da
Rispondi

Modernità o Status quo


La battaglia dei browsers sta avendo un chiaro vincitore, stando alle statistiche che potete trovare facilmente su StatCounter qui.

Chiunque abbia mai giocato, lavorato, smanettato o studiato HTML, CSS3 e compagnia bella, non può non aver maledetto la mediocrità di IE, almeno fino alla versione 9 compresa. La verità è che, però, è sempre stato necessario fare i conti con la E blu e così sarà ancora per un lungo periodo.

Prendiamo con le molle il risultato di queste statistiche, il metodo di reperimento dei valori dipende da troppi fattori. E’ altresì vero che se i dati non sono troppo attendibili sia all’inizio che alla fine, danno comunque un indicazione interessante sull’affezione degli utenti verso una o l’altra soluzione. Se prima IE era sinonimo di “andare su internet”, ora il trend sta, finalmente, cambiando.

Certamente il fatto che Windows sia stata obbligata ad inserire la scelta del browser può aver indebolito IE, ma la verità è che la maggior parte degli utenti di livello “basso”, ossia coloro che hanno poca familiarità con le dinamiche informatiche, utilizza normalmente IE e ignora l’esistenza di altri browser alternativi, più veloci e, cosa non da poco, decisamente più sicuri.

L’obbligo di usare un vecchio sistema

Chi come me lavora anche con la PA sa benissimo che vengono quotidianamente utilizzati browser come IE 6 e 7, che sono in parole povere un baco con delle toppe, e che la colpa non è solo degli utenti finali, come si può erroneamente pensare: provate voi a collegarvi ai principali siti governativi con Firefox o Safari, oppure ad effettuare operazioni bancarie con Google Chrome sui vari portali bancari.
Una semplice operazione da pochi secondi può trasformarsi in un’odissea di Denied Request, Page not found o Session Timeout.

La verità è che nessuno di noi tifa per qualche browser in particolare, la speranza comune è che la concorrenza porti tutti a sviluppare browser sempre più stabili, più sicuri e innovativi, magari con un occhio un po’ più dedicato alla leggerezza del pacchetto di installazione: vero Google?

Semplice countdown in jQuery

Pubblicato il da
Rispondi

Per continuare la nostra continua presentazione di plugin di jQuery che possano essere utili a tutti, oggi pongo alla vostra attenzione un semplice script per inserire, in qualsiasi punto della vostra pagina, un countdown verso una data indicata.

Lo script lo trovate all’indirizzo http://keith-wood.name/countdown.html, è molto semplice da configurare e fa semplicemente il suo dovere.

Eccovi un esempio del codice da inserire per visualizzare un countdown in jQuery in versione GIORNI-ORE-MINUTI-SECONDI:

var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});

$('#removeCountdown').toggle(function() {
        $(this).text('Re-attach');
        $('#defaultCountdown').countdown('destroy');
    },
    function() {
        $(this).text('Remove');
        $('#defaultCountdown').countdown({until: newYear});
    }
);