Salve a tutti
Ho visto un effetto javascript che tramite un semplice click permette di modificare il contenuto di una pagina senza neanche bisogno di aggiornare la pagina. BELLISSIMO!!!
Come si fa?
Nel mio caso dovrei semplicemente fare in modo che una tabella mostri rispettivamente una o più righe.
Dove hai visto questo effetto?? Hai l'indirizzo??
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
Fa parte di un blog creato e nel particolare nosconde o visualizza alcune opzioni
E' uno script pubblicato proprio da HTML.it
segue:
<HTML>
<HEAD>
<TITLE>HTML.it - il sito italiano sul Web publishing</TITLE>
<style>
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
<script type="text/javascript">
var enablepersist="on"
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="white" vlink="blue" link="blue">
<div align="center">
<h3 onClick="expandcontent('sc1')" style="cursor:hand;"><font face="verdana">Clicca qui!</font></h3>
<div id="sc1" class="switchcontent">
<table cellpadding="2" cellspacing="2" border="0" align="center" bgcolor="#f0f0f0">
<tr>
<td align="center">
<font face="verdana" size="1">Ecco il testo nascosto che viene mostrato quando si espande il DIV</font>
</td>
</tr>
</table>
</div>
<A onClick="expandcontent('sc2')" style="cursor:hand;">
Dov'è il logo di Html.it?
</A>
<div id="sc2" class="switchcontent">
<table cellpadding="2" cellspacing="2" border="0" align="center" bgcolor="#f0f0f0">
<tr>
<td align="center">
<font face="verdana" size="1">Eccolo!!!</font>
[img]htmlit.gif[/img]
</td>
</tr>
</table>
</div>
<font size=1 face="arial">
<div align="center">
[img]htmlit.gif[/img]
<font face="Arial" size="1"> Script offerto da HTML.it
e commentato da Lorenzo Forti.
<font face="arial" color="Red">L'uso e la diffusione di questo codice è gratuita per siti non commerciali</font>
Per altri Javascript visita la nostra raccolta con più di 300 esempi
</font>
</div>
</font></BODY>
</HTML>
Sayonara...
kami del tempo / raccogli i miei ricordi / vola distante.
Rinaldo - RexPlants
RexPlants il forum delle piante che mangiano
Se puo interressarti io ho usato questa funzione, valida per tabelle form quello che vuoi ecc. basta dare il valore id a qualsiasi campo tu voglia nascondere/visualizzare.
<head>
<script>
function prova(){
if(checkbox.value==true){
prima.style.display=''
seconda.style.display='none'
}
else
{
prima.style.display='none'
seconda.style.display=''
{
}
</script>
</head>
<input type="Checkbox" onClick="prova()"
<table>
<tr>
<td id="prima">
Ciao 1
</td>
<td id="seconda">
Ciao 2
</td>
</tr>
</table>
Ciao David :metallica :bubu:
Oddiiiiiiiiiiiiio! Kaze ma che cos'è tutto quello?
speravo di trovare una o al massimo due funzioni...
ora vado a provare la soluzione di marcanoa e vi faccio sapere
marcanoa è quasi perfetto!!!
è esattamente quello che serviva a me solo che una volta nascosta una cella non la rende più visibile nemmeno deselezionando il checkbox
Permessi di invio
Rispondi quotando