:: FILOWEB.it by Filippo Brunelli.

Simulare Carica Altro con Jquery

I siti web moderni preferiscono all’impaginazione dei risultati delle query il caricare sulla stessa pagina altri risultati (il famoso Carica altro) tramite la pressione di un tasto/link o tramite il raggiungimento della fine pagina.
Tra i vari metodi disponibili il più semplice lo si ottiene tramite jquery e si può adattare a molti script e linguaggi.
Per fare questo usiamo due metodi che ci offre il frameworks jquery: .append e .load.
Il metodo .append serve per poter accodare un contenuto all’interno dell’elemento al quale è associato.
Il metodo .load carica, invece, il contenuto di un file all’interno di un div.
Per quanto riguarda l’html sarà sufficiente creare un div al quale assegnamo l’id “contenuto” all’interno del quale carichiamo la nostra pagina con i dati aggiuntivi.

Per quanto riguarda lo script ci limitiamo a scrivere la funzione che carica la pagina dentro contenuto:

Nello script abbiamo aggiunto una variabile che passa il numero di pagina nel caso dovessi caricare più pagine.
Posso anche aggiungere la funzione che nasconde il div che mi mostra “carica altri”:

$("#linnk").click(function() {$(this).hide();});

Nella pagina caricata mi limiterò a inserire lo stesso script e lo stesso div.

Script completo prima pagina

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<body>
<p>CARICA ALTRO ESEMPIO</p>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/R06939V9BEM0AWYTUVM5VOQMEP0Q9O.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/LN6VNQDBH_NH77SWWRRBP6YJX7BDMQ.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/LVXNE6SIG86TAO8YBPBK3Q6A9D5VAF.jpg" >
</div>

<div id="blinnk"><a href="javascript:aggiungi(<%response.write(pag)%>);" id="linnk" style="width:100%; background-color:#354D46; text-align:center; color:#FFF;" title="Carica tutti" >CARICA ALTRI</a></div>

function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+<%response.write(pag)%>));
}
</script>

</body>
</html>

Script completo 2° pagina

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>

<!doctype html>
<html >
<style type="text/css">
body { text-align:center; }
.quadrati { width:200px; height:200px; margin:2px 2px 2px 2px; display:inline-block; border:#354D46 1px solid; }
img { height:100%; width:auto; max-width:190px; }
</style>

</head>
<body>
<%
dim pag
pag=request.QueryString("id")
pag=pag+1
%>

<div id="contenitore">
<h3> questa è la pagina <%response.write(pag)%></h3>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/YLAUXHFWF52IBFJC7TJAZ_Z9ESH799.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/PA8I4_C_J8GFA808JSS4QVQT9NK2FH.jpg" >
</div>

<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/YLAUXHFWF52IBFJC7TJAZ_Z9ESH799.jpg" >
</div>

<div id="blink<%response.write(pag)%>" style="width:100%; background-color:#293343;"><a href="javascript:aggiungi(<%response.write(pag)%>);" id="linnk<%response.write(pag)%>" style="width:100%; background-color:#354D46; text-align:center; color:#FFF;" title="Carica tutti" >CARICA ALTRI</a></div>

</div>

Installazione offline di Visual Studio 2017

Visual Studio è un ambiente di sviluppo integrato sviluppato da Microsoft, che supporta attualmente (2018) diversi tipi di linguaggi come il C, il C++, il C#, il Visual Basic .Net, l’ Html, il JavaScript e molti altri. Visual Studio permette la realizzazione sia di applicazioni che di siti web, web application e servizi web di varia natura.
L'attuale distribuzione di Visual Studio (la 2017), che rappresenta l’ultima versione dopo 20 anni di evoluzione, è disponibile in 3 versioni:

• Community
• Professional
• Enterprise

Una delle novità più importanti riguarda la versione Community che è disponibile completamente gratuita e può essere scaricata e utilizzata liberamente.

Per installare la versione community (come anche le altre) è sufficiente scaricare il file di installazione, lanciarlo e decidere quali componenti installare. Il processo può risultare molto lungo, a seconda della lingua; un’altra soluzione consiste nello scaricare sempre il file di installazione e scaricare tramite uno script i file di setup da conservare per eventuali nuove installazioni.
Il processo risulta sempre lungo, ma una volta fatto ho i file sempre pronti.
Per fare questo per prima cosa devo scaricare il file di installazione da: https://www.visualstudio.com/it/ e quindi salvarlo in una cartella.

Apro quindi il prompt dei comandi (cmd.exe) e mi posiziono nella cartella dove ho copiato il mio file di installazione (vs2017.exe) e scrivo il comando:

vs2017.exe --layout c:\vs2017setup --lang it-IT

In questo modo creo una cartella chiamata vs2017setup dove verranno scaricati tutti i file per l’installazione offline della versione in italiano (lang it-IT) di visual studio 2017.
Visto che in totale verranno scaricati più di 30Gb ci vorrà tempo ed una connessione veloce ( non obbligatoria ma consigliata).

Una volta terminato sarà sufficiente andare nella cartella di installazione ed eseguire il file di setup.

Note: Posso anche scaricare la versione non localizzata in italiano, ma con tutte le lingue disponibile, in questo caso devo prepararmi a scaricare più di 65Gb!!.

Iframe ad altezza variabile

Premetto che non sono un amante degli iframe (non più almeno) perché oltre ad essere deprecati nell’HTML5 fanno sembrare il sito più vecchio di almeno 6-7 anni dando un’idea di poca professionalità. Inoltre gli iframe sono stati creati per visualizzare pagine esterne al proprio sito web, all'interno dello stesso anche se spesso sono stati usati in maniera errata. Quindi si se si vogliono usare per includere pagine esterne, no per quelle interne meglio usare altri metodi come include, o jquery).

Dopo questa lunga e doverosa premessa passiamo ai fatti. Chi usa il tag iframe spesso ha la necessità di adattarne l’altezza in base al contenuto che viene caricato. I metodi che si trovano in rete sono molti ed io voglio qua proporre la mia personale soluzione in pochissime righe di codice: leggo l’altezza dell tagdel contenuto che carico e tramite jquery assegno l’altezza all’ iframe.
Certo posso scegliere anche il tago altro ma in questo mio esempio preferisco usarevisto che tutto il contenuto visibile in una pagina è racchiuso lì dentro.

Definiamo lo stile per il nostro iframe tramite css:
#mioiframe { width:100%; border:#293343 1px solid; height:300px; }

Scriviamo il nostro iframe.

Definiamo il nostro script che verrà chiamato al caricamento del contenuto dell’iframe:
function caricato() {
var mioif = $("#mioiframe").contents().find("body");
var h = mioif.height();
$("#mioiframe").height(80+h+"px");
};

Infine la chiamata alle pagine:

<a href="pg1.html" target="contenuto" class="menu"> pagina 1 </a>
<a href="pg2.html" target="contenuto" class="menu"> pagina 2 </a>

Come si vede è tutto molto semplice, veloce e leggero…

Sistema di schede simile a google news

Creare un sistema di schede simile alle news di Google
A giugno Google ha introdotto una nuova interfaccia per la visualizzazione delle news.
Il sistema fa uso dell’interfaccia stile material design e una nuovo modo di condivisione.
Nel complesso il metodo è molto semplice e con poche righe di codice è possibile fare tutto:

Prima lo script per chiudere la scheda:

function removeThis(field)
{
$(field).parent().hide("slow");
$("#fondo").hide();

E poi lo script per condividere:
function condividi (titolo,linka) {
$("#fondo").show(500);
$("#sharefin").show(501);
$("#titolo").text(titolo);
$("#link").text(linka);
$(".gplus").attr('href', 'https://plus.google.com/share?url='+linka)
$(".facebook").attr('href', 'http://www.facebook.com/sharer.php?u='+linka+'&title='+titolo)
$(".whatsapp").attr('href', 'whatsapp://send?text='+linka+' '+titolo)
}

Nel file CSS creiamo le nostre schede in stile material design ed il bottone di chiusura che chiamerà la funzione removeThis() sul click (onclick="removeThis(this);">x</a>) :

.card {
width:90%;
max-width:900px;
text-align:justify;
min-height:90px;
padding-right: 10px;
padding-left: 10px;
padding-bottom:0.5em;

background: #fff;
border-radius: 2px;
display: inline-block;
margin-bottom:0.3rem;
margin-top: 0.3rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.close {
color: #777;
font: 18px/100% arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position:relative;
float:right;
right:5px;
}

Quando premo sul tasto per chiudere la scheda la funzione removeThis() prende il DOM dell’elemento invocato e chiude l’elemento genitore.
La funzione condividi apre prima due div (uno che copre la pagina con un opacità 0.4) e uno che mostra il link e i bottoni di share
Vengono passati i parametri del link e del titolo alle rispettive icone: Creare un sistema di schede simile alle news di Google
A giugno Google ha introdotto una nuova interfaccia per la visualizzazione delle news.
Il sistema fa uso dell’interfaccia stile material design e una nuovo modo di condivisione.
Nel complesso il metodo è molto semplice e con poche righe di codice è possibile fare tutto:

Prima lo script per chiudere la scheda:

function removeThis(field)
{
$(field).parent().hide("slow");
$("#fondo").hide();

E poi lo script per condividere:
function condividi (titolo,linka) {
$("#fondo").show(500);
$("#sharefin").show(501);
$("#titolo").text(titolo);
$("#link").text(linka);
$(".gplus").attr('href', 'https://plus.google.com/share?url='+linka)
$(".facebook").attr('href', 'http://www.facebook.com/sharer.php?u='+linka+'&title='+titolo)
$(".whatsapp").attr('href', 'whatsapp://send?text='+linka+' '+titolo)
}

Nel file CSS creiamo le nostre schede in stile material design ed il bottone di chiusura che chiamerà la funzione removeThis() sul click (onclick="removeThis(this);">x</a>) :

.card {
width:90%;
max-width:900px;
text-align:justify;
min-height:90px;
padding-right: 10px;
padding-left: 10px;
padding-bottom:0.5em;

background: #fff;
border-radius: 2px;
display: inline-block;
margin-bottom:0.3rem;
margin-top: 0.3rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.close {
color: #777;
font: 18px/100% arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position:relative;
float:right;
right:5px;
}

Quando premo sul tasto per chiudere la scheda la funzione removeThis() prende il DOM dell’elemento invocato e chiude l’elemento genitore.
La funzione condividi apre prima due div (uno che copre la pagina con un opacità 0.4) e uno che mostra il link e i bottoni di share
Vengono passati i parametri del link e del titolo alle rispettive icone

---- Script completo ---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Schede simili a google news</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">

body {
color:#000;
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
}

/* material schede */
.card {
width:90%;
max-width:900px;
text-align:justify;
min-height:90px;
padding-right: 10px;
padding-left: 10px;
padding-bottom:0.5em;

background: #fff;
border-radius: 2px;
display: inline-block;
margin-bottom:0.3rem;
margin-top: 0.3rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

/* fine material schede */

/* Close Button */

.close {
color: #777;
font: 18px/100% arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position:relative;
float:right;
right:5px;
}
/* fine Close Button */

/* condividi */
#fondo {
width:100%;
height:100%;
min-height:100%;
position:fixed;
background-color:#FFF;
z-index:9998;
opacity:0.4;
display:none;

}
#sharefin {
width:300px;
height:150px;
position:fixed;
z-index:9999;
top:50%;
margin-top:-150px;
margin-left:-150px;
left:50%;
background-color:#FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
display:none;
text-align:left;
}

.share {
font-size:20px;
color:#BFBFBF;
float:right;
margin-right:20px;
cursor:pointer;
}
#link {
border:none;
border-bottom:#004A95 1px solid;
}
#titolo {
font-size:18px;
font-weight:700;
}

</style>
</head>

<body>

</div>

<div id="sharefin">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<div id="titolo">Titolo</div><br/>
<div id="link">LINK</div><br/>

</div>

<div class="card">
<h1> Sistema di schede simile a google news </h1>
<h2> By <a href="filoweb.it">Filoweb.it</a></h2>
</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda1 </h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda1','http://www.filoweb.it')" ></i>

</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda2 </h3>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda2','http://filoweb.it/tutorials/')" ></i>

</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda3 </h3>
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda3','http://www.filoweb.it/galleria2015/')" ></i>

</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda4 </h3>
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda4','http://www.filoweb.it/luoghi/')" ></i>
</div>

<div class="card">
<a href="#" class="close" onclick="removeThis(this);">x</a><br/>
<h3 class="titolocard"> Scheda 5 </h3>
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc<br/>
<i class="fa fa-share-alt share" aria-hidden="true" onclick="condividi('Scheda5','http://www.filoweb.it/ricette/')" ></i>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
function removeThis(field)
{
$(field).parent().hide("slow");
$("#fondo").hide();
}
</script>

</body>
</html>

Creare un lightbox responsitive personalizzato

L'effetto Lightbox è quella finestra in overlay che compare nella pagina con effetto opacizzato o meno.

Malgrado esistono diverse librerie pronte all’uso noi vogliamo oggi crearne una noi per capire come funziona.

Il principio è molto semplice: si crea un box con z-index sopra tutti gli altri, larghezza e altezza pari al 100% della pagina, posizione assoluta e non visibile quando inizializzo la pagina.

Chiameremo questo box #fondo

#fondo {

position:absolute;

background-color:#000;

All’interno di questo posizioneremo la nostra immagine che si adatterà alla pagina.

max-height:90%;

display:inline-block;

margin-top:10px;

border:#FFF 2px solid;

border-bottom:#FFF 10xp solid;

}

Creiamo poi la nostra miniatura di immagine che verrà richiamata dallo script

.fotobox {

width:auto;

max-width:180px;

height:130px;

border:#FFF 1px solid;

margin-top:3px;

cursor:pointer;

}

Tutto il resto che vedrete nel CSS della pagina completa è abbellimento

Vediamo ora i nostri script che saranno due:

Il primo per rendere visibile il livello nascosto e inserire all’interno del tag <img> come src il percorso della nostra foto e trasferire anche tutti gli altri dati (titolo della foto e commento)

Il secondo script invece serve per chiudere il lightbox quando premo sullo sfondo

<script type="text/javascript">

function alterna (imma,titolo,commento) {

$(".imagevedi").attr("src","loading.gif")

$(".imagevedi").attr("src",imma);

$("#fondo").fadeIn(1000);

$(".commentofoto").text(titolo);

$(".commentofoto2").text(commento);

}

</script>

<script>

$(document).ready(function(){

$("#fondo").click(function(){

$("#fondo").fadeOut(1000);

$(".imagevedi").attr("src","loading.gif");

});

</script>

Per finire creiamo l'azione sulle nostre immagini

<img src="indovina/2.png" class="fotobox" onclick="alterna('indovina/2.png','Pagliaccio','Un pagliaccio a Verona')" />

Come si vede quando richiamo la funzione alterna invio, oltre che l’indirizzo dell’immagine anche il titolo ed il commento da scrivere nel lightbox

--------

Script completo

--------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Documento senza titolo</title>

#fondo {

position:absolute;

background-color:#000;

display:inline-block;

margin-top:10px;

border:#FFF 2px solid;

border-bottom:#FFF 10xp solid;

display:inline-block;

border:#CCC 1px solid;

background-color:#EFEFEF;

display:inline-block;

margin:5px 5px 5px 5px;

border:#FFF 1px solid;

function alterna (imma,titolo,commento) {

$(".imagevedi").attr("src","loading.gif");

$(".imagevedi").attr("src",imma);

$("#fondo").fadeIn(1000);

$(".commentofoto").text(titolo);

$(".commentofoto2").text(commento);

}

</script>

$(document).ready(function(){

$("#fondo").click(function(){

$("#fondo").fadeOut(1000);

$(".imagevedi").attr("src","loading.gif");

Animazioni con Jquery

La tecnologia Flash che permetteva di creare siti animati è via via sparita nel mentre che prendevano piede i tablet e gli smartphone ( in particolare quelli di Apple).
Si è queindi presentata la necessità di utilizzare altri metodi per animare gli oggetti sullo schermo. Abbiamo visto esempi di animazioni fatti con webkit, adesso vediamo una animazione fatta con Jquery.

jQuery è una libreria di funzioni (framework) Javascript, cross-browser per le applicazioni web. Tramite l'uso della libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l'altezza di un elemento, o farlo scomparire con effetto dissolvenza.

Nel nostro progetto vogliamo far volare una mongolfiera su di una mappa e far comparire una finestra quando arriva a destinazione.

Nell’ HEAD della nostra pagina di inserimento inseriamo il codice per importare la libreria jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

(per maggiori informazioni jquery consiglio di guardare il mannuale nella sezione appunti),

quindi, all'interno dei tag script ( <script> </script>) inseriamo il seguente codice che è il cuore della nostra animazione:

$(document).ready(function(){
$(".btn1").click(function(){
$("#p1").animate({marginLeft:"200px",marginTop:"100px"});
$("#israele").show("slow");
$("#spagna").hide("slow");
$("#russia").hide("slow");
});
$(".btn2").click(function(){
$("#p1").animate({marginLeft:"-120px",marginTop:"70px"});
$("#israele").hide("slow")
$("#spagna").show("slow");
$("#russia").hide("slow");
});
$(".btn3").click(function(){
$("#p1").animate({marginLeft:"120px",marginTop:"-70px"});
$("#israele").hide("slow")
$("#spagna").hide("slow");
$("#russia").show("slow");
});
$(".btn4").click(function(){
$("#p1").animate({marginLeft:"0px",marginTop:"0px"});
$("#israele").hide("slow")
$("#spagna").hide("slow");
$("#russia").hide("slow");
});
});

----------Script completo-----

In questa parte di codice notiamo subito le cose che ci interessano. Se qualcuno ha (come sufferito) già guardato il codice, nota che vi sono dei div chiamati p1 (che contiene la mongolfiera) e con i nomi dei paese che voglio visitare.

#p1 è il DIV che contiene la nostra mongolfiera.
#israele, #spagna, #russia sono i DIV che rappresentano i paesi da visitare

.btn1,.btn2,.btn3,.btn4 sono i bottoni delle mie mete di viaggio.
Analizzando la procedure di .btn1 vediamo subito che vengono fatte delle azioni: prima di tutto si invoca l'azione animate sul div #P1 e si sposta a sinistra e sopra di un determinato numero di pixels rispetto alla posizione iniziale; quindi si mostra il div relativo alla nostra meta e di nascondono gli altri.

Tutto molto semplice

Per finire dobbiamo racchiudere, sempre nell' HEAD della pagina, tra i tag script ( <script> </script>) l'opzione di nascondere i div con l'azione .hide()

L'azione .hide e .show hanno dei parametri, in questo caso usiamo l'opzione "slow" che rallenta la visualizzazione.
( si può alleggerire molto il codice utilizzando $this() ma per capire il funzionamento questo script lo lasciamo lungo)

-----
Script completo
-----

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$(".btn1").click(function(){

$("#p1").animate({marginLeft:"200px",marginTop:"100px"});

$("#israele").show("slow");

$("#spagna").hide("slow");

$("#russia").hide("slow");

});

$(".btn2").click(function(){

$("#p1").animate({marginLeft:"-120px",marginTop:"70px"});

//window.setTimeout(location.href = "http://www.filoweb.it",5000);

$("#israele").hide("slow")

$("#spagna").show("slow");

$("#russia").hide("slow");

});

$(".btn3").click(function(){

$("#p1").animate({marginLeft:"120px",marginTop:"-70px"});

//window.setTimeout(location.href = "http://www.google.com",5000);

$("#israele").hide("slow")

$("#spagna").hide("slow");

$("#russia").show("slow");

});

$(".btn4").click(function(){

$("#p1").animate({marginLeft:"0px",marginTop:"0px"});

//window.setTimeout(location.href = "http://www.google.com",5000);

$("#israele").hide("slow")

$("#spagna").hide("slow");

$("#russia").hide("slow");

});

</script>

$(document).ready(function() {

$("#israele").hide();

background-color: #000;

background-image:url(img/medit.jpg);

border:#FFF 4px solid;

border:1px solid #494949;

filter:alpha(opacity=70);

font-family:Verdana, Geneva, sans-serif;

border:1px solid #494949;

filter:alpha(opacity=70);

font-family:Verdana, Geneva, sans-serif;

border:1px solid #494949;

filter:alpha(opacity=70);

font-family:Verdana, Geneva, sans-serif;

CHECK IN: seleziona la tua destinazione

<button class="btn1">Israele</button>

<button class="btn2">Spagna</button>

<button class="btn3">Russia</button>

Israele<br/>

Lo Stato d'Israele è uno Stato del Vicino Oriente che si affaccia sul Mar Mediterraneo nel territorio storico-geografico dell'antico Regno di Israele.<br/>

Il moderno Stato d'Israele fu proclamato da David Ben Gurion il 14 maggio 1948, alla scadenza del Mandato britannico della Palestina.

</div>

<div id="spagna"> Spagna <br/>

La Spagna (in spagnolo España), ufficialmente Regno di Spagna, è uno Stato democratico, membro dell'Unione Europea e della NATO. È organizzato sotto forma di monarchia parlamentare. Situato nell'Europa sud-occidentale, insieme con il Portogallo, Andorra e Gibilterra, forma la penisola iberica.

</div>

<div id="russia"> Russia<br/>

La Federazione Russa chiamata comunemente anche Russia, è uno Stato che si estende tra l'Europa e l'Asia. <br/>

Con una superficie di 17 075 400 chilometri quadrati la Russia è il Paese più vasto del pianeta.

</div>

</body>

</html>

Creare un sistema solare con 3 pianeti

Note: Questo toutorials funziona solo con i browsers che supportano il "web kit"
WebKit è un motore di rendering per browser web utilizzato per il rendering delle pagine web. Originariamente sviluppato da Apple, nel 2005 è stato reso open source.

La parte che ci interessa nello script è quella relativa alle righe webkit:

"-webkit-animation-iteration-count:infinite;" indica che l'animazione sarà ripetuta all'infinito
"-webkit-animation-timing-function:linear;" indica che l'animazione avrà la stessa velocità dall'inizio alla fine
"-webkit-animation-name:tgira;" indica il riferimento all'animazione "-webkit-animation-duration:15s;" indica la durata dell'animazione

Fino a qua tutto è molto semplice direi.
Adesso scriviamo la nostra animazione nel file CSS o nello stile della pagina:

@-webkit-keyframes tgira {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}

Questo indica che la trasformazione dell’oggetto parte da una rotazione di 0 gradi per finire ad una di 360.
Salviamo il nosto file CSS con il nome: cssmuove.css oppure mettiamolo nella pagina stessa.

Adesso nel nostro file html inseriamo la terra come div:

<div id="orbitat"><div id="terra">Terra </div></div>

Salviamo e lanciamo, vediamo che il pianeta terra si muove in un orbita circolare. Possiamo far, adesso, ruotare la terra intorno al suo asse mentre ruota intorno al sole, aggiungiamo nell'identificatore della terra, nel file css le seguenti righe

-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:tgira;
-webkit-animation-duration:5s;

Salviamo e lanciamo, vediamo che il pianeta terra ruota anche su se stesso.
Creiamo adesso il sole, gli altri pianeti e lo sfondo; Per ogni pianeta creiamo una diversa "orbita" ed una diversa velocità di rotazione (di seguito solo per il pianeta terra).

e per finire nel nostro codice CSS scriviamo la rotazione:

@-webkit-keyframes tgira {

from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) }

}

Da notare che tutti i pianeti usano una sola animazione tgira che viene usato sia per l'orbita dei pianeti che per la rotazione dei pianeti. Ogni animazione ha un tempo diverso: -webkit-animation-duration:Xs; dove x indica i secondi della rotazione.

Il nostro file HTML avrà i tag dei pianeti come in esempio:

<div id="orbitav"><div id="venere">Venere</div></div>
<div id="orbitat"><div id="terra">Terra </div></div>
<div id="orbitam">
<div id="marte">Marte</div></div>
<div id="sole">SOLE</div>

-------
script completo
-------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Pianeti</title>

body { background-color:#000; background-image:url(sfondo.jpg); color:#FFF; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-top:30px;}

@-webkit-keyframes tgira { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) }}
</style>

</head>

<body>

<div id="orbitav"><div id="venere">Venere</div></div>
<div id="orbitat"><div id="terra">Terra </div></div>
<div id="orbitam"><div id="marte">Marte</div></div>
<div id="sole">SOLE</div>

</body>

</html>

Filoweb.it
By Filippo Brunelli

► Tutorials

-------
script completo
-------

► Tutorials

-------script completo-------

-------
script completo
-------