Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Grafica Countdown con progress bar
Postato da webmaster il Tuesday, 07 March @ 07:00:00 CET
Contributo di webmaster

Abbiamo già visto come limitare i caratteri in una textarea e visualizzare un countdown dei caratteri ancora disponibili. Lo script che stiamo per trattare consente di visualizzare oltre al countdown, una progress bar grafica che aumenta man mano che si inserisce il testo.

Lo script funziona egregiamente con Internet Explorer, Netscape ed Opera. I fogli di style ed il codice javascript vanno inseriti fra i tags <head> del documento.

<head>

<style type="text/css">

.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;
}

</style>

<script type="text/JavaScript">

function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
var charcnt = field.value.length;

// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit);
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limit: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}

function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}

</script>

</head>

Nel <body> della pagina va inserito il codice html del form a cui viene applicato l'effetto tramite l'id maxcharfield.

<body>

<form>

<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',200)"
onKeyUp="textCounter(this,'progressbar1',200)"
onFocus="textCounter(this,'progressbar1',200)" ></textarea><br />

<div id="progressbar1" class="progress"></div>

<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",200)</script>

</form>

</body>

Nell'esempio il numero massimo di caratteri stabilito è 200, per aumentarlo o diminuirlo basterà modificare questo valore.



 
Links Correlati
· Indice Grafica
· Inoltre Grafica
· News by webmaster


Articolo più letto relativo a Grafica:
Immagine che si illumina al passaggio del mouse

Valutazione Articolo
Average Score: 5
Voti: 2


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

GraficaJavascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.04 Secondi

Theme by

© Oceanoweb