Archivio della categoria: HTML5/CSS

[Phonegap/iOS] How to fix hide status bar with Phonegap 2.9.0

Lascia una risposta

Salve a tutti,

dopo 4 ore (totali) di ricerca nel cercare di risolvere un problema fastidiosissimo alle app Phonegap inveriori alla 3.0, ho trovato il modo semplice per ovviare a questo problema.

Il problema in sè stava nel fatto che, la status bar dei device iPhone o iPad con sistema iOS 7.x.x, phonegap 2.9 rispetto alla 3.1, non gestiva correttamente il width massimo della webview phonegap così da visualizzare “sotto” (letteralmente) la status bar del device la vostra app.

Per risolvere questo problema, ci viene incontro il nostro caro e amato plist del nostro progetto in xCode 5.

Entriamo nella sezione delle proprietà del progetto e nella sezione TARGETS, trovate la dicitura Status Bar Style, sotto effettuate il check della voce

Hide during application lounch

Apriamo il file nome_progetto-info.plist (o simile) che troverete nella sezione Resources.

Troviamo la voce:

Status bar is initially hidden

E settiamolo a YES.

Ora premente il pulsante per aggiungere una nuova voce e aggiungece come key:

View controller-based status bar apparance

Oppure (per essere precisi)

UIViewControllerBasedStatusBarAppearance

Con type Boolean e il value settato su NO

Così avrete FISSATO (anche se temporaneamente) il bug della web view di phonegap.

Ricordo che con l’aggiornamento a Phonegap 3.1 o ulteriori il BUG è stato risolto e viene gestito correttamente.

Problemi o dubbi, commentate ^_^

[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

[Phonegap/Android] How to disable highlighting after scrolling effect (top and bottom)

Lascia una risposta

Hola a tutti,

oggi mi sono imbattuto in un piccolo problema fastidioso, ovvero in un’app ibrida con phonegap guando si sviluppa un’app per piattaforma android, la prima cosa che si va a notare e che scrollando la pagina dall’alto verso il basso e viceversa, si nota quella fastidiosa striscia blu che compare e scompare gradualmente allo scroll.

per ovviare a questo fastidioso problema, nel web ho trovato tante soluzioni, bene o male corrette, ma la più efficace la reputo sempre nativa quindi in java e il codice è il sequente:

// FIX remove the blue color at the top and bottom
        if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.GINGERBREAD) {
 
            this.appView.setOverScrollMode(appView.OVER_SCROLL_NEVER);
 
        }

questo if va inserito dopo il

super.loadUrl("file:///android_asset/www/index.html", 4000);

nella vostra funzione onCreate del file MainActivity.java ed il gioco e fatto.

UPDATE:  Potrebbe capitare (asseconda della vostra versione di cordova/phonegap) che l’app vada in crash. Una soluzione corretta e testata, sarebbe quella di eliminare il this. prima di appView

Saluti ^_^

[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>