Home News Guide Hardware Download Forum Glossario

Condividi:        

JavaScript nascondere/rivelare testo in una pagina

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Anthony47, Triumph Of Steel, archimede

Regole del forum
Rispondi al post

JavaScript nascondere/rivelare testo in una pagina

Postdi BianConiglio » 31/10/05 07:43

Ciao.. nn ho mai smanettato attivamente con i JS e prima di perderci tempo volevo sapere se qualcuno ha il codice gia' bello che fatto :D

Mettiamo caso che io abbia una paginetta.. Al suo interno voglio un link che se viene cliccato, fa apparire una porzione di testo che altrimenti sarebbe invisibile.

Insomma cliccando il link appare del testo che normalmente guardando la pagina non sarebbe visibile (se non da sorgente)

hints? non ho proprio voglia e tempo di smanettare da zero!! :D
BianConiglio
Utente Senior
 
Post: 4710
Iscritto il: 26/12/01 01:00
Località: Varese / Lugano
Top
Sponsor
 

Postdi archimede » 31/10/05 09:00

Qualcosa tipo il seguente?
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Popup Demo</title>
<script type="text/javascript">
<!--
function hideObject(id) {
        document.getElementById(id).style.visibility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
    document.getElementById(id).style.visibility = "visible";
}
//-->
</script>
<style type="text/css">
.showpopup {position:relative;}
#provaPopup {visibility:hidden;position:absolute;left:200px;top:-30px;
        width: 400px;
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin: 0;
        padding: 0;
}
.provaHeader {
        padding: 5px 5px 5px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #514541;
}
.provaTitle {
        padding: 0px 5px 0px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #000000;
}
.provaText {
        padding: 0px 5px 0px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        color: #000000;
}
</style>
</head>
<body>
<p>Visualizza <a href="#" onclick="showObject('provaPopup');return
false;">pop-up</a>.</p>
<div class="showpopup">
   <div id="provaPopup">
         <div class="provaHeader">Prova Header</div>
         <h1 class="provaTitle">Prova titolo</h1>
         <p class="provaText">Questo è un testo di prova.</p>
         <p><a href="#" onclick="hideObject('provaPopup');return false;">Close</a></p>
   </div>
</div>
</body></html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova
Top

Postdi BianConiglio » 31/10/05 10:55

perfetto, thanx
BianConiglio
Utente Senior
 
Post: 4710
Iscritto il: 26/12/01 01:00
Località: Varese / Lugano
Top

Postdi BianConiglio » 31/10/05 15:55

avendo cambiato le specifiche della pagina ora mi trovo davanti a queswto problema..

devo avere piu' di un box nascosto, pertanto il codice va cambiato dato che mi fa vedere sempre lo stesso (logicamente).. dovrei dare un nome ai vari box e richiamarli quando faccio open..

:D idee?? come prima nn ho voglia di metter mano ai manuali di JS :p
BianConiglio
Utente Senior
 
Post: 4710
Iscritto il: 26/12/01 01:00
Località: Varese / Lugano
Top

Postdi archimede » 31/10/05 16:38

BianConiglio ha scritto:devo avere piu' di un box nascosto, pertanto il codice va cambiato dato che mi fa vedere sempre lo stesso (logicamente).. dovrei dare un nome ai vari box e richiamarli quando faccio open
Non sono sicuro di aver capito, forse così?
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Popup Demo</title>
<script type="text/javascript">
<!--
function hideObject(id) {
        document.getElementById(id).style.visibility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
    document.getElementById(id).style.visibility = "visible";
}
//-->
</script>
<style type="text/css">
.showpopup {position:relative;}
#provaPopup {visibility:hidden;position:absolute;left:200px;top:-30px;
        width: 400px;
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin: 0;
        padding: 0;
}
.showpopup2 {position:relative;}
#provaPopup2 {visibility:hidden;position:absolute;left:200px;top:-30px;
        width: 400px;
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin: 0;
        padding: 0;
}
.provaHeader {
        padding: 5px 5px 5px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #514541;
}
.provaTitle {
        padding: 0px 5px 0px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #000000;
}
.provaText {
        padding: 0px 5px 0px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        color: #000000;
}
</style>
</head>
<body>
<p>Visualizza <a href="#" onclick="showObject('provaPopup');return
false;">pop-up</a>.</p>
<div class="showpopup">
   <div id="provaPopup">
         <div class="provaHeader">Prova Header</div>
         <h1 class="provaTitle">Prova titolo</h1>
         <p class="provaText">Questo è un testo di prova.</p>
         <p><a href="#" onclick="hideObject('provaPopup');return false;">Close</a></p>
   </div>
