Category Archives: dhtml

Ingrandire dinamicamente la dimensione del testo contenuto in una pagina con DOM

In questo articolo vedremo come ingrandire la dimensione del testo contenuto in una pagina. Creiamo 3 funzioni javascript che rendono il testo piccolo, normale, ingrandito.

<SCRIPT type=text/javascript>
        function ingrandisci (){
        document.body.style.fontSize = "1.3em";
        }
        function riduci (){
        document.body.style.fontSize = "0.7em";
        }
        function normale (){
        document.body.style.fontSize = "1em";
        }
</SCRIPT>

 Fatto ciò possiamo richiamare le nostre funzioni:

<A onclick=ingrandisci();href="#">Ingrandito</A>

Strutturare i contenuti tramite tabs

In questo articolo ci proponiamo di realizzare un modo per strutturare i contenuti tramite tabs.

 

Nel file allegato all'articolo, troverete tutto il necessario, compresi il file css e javascript.

Vi incollo in codice da utilizzare nella pagina

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>Tabs</title>
         <script language="javascript" type="text/javascript" src="mctabs.js"></script>
        <link href="css/advlink.css" rel="stylesheet" type="text/css" />
        <base target="_self" />
</head>
<body id="advlink">
    <form action="#">
                <div class="tabs">
                        <ul>
                                <li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">Tab111111111111</a></span></li>
                                <li id="popup_tab"><span><a href="javascript:mcTabs.displayTab('popup_tab','popup_panel');" onmousedown="return false;">Tab222222222222</a></span></li>
                                <li id="events_tab"><span><a href="javascript:mcTabs.displayTab('events_tab','events_panel');" onmousedown="return false;">Tab3333333333</a></span></li>
                                <li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">Tab44444444444</a></span></li>
                        </ul>
                </div>
                <div class="panel_wrapper">
                        <div id="general_panel" class="panel current">
                                <fieldset>
                                        <legend>Contenuto del tab1</legend>
                                         ciao
                                </fieldset>
                        </div>
                        <div id="popup_panel" class="panel">
                                <fieldset>
                                        <legend>Contenuto del tab2</legend>
                                        ciao 2
                                </fieldset>
                        </div>
                        <div id="advanced_panel" class="panel">
                        <fieldset>
                                        <legend>Contenuto del tab4</legend>
                                        ciao 4
                                </fieldset>
                        </div>
                        <div id="events_panel" class="panel">
                        <fieldset>
                                        <legend>Contenuto del tab3</legend>
                                         ciao 3
                                </fieldset>
                        </div>
                </div>
    </form>
</body>
</html>

Allegato: tab1.zip

css dropdown menu

In questo articolo tratteremo come creare un css dropdown menu tipo download.com

<!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" lang="en" xml:lang="en">
 <head>
  <title>Example</title>
  <style type="text/css">
*{ margin: 0; padding: 0; font-family: Verdana, Helvetica, Arial, Sans-serif; }
body{
  margin: 0 auto;
  text-align: center;
  background: #fff;
  color: #000;
  font-size: 62.5%;
}

#container{
  margin: 0 auto;
  text-align: left;
  width: 760px;
}
#menu{ width: 210px; }
h1{ margin-top: 5px; font-size: 1em; color: #900; }
h1 a{ color: #900; text-decoration: none; }
ul{ list-style: none; }
ul li{ margin: 0; padding: 0 0 0 10px; }
ul li a{ display: block; background: #fff; margin: 0; width: 100%; border-bottom: 1px solid #eee; padding: 5px 2px; text-decoration: none; color: #00f; }
.show{ display: block; }
.hide{ display: none; }
  </style>
  <script type="text/javascript">
var numberOfMenus = 4;
var menu1 = 'hide';
var menu2 = 'hide';
var menu3 = 'hide';
var menu4 = 'hide';
var menu5 = 'hide';

function mClick(ID){
  if(document[ID] == 'show'){
    hide(ID);
  }else{
    show(ID);
  }
}
function show(ID){
  for(i = 1; i <= numberOfMenus; i++){
    hideMenu = "menu" + i;
    hide(hideMenu);
  }

  if(document.getElementById){ var obj= document.getElementById(ID); }
  else if(document.all){ var obj = document.all.ID; }
  else if(document.layers){ var obj = document.ID; }
  obj.className = "show";
  document[ID] = 'show';
}
function hide(ID){
  if(document.getElementById){ var obj= document.getElementById(ID); }
  else if(document.all){ var obj = document.all.ID; }
  else if(document.layers){ var obj = document.ID; }
  obj.className = "hide";
  document[ID] = 'hide';
}
  </script>
  </head>
 <body><div id="container">
  <div id="menu">
   <h1><a href="javascript:void(0)" onclick="mClick('menu1')">Browsers</a></h1>
   <div id="menu1" class="hide">
    <ul>
     <li><a href="#">Firefox</a></li>
     <li><a href="#">IE</a></li>
     <li><a href="#">Netscape</a></li>
     <li><a href="#">Opera</a></li>
     <li><a href="#">Safari</a></li>
    </ul>
   </div>
   <h1><a href="javascript:void(0)" onclick="mClick('menu2')">Languages</a></h1>
   <div id="menu2" class="hide">
    <ul>
     <li><a href="#">.NET</a></li>
     <li><a href="#">ASP</a></li>
     <li><a href="#">C/C++</a></li>
     <li><a href="#">Java</a></li>
     <li><a href="#">Javascript</a></li>
     <li><a href="#">PHP</a></li>
    </ul>
   </div>
   <h1><a href="javascript:void(0)" onclick="mClick('menu3')">Search</a></h1>
   <div id="menu3" class="hide">
    <ul>
     <li><a href="#">Google</a></li>
     <li><a href="#">Yahoo</a></li>
    </ul>
   </div>
   <h1><a href="javascript:void(0)" onclick="mClick('menu4')">More...</a></h1>
   <div id="menu4" class="hide">
    <ul>
     <li><a href="#">Here</a></li>
     <li><a href="#">Are</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Samples</a></li>
    </ul>
   </div>
  </div>
  </div></body>
</html>

Dhtml Creare un menu stile tabs

Obiettivo
In questo articolo tratteremo come creare un menu stile tabs come in figura:

Codice

<html>
<head>
<style>
body{font-family:verdana,arial;font-size:14px;}
#menu {font-family:verdana,arial;font-size:14px;}
#menu ul { list-style-type: none; margin: 0px; padding: 0px;}
#menu li { display: inline;margin: 0px;padding:0px; }
#menu li a{ text-decoration: none;  padding: 0px 0.3em; }
#descrizione{ width:500px;padding:5px;}
</style>
</head>
<script>
function scrivi(cosa){ descrizione.innerHTML=""+cosa; }
function cambiacolore(cosa,colore){
document.getElementById(cosa).style.backgroundColor = colore;
document.getElementById("descrizione").style.backgroundColor = colore;
}
var tab1="<br><form><input type=\"text\"><br><input type=\"text\"><br><input type=\"submit\"></form>";
var tab2="<br><table border=1><tr><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr></table><br>";
var tab3="<img border=\"0\" width=200 src=\"\">";
var tab4="bla bla bla bla bla bla bla bla bla<br> bla bla bla bla bla bla <br>bla bla bla bla bla bla ";
</script>

<body onload="scrivi(tab1);cambiacolore('tab1','#cecece');">
<div id="menu">
<ul>
    <li id="tab1" style="background:#cecece;"><a href="#" onClick="scrivi(tab1);cambiacolore('tab1','#cecece');">Menu 1</a></li>
    <li id="tab2" style="background:#00ff00;"><a href="#" onClick="scrivi(tab2);cambiacolore('tab2','#00ff00');">Menu 2</a></li>
    <li id="tab3" style="background:#ceff00;"><a href="#" onClick="scrivi(tab3);cambiacolore('tab3','#ceff00');">Menu 3</a></li>
    <li id="tab4" style="background:#ff9933;"><a href="#" onClick="scrivi(tab4);cambiacolore('tab4','#ff9933');">Menu 4</a></li>
</ul>
</div>
<div id=descrizione>&nbsp;</div>
</body>
</html>

Il contenuto dei var task va inserito nella vriabili:

var tab1="<br><form><input type=\"text\"><br><input type=\"text\"><br><input type=\"submit\"></form>";
var tab2="<br><table border=1><tr><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr></table><br>";
var tab3="<img border=\"0\" width=200 src=\"\">";
var tab4="bla bla bla bla bla bla bla bla bla<br> bla bla bla bla bla bla <br>bla bla bla bla bla bla ";

Il colore iniziale del menu e del task

<li id="tab1" style="background:#cecece;"><a href="#" onClick="scrivi(tab1);cambiacolore('tab1','#cecece');">Menu 1</a></li>

Dhtml Effetto rollover con javascript e i css

In questo articolo tratteremo come creare un effetto rollover con javascript e i css.
Le immagini di prima e dopo il rollover sono "uno.jpg" e "due.jpg"

<style>
.Off
{
width:110px;
height:110px;
background: url("uno.jpg");
}

.On
{
width:110px;
height:110px;
background: url("due.jpg");
}
</style>

<div class="Off" onmouseout="this.className='Off';" onmouseover="this.className='On';"></div>

Spostare il contenuto di un tag <div> con il mouse

In questo articolo tratteremo come spostare il contenuto di un blocco di testo o
codice html contenuto all'internodell'attributo <div> con il mouse.

<html>
<head>
<script language="JavaScript">
var isMinNS4 = (document.layers) ? 1 : 0;
var isMinIE4 = (document.all) ? 1 : 0;

var mouseX = 0;
var mouseY = 0;

if (isMinNS4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;

function getMousePosition(e)
{
if (isMinNS4)
{
mouseX = e.pageX;
mouseY = e.pageY;
}
if (isMinIE4)
{
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}

function posiziona(){
var mezzanotaX=50;
var offsetY=10;
var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;
if (ie4) {document.all['note'].style.left = mouseX-mezzanotaX;
document.all['note'].style.top = mouseY-offsetY;}
if (ns4) {document.layers['note'].left = mouseX-mezzanotaX;
document.layers['note'].top = mouseY-offsetY;}
if (ns6) {document.getElementById(['note']).style.left = mouseX-mezzanotaX;
document.getElementById(['note']).style.top = mouseY-offsetY;}
document.getElementById('note').onmousemove=posiziona;

}

function blocca(){
document.getElementById('note').onmousemove=null;
}
</script>
</head>

<body>

<div id="note"
style="position:absolute;cursor:hand;background-color:white;zindex:5;"
onMousedown="posiziona();" onMouseup="blocca();" onSelectStart="return false">
Qui va il codice html che si intende mettere ...
</div>
</body>

</html>
 

Creare un box mostra/nascondi

In questo articolo tratteremo come creare un box che si mostra/nasconde.

Questo script funziona su internet explorer e netscape.

 

<html>
<head>
<script>
var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;

function nascondi(cosa) {
if (ie4) {document.all[cosa].style.visibility = "hidden";}
if (ns4) {document.layers[cosa].visibility = "hide";}
if (ns6) {document.getElementById([cosa]).style.display = "none";}
}
function mostra(cosa) {
if (ie4) {document.all[cosa].style.visibility = "visible";}
if (ns4) {document.layers[cosa].visibility = "show";}
if (ns6) {document.getElementById([cosa]).style.display = "block";}
}
</script>
<style>
#nascosto{position:absolute;width:220;height:80;z-index:100}
#mostrato{position:absolute;width:220;height:80;}
table{background-color:red;}
</style>
</head>
<body>
<div id="nascosto">
<table width="100%" height="95%" >
<tr><td width="100%" height="100%">
<br><a href="#" onclick="nascondi('nascosto');mostra('mostrato');">:: apri box ricerca::</a>
</td>
</tr>
</table>
</div>
<div id="mostrato">
<table width="100%" height="95%">
<tr><td width="100%" height="100%">
inserisci parole:<input type="text" name="nome" size="10">
<input type="button" value="go">
<br><a href="#" onclick="mostra('nascosto');nascondi('mostrato');">ritorna</a>
</td>
</tr>
</table>
</div>
</body>
</html>

Cambiare l’immagine di sfondo di una pagina web in modo dinamico

In questo articolo tratteremo come cambiare l'immagine di sfondo in modo dinamico con DOM

<style>
body{
background-image:url('1.jpg');
}
</style>
<script>
function ChangeBgImg(imgs) {
var body = document.getElementsByTagName("BODY")[0];
body.style.backgroundImage = 'url('+imgs+')';
}
</script>

<body>

<a href="#" onclick="ChangeBgImg('1.jpg');return false">Sfondo1</a>
<a href="#" onclick="ChangeBgImg('2.jpg');return false">Sfondo2</a>
<a href="#" onclick="ChangeBgImg('3.jpg');return false">Sfondo3</a>
</body>
</script>

dove '1.jpg''2.jpg''3.jpg' sono le img di sfondo

oppure senza l'ausilio del DOM

<style>
#pippo{
background-image:url('1.jpg');
}
</style>
<script>
function ChangeBgImg(imgs) {
var body = document.getElementsById("pippo");
body.style.backgroundImage = 'url('+imgs+')';
}
</script>

<body id="pippo">
<a href="#" onclick="ChangeBgImg('1.jpg');return false">Sfondo1</a>
<a href="#" onclick="ChangeBgImg('2.jpg');return false">Sfondo2</a>
<a href="#" onclick="ChangeBgImg('3.jpg');return false">Sfondo3</a>
</body>
</script>

Selezionare una riga di una tabella quando si clicca sul checkbox

Obiettivo
In questo articolo tratteremo come selezionare una riga di una tabella quando si clicca sul checkbox
che corrisponde alla riga da selezionare.

Articolo
La prima cosa che dobbiamo fare e' impostare il colore della riga quando verra' selezionata e lo faccio impostando
lo stile

<style>
.highlightedRow {
background-color: orange;
}
</style>

poi definiamo la funzione che permette di colorare

function row_highlight(trObj, checkboxObj, origClass)

Per utilizzare lo script su una singola riga

<td><input type="checkbox" id="rowSelector" value="" onclick="row_highlight(this.parentNode.parentNode, this, '')"></td>
<td>sono una riga</td>
</tr>

<style>
.highlightedRow {
background-color: orange;
}
</style>
<script>
function row_highlight(trObj, checkboxObj, origClass)
{
if (event.srcElement.tagName.toLowerCase() == 'td' || event.srcElement.tagName.toLowerCase() == 'tr') {
checkboxObj.checked = !checkboxObj.checked;
} else if (event.srcElement.tagName.toLowerCase() == 'input') {
event.cancelBubble = true;
}
if (trObj.className == 'highlightedRow') {
trObj.className = origClass;
} else {
trObj.className = 'highlightedRow';
}
}
</script>

<body>
<table>
<tr>
<td><input type="checkbox" id="rowSelector" value="" onclick="row_highlight(this.parentNode.parentNode, this, '')"></td>
<td>fsdfsdfsdafsd fasdfad</td>
</tr>
<tr>
<td><input type="checkbox" id="rowSelector" value="" onclick="row_highlight(this.parentNode.parentNode, this, '')"></td>
<td>fsdfsdfsdafsd fasdfad</td>
</tr>
</table>

News con effetto fader

Obiettivo
In questo articolo tratteremo come creare news che appaiono con effetto fader.

Articolo
Per prima cosa impostiamo lo stile iniziale

<style>
#opaco {
width: 300px;
background-color: #cecece;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
</style>

poi i parametri del nostro script

var velocita=10; //velocita di apparenza
var intensita=0; //intensita iniziale
var attesa=10000; //attesa tra una notizia e un altra
var notiziainiziale=1;

e poi riempiamo l'array con tutte le notizie

banners[1] = new Banner("http://www.pippo.it/notizia1.htm","11 bla bla bla bla bla bla bla bla bla bla bla bla ");
banners[2] = new Banner("http://www.pippo.it/notizia2.htm","22 bla bla bla bla bla ");
banners[3] = new Banner("http://www.pippo.it/notizia3.htm","33 bla bla bla bla bla bla bla bla ");
banners[4] = new Banner("http://www.pippo.it/notizia4.htm","44 bla bla bla bla bla bla bla bla bla bla ");

e nella pagina mettiamo

<body onload="compari();">
<div id="opaco"> </div>
</body>

dove compari() e' la funzione che svolge tutto il lavoro

<style>
#opaco {
width: 300px;
background-color: #cecece;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
</style>

<script>
var velocita=10; //velocita di apparenza
var intensita=0; //intensita iniziale
var attesa=10000; //attesa tra una notizia e un altra
var notiziainiziale=1;
var banners = new Array();
banners[1] = new Banner("http://www.pippo.it/notizia1.htm","11 bla bla bla bla bla bla bla bla bla bla bla bla ");
banners[2] = new Banner("http://www.pippo.it/notizia2.htm","22 bla bla bla bla bla ");
banners[3] = new Banner("http://www.pippo.it/notizia3.htm","33 bla bla bla bla bla bla bla bla ");
banners[4] = new Banner("http://www.pippo.it/notizia4.htm","44 bla bla bla bla bla bla bla bla bla bla ");
var lunghezza = banners.length - 1;

function Banner(url,notizia) {
this.url = url;
this.notizia = notizia;
return this;
}

function compari(){
document.getElementById("opaco").style.filter="alpha(opacity="+intensita+")";
document.getElementById("opaco").innerHTML="<a href="+banners[notiziainiziale].url+">"+banners[notiziainiziale].notizia+"</a>";
intensita=intensita+1;

if(intensita<100){
setTimeout("compari()",velocita);
}else{
if(notiziainiziale==lunghezza)notiziainiziale=0;
notiziainiziale++;
intensita=0;
attendi(attesa);
compari();
}

function attendi(Amount){
d = new Date()
while (1){
mill=new Date()
diff = mill-d
if( diff > Amount ) {break;}
}
}

}
</script>

<body onload="compari();">
<div id="opaco"> </div>
</body>

Un box <div> con effetto fader

In questo articolo tratteremo come sfruttare i filtri css per far apparire un blocco <div> dal nulla, creremp un
effetto fader

<style>
#opaco {
width: 300px;
background-color: red;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
</style>

<script>
var velocita=10; //velocita di apparenza
var intensita=0;
function compari(){
document.getElementById("opaco").style.filter="alpha(opacity="+intensita+")";
intensita=intensita+1;
if(intensita<100){
setTimeout("compari()",velocita);

}
}
</script>

<body onload="compari();">
<div id="opaco">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</body>