css esterni e funzioni javascript, testo nascosto

« Older Newer »

max_400

Posted on 1/9/2010, 12:36

nome file testo.css

CODICE

#div {
display: none;
}

nome file testo.htm

CODICE

<html>
<head>
<link href="testo.css" type="text/css" rel="stylesheet">
<script language="javascript">
function display_block() {
document.getElementById('div').style.display = "block";
}
function hide_block() {
document.getElementById('div').style.display = "none";
}
</script>
</head>
<body>
<div id="div">TESTO<br>

</div>

<a href="javascript:display_block();">MOSTRA DIV</a><br>
<a href="javascript:hide_block();">nascondi DIV</a><br>

...
</body>
</html>

giulianamarconi87

Posted on 16/9/2010, 09:59

ciao max, io avreibisogno di nascondere una tabella per il lavoro che sto facendo lepagine sono troppo lunghe. Voglio che quando si clikka sull'intestazione di un capitlo ti esce tutto il testo me lo puoi fare?
poi se è possibile il css si può mettere interno?
grazie

max_400

Posted on 16/9/2010, 12:04

CITAZIONE

Ma certo... ecco qua un esempio semplice

CODICE

<html>
<head>
<style>
#div {
display: none;
}
</style>
<script language="javascript">
function display_block() {
document.getElementById('div').style.display = "block";
}
function hide_block() {
document.getElementById('div').style.display = "none";
}
</script>
</head>
<body>
<div id="div">
<b><u><font color=red size=5>Capitolo 1 - Flash - La storia di Flash</b></u></font><br>
.......................................<br>
Flash 1 - AS 1.0<br>
Flash 2 - AS 1.0<br>
Flash 3 - AS 1.0<br>
Flash 4 - AS 1.0<br>
Flash 5 - AS 2.0<br>
Flash 6 - AS 2.0<br>
<a href="http://max400.forumfree.it">Flash 7 - AS 2.0</a><br>
Flash 8 - AS 2.0<br>
........................................<br>
Flash CS1 - AS 3.0<br>
Flash CS2 - AS 3.0<br>
Flash CS3 - AS 3.0<br>
Flash CS4 - AS 3.0<br>
Flash CS5 - AS 3.0<br>

<br>

</div>

<a href="javascript:display_block();">MOSTRA DIV</a><br>
<a href="javascript:hide_block();">nascondi DIV</a><br>

...
</body>
</html>

Per ora digerisci questo che poi ti dò il resto...
i css sono incorporati... quindi tutto in una pagina

- Apri un foglio di Notepad e ficcaci dentro sto script.
- Salvi in formato .html e vedi se ti funziona.

PS quale broweser hai? Internet Explorer o Modzilla Firefox?

Invito quelli che hanno Internet Explorer
a verificare il funzionamento di questo script
Grazie.

Er Founder
by Max :capt:

lippo75

Posted on 10/11/2010, 00:18

vorrei esaminare il codice stringa per stringa......

CODICE

<html>

apro la pag html

CODICE

<head>

apro il corpo della pag

CODICE

<style>

apro lo stile del carattere?nn saprei

CODICE

#div {
display: none;
}

deve esseril codice per mandare a capo le due scritte

CODICE

</style>

chiudo lo stile

CODICE

apro il javascript

CODICE

function display_block() {
document.getElementById('div').style.display = "block";
}
function hide_block() {
document.getElementById('div').style.display = "none";
}

deve essere lo script che mi permette di aprire e chiudere nn so interpretarlo

CODICE

</script>
</head>

chiudo lo spazio dello script e la testa della pag

CODICE

<body>

apro il corpo della pag

CODICE

è la formattazione del testolo mandi a capo

CODICE

<b><u><font color=red size=5>Capitolo 1 - Flash - La storia di Flash</b></u></font><br>

con<b> metti il testo in grassetto
con <u> metti il testo sottolineato

CODICE

è un atributo del testo , lo coloro di rosso con una misura d 5

CODICE

Capitolo 1 - Flash - La storia di Flash

la scritta che appare

CODICE

</b></u></font><br>

richiudi tutto

CODICE

.......................................<br>
Flash 1 - AS 1.0<br>
Flash 2 - AS 1.0<br>
Flash 3 - AS 1.0<br>
Flash 4 - AS 1.0<br>
Flash 5 - AS 2.0<br>
Flash 6 - AS 2.0<br>
<a href="http://max400.forumfree.it">Flash 7 - AS 2.0</a><br>
Flash 8 - AS 2.0<br>
........................................<br>
Flash CS1 - AS 3.0<br>
Flash CS2 - AS 3.0<br>
Flash CS3 - AS 3.0<br>
Flash CS4 - AS 3.0<br>
Flash CS5 - AS 3.0<br>

<br>

</div>

interruzioni di riga poi mandi a capo

CODICE

<a href="javascript:display_block();">MOSTRA DIV</a><br>
<a href="javascript:hide_block();">nascondi DIV</a><br>

richiama il codice javascript mostra e nascondi rispettivamente per fare l'azione dello script

CODICE

..
</body>
</html>

chiudi corpo e pagina
ci sono errori ?

max_400

Posted on 10/11/2010, 01:33

CITAZIONE

#div {
display: none;
}
deve esseril codice per mandare a capo le due scritte

è un codice per nascondere il testo del div a cui è collegato
# questo è l'identificatore o volendo si può usare il punto in altri casi .prova

è importate di dire che il tag style prepara uno style da applicare successivamente
infatti viene richiamato dal div

in altri casi si può fare esternamente

basta mettere questo codice in un file con estensione css
questo si può realizzare con un semplice block notes

fff.css

CODICE

#div {
display: none;
}

nella pagina web

CODICE

<html>
<head>

<link href="fff.css" type="text/css" rel="stylesheet">

<script language="javascript">
function display_block() {
document.getElementById('div').style.display = "block";
}
function hide_block() {
document.getElementById('div').style.display = "none";
}
</script>
</head>
<body>
<div id="div">
<b><u><font color=red size=5>Capitolo 1 - Flash - La storia di Flash</b></u></font><br>
.......................................<br>
Flash 1 - AS 1.0<br>
Flash 2 - AS 1.0<br>
Flash 3 - AS 1.0<br>
Flash 4 - AS 1.0<br>
Flash 5 - AS 2.0<br>
Flash 6 - AS 2.0<br>
<a href="http://max400.forumfree.it">Flash 7 - AS 2.0</a><br>
Flash 8 - AS 2.0<br>
........................................<br>
Flash CS1 - AS 3.0<br>
Flash CS2 - AS 3.0<br>
Flash CS3 - AS 3.0<br>
Flash CS4 - AS 3.0<br>
Flash CS5 - AS 3.0<br>

<br>

</div>

<a href="javascript:display_block();">MOSTRA DIV</a><br>
<a href="javascript:hide_block();">nascondi DIV</a><br>

...
</body>
</html>

l'utilità del foglio di stile è proprio esternamente
se tu devi modificare i titoli di 50 pagine
basta modificare il css che è collegato a tutte le pagine grazie a questa riga

CODICE

e successivamente al div con identificatore id="div"

la funzione javascript non fa altro che cambiare lo stato del diplay

prova

Download attachment
esterno_css.rar ( Number of downloads: 29 )

anna1991pa

Posted on 8/6/2011, 15:12

questo del testo nascosto è molto interessante max

5 replies since 1/9/2010, 12:36 160 views