</div>
<p>Visualizza <a href="#" onclick="showObject('provaPopup2');return
false;">pop-up2</a>.</p>
<div class="showpopup">
   <div id="provaPopup2">
         <div class="provaHeader">Prova Header2</div>
         <h1 class="provaTitle">Prova titolo2</h1>
         <p class="provaText">Questo è un testo di prova 2.</p>
         <p><a href="#" onclick="hideObject('provaPopup2');return false;">Close</a></p>
   </div>
</div>
</body></html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova
Top

Postdi BianConiglio » 31/10/05 18:15

eh il problema è che se lo faccio dichiarando ogni messaggio hidden nel css (provaPopup2, provaPopup) avrò un css di mille mila righe :D

domani vedo di studiarci un po ;)
BianConiglio
Utente Senior
 
Post: 4710
Iscritto il: 26/12/01 01:00
Località: Varese / Lugano
Top

Postdi archimede » 31/10/05 18:41

Se il problema è solo la dimensione del CSS puoi provare:
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Popup Demo</title>
<script type="text/javascript">
<!--
function hideObject(id) {
        document.getElementById(id).style.visibility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
    document.getElementById(id).style.visibility = "visible";
}
//-->
</script>
<style type="text/css">
.provaHeader {
        padding: 5px 5px 5px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #514541;
}
.provaTitle {
        padding: 0px 5px 0px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #000000;
}
.provaText {
        padding: 0px 5px 0px 5px;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        color: #000000;
}
.nascosto {
   position:relative;
   visibility:hidden;position:absolute;left:200px;top:30px;
   width: 400px;
   border: 1px solid #000000;
   background-color: #FFFFFF;
   margin: 0;
   padding: 0;
}
</style>
</head>
<body>
<p>Visualizza <a href="#" onclick="showObject('provaPopup');return
false;">pop-up</a>.</p>
<div class="showpopup">
   <div id="provaPopup" class="nascosto">
         <div class="provaHeader">Prova Header</div>
         <h1 class="provaTitle">Prova titolo</h1>
         <p class="provaText">Questo è un testo di prova.</p>
         <p><a href="#" onclick="hideObject('provaPopup');return false;">Close</a></p>
   </div>
</div>
<p>Visualizza <a href="#" onclick="showObject('provaPopup2');return
false;">pop-up2</a>.</p>
<div class="showpopup">
   <div id="provaPopup2" class="nascosto">
         <div class="provaHeader">Prova Header2</div>
         <h1 class="provaTitle">Prova titolo2</h1>
         <p class="provaText">Questo è un testo di prova 2.</p>
         <p><a href="#" onclick="hideObject('provaPopup2');return false;">Close</a></p>
   </div>
</div>
</body></html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova
Top

Postdi GAD » 01/11/05 02:54

