Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Javascript Layer mobile
Postato da webmaster il Wednesday, 03 May @ 01:00:00 CEST
Contributo di webmaster

Questo script crea un layer mobile al cui interno si possono inserire messaggi, immagini o anche codice html. Il visitatore, oltre a poterlo spostare, potrà scegliere se chiuderlo o continuare a visualizzarlo, tramite un piccolo pulsante posizionato sulla barra superiore.

Lo script va inserito direttamente nel corpo della pagina, dopo il tag <body>

<script language="JavaScript1.2">
<!--
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isActive=false;

function MoveInit(e){
topOne=isIE ? "BODY" : "HTML";
whichOne=isIE ? document.all.FloatingLayer : document.getElementById("FloatingLayer");
ActiveOne=isIE ? event.srcElement : e.target;
while (ActiveOne.id!="titleBar"&&ActiveOne.tagName!=topOne){
ActiveOne=isIE ? ActiveOne.parentElement : ActiveOne.parentNode;
}
if (ActiveOne.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichOne.style.left);
nowY=parseInt(whichOne.style.top);
MoveEnabled=true;
document.onmousemove=Move;
}
}

function Move(e){
if (!MoveEnabled) return;
whichOne.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichOne.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}

function MoveN4(whatOne){
if (!isN4) return;
N4=eval(whatOne);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isActive){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}

function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[DivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(DivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[DivID].style.visibility = iState ? "visible" : "hidden";
}
}

document.onmousedown=MoveInit;
document.onmouseup=Function("MoveEnabled=false");
// -->
</script>

Sempre nel body della pagina inseriamo il seguente codice html:

<div id="FloatingLayer" style="position:absolute;width:250px;left:100px;top:100px;visibility:visible; border:solid 1px #FF6600;">
<div id="titleBar" style="cursor:move; width:100%; position:relative; border-bottom:solid 1px #FF6600; background-color:#FF9933;">
<div id="title" style="margin-right:30px; padding-left:3px;">
<font face="Arial" color="#333333">Layer Titolo</font>
</div>
<div id="closeX" style="cursor:hand; position:absolute; right:5px; top:0px;">
<a href="#" onClick="ToggleFloatingLayer('FloatingLayer',0);return false" style="text-decoration:none"><font color="#333333" size="2" face="arial">X</font></a>
</div>
</div>
<div id="floatingContent" style="padding:3px; background-color:#CCCCCC; color:#333333;">

<!-- Start of content area -->

Contenuto del Layer

<!-- End of content area -->

</div>
</div>

La funzione ToggleFloatingLayer, se impostata a 1 visualizza il layer, se impostata a 0 lo nasconde. Ecco alcuni esempi:

<a href="javascript:ToggleFloatingLayer('FloatingLayer',1);">Apri</a>
<a href="javascript:ToggleFloatingLayer('FloatingLayer',0);">Chiudi</a>

<input type="button" onClick="ToggleFloatingLayer('FloatingLayer',1);" value="Apri Layer">
<input type="button" onClick="ToggleFloatingLayer('FloatingLayer',0);" value="Chiudi Layer">


 
Links Correlati
· Indice Javascript
· Inoltre Javascript
· News by webmaster


Articolo più letto relativo a Javascript:
Reload automatico della pagina

Valutazione Articolo
Average Score: 5
Voti: 7


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Javascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.05 Secondi

Theme by

© Oceanoweb