I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
macking
macking
il 24 settembre 2011 alle 13:47
27 messaggi dal 26 gennaio 2008
La domanda che sto per porre la ritengo un tantino complicata. Ho bisogno di creare una pagina web che abbia l'aspetto di un quaderno, sulla quale si possa scrivere senza però l'utilizzo di una text box, e al riempimento totale di entrambe le pagine sfogli pagina automaticamente e passi ad una pagina bianca. Non voglio usare flash, con il quale non sarebbe poi tanto complicato, ma asp.net e html 5. Come potrei risolvere??
RispondiQuoting
BrightSoul
BrightSoul
il 24 settembre 2011 alle 23:24
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao,
per ciò che riguarda l'aspetto è semplice: ti basta predisporre una div e mediante css gli dai un'immagine di sfondo raffigurante le righe (o i quadretti) del quaderno. Imposterei anche un line-height, così da essere sicuro che su ogni browser la riga sia alta sempre un numero di pixel ben determinato.

Una cosa del genere:

<style>
#quaderno {background-image:url('images/righe-quaderno.png'); line-height:20px;}
</style>


Come mai hai escluso le textbox (o le textarea)? E' perché non si riesce a misurare il numero di righe di testo contenute in esse? Se è per questo motivo, potresti usare una div che abbia l'attributo contenteditable settato su true. Sembra ben supportato dai maggiori browser.

Così facendo, l'utente potrà digitare del testo all'interno della div, modificandone il contenuto. Questa tecnica è usata anche dall'applicazione Quick Note di Chrome che penso che sia simile a ciò che vuoi realizzare tu. Magari dai una sbirciata al suo javascript.

Usare una <div contenteditable="true"> ti consente di misurare l'altezza del testo, così sai quando il foglio di quaderno è stato riempito. Prova con questo esempio che invoca una funzione javascript alla pressione di ogni tasto:

<style>
#quaderno {line-height:20px; background-image:url('images/righe-quaderno.png')}
</style>
<script type="text/javascript">
function misuraAltezza(div){
//offsetHeight mi restituisce l'altezza della div
if (div.offsetHeight > 200){ //cioè, maggiore di 10 righe
alert("Il limite è stato raggiunto, qui va il codice javascript per cambiare pagina");
}
}
</script>
<div id="quaderno" contenteditable="true" onkeyup="javascript:misuraAltezza(this);">
scrivi qui
</div>

Quando arriva il momento di cambiare pagina, potresti creare dinamicamente un nuovo elemento <div> da sovrapporre al precedente, che verrebbe nascosto. Avresti un div per ciascuna pagina di quaderno.
Al momento di salvare i dati, puoi recuperare il contenuto da ciascuna div grazie alla proprietà .innerHTML (o .innerText).

ciao,
Modificato da BrightSoul il 24 settembre 2011 23.28 -
Enjoy learning and just keep making
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.