Тэг ‘javascript’

JavaScript - делаем активный пункт при помощи проверки текущего URL

Часто для определения активной ссылки нет возможности использовать код движка/CMS. Конечно, вариант с добавлением класса (<li class=”active”>) более предпочтителен, но тем не менее для некоторых CMS приходится прибегать к “хакам”. Полезным вариант может оказаться для тех, кому некогда / или нет желания, а иногда - возможности/ разбираться с кодом CMS Не всегда понятно, где в CMS пароль хранится, не то, чтобы файл, отвечающий именно за этот активный пункт меню.

Доступ к текущему адресу страницы мы можем получить используя document.location, который по сути даёт возможность обратиться к адресу (из адресной строки браузера) - т.е. достать адрес сайта и /REQUEST_URI Читать целиком »

Опубликовано Февраль 3, 2013 | автор: levik  |  Нет комментариев »

JavaScript - распечатать картинку/изображение, страницу целиком

Чтобы при помощи JavaScript распечатать текущую страницу - можно воспользоваться функцией window.print()

Чтобы распечатать картику в JavaScript (или вообще любой элемент) - можно воспользоваться небольшой хитростью - при помощи Javascript создать новое окно и его уже распечатать.

print_page.js

function makepage(src) {
// We break the closing script tag in half to prevent
// the HTML parser from seeing it as a part of
// the *main* page.
return "<html>\n" +
"<head>\n" +
"<title>Temporary Printing Window</title>\n" +
"<script>\n" +
"function step1() {\n" +
"  setTimeout('step2()', 10);\n" +
"}\n" +
"function step2() {\n" +
"  window.print();\n" +
"  window.close();\n" +
"}\n" +
"</scr" + "ipt>\n" +
"</head>\n" +
"<body onLoad='step1()'>\n" +
"<img src='" + src + "'/>\n" +
"</body>\n" +
"</html>\n";
}
function printme(evt) {
// Old IE
var image = evt.target;
if (!image) image = window.event.srcElement;
if (!evt) evt = window.event;
src = image.src;
link = "about:blank";
var pw = window.open(link,"_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
}

Опубликовано Январь 13, 2012 | автор: levik  |  Нет комментариев »

Lazy Load - ленивая (отложенная) загрузка изображений с помощью javascript

Увеличение скорости загрузки сайта, а также снижение нагрузки на сервер, используя отложенную загрузку изображений при помощи javascript т.н. Lazy Load

Для сайтов, на которых присутствует довольно большое количество картинок (особенно, если в браузер они выводятся “скопом”), отложенная загрузка может дать значительный выигрыш, как в скорости работы “для клиента”, так и в уменьшении нагрузки (и трафика) на сервер.

Вся “фишка” lazy load загрузки картинок в том, что те картинки, которые не видны пользователю попросту не загружаются. То есть, загрузка “нижних” картинок, не попадающих на экран происходит при перемотке страницы.

Lazy Load реализован с использованием различных фреймворков:

Опубликовано Февраль 8, 2011 | автор: levik  |  Нет комментариев »

Замыкания в JavaScript

О замыканиях узнают, как правило, сталкиваясь с тем, что нужно “навесить” похожие обработчики на несколько элементов. Простой пример:

function setdisplay (elementID,vis) {
document.getElementById(elementID).style.display=vis; //'block' or 'none'
}
for (i=1;i<=4;i++) {
element = document.getElementById('element'+i); //#element1,#element2...
element.onmouseover = function (e) {
setdisplay('showhide'+i,'block');
}
element.onmouseout = function (e) {
setdisplay('showhide'+i,'none');
}
}

По идее при наведении курсора на элемент #element1 должен показываться showhide1, и скрываться после события onmouseout. =) Однако, i в данном случае будет иметь значение равное 5 =) для всех функций.

Вот тут-то и возникает вопрос, как “зафиксировать” текущее значение переменной.

element.onmouseover =
function(x) {
return function(e) { setdisplay ('showhide'+x,'block'); }
}(i)

Мы создаем дополнительную “внутреннюю” функцию, которая вызывается с параметром i.. А в самой функции используется локальная переменная x. Всё очень сложно может показаться только на первый взгляд.. ).

Открыв для себя такую возможность, я стал искать - наверняка я не первый, кто с этим столкнулся. Как выяснилось, такой прием (или сама функция) называется Замыканием в JavaScript.

