Category Archives: JS

css3, data jornalism, didattica, georeferenziazioni, html5, JS, maps

Storymap/timeline e scroll triggered

Ecco le proposte:
1) http://timeline.knightlab.com/
la più tradizionale
2)https://storymap.knightlab.com/
molto legata al territorio
3)http://cartodb.github.io/odyssey.js/
idem..
4) http://timemapper.okfnlabs.org/okfn/medieval-philosophers#0
anche
Questi sono pacchetti quasi già fatti di codice..
Oppure possiamo prendere ispirazione da questi che però dobbiamo
lavorare di più per ottenerli:
A) http://www.nytimes.com/newsgraphics/2013/10/13/russia/
si snoda verticalmente su un percorso, immaginatelo su una linea del tempo.
B)http://revolt.axismaps.com/map/
ha un PLAY degli eventi storici, che comunque vengono collocati su una
mappa o disegno
C)http://www.nytimes.com/interactive/2014/07/03/world/middleeast/syria-iraq-isis-rogue-state-along-two-rivers.html
tutto creata sullo scroll dell'utente e la posizione nella mappa in basso a a dx.
TOOL per avere sempre i dati dello scroll della pagina:
http://homepage.ntlworld.com/keir.clarke/web/leafletwaypoint.html
tool singolo:
http://imakewebthings.com/waypoints/
css3, html5, JS

Menu Focus – scorrere una lista dinamica di item

Punto 1: ricordarsi di mettere jQuery e non $, che nel php si spacca tutto.
poi: contare quanti LI nell' UL che interessa.
Quindi: freccia dx, fa scomparire i primi, freccia a sn, fa apparire i primi.

/*questo fa scorrere i focus */
jQuery(document).ready(function(){
var i=0;
var quantiLi = 10;
jQuery(“.focus li”).each(function (i) {
i = i+1;
jQuery(this).addClass(“focus”+i);
});
// quantiLi = jQuery(“.menu.nav.focus li”);
console.log( quantiLi );
var n = 1
jQuery(“span.asn”).click(function() {
// console.log( “ready!focus” ); il primo sparisce
jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).addClass(“hide”);
n=n+1;
});
jQuery(“span.adx”).click(function() {
//console.log( “ready!focus” );
jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).removeClass(“hide”);
n=n-1;
});
});
MIGLIORIA dinamica:

/*questo fa scorrere i focus */
jQuery(document).ready(function(){
var i=0;
jQuery(“.focus li”).each(function (i) {
i = i+1;
jQuery(this).addClass(“focus”+i);
});
jQuery( “.focus li” ).last().addClass( “ultimo” );
var listItem = jQuery( “.ultimo” );
var quantiLi = listItem.index( “.focus li” )-3;/*dinamico!!*/
console.log( quantiLi );
var n = 1
jQuery(“span.asn”).click(function() {
// console.log( “ready!focus” ); il primo sparisce
if(n <= quantiLi){ jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).addClass(“hide”);
n=n+1;
}
else{
n = quantiLi;
}
});
jQuery(“span.adx”).click(function() {
//console.log( “ready!focus” );
if(n >= 0){
jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).removeClass(“hide”);
n=n-1;
}
else{
n=1;
}
});
});

css3, data jornalism, didattica, e-learning, html5, infografiche, JS, SoftwareLibero

Fantastici! Knight lab

http://knightfoundation.org/press-room/press-release/new-html5-website-helps-organizations-navigate-int/
mettono a disposizione tantissimi strumenti in FREESOFTWARE per la didattica,
niente specchietti per le allodole gratuiti e poi features a pagamento!
TUTTO gratis, anzi LIBERO!
TIMELINE:  http://timeline.knightlab.com/
STORYMAP: http://storymap.knightlab.com/
SLIDER: http://juxtapose.knightlab.com/
SOUND-INLINE in Text: http://soundcite.knightlab.com/
 
 

JS

La lunghezza di un oggetto in JS

fonte: http://gabrieleromanato.com/2012/03/javascript-ottenere-la-dimensione-e-il-numero-di-membri-di-un-oggetto/
 
thanks!
La seguente funzione conteggia tutti i membri di un oggetto, ossia quelli direttamente accessibili tramite la catena dell’ereditarietà basata sull’oggetto prototype:


function objectSize(obj) {
  var objectSize = 0;
  for (key in obj){
    if (obj.hasOwnProperty(key)) {
      objectSize++;
    }
  }
  return objectSize;
}

Esempio d’uso:


var my = {
	a: 1,
	b: 'Test'
};
console.log(objectSize(my)); // 2

Il problema è che dall’iterazione vengono esclusi i membri privati dell’oggetto.

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.