Pagina dinamica con <div> aiuto!!!!!!!

**Fortu** · 01-10-2003, 14:58

Ciao

vi spiego subito qual'é il mio obiettivo.

Vorrei creare una pagina simile:

--------------------------------------------------------------------
Questa pagina é solo testo e vorrei renderla dinamica:

-testo1
-testo2
-testo3

---------------------------------------------------------------------

E' una pagina statica ma vorrei renderla dinamica in questo modo:

ogni voce della lista é preceduta da una gif cliccabile.
Una volta cliccato sulla gif mi si "espande" sotto la relativa voce un div nascosto che mi visualizza altro testo.
Naturalmente questa espansione mi provocherá lo spostamento in basso delle due voci successive.

Ho visto in giro esempi del genere, ma non ci capisco niente, come posso fare a fare 1 cosa del genere?

**kaze** · 01-10-2003, 15:26

Ok si fà con javascript di seguito il codice:

<HTML>
<head>
<Title>Title goes here</Title>
<script type="text/javascript">
var enablepersist="on" //Enable saving state of content structure? (on/off)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
contractcontent(cid)
document.getElementById(cid).style.display=(docume nt.getElementById(cid).style.display!="block")? "block" : "none"
selectedItem=cid+"|"+document.getElementById(cid). style.display
}
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
contractcontent(selectedComponents[0])
document.getElementById(selectedComponents[0]).style.display=selectedComponents[1]
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(off set, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
if (typeof selectedItem!="undefined")
document.cookie=window.location.pathname+"="+selec tedItem
}

function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && getselectedItem()!="")
revivecontent()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
</head>
<BODY bgcolor="#FFFFFF" text="#000000" alink="#FF0000" vlink="#FF00FF" link="#0000FF">
<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor

ointer">What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor

ointer">Difference betwen Java & JavaScript?</h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<input type="button" value="prova" onClick="expandcontent('sc3')">
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

</BODY>
</HTML>

Discussione: Pagina dinamica con <div> aiuto!!!!!!!

Strumenti discussione

Ricerca discussione

Visualizza

Pagina dinamica con <div> aiuto!!!!!!!

Permessi di invio