Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Печать только части страницы (https://javascript.ru/forum/jquery/22470-pechat-tolko-chasti-stranicy.html)

Sereban 21.10.2011 10:23

Печать только части страницы
 
Мне нужно распечатать только часть страницы, которая находится в определенном диве с классом "calc".
Я решил с помощью скрипта пройтись по всем элементам, и скрыть все, кроме дива с классом "calc". Но возникли такие проблемы:
1) скрываются все внутренние элементы дива "calc"
2) если в коде есть простой текст, не заключенный ни в какие теги (тоесть <body>текст...</body>), то он не скрывается.

вот код:
function calc_print(){
	$("body :not(.calc)").each(function(){
		$(this).hide();
	});
	// window.print();
}


может есть какой-то другой способ напечатать только нужный див?

DjTarik 21.10.2011 10:33

через стили:
@media print {
}

Sereban 21.10.2011 13:12

пробовал через стили. но тоже не получилось.

css для печати:
html body *{
	display: none;
}

.calc{
	display: block;
}


что то не так может делал?

ksa 21.10.2011 13:24

Цитата:

Сообщение от Sereban
что то не так может делал?

Вот тут пример точно работает...
http://htmlbook.ru/css/media

Sereban 21.10.2011 13:29

дак в этом примере просто меняется шрифт и цвет текста.
а мне нужно чтобы все скрылось кроме нужного дива

ksa 21.10.2011 13:38

Цитата:

Сообщение от Sereban
дак в этом примере просто меняется шрифт и цвет текста.

А ты бы проявил фантазию! :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>@media</title>
  <style type="text/css">
   @media screen { /* Стиль для отображения в браузере */
    BODY {
     font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
     font-size: 90%; /* Размер шрифта */
     color: #000080; /* Цвет текста */
    }
    H1 {
     background: #faf0e6; /* Цвет фона под текстом */
     border: 2px dashed #800000; /* Рамка вокруг заголовка */
     color: #a0522d; /* Цвет текста */
     padding: 7px; /* Поля вокруг текста */
    }
    H2 {
     color: #556b2f; /* Цвет текста */
     margin: 0; /* Убираем отступы */
    }
    P {
     margin-top: 0.5em; /* Отступ сверху */
    }
   }
   @media print { /* Стиль для печати */
    BODY {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    P {
	 display: none;
    }
   }
  </style>
 </head>
 <body>
   <h1>Метод ловли льва в пустыне</h1>
   <h2>Метод последовательного перебора</h2>
   <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа 
   до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на 
   ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. 
   Учитывая, что лев может находиться не строго на заданном участке, а одновременно на 
   двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. 
   Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина 
   льва или, что хуже, только его хвост.</p>
   <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни 
   клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура 
   поимки считается завершенной.</p>
 </body>
</html>

Sereban 21.10.2011 22:35

да я вчера полночи проявлял фантазию)
спасибо конечно, что скопипастили код с сайта, но я его уже видел)

Sereban 21.10.2011 22:40

P {
display: none;
}
скроет текст, заключенный в тег p. а если текст ни в какой тег не заключен, то есть просто лежит в body?

Sereban 21.10.2011 23:06

все. тема закрыта. нашел решение.
вот цсс для печати
body{
	visibility: hidden;
}
.calc {
	visibility: visible;
}

все вот так просто)

ksa 22.10.2011 09:53

Цитата:

Сообщение от Sereban
а если текст ни в какой тег не заключен, то есть просто лежит в body?

Таки заключи его в какой-то тег...


Часовой пояс GMT +3, время: 18:47.