Archivi categoria: jquery UI

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

 

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/

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.

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

}

 

}

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:

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
*/