Luongo Vincenzo - Blog » Mobile

[jQuery Mobile] How to delete the border-radius from the tag Flip Switch

Vincenzo — Wed, 25 Sep 2013 13:13:20 +0000

Salve a tutti,

in questo articolo spiegerÃ² come eliminare il border radius dal tag custom Flip Switch.

La versione che andremo a trattare Ã¨ l’ultima stabile, ovvero la 1.3.2 .

Le classi che richiedono la personalizzazione sono:

.ui-btn-corner-all
.ui-corner-all
.ui-slider-switch

Per eliminare il border-radious (bombatura o arrotondamento) di questi “oggetti” basta implementare dopo l’inclusione del css di jquery mobile il seguente style:

 
.ui-btn-corner-all,
.ui-corner-all,
.ui-slider-switch {
 
    -webkit-border-top-left-radius: 0px !important;
    -webkit-border-top-right-radius: 0px !important;
    -webkit-border-bottom-right-radius: 0px !important;
    -webkit-border-bottom-left-radius: 0px !important;
 
    -moz-border-radius-topleft: 0px !important;
    -moz-border-radius-topright: 0px !important;
    -moz-border-radius-bottomright: 0px !important;
    -moz-border-radius-bottomleft: 0px !important;
 
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
 
}

CosÃ¬ facendo avrete il vostro flip switch completamente esente dal border radius.

DEMO: http://jsfiddle.net/e26ac/1/

Saluti

[CSS/Phonegap/Android] How to customize select tag

Vincenzo — Mon, 10 Jun 2013 19:16:38 +0000

Salve a tutti,

oggi mi sono imbattuto in una situazione alquanto strana.
Avevo il bisogno di personalizzare il tag HTML select e ho iniziato ad eseguire la personalizzazione sul progetto iOS (xCode).
Una volta completata la personalizzazione, ho testato il tutto e funzionava una meraviglia.
Dopo aver portato la patch su progetto android la personalizzazione NON FUNZIONAVA PER NIENTE!!!!
Cercando un pÃ² in giro (ben 25 minuti) ho trovato una proprietÃ del CSS che risolveva il problema.

select {
    -webkit-appearance: none; 
}

cosÃ¬ facendo tutte le personalizzazione del tag select (come cambiare colore, font, inserire un background, ecc…) verranno accolte dal browser ed interpretate correttamente.

Spero servirÃ a qualcuno.

Ciauz

[MOBILE] How to autoscrolling for android and iOS (Phonegap/Cordova)

Vincenzo — Tue, 28 May 2013 08:08:30 +0000

Eccomi qui, come primo articolo vi condivido un’autoscrolling per chat (alla whatsapp o facebook messanger) che vi permetterÃ di rendere la vostra chat molto piÃ¹ comoda da vsualizzare.

Dopo tanti tentativi e aiuti a destra e a manca, sono riuscito ad avere un codice HTML5/CSS/jQuery compatibile per quasi tutti i device da android 2.3.x -> 4.x.x ad iOS 5 e 6

DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="cordova-2.3.0.js">script>
    <script type="text/javascript" src="jquery-1.8.3.js">script>
  <style>
    div.demo {
        background:#CCCCCC none repeat scroll 0 0;
        border:3px solid #666666;
        margin:5px;
        padding:5px;
        position:relative;
        width:200px;
        height:100px;
        overflow:auto;
    }
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  style>
  <script src="http://code.jquery.com/jquery-latest.js">script>
head>
<body>
  <div class="demo"><h1>lalalah1><p>Hellop>div>
<script>
    //window.setTimeout(function(){alert("testing");$("div.demo").scrollTop(600)},2000);
    $("div.demo").css("overflow","hidden");
    $("div.demo").scrollTop(600);
    $("div.demo").css("overflow","auto");
script>
 
 
 
 
 
 
 
body>
html>