Использование замыканий может случайно (или бездумно) привести к непредсказуемым последствиям, однако если немного разобраться - замыкания могут оказаться полезными.

Довольно объемная статья про замыкания в JavaScript:
http://www.fpublisher.ru/articles/web_technologies/type6/article70.htm
http://abramov.tv/2009/10/chto-takoe-zamyikaniya-v-php-i-javascript/

Опубликовано Январь 12, 2011 | автор: levik  |  Нет комментариев »

Ajax - как скачать (сохранить на компьютер) файл

При работе с web-формами генерация содержимого страниц без перезагрузки с использованием технологии AJAX удобна и широко используется. Как быть, если требуется сохранить результат динамически сформированной страницы на локальный компьютер. Конечно, можно выделить нужное, “скопипастить” и сохранить, например в Word. Однако, для удобства пользователя можно предусмотреть возможность получения файла с данными с сервера (экспорт в документ Word, например). Задачу формирования документа в нужном формате пока пропустим (для эксперимента можно воспользоваться “болванкой” test.doc, например) и сразу перейдем к сохранению файла. Однако, не будем забывать, что файл должен генерироваться на основе данных формы и передаваться они будут методом POST (у GET-метода имеются существенные ограничения на длину запроса, что для формирования документов может быть критично)

Подводные камни Ajax-сохранения файла.

Особенность скачивания файлов с использованием Ajax-технологии в том, что “по умолчанию” файл, отдаваемый сервером, попадает туда, откуда был сделан запрос - в JavaScript. То есть после отправки запроса на сервер, браузер, получая ответ, не предлагает “стандартно” сохранить или открыть файл, продолжает выполнение заданного скрипта.

Как скачать файл Ajax-ом?

Итак, если сформулировать задачу более точно, то требуется отправить POST-запрос на сервер и сохранить полученный файл без перезагрузки страницы. Причем, учитывая информацию предыдущего параграфа, отправка запроса должна быть из “реальной” формы и производиться стандартными средствами браузера.

Вариант 0: отправляем данные AJAX, методом POST. Однако, обратно получаем не сам файл, а условный “ключ”, к которому привязываем специально созданный на сервере “промежуточный” файл.  Теперь переход по ссылке с нужным ключом и позволит сохранить нужный файл.

Вариант 1: динамически создаем нужную форму, размещаем в ней нужные поля и отправляем на сервер. Ответ получаем в виде окошка браузера с предложением открыть/сохранить файл.

Вариант 2 очень похож на предыдущий. С мааленьким изменением - всё действо происходит в отдельном IFRAME-элементе, который также формируется динамически. Делается это на случай, если браузер вместо попытки сохранить файл решит уйти с предыдущей страницы с заполненными данными.. В этом случае переход будет осуществлен во внутреннем документе, основная же страница перезагружена не будет.

Если быть более точным, то отправка и сохранение файла “не совсем AJAX” ( :) совсем не AJAX). Однако, без перезагрузки страницы.

AJAX скачать файл - подборка ссылок:
http://habrahabr.ru/blogs/personal/66772/ - вариант с сохранением временного файла
http://code.msdn.microsoft.com/AjaxFileDownload
http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/

AJAX-загрузка файлов:

http://habrahabr.ru/blogs/jquery/50223/
http://vremenno.net/html-css/file-uploaders-overview/

Опубликовано Декабрь 6, 2010 | автор: levik  |  Комментарий (1) »

JavaScript Frameworks

JQuery - один из наиболее популярных JavaScript фреймворков.
1) просто http://www.rsdn.ru/article/inet/jQuery.xml
2) хорошая документация http://docs.jquery.com/Main_Page
3) куча готовых решений http://docs.jquery.com/Plugins
4) http://visualjquery.com.

Sencha http://www.sencha.com/ (Ext JS, EXT GWT, Sencha Touch, EXT Designer)
http://examples.extjs.eu/ - примеры для Ext JS

Prototype (prototype.js)MooTools
http://mootools.net
script.aculo.us - визуальные эффекты на prototype

YUI

http://habrahabr.ru/blogs/webdev/34918/
http://habrahabr.ru/blogs/webdev/35064/
http://habrahabr.ru/blogs/javascript/35597/ - опросы по javascript фреймворкам

Опубликовано Октябрь 4, 2010 | автор: levik  |  Нет комментариев »

