clone(), background and IE8

Дата: 10th Мар,2011 Автор: admin

Три часа промучился. При клонировании элементов куда-то терялось css-свойство background. Вначале грешил на баг, что в ИЕ не клонируются аттрибуты элементов, которые создаются динамически (а у меня фон генерится именно динамически яваскриптом). Но почему тогда все ок в ИЕ7? Оказалось все намного проще — в url не должно быть пробелов, даже если вы адрес к картинке заключаете в кавычки. Пример:

1
2
3
4
var neededUrl = jQuery('img').attr('src');
neededUrl = neededUrl.replace(/\s/g, '%20');
jQuery('#el').css('background-image', 'url("' + neededUrl + '")');
jQuery('#el').clone().appendTo('body');
Опубликовано в jQuery

Печать определенного блока страницы

Дата: 13th Окт,2009 Автор: admin

Нет ничего сложного в том, чтобы распечатать всю страницу так как нам это надо. Просто подключаем стили для печати, в которых убираем все лишнее и вперед. А что делать если на странице одновременно присутствуют две кнопочки: одна печатает всю страницу, а вторая — какой-то выбранный блок?

Решение достаточно простое.
Допустим, у нас есть две ссылки: «Print block» и «Print page». Заранее скажу что будет использоваться jquery, т.к. на сегодняшний день я себе не представляю нормального проекта без его участия.

При нажатии на «Print block» срабатывает функция:

1
2
3
4
5
6
7
8
9
10
11
function printBlock(printLink)
{
    productDesc = $(printLink).parents('#blockId').html();//забираем контент нужного нам блока (в моем случае ссылка на печать находится внути его)
    $('body').addClass('printSelected');//добавляем класс к body
    $('body').append('<div class="printSelection">' + productDesc + '</div>');//создаем новый блок внутри body
    window.print();//печатаем
   
    window.setTimeout(pageCleaner, 0); //очищаем нашу страницу от "мусора"
   
    return false;//баним переход по ссылке, чтобы она не пыталась перейти по адресу, указанному внутри аттрибута href
}

Функция pageCleaner() вызывается через setTimeout затем, чтобы поставить ее вызов в очередь. Чтобы распечатка не произошла после очистки и вместо нужного блока распечаталась вся страница.
Вот сама очистка:

1
2
3
4
5
function pageCleaner()
{
    $('body').removeClass('printSelected');//убираем класс у body
    $('.printSelection').remove();//убиваем наш только что созданный блок для печати
}

Воть тяк. Конечно, можете спросить, почему бы не поставить очистку на нажатие ссылки «Print page». Да потому что пользователь может возжелать распечатать страницу через «Файл» -> «Печать»

Ну и не забыть прописать в файл стилей для печати следующее:

1
2
3
.printSelected div {display: none } /* скрываем весь контент на странице */
.printSelected div.printSelection {display: block; } /* делаем видимым только тот блок, который подготовлен для печати */
.printSelected div.printSelection div {display: block; } /* показываем всех его потомков, которые были скрыты первой строкой */

Вот так. Просто, но тем не менее работает :)

Как повесить вызов функции printBlock() на нужную ссылку, расписывать, надеюсь, не надо? :)

Опубликовано в Print styles

37 проверенных PHP, Perl, и JavaScript регулярных выражений

Дата: 24th Сен,2009 Автор: admin

37 Tested PHP, Perl, and JavaScript Regular Expressions

Опубликовано в Регулярки

10 правил фронтенд кодинга

Дата: 25th Июн,2009 Автор: admin

10 Rules of Front End Coding

Опубликовано в Разное

Селекторы jQuery и примеры использования

Дата: 16th Апр,2009 Автор: admin

jQuery selectors and attribute selectors reference and examples

Опубликовано в jQuery

Страница сгенерирована за 0.045768 секунд