Archivio della categoria: Mobile

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

2 Repliche

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 :D

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

Lascia una risposta

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)

1 Replica

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>lalala</h1><p>Hello</p></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>