Ошибка JavaScript: есть null или не является объектом

Иногда встречается ошибка javascript … есть null или не является объектом.

Internet Explorer после такой ошибки останавливает дальнейшее выполнение сценария и (при соответствующей настройке) сообщает об ошибке желтым треугольником в левом нижнем углу.

Итак, в чем же дело.. Причем тут Null и объекты?

Очевидное объяснение - скрипт пытается обратиться к переменной, значение которой null,  или же это обращение к свойству переменной, которая не является объектом. Все-таки это ошибка javascript-программы.

Частые причины ошибки “есть null или не является объектом”

1. Попытка обратиться к несуществующему свойству объекта:
a=1; alert (a.property);

2. Попытка обратиться к несуществующему элементу массива:
a = []; alert (a[1]);

Internet Explorer в сообщении об ошибке указывает строку, в которой она обнаружена. Рекомендуется проверить все похожие обращения к переменным.

Если Вам известны другие причины появления ошибки  “null или не является объектом”- сообщайте в комментарии..

ps. В некоторых WYSIWYG-редакторах в ранних версиях часто встречались такие ошибки…

Опубликовано Август 5, 2010 | автор: levik  |  Комментарии (8) »

javascript lightbox и аналоги: увеличение изображений и куча плюшек

На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).

Рассмотрим некоторые инструменты, с использованием которых можно легко разместить всплывающие изображения в lightbox у себя на сайте.

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

jQuery (Tools) overlay
http://flowplayer.org/tools/overlay/index.html
Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Опубликовано Август 2, 2010 | автор: levik  |  Комментарии (3) »

JavaScript редактор изображений - редактируем изображения прямо в браузере

Очень удобно дать возможность пользователю выбрать как будет выглядеть “превьюшка” изображения (уменьшенный вариант изображения… особенно в случае фиксированного разрешения), или отредактировать картинку “онлайн”, непосредственно в браузере.

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

Инструменты для редактирования изображений в браузере

JavaScript Image Cropper UI

Удобный инструмент для “редактирования” картинки непосредственно в браузере.

Demo: http://www.defusion.org.uk/demos/060519/cropper.php
Скачать: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Статья о редакторах изображений (а-ля “paint online”, функционал у многих довольно широк)
http://www.coolwebmasters.com/web-applications/511-online-professional-image-editors-and-drawing-applications.html

Обрезка изображений в браузере - Resize crop cropui -

http://adw0rd.ru/2008/imgcrop/

http://odyniec.net/projects/imgareaselect/

Опубликовано Август 1, 2010 | автор: levik  |  Комментарии (2) »

Javascript, select и innerhtml - динамически изменяем элементы option в select

Задача:

Используя javascript динамически формировать options у html элемента select.

Вариант решения с использованием свойства innerHTML:

html:
<select id="select1"><option value="val1">text1</option></select>

javascript:
myselect = document.getElementById('select1');
select1.innerHTML = '<option value="val2">text2</option><option value="val3">text3</option>';

Такое решение не везде работает  (mozilla firefox этот код обрабатывает. Opera и IE отказались напрочь)

http://support.microsoft.com/kb/276228 - с официального сайта Microsoft про innerHTML у Select. Там же варианты “обхода” этого бага.

Вариант 1 - использование js массива .options[] у элемента select:
select1.options[i] = new Option(i,i);

Вариант 2 - замена innerHTML у родительского элемента (т.е. HTML должен включать сам тэг select):
<div id="out1"><select ..> </select></div>
js: document.getElementById ('out1').innerHTML = '<select id="select1" name="select1"><option ...>...</option></select>';

ps. Все-таки наткнулся на решение на одном из лучших (на мой взгляд) ресурсов по web:
Javascript SELECT - динамические списки

UPD2 Вариант получения данных для формирования элемента select через ajax: Для передачи в JavaScript пар ID:значение используем responseText в формате JSON, значение которого вычисляем при помощи функции eval.


data = eval (transport.responseText);
for (i=0; i< =data.length-1; i++)
myElement.options[i]=new Option(data[i][1],data[i][0])
При этом скрипт должен отдавать массив в виде:
[
['1','название первого элемента'],
['2','название второго элемента'],
]

Опубликовано Июль 28, 2010 | автор: levik  |  Комментарии (2) »

Страница 1 из 212»