Recebi essa do Breno Saraiva:

"...o imprimir que você disse que tinha feito.. não encontrei no seu blog...

então decidi mandar um email...eu tentei fazer aqui mais ele ta imprimindo

todo o blog...tava pensando... como eu vou estar dentro do post... não tem como 

eu fazer botão imprimir dentro do post.. e selecionar só o que eu quero

imprimir???

Obrigado"

Vou ser sincero me surpreendi, nem eu lembrava mais de ter comentado sobre isso, fiz faz tempo no meu trabalho.

Peguei ele hoje, traduzi, pois estava tudo feito em italiano, e modifiquei para funcionar de acordo com minha biblioteca de scripts.

Serei sincero, não fiz muitos testes, sei que o original funcionava bem, pois testei bastante, esse como posso ter perdido algo enquanto traduzia, ou modificava, pode apresentar algum erro, conto com vocês para “denunciarem”

Testei no FF2, IE7, Opera9, Netscape e Safari3 para windows, nestes funcionou bem, não testei no IE6, estou sem aqui.
No IE6 do multiple IE funcionou, mas como sei que tem muita diferença, não da pra levar a sério.

Antes de mais nada devo dizer que a função “print” do Javascript realmente imprime toda a pagina, não tem como escolher o que quer ser impresso, dai partimos para as gambiarras, ou gambware

O que fiz no script?

Criei um iframe por código, que carrega o arquivo “imprime.htm”, é este arquivo “imprime.htm” que coloquei a chamada para a função “print”.

Ao clicar em imprimir eu pego o conteúdo da div indicada e jogo para dentro desse iframe, logo ele vai dar o print no iframe, e imprimir somente o conteúdo do mesmo.

E como funciona isso tudo, o que tenho que mudar?

Estou disponibilizando um arquivo de modelo, que é o “index.htm”, como verão neste arquivo, eu incluo 2 arquivos javascript, “fs.js” e “fsprint.js”.

O primeiro são algumas funções prontas para agilizar o trabalho e o segundo é o controle da impressão, onde os objetos são criados etc..

Tem ainda o arquivo “imprime.css”, que é o CSS para poderem estilizar a janela de pré-visualização da impressão.

Para mandar imprimir depois de qualquer lugar da pagina basta inserir o seguinte código no link:

onclick="imprime('id_do_objeto_a_ser_impresso')"

Clique no link abaixo para baixar e ver a pagina de teste:

FS Print - Imprimir com Javascript

Duvidas? erros? sugestões? como sempre, muito bem vindos, escrevam e responderei assim que possível

Categories: Javascript, SOS Javascript
8 Comentarios »

Recebi do Maicon Carlos, que não me deixou nenhum link para site seu para referenciar o seguinte email:

“Rodrigo..analiso seu blog a tempo e hoje vou sugerir algo….

http://www.nick-dunn.co.uk/files/editinplace/editinplace.htm

um editar em ajax (Edit in Place)….seria interessante pois você poderia adicionar e melhorar seu framework.

particularmente eu estou procurando algo sobre isso, e no brasil não achei nada, vou continuar tentando aqui..se você fazer a gente pode trocar idéias, seria um post interessante na sua coleção de “post’s de qualidade”..
”

Bom Maicon, primeiro agradeço pelo “posts de qualidade”, e seguindo, neste site eles utilizaram o Prototype Framework, mais uma biblioteca gráfica, e um script personalizado montado sobre essa plataforma, totalizando 72kb de código.

Eu usei no meu script alguns códigos prontos que já tinha, os quais serão base para minha biblioteca javascript, o dia que der…
Estes scripts estão em fs.js

E criei o arquivo editinplace.js para montar a lógica da coisa.

No final o código ficou assim:

// Edit in Place
// Por Fazedor de Site
// http://www.fazedordesite.com
function removeForm(){
	// retiramos o formulario de dentro do span
	$id("form_altera").parentNode.removeChild($id("form_altera"));
}
function mostra(){
	// verificamos se ja existe o formulario
	if(!$id("form_altera")){
		// muda a propriedade CSS display para none para desocupar o espaço
		$id("editinplace").style.display='none';

		// criamos um nome objeto span dentro do pai do span que ja existia
		// no nosso caso o pai é a tag

		$obj.create("span","formulario",$id("editinplace").parentNode);

		// criamos um form dentro do novo span
		$obj.create("form","form_altera",$id("formulario"));
		// setando os atributos do formulario
		$id("form_altera").setAttribute("name","form_altera");
		$id("form_altera").onsubmit = function(){
			$id("editinplace").style.display="";
			effects.fade(null,"editinplace",0,100);
			fsAjax("altera.php","editinplace","Alterando","POST", "form_altera",1,"removeForm()")
			return false;
		}

		// criamos um input dentro do primeiro filho da SPAN de id formulario
		// no nosso caso sera a tag form
		$obj.create("input","valor",$id("formulario").firstChild);
		// atribuimos as propriedades desse input
		$id("valor").setAttribute("name","valor");
		$id("valor").setAttribute("type","text");
		$id("valor").style.width='300px';
		// aqui atribuimos a caixa de texto a string a ser editada
		$id("valor").setAttribute("value",$id("editinplace").innerHTML);

		// inserimos uma quebra de linha
		$obj.create("br",null,$id("formulario").firstChild);	

		// criamos um input dentro do primeiro filho da
		// SPAN de id formulario
		// no nosso caso sera a tag form
		$obj.create("input","enviar",$id("formulario").firstChild);
		// atribuimos as propriedades desse input
		$id("enviar").setAttribute("name","Alterar");
		$id("enviar").setAttribute("value","Alterar");
		$id("enviar").setAttribute("type","submit");
	}
}
function inicia(){
	// quando clicado
	$id("editinplace").onclick = function(){
		// escondemos o SPAN que contém o texto para clicar
		// mandando ir da opacidade 100 a 0 com efeito fade
		// maiores detalhes ver o arquivo fs.js
		effects.fade(null,"editinplace",100,0,"mostra()");
	}
	// pega o evento do mouse sobre o span
	$id("editinplace").onmouseover = function(){
		this.style.background = "#EDF4FC";
		this.style.cursor = "pointer";
	}
	// pega o evento do mouse saindo do span
	$id("editinplace").onmouseout = function(){
		this.style.background = "#FFF";
		this.style.cursor = "";
	}

}
// Ouvinte que aguarda o carregamento da pagina
// ao ser carregado o HTML chama a funçao "inicia"
addEvent(window,"load",inicia);

Este é um exemplo que fiz rapidamente, baseado na idéia, não no código, da sugestão que recebi.

Ou seja, serve para um local ser editado, e é obstrutivo, ou seja, sem javascript, sem edição, porém o conteúdo é visualizado.

Serve para sistemas específicos, mas se acharem que a idéia é interessante podemos evoluir e melhora-la tranquilamente.

Ah, e o nosso script sem compactações ficou com 9,13kb

Sigam o link abaixo para ver a pagina de exemplo e baixar o código:

Edit in place Javascript

follow the white rabbit…

Categories: SOS Javascript
2 Comentarios »

Bom responderei algumas duvidas que recebi ou em comentários ou por email, recebi bastante algumas atualizo os scripts, outras acabo perdendo, me esquecendo, mas na medida do possível sempre tento responder.

A primeira é da Nayara, ela perguntou no post da Tabela Dinâmica como poderia inserir além dos dois campos de textos existentes no exemplo, mais um combobox(menu dropdown). Primeiro que gosto de ajudar, mas gente, não da pra fazer os projetos dos outros né, eu dou um modelo pra vocês lerem, aprenderem e alterarem, como disse, posso ajudar no aprendizado, montar modelos, além disso depende de vocês, a execução quando resolver responder assim, na recém inaugurada sessão SOS Javascript

Partindo do inicio, redundância 0.

Bom no html óbvio deve inserir o combobox, como exemplo inseri desta forma:

<select name="sexo">

   <option value="Masculino">Masculino</option>

   <option value="Feminino">Feminino</option>

</select>

A pessoa vai poder escolher entre sexo masculino e feminino.

Seguindo, na linha 167 do script.js inseri o seguinte código:

   var sexo = form_insere.sexo.value;

Ali eu pego o valor que tem no combo com nome sexo, sugestivo não

Na linha 170 do mesmo script.js eu inseri a variável sexo na chamada do objeto, essa variável é a mesma que acabamos de usar acima para pegar o valor do campo sexo no formulário:

   tabela.insere(tabela_clientes,id,nome,sexo);

Agora na linha 88, ainda no script.js, inseri a variável sexo no inicio da função, que vai receber os valores que pegamos do combobox:

   insere: function(tabela,id,nome,sexo){

Na linha 99 inseri o código para inserir a coluna, e na linha 100 mudei o valor de inserção da coluna do link de cancelar para 3.

 var colunaSexo = linha.insertCell(2); // Insere a coluna Sexo

 var colunaCancela = linha.insertCell(3); // Insere a coluna Cancelar

Na linha 105 atribuímos o valor de sexo a nova coluna criada para ela:

   colunaSexo.innerHTML=sexo;

Bom, é isso

Deve funcionar, essas alterações eu deixei disponível para verem na própria pagina de exemplo da Tabela Dinâmica.

SOS Javascript mode OFF.

coisa de nerd essa frase acima né, ta feio o negocio.

Façam suas perguntas, quando der tempo, eu respondo

Se não esquecer

Categories: SOS Javascript
4 Comentarios »