barra de tempo

jcfr · November 13, 2009 at 10:09 AM

bem o que eu queria era criar uma barra do genero desta:

http://img97.imageshack.us/img97/853/barraci.jpg

o objectivo é o seguinte, tenho objectos na minha pagina com validade, se for inserido hoje daki a um mes fica sem validade e deixa de aparecer, a ideia era apresentar uma barra deste genero que va apresentando a evolução do tempo, ou seja, quando o objecto era inserido aparecia xeia e ia esvaziando de dia para dia até perder a validade.

se alguem me souber indicar como fazer em php ou noutra linguagem, de preferencia, javascript, css, html ou outra agradecia muito.

tem de funcionar com a apresentação de varios produtos na mesma página....

obrigado a todos

PS: a parte que diz validade: 18-1-2010 nao necessita aparecer, so preciso mesmo da barra, o resto posso escrever mesmo com php quando calculo a quantidade de dias que ainda faltam.

Gooden · November 13, 2009 at 10:24 AM

Desculpem la responder desta maneira. mas isto segundo o que me parece é apenas uma "jogada" de imagens. só tens é de fazer as imagens e depois em php fazer um case. se faltar 2 dias metes 1 se faltar 3 dias metes outra. etc....

mas se quiseres fazer tu a progressbar por php usa a libraria de gráficos para fazer.

http://www.codegod.de/WebAppCodeGod/dl/ProgressBar.jpg

é tudo uma questão de pensares

jcfr · November 13, 2009 at 10:40 AM

Desculpem la responder desta maneira. mas isto segundo o que me parece é apenas uma "jogada" de imagens. só tens é de fazer as imagens e depois em php fazer um case. se faltar 2 dias metes 1 se faltar 3 dias metes outra. etc....

mas se quiseres fazer tu a progressbar por php usa a libraria de gráficos para fazer.

http://www.codegod.de/WebAppCodeGod/dl/ProgressBar.jpg

é tudo uma questão de pensares

inicialmente pensei em fazer dessa forma, mas entretanto descobri como fazer usando flash e php, dessa forma cria a barra automatica sem criar imagem nenhuma, o problema é que a forma que arranjei é escrevendo a validade total e os dias que faltam para terminar numa página e o php le a pagina e recebe as variaveis:

na pagina:

<?php echo "&total=30&passaram=10"; ?>

ou em vez de numeros colocar variaveis que vamos buscar a base de dados que também serve.

o flash vai ler a pagina e guarda as variaveis total e passaram.

dessa forma, tendo esses valores no flash é possivel criar a barra que encha apenas até onde pretendemos, o meu problema é que tendo vários produtos o flash so guarda os dados de um deles e nao poderia apresentar a barra para cada produto.

a ideia das imagens foi a minha ideia inicial mas é uma ideia que funciona mas penso ser má programação...

se não houver solução terá de ser com as imagens mas se alguem me poder ajudar de outra forma agradecia....

jcfr · November 13, 2009 at 11:53 AM

bem pessoal, já encontrei uma forma de o fazer com javascript e php, vou deixar aki o post para o caso de vir a ser util a alguem, assim não precisam recorrer ao uso de imagens...

utilizei uma frame para mostrar a barra que é criada numa página separada.

na página onde quero mostrar a barra calculo o total de dias e os dias que faltam (também pode ser usado com percentagem sendo que o total nesse caso será sempre 100) os valores que vou apresentar são apenas um exemplo:

<?php
$total=30;
$dias=15;
?>
<iframe src="timeline.php?total=<?php echo "$total"?>&dias=<?php echo "$dias"?>" name="bar" width="150" height="30" scrolling="No" frameborder="0" id="bar" tppabs="http://.........php"></iframe>

depois crio uma página com o nome timeline.php com o seguinte codigo:

<?php
if (!isset($_GET['total'])){
        $total = 30;
}else{
        $total = $_GET['total'];
}


if (!isset($_GET['dias'])){
        $dias = 0;
}else{
        $dias = $_GET['dias'];
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table align="center"><tr><td>
<div id="showbar" style="font-size:4pt;padding:1px;border:solid black 1px;">
<?php
$i=0;
for($i=1;$i<=$total;$i++){
?>
<span id="progress<?php echo $i ?>">   </span>
<?php
}
?>
</div>
</td></tr></table>

<form id="valores" name="valores">
<input type="hidden" name="dias" value="<?php echo $dias ?>">
</form>

<script language="javascript">

var progressEnd = document.valores.dias.value;; // set to number of progress <span>'s.
var progressColor = 'blue'; // set to progress bar color
var progressInterval = 100; // set to time between updates (milli-seconds)

var progressAt = 0;
var progressTimer;
function progress_clear() {
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
progressAt = 0;
}
function progress_update() {
document.getElementById('showbar').style.visibility = 'visible';
progressAt++;
if (progressAt > progressEnd) progress_stop();
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
progressTimer = setTimeout('progress_update()',progressInterval);
}
function progress_stop() {
clearTimeout(progressTimer);

}
//progress_update(); // start progress bar

</script>
<script language="javascript">
progress_update();
</script>
</body>
</html>

esta ultima página vai criar uma div um numero de divisoes igual a variavel total que recebeu utilizando o metodo get, tal como acontece com a variavel dias.

de seguida crio uma funcção que preenche essas divisoes da div preenchendo apenas um numero igual ao valor de $dias e no final chamo a função profress_update() que inicia o prcesso que enche a barra...

desculpem a linguagem que pode ser um pouco confusa... espero que este exemplo venha a ser util a alguém...

já agora andei a procura da opção que havia anteriormente para declarar o tópico com resolvido mas não encontrei se os administradores poderem façam-no por mim, e façam o mesmo ao meu topico anterior também nesta secção.

muito obrigado a todos

Quadrado · November 13, 2009 at 12:39 PM

e trabalha mesmo? Eu ai a uns tempos fiz mas como o gooden disse, também não era nd serio uma brincadeira só, por isso nem me dei muito ao trabalho de procurar outras maneiras.... Mas este que disponibilizaste se trabalhar é óptimo assim se precisar um dia de fazer algo do género sei onde posso encontrar.😄

jcfr · November 13, 2009 at 03:24 PM

sim trabalha na perfeição é so copiares metes uns valores que queiras so pa testares, no meu caso vai buscar valores a base de dados para mostrar a validade dos artigos que estão disponiveis na página... mas se quizeres testar é so mesmo copiar...

PS: no meu caso o valor da variavel total se nao estivesse definida era 30 porque normalmente a validade é de 30 dias, o normal é utilizar-se o valor 0 ou reencaminhar logo de volta á página anterior depende do objectivo da aplicação....

Quadrado · November 13, 2009 at 03:35 PM

😄

Sign In

barra de tempo

Recommended Posts

jcfr

Link to comment

Share on other sites

Gooden

Link to comment

Share on other sites

jcfr

Link to comment

Share on other sites

jcfr

Link to comment

Share on other sites

Quadrado

Link to comment

Share on other sites

jcfr

Link to comment

Share on other sites

Quadrado

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information