Puoi anche non dichiarare tutti i css, applichi uno stile temporaneo (che vede solo l'utente in runtime) semplicemente usando lo style.visibility=xxx dato l'id di un oggetto.
Es:
<div id="ceppo">CIAO SONO CEPPO</div>
si nasconde con
var el=document.getelementById("ceppo");
el.style.visibility="hidden";

Che tu abbia definito direttamente nel tag degli stili o una classe css nel momento in cui a runtime la vai a cambiare essa diventa come la vuoi. Puoi anche non definire niente, basta che tu abbia l'id dell'oggetto e ci fai tutto.
Quando l'ultimo albero sarà abbattuto,l'ultimo pesce catturato,l'ultimo fiume avvelenato,
soltanto allora gli uomini si accorgeranno chei soldi non possono essere mangiati
GAD
Moderatore
 
Post: 2184
Iscritto il: 22/09/02 14:36
Località: Nebbiosa
Top

Postdi BianConiglio » 01/11/05 12:10

perfetto, grazie ad entrambi :D
BianConiglio
Utente Senior
 
Post: 4710
Iscritto il: 26/12/01 01:00
Località: Varese / Lugano
Top

Postdi GAD » 02/11/05 14:49

Mi aggancio a sto topic perche' e' una cosa che forse interessa se sono ot splittatemi.
A proposito di javascript, il codice lo metti in chiaro o lo nascondi in qualche modo?
Io ho fatto uno structure management tutto javascript e le funzioni che mi sono costate tanta fatica mi tira metterle pubbliche e scopiazzabili semplicemente guardando il codice della pagina.
C'e' qualcuno che ha sotto mano qualche tool (free) per rendere il codice obfuscated in modo che almeno il lamerozzo scopiazzatore di turno non ci salti fuori agilmente?
Quando l'ultimo albero sarà abbattuto,l'ultimo pesce catturato,l'ultimo fiume avvelenato,
soltanto allora gli uomini si accorgeranno chei soldi non possono essere mangiati
GAD
Moderatore
 
Post: 2184
Iscritto il: 22/09/02 14:36
Località: Nebbiosa
Top

Postdi Mone » 02/11/05 16:43

Io in ufficio uso questo: http://www.syntropy.se/?ct=products/jce ... t=overview ma si paga, prima usavamo jmyth http://www.geocities.com/SiliconValley/ ... /jmyth.htm ch'è gratis ma ha qualche difettuccio, e in più sembra non esserci più, però se lo vuoi te lo mando.
Avatar utente
Mone
Utente Senior
 
Post: 343
Iscritto il: 21/10/03 19:44
Località: Zion
Top

Postdi archimede » 02/11/05 16:45

A pagamento Obfuscator.

Free: Script Encoder.

HTH.

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova
Top

Postdi GAD » 02/11/05 16:48

Provo la versione free del primo e vedo com'e', grazie
Quando l'ultimo albero sarà abbattuto,l'ultimo pesce catturato,l'ultimo fiume avvelenato,
soltanto allora gli uomini si accorgeranno chei soldi non possono essere mangiati
GAD
Moderatore
 
Post: 2184
Iscritto il: 22/09/02 14:36
Località: Nebbiosa
Top

Postdi BianConiglio » 02/11/05 18:44

Io l'ho copiato qui, mi sembra giusto farlo copiare agli altri :D
Ci ho messo un link di pcf :D
BianConiglio
Utente Senior
 
Post: 4710
Iscritto il: 26/12/01 01:00
Località: Varese / Lugano
Top

Postdi Dylan666 » 03/11/05 23:30

Se interessa ancora, una cosa simile c'è qui:

http://www.lazylaces.com/article.asp?p=1439

Riducendolo al minimo:

Codice: Seleziona tutto
<html>
<head>
<style type="text/css">
div.spoilerA {
        background-color: #eee;
        color: #eee;
}

div.spoilerB {
        background-color: #eee;
        color: #000;
}
</style>
<script language='javascript'>function revealSpoiler(obj) {if (obj.className=='spoilerA') {obj.className='spoilerB';}else if (obj.className=='spoilerB') {obj.className='spoilerA';}}</script>

SPOILER: clicca nel riquadro per mostrare/nascondere il testo
<div class='spoilerA' onclick='revealSpoiler(this);'>
Ecco svelato il suggerimento
</div>
</body>
</html>


Ovviamente non è un codice di "protezione" , serve solo per evitare che ci si rovini la sorpresa leggendo un qualcosa che deve essere mostrato solo dopo aver dato il proprio consenso ;)
Avatar utente
Dylan666
Moderatore
 
Post: 39993
Iscritto il: 18/11/03 16:46
Top
Rispondi al post

Torna a Programmazione


Topic correlati a "JavaScript nascondere/rivelare testo in una pagina":

Conta.più.se con solo parte del testo
Autore: systemcrack 		Forum: Applicazioni Office Windows
Risposte: 9
Inserimento valore di una cella in testo di altra cella
Autore: Ricky0185 		Forum: Applicazioni Office Windows
Risposte: 7
Excel Estrazione casuale testo da colonna per bingo ca**ate
Autore: Dylan666 		Forum: Applicazioni Office Windows
Risposte: 7
Formattazione testo in grassetto in una textbox di una form
Autore: deniel69 		Forum: Applicazioni Office Windows
Risposte: 4
Importare più file di testo contemporaneamente
Autore: Paolo67 		Forum: Applicazioni Office Windows
Risposte: 2

Chi c’è in linea

Visitano il forum: Nessuno e 17 ospiti