Archivi categoria: JS

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/

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

});

});

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/

 

 

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.

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