Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Cascais51

[Resolvido] Pontos automáticos

Por , em Javascript

Recommended Posts

Cascais51    0

Cascais51
Postado

Olá pessoal, passei horas e horas tentando procurando jeito mas nenhum deu 100% certo.

Um colega de São Paulo abraçou a causa e também tentou ajudar, porém também não conseguiu.

 

Vamos lá..

 

Preciso imprimir o seguintes dados na estrutura q abaixo

 

EX. 1:

Nome

Endereço ........... TELEFONE

Nome

Endereço ........... TELEFONE

Nome

Endereço ........... TELEFONE

 

 

essas dados vão ser usados em sistemas mas também vão ser usados para impressão em oficio com tres colunas...

ai preciso que o telefone esteja alinhado a direito como no exemplo, para colocar os pontos automaticos em uma linha é moleza, consegui fazer em javascript. O problema é que quando o endereço for grande ele vai quebrar para segunda linha... e ai entra o problema, Como colocar os pontinhos se o endereço tiver duas linhas??

 

lembrando que no banco de dados eu chamo as variaveis:

 

$nome, $endereço e $telefone

 

os dados estão dentro de um DIV com 230px de largura e altura automatica.. pois ele só não pode passar na largura...

 

EX. 2:

 

Carlos Eduardo do Santos

Rua carlos drumount, 185 -

Vila Nova ............................ 3525-5454

 

Maria Antonieta dos Santos

Rua E, 186 Jequiezinho .... 3524-8549

 

Claudio SAntos Couto

Av. Cidade Nova, 257 -

Centro ................................ 3527-5487

 

 

será possivel q esses potinhos entre automaticamente de acordo com o espaço que fica falntando para ser preenchido??

 

fiz uns calculos muito malucos em javascript e PHP, mas esse só funcionou se o endereço só ocupar uma linha dentro do DIV:

 

<?php
$endereco = "Rua Laudelino Braga";

?>


<div class=grande id="teste1">Sergio Cascais<br />
  <div id="teste2" style="float:left"><?php echo $endereco; ?></div>


<div style="float:left"> <script type="text/javascript" language="javascript">

$largura = document.getElementById('teste2').offsetWidth;
$altura = document.getElementById('teste2').offsetHeight;
$quant1 = <?php $quant = strlen($data); echo $quant; ?>;
$ponto = 4;
quantpontos = 230-$largura;
if($altura<24 && $largura<149){
	for($x=$largura;$x<149;$x++){
		$x=$x+3;
		document.write(".");
	}
}
if($altura>24 && $largura<149){
	for($x=$largura;$x<149;$x++){
		$x=$x+3;
		document.write(".");
	}
} 
</script>
  </div>

<div style="float:left"> 3527-7098</div></div>

Impressão:

 

Sergio Cascais

Rua Laudelino Braga ......3527-7098

 

 

SERÁ POSIVEL FAZER ISSO?? procurei varias resposta e não achei...

Lembrando esses pontinho que sepaaram endereço do telfone tem que ser automaticos de acordo com o espaço que sobra entre endereço e telefone para ficar organizado..

 

ESPERO QUE ALGUEM AJUDEM. ISSO JA ME DEIXOU MALUCO...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não pode usar <table> se você fizer um HTML justinho, bem formatado com CSS, tudo isso fica mais 'natural'.

e não precisará de nenhum cálculo maluco.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Não pode usar <table> se você fizer um HTML justinho, bem formatado com CSS, tudo isso fica mais 'natural'.

e não precisará de nenhum cálculo maluco.

 

Hum, será que melhora? posso fazer com <table> sim. Se você tiver uma idéia de como fazer me da uma dica.

 

mas ja vou tentar aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Fez com <table> ?

 

se você fizer como eu disse, e ajustar corretamente os valores das larguras, resolve o problema.

Qual é a dúvida ? com oque você quer que ajudemos ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Fez com <table> ?

 

se você fizer como eu disse, e ajustar corretamente os valores das larguras, resolve o problema.

Qual é a dúvida ? com oque você quer que ajudemos ?

 

William, não tem como da no mesmo se o meu problema é colocar os pontos automaticamente.. da no mesmo se for tabela..

pq a celula teria que ter 230px da largura... e quando o endereço ocapasse só uma linha é moleza...

o problema é quando o endereço ocupa parte da segunda,, linha como vou saber quantos px ou caracteres faltam pra eu prencher com pontos??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mas ai tá a questão.. pra que os pontos ?

 

não seria apenas para deixar formatado ? deixar as coisas alinhadas ? com a tabela, você não precisa, se a intenção for apenas deixar os campos alinhados.

 

pode usar php ?

str_pad()

 

http://php.net/manual/en/function.str-pad.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Mas ai tá a questão.. pra que os pontos ?

 

não seria apenas para deixar formatado ? deixar as coisas alinhadas ? com a tabela, você não precisa, se a intenção for apenas deixar os campos alinhados.

 

pode usar php ?

str_pad()

 

http://php.net/manual/en/function.str-pad.php

 

 

poxa cara essa função com certeza ajudou.. str_pad()... não a conhecia.. eu ja tava fazendo os pontos.. mas usando While ou FOR o que era bem mais complicado.. porém de qualquer forma eu vou ter q contar os caracteres...

 

olhe eu achava que os caracteres ocupavam espaços diferente né? mas parece que descobrir que ocupam o mesmo espaço em largura ou estou errado?

li aqui que a largura poderia variar essa informação é falsa? por isso eu não estava usando simplesmente a quantidade de caracteres para fazer os calculos..

 

Ah e quanto os pontinhos, são nescessários sim, pois esse sistema vai ser para gerar os registro que vão para o diagranador que vai mandar imprimir em gravida entendeu...

 

SE DER CERTO POSTO AQUI..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Depende da fonte cara.. você pode usar uma da familia: monospace ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Depende da fonte cara.. você pode usar uma da familia: monospace ?

 

Quando eu acho q resolvi o problema me aparece outro.. nossa.. é que eu fiz um teste no bloco de notas.. e a fonte do bloco de notas que é monospace..

Ja arial tem diferença.. que coisa, vou consultar o meu cliente para ver se a fonte pode ser outra....

 

mesmo fazendo com a função.. ai não da certo pq na quebra de linha ele não conta o espaço q ficou como caracteres... e eu estou usando a função "strlen" para contar os caracteres da variavel.. é possiveel contar só os caracteres de uma determinada linha em um DIV?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Se o texto não quebrasse seria mais fácil tentar resolver esse problema, além de dar melhor formatação ao texto!

 

Se não houvesse quebra, você poderia tentar: Incluir o texto em um span, com background branco, alinhado à esquerda e o campo com o telefone alinhado com right, tendo no fundo de ambos um background com imagem de pontos, utilizando repeat-x;

 

Algo mais ou menos como:

<div id="fundo" style="background:url('pontos.gif'); background-repeat:repeat-x">

<div id="end" style="position:absolute; left:0px;>Rua das Gazelas Mansas, N. 2424</div>

<div id="tel" style="position:absolute; right:0px;>Rua das Gazelas Mansas, N. 2424</div>

</div>

Esse é só exemplo, que também poderia ser feito com float.

 

Entretanto, fica a pergunta:

1. Você não pode, em espécie alguma, alterar a formatação do texto, para que não sejam necessários os tais pontos?

 

--- Editado ---

Consegui desenvolver um código interessante aqui. Você precisará apenas criar uma imagem no formato gif, com o nome "ponto.gif", contendo um ponto, seguido de um espaçamento em branco:

 

Exemplo: ponto.gif

 

PEEE

 

P = Ponto

E = Espaço em branco

 

Código (estará disponível temporariamente em: http://klonder.net78.net/teste/imasters_pontos.htm):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="">

	<title>Untitled 1</title>
<style type="text/css">
div.lista {position:relative; width:230px; min-height:5px; background-color:#EFEFEF; margin-top:80px}
span.pontos {position:absolute; z-index:2; background:url('ponto.gif'); background-repeat:repeat-x; width:100%; left:0px; bottom:0px;}
span.globalEnd {position:absolute; z-index:3; width:100px; left:0px; bottom:14px;}
span.End {background:#FFF;}
span.globalTel {position:absolute; z-index:4; right:0px; bottom:14px;}
span.Tel {background:#FFF;}
</style>

</head>

<body>

<div class="lista">
<span class="pontos"></span>
<span class="globalEnd"><span class="End">Rua das Gazelas Mansas - Cep 74110-110</span></span>
<span class="globalTel"><span class="Tel">8745-8855</span></span>
</div>

<div class="lista">
<span class="pontos"></span>
<span class="globalEnd"><span class="End">Rua das Gazelas S/N</span></span>
<span class="globalTel"><span class="Tel">8745-3415</span></span>
</div>

<div class="lista">
<span class="pontos"></span>
<span class="globalEnd"><span class="End">Rua do Mato Verde - N. 110</span></span>
<span class="globalTel"><span class="Tel">8745-0000</span></span>
</div>

<div class="lista">
<span class="pontos"></span>
<span class="globalEnd"><span class="End">Rua das Gazelas Mansas - Cep 74110-110</span></span>
<span class="globalTel"><span class="Tel">8745-8855</span></span>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Klonder, cara pelo que vejo você entendeu perfeitamente o que eu queria fazer e deu certo com esse codigo..

 

Porém tem um problema cara... Essa lista de endereço tem que ser copiados para serem impressos.. E com essa imagem de fundo ele não é copiado com a mesma organização..

 

Pode quando vi o codigo pensei q tinha resolvido o problema.. Mas na hora de copiar pro word ele vai sem pontinhos...

 

Tem uma idéia de como resolver isso?

 

Essa lista vai ser copiada para o corel...

 

Para ser diagramada e impressa

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, faz os pontos direto no word então!

ele tem recurso para fazer essa tabulação com pontos automaticamente !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Cara, faz os pontos direto no word então!

ele tem recurso para fazer essa tabulação com pontos automaticamente !!!

 

Será brother? porque o meu problema é que os dados ja estão todos no banco de dados...

ai vou ter colocar esses pontos de qualquer jeito..

são muitos registros e eu vou ter q honrar a palavra com o cliente.. nem q eu tenho q colocar ponto por ponto manualmente em uns mil registros..

 

Bom tive aqui a idéia de criar uma biblioteca com todos os possiveis caracteres a serrem digitados no endereço e compara-los com o tamanho do ponto.. ai posso fazer por grupos ja que muitos caracteres tem o mesmo tamanho..

vai ser mais trabalhoso mas vais er o jeito...

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Thiago, eu tinha feito o script que postei acima e nem sabia que existia isso já! Pensei até que a minha idéia tivesse sido original... :(

 

Mas de todo modo, acabou caindo no mesmo problema creio eu... pois ao selecionar o texto, vi que parece tratar-se também de uma imagem de fundo.

 

Estou achando que a única saída será trabalhar com um tipo de fonte específico em PHP, como proposto pelo William Bruno (família monospace), com cálculos no próprio PHP do tamanho das partes da string.

 

No site http://fontstruct.fontshop.com/ tem como criar a própria fonte, caso não exista ainda uma que agrade.

 

--- Post editado ---

Fiz um código aqui em PHP que adiciona pontos automaticamente, sem uso de imagens. Talvez seja necessário adaptar melhor ao seu caso, pois irá depender do tamanho dos endereços armazenados aí em seu Banco de Dados, mas creio que já seja um progresso na solução para o seu problema. Estou utilizando a fonte Courier New, que quebrou um galhão!

 

Segue o código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="">

	<title>Efeitos Pontos Automáticos</title>
</head>

<body>
<?php
$contato = array(
	array("Carlos Eduardo Pereira","Rua do Boi Sarnento","3454-6787"),
	array("Roberto Piancotto","Rua das Pedras Preciosas","4487-8954"),
	array("Freudet Rabicht","Rua Porto das Galinhas qd.12 lt.34","1124-7845"),
	array("Brasiliano Freitas","Rua Minaçu","5564-7345"),
	array("Klonder Programador","Rua Porto Belo N.345","1247-8854")
);

echo '<div style="width:230px;font-family:courier new; font-size:11px;background:#F5F5F5">';

for ($i = 0; $i<count($contato); $i++) {

		echo ($i+1).". <b>".$contato[$i][0]."</b><br />"; 
		if (strlen($contato[$i][1]) > 20) {
			//Quebrando a string em 20 caracteres;
			$parte20 = substr($contato[$i][1], 0, 20);
			//Localizando a posição do último espaço, para quebrar corretamente:
			$posEspaco = strrpos($parte20, " ");
			
			//Quebrando a string no local correto:
			$parte01 = substr($contato[$i][1], 0, $posEspaco);
			$parte02 = substr($contato[$i][1], $posEspaco);
			echo $parte01."<br>";
			
			//Escrevendo parte02, mais pontos, mais telefone:
			//Antes de mais nada, contar número de pontos necessários:
			$quantPontos = (23-strlen($parte02));
			//Agora sim, podemos escrever a string:
			echo $parte02;
			for ($iPontos = 0; $iPontos<=$quantPontos; $iPontos++) {
				echo ".";
			}
			//Escrevendo o telefone;
			echo $contato[$i][2]."<br /><br />";
		} else {
			//Escrevendo parte02, mais pontos, mais telefone:
			//Antes de mais nada, contar número de pontos necessários:
			$quantPontos = (22-strlen($contato[$i][1]));
			//Agora sim, podemos escrever a string:
			echo $contato[$i][1];
			for ($iPontos = 0; $iPontos<=$quantPontos; $iPontos++) {
				echo ".";
			}
			//Escrevendo o telefone;
			echo $contato[$i][2]."<br /><br />";
		}
		
	
}
echo '</div>';
?>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cascais51    0

Cascais51
Postado

Klonder,

eu ja tinha tentando faer desse jeito mas não ficou tão organizado, esse ficou perfeito, entrei em contato com o pessoal aqui e a fonte vai poder ser Courier New mesmo..

 

então, nesse caso seu script resolve o problema.

 

Muito obrigado mesmo Klonder e todos os que tentaram ajudar também!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito