Ponto Fla - Laboratório de Idéias

Um pouco sobre css, design, jquery e desenvolvimento web

Imprimindo apenas o conteúdo de uma div

janeiro19

Aqui no meu trabalho surgiu esse problema, precisavamos imprimir um conteúdo de uma div sem enviar esse conteúdo para outra página ou para um pop por exemplo.
Deveria abrir direto a opção de imprimir, e na página existem vários outros conteúdos que não deveriam ser impressos.
Depois de muito pensar e com a ajuda do Edu chegamos a seguinte solução:

Clique aqui para ver o exemplo funcionando.

Nesse exemplo deixei o iframe aparecendo para vocês conseguirem visualizar que o conteúdo da div onde tem o botão imprimir está aparecendo no iframe e será o conteúdo impresso.

Então vamos lá vou explicar como foi feito:

O javascript:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function(){
$('.conteudo-impressao').append('<iframe id="contFrame" name="contFrame" > </iframe>');
var conteudo = $('#grupo_content')[0];
var ifr = window.open("", "contFrame", "")
ifr.document.open()
ifr.document.write(conteudo.innerHTML)
ifr.document.close()
$('#print').click(function(){
	ifr.print();
});
});

O html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<body>
<div class="content">
<div class="conteudos">
<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, turpis at feugiat gravida, ante mauris tempor sapien, sed accumsan eros nisi quis ipsum! Nunc quis ante eu leo mollis dictum. Nullam eget quam. Integer nec nibh? Fusce aliquam. Phasellus hendrerit pretium ante! Sed ligula. Pellentesque purus lorem, euismod volutpat, molestie porta, blandit et, risus. Etiam vehicula turpis sit amet dui. Fusce sed est ac dui dictum vehicula. Aliquam lobortis porttitor nibh.
</p>
<p>
	Sed mollis porta lectus. Donec id purus. Etiam risus. Morbi semper ligula. Nulla iaculis suscipit erat. Aliquam erat volutpat. Suspendisse potenti. Duis at orci. Nulla facilisi. Vestibulum tempus. Suspendisse diam. Cras eros nibh, pretium ac, placerat in, tristique elementum; mi. Nulla facilisi. Sed nibh orci, molestie non, vulputate in, aliquet a; arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eu nibh quis quam rutrum posuere.
	</p>			
</div>
<div class="conteudo-impressao">
<p>
	<a href="#" title="IMPRIMIR" id="print" >IMPRIMIR</a>
</p>
<div id="grupo_content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, turpis at feugiat gravida, ante mauris tempor sapien, sed accumsan eros nisi quis ipsum! Nunc quis ante eu leo mollis dictum. Nullam eget quam. Integer nec nibh? Fusce aliquam. Phasellus hendrerit pretium ante! Sed ligula. Pellentesque purus lorem, euismod volutpat, molestie porta, blandit et, risus. Etiam vehicula turpis sit amet dui. Fusce sed est ac dui dictum vehicula. Aliquam lobortis porttitor nibh.
	</p>
        <p>
	Sed mollis porta lectus. Donec id purus. Etiam risus. Morbi semper ligula. Nulla iaculis suscipit erat. Aliquam erat volutpat. Suspendisse potenti. Duis at orci. Nulla facilisi. Vestibulum tempus. Suspendisse diam. Cras eros nibh, pretium ac, placerat in, tristique elementum; mi. Nulla facilisi. Sed nibh orci, molestie non, vulputate in, aliquet a; arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eu nibh quis quam rutrum posuere.
		</p>
		</div>
	</div>
</div>	
</body>

O css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.content {
margin: 10px auto;	
text-align: left;	
width: 500px;
}
.conteudos, .conteudo-impressao {
width: 500px;
border: 1px solid #cecece;
padding: 5px;
}
.conteudo-impressao {
border: 1px solid red;
margin-top: 20px;
}
.txtIframe {
visibility: hidden;
height: 0;
}

Nesse script criamos um iframe dentro da div com a classe “conteudo-impressao”*
Depois criamos uma variável e nela armazenamos o conteúdo da div com o id “grupo_content” colocamos o ‘[0]‘ porque em jQuery ele retorna um objeto jQuery utilizando o ‘[0]‘ ele retorna o objeto html
Criamos uma variável “ifr” e fazemos abrir “uma janela” dentro do iframe com o name “contFrame”
Depois disso precisamos abrir o documento e na linha 6 escreve-se o conteudo armazenado na variável “conteudo”, na linha seguinte fechamos o documento.
Criamos então uma função dizendo que quando clicarmos no link com o id “print” vamos imprimir o conteudo da variável “ifr”

*Para utilizar esse exemplo o iframe não deve ficar visível na página para isso basta colocar no iframe a classe “txtIframe”:

1

$('.conteudo-impressao').append('<iframe id="contFrame" name="contFrame" class="txtIframe"> </iframe>');
posted under dicas, jQuery | 2 Comments »

jQuery Funções Básicas

janeiro14

Vou começar falando sobre algumas funções básicas de jQuery para quem está começando a estudar. Darei exemplos práticos de como a biblioteca jQuery pode agilizar a vida dos desenvolvedores.

- Selecionando um elemento e aplicando uma propriedade Css
Com o código abaixo iremos selecionar todos os elementos “p” e aplicar uma cor de fundo

Clique aqui para ver o exemplo funcionando.

O script:

1
2
3

$(document).ready(function(){
$('p').css('background','#cecece');
});

O html:

1
2
3

<body>
<p>Esse é um parágrafo modificado por jQuery.</p>
</body>

A primeira linha diz que quando o documento for lido a seguinte função será executada.
Na segunda linha pegamos o elemento “p” e incluimos background com a cor de fundo cinza.

O mesmo efeito pode ser conseguido também apenas com quando o evento for acionado pelo usuário, como por exemplo clicando em um botão.
Clique aqui para ver o exemplo funcionando.

Ficaria assim:

O script:

1
2
3
4
5

$(document).ready(function(){
$('#modificar').click(function(){
$('p').css('background','#cecece');
});
});

O html:

1
2
3
4

<body>
<button name="bt" id="modificar">Modificar</button>
<p>Esse é um parágrafo modificado por jQuery.</p>
</body>

Aqui dizemos que quando o id “modificar” for clicado vai executar a seguinte função: trocar o background do elemento p para cinza.

E se eu tiver mais que um parágrafo e quiser alterar apenas o primeiro?

Clique aqui para ver o exemplo funcionando.

O script:

1
2
3
4
5

$(document).ready(function(){
$('#modificar').click(function(){
$('p:first').css('background','#cecece');
});
});

O html:

1
2
3
4
5
6
7

<body>
<button name="bt" id="modificar">Modificar</button>
<p>Esse é o parágrafo que será modificado por jQuery.</p>
<p>Esse é o parágrafo comum.</p>
<p>Esse é o parágrafo comum.</p>
<p>Esse é o parágrafo comum.</p>
</body>

Aqui utilizamos o seletor “:first” para identificar que é apenas o primeiro parágrafo que será alterado.
Podemos também utilizar o “:last” e alterar apenas o último parágrafo.

Clique aqui para ver o exemplo funcionando.

Por hoje é só mais continuarei postando sobre jQuery.

posted under jQuery | 2 Comments »