Category Archives: jquery mobile

jquery mobile, WP

worpress API per javascript

Per dire che son 3 o 4 mesi che batto la testa e le dita sulla tastiera riguardo le wp json rest API, che dal 4.5 sono diventate native e che già da un po aleggiavano nell’aria di cambiamento di wp.
Ve la faccio brevissima, wp ci da nativamente delle liste in json con dentro tutto: titoli, articoli, tassonomie, etc.. quindi manipolabili con javascript e che entrano appieno nella possibilità di avere delle web app interamente in js/css3 e html5.
Consiglio la lettura di questo per documentarsi:

REST API


MA soprattutto di qualche interpretazione, tipo questo articolo:
 
http://insights.dice.com/2013/05/13/javascript-is-eating-the-world-2/
https://premium.wpmudev.org/blog/wordpress-rest-api/?mv=b&utm_expid=3606929-67.KOuGWaEfRS2elZCEv5f8LA.1&utm_referrer=https%3A%2F%2Fwww.google.it
https://it.wikipedia.org/wiki/Teoria_della_grande_unificazione

jquery mobile

jquery mobile1.4 – Pannello laterale indipendente dalla pagina (no scroll to top)

That’s because the panel is in sync with the main page list. If you think about it when the panel is open the list items start from the top and not in the middle hence the reason the main page scrolls to the top. Th 10
CSS fix JQM 1.3, 1.4
.ui-panel.ui-panel-open {
position:fixed;
}
.ui-panel-inner {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
i have this in my panel
data-position-fixed=”true”
For 1.3 only, This is a small hack to stop the main page scrolling when the panel is scrolled right to the top or right to the bottom and the user keeps scrolling.
.ui-page-active.ui-page-panel {
height: 70%;
}
Demo
http://jsfiddle.net/qsXzD/5/
fonte: http://stackoverflow.com/questions/22672236/jquery-mobile-panel-open-scrolls-page-to-the-top-how-to-change-this

jquery mobile, jquery UI, JS

Plugin jquery: immagini a tutto schermo

Fonte: http://www.sitepoint.com/responsive-fullscreen-background-image-plugins/
Related Posts:

1. Vegas Background jQuery Plugin

Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.s
Vegas-Background.jpg
SourceDemo

2. Backstretch

A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
Backstretch1.jpg
Source + Demo

3. Supersized jQuery Plugin

Full screen background slideshow plugin for jQuery
Supersized1.jpg
SourceDemo

4. jQuery tubular

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way.
jQuery-Tubular.jpg
Source +Demo

5. mb.jquery

A good way to have extra content or a navigation tool in your page.
mbjQuery.jpg
SourceDemo

CSS Only Techniques

There are also a CSS only techniques if you want courtesy of my good ole Chris Source Demo.

css3, html5, jquery mobile, jquery UI, Uncategorized

Responsive web design MAP

1) Plugin davvero utile:
 https://github.com/stowball/jQuery-rwdImageMaps
demo
2) CSS3 adorabile , fa la media query e si accorge quando il device è landscape e quindi centra l’immagine, tutto in percentuale!
meraviglioso!
/*
*
* mappa
*/
div#mappa {
width: 100%;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
div#mappa {
width: 50%;
margin:0px 50%;
position:relative;
left:-25%;
}
 
}

esercizi, html5, jquery mobile, jquery UI

Drag&Drop .. su jquery mobile?!?!

[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/drag.html” width=”600″ height=”480″]
BH.. uno passa da jquery UI a jquery mobile… e… scopre che si pestano i piedi a vicenda!
Hanno entrambi la stessa dipendenza da jquery 1.9 ma costruiscono due USER INTERFACE differenti.
JQ mobile usa dei tag html non standard e questo mi lascia un po perplessa.. anche il mio IDE è dello stesso parere 😉
Ecco il meglio che ho accrocchiato per mantenere il drag&drop anche in jquery mobile, però usando jqueri UI, ma senza i fogli di stile.. brr che impasto..
suggerimenti?
Sembra carino e pare pure che funzioni…
AHH altra pecca.. pensavo che jquery mobile racchiudesse già i plugin per il touch ed immagino sia sicuramente così…
tranne… per i drag&drop.. quindi ho dovuto aggiungere:
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
*  jquery.ui.widget.js
*  jquery.ui.mouse.js
*/
 

html5, jquery mobile, JS

Grid responsive!!

Eddai! sembra un ossimoro, no? però devo dire che funzionano benino una volta capite.. ne parlavo quanche tempo fa in un post.. ovvero il fatto che le tabelle/griglie sono superate dall’html3.. ma ce le troviamo riapparire nell’html5.. come mai? perchè hanno un significato semantico.
Alcune cose non avrebbero lo stesso significato se non fossero rappresentate secondo una tabella. E questa non è una semplice scelta stilistica da racchiudere nei fogli di stile, ma è SIGNIFICATO e come tale deve essere nell’html, in modo che se la pagina viene vista solo come CONTENUTI, in ogni modo il messaggio viene trasmesso..
ovvero?!?!?!esempio in un comunissimo questionario Vero e FAlso o delle domande a risp multipla. Se i radio e check box, ovvero i quadratini o rotondini dove potete clikkare e spuntare la risposta non sono in qualche modo “associati” alla domanda..
iframe 600pxX480px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”600″ height=”480″]
come si fa?!?!
Se nel fare una pagina responsive.. poi a prima vista non riesco più a ricondurre quale risposte appartengono a quale domande…CAvolo!! Chissenefrega che è responsive.. non è più utilizzabile! Quindi veniamo alla pratica..
Da una settimana sto litigando con jquerymobile.. rimando ad un altro post le mie prime impressioni HARGGGHH!!!
Quindi se vogliamo una griglia responsive di due colonne sarà così
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
Ma in questo modo .. la tabella c’è e si vede!
a voi la scelta!
iframe 300pxX450px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”300″ height=”480″]