Category Archives: jquery UI

css3, jquery UI, JS

::after & ::before come handler per jquery

ahahah, ho scoperchiato il vaso di pandora!
Infatti è molto bello e comodo aggiungere pseudo elementi (ecco perchè hanno i doppi puntini) prima e dopo i vostri contenitori,
ma poi vi viene la balzana idea di usarli per azionare movimenti nella pagina web e tad tam!! scopri che nn sono nel DOM!!
 
e quindi!??!
Qui c’è una discussione : http://stackoverflow.com/questions/8095177/jquery-using-after-selector
Io invece mi sono accorta che posso risolvere il mio problema (fa muovere una lista/menu orizzontalmente) senza essere così elegante 😛
 
Qui invece quello che sto smontanto:
html:
<div id=""#focus"><ul><li>item del menu 1</li><li>item del menu 2</li><li>item del menu 3</li></ul> <div>
CSS:

#focus::before {background: none repeat scroll 0 0 grey;color: #f56f20;content: "<";float: left;font-size: 5em;height: 1.08em;padding: 1.15em 0.1em;width: 20px;cursor:pointer;}
#focus::after {color: #f56f20;content: ">";float: right;font-size: 5em;margin-top: -2.5em;padding: 0.25em;width: 20px;cursor:pointer;}
Per i glifi questo può aiutarvi:
http://unicode-table.com/en/

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%;
}
 
}

data jornalism, html5, jquery UI, JS, SoftwareLibero

Grafici interattivi

Aggiornamento 2:
tool grafici
http://infogr.am
http://live.amcharts.com/
http://www-958.ibm.com/software/analytics/manyeyes/
https://www.draw.io/
Aggiornamebto:
Con questo il New York times si è vinto un premio:
http://www.nytimes.com/2013/07/22/business/in-climbing-income-ladder-location-matters.html?_r=2&

 
eccone uno davvero bello !
http://www.nytimes.com/interactive/2011/10/23/sunday-review/an-overview-of-the-euro-crisis.html?_r=0
http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html?_r=0#God
Strumenti utilizzati:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://graphics8.nytimes.com/packages/js/newsgraphics/2011/1020-debt/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://graphics8.nytimes.com/packages/js/newsgraphics/2011/1020-debt/underscore-min.js" type="text/javascript" charset="utf-8"></script>
Ovvero:
Devo dire che quest’ultimo non lo conoscevo 🙂 ma credo che sia funzionale a http://www.documentcloud.org/ e non alla creazione del grafico in se.
Quindi il grafico viene creato e disegnato in SVG dentro a un riquadro canvas con Raphael e poi si passa da uno all’altro utilizzando il semplice metodo delle tab di jquery:
E quindi il segreto delgrafico è tutto qua: nelle indicazioni di quel che deve fare il canvas.. e nel JS che lo anima:
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
*/