Пользователь - Компьютер
1:1 ничья, когда все довольны:)
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: komputer-od  
Форум » Начинающий WEB мастер » Полезности для сайта » Скрипты (Выкладываем срипты, работающие на сайтах UCOZ)
Скрипты
komputer-odДата: Воскресенье, 21.07.2013, 19:57 | Сообщение # 1
Самый главный тута :)
Группа: Администраторы
Сообщений: 25
Репутация: 777
Статус: Offline
Вот пока помню парочка полезных скриптов:
Для начала нам необходимо подключить jQuery на нашу страницу.

Или скачать библиотеку и залить к себе на сайт, т.е. вместо 
Код
http://ajax.googleapis.com/ajax/libs/jquery/1.5.2
, адрес вашего сайта.

Механизм работы:

до оператора else  проверка записи в куки
далее location = '//ваша ссылка'; ссылка куда переадресовать в случае просмотра

Полезно например чтобы не досаждать пользователю сайта назойливыми рекламными или информационными сообщениями. А так зашел первый раз, посмотрел информацию, и в течении сессии не мозолит глаза.
У меня этот скрипт лежит на главной странице, под условным оператором 
Код
<?if($PAGE_ID$='sitePage1')?>

и работает только с главной рекламной страницей.


Суть проста, через заданный интервал времени появляется напоминалка (показывается скрытый блок), у меня выглядит так Указатель на телефон.
setTimeout ("$('#div1').show('drop');"  div1' - id блока который надо показать, а затем скрыть.
Скрипт также спрятан под $PAGE_ID$

Внешний вид настраивается таким кодом: 

Еще одна полезная фишка - быстрая перемотка на экран вниз или вверх по нажатию на блок.

Настройка выполняется в строке скрипта jQuery('ul.listNotes a').click(function() где  ul.listNotes a id или class (в моём случае ul  class) вашего блока, при нажатии на который происходит скролл. Пример нажать на любую ссылку внизу окна.

Если стоит задача, плавно прокручивать страницу вверх необходимо использовать следующий код:

 
komputer-odДата: Понедельник, 22.07.2013, 23:00 | Сообщение # 2
Самый главный тута :)
Группа: Администраторы
Сообщений: 25
Репутация: 777
Статус: Offline
Для любителей кроссбраузерности (иногда и на меня находит wink ) условные комментарии для IE:

Почти все разработчики-борцы за кроссбраузерность своих сайтов испытывали гнев во время отладки верного, по их мнению, кода в Internet Explorer. Борьба со стилями для этого браузера может довести до белого каления, а страны Европы делают первые шаги по его запрету. Правда, почему-то до сих пор считается, что каждый уважающий себя верстальщик должен знать все тонкости верстки под глючный и безбожно устаревший браузер. Наверное, дело в том, что даже в России никто не простит потерю пятой части прибыли компании из-за лени верстальщика, зарабатывающего 25 тысяч в месяц и теряющего нервные клетки в поиске логики работы Internet Explorer. Другой вопрос заключается в том, что именно с 20%, трусливо спрятавшимися за цифрами, как с Великой Китайской стеной, ничего не происходит.

03
Конечно, для верстки под Internet Explorer можно использовать хаки, но кто знает, как они поведут в себя в остальных браузерах при обновлении версий. Как поведет себя сам Internet Explorer вообще никто не возьмется сказать, даже его разработчики.

04
Другим выходом являются условные комментарии, с помощью которых можно определить версию браузера (естественно, только IE), который должен обработать код внутри комментария. Также немного выручает возможность указания диапазонов версий.

05
Итак, зачем же использовать условные комментарии?
Во время верстки макета возникли проблемы, не решаемые при помощи обычного подхода, нужны хаки, но применение хаков само по себе нежелательно
Код остается валидным
Основная таблица стилей остается без изменений
На текущий момент все браузеры Microsoft поддерживают эту технологию

06
Кроме того, условные комментарии подходят не только для CSS. С их помощью можно подгружать необходимый только для IE код javascript или вообще использовать их в контенте для вывода сообщений, например, только пользователям IE (весело же рассказать им, какие они придурки на самом деле).
Код

07
Следующий код следует использовать в секции <head> страницы, там, где должны подключаться все внешние CSS файлы. Условные комментарии не отличаются от обычных HTML комментариев, за исключением условия IF и IE в квадратный скобках. Восклицательный знак означает отрицание. !IE означает «не Internet Explorer», gt означает «greater than» (больше чем), gte — больше или равно, lt — меньше чем, lte — меньше или равно.

08
В пояснениях к коду употребляются понятия «старшая версия» и «младшая версия». Несмотря на то, что нормальным было бы по отношению к IE6 называть браузер IE5 старшей (по возрасту), здесь наоборот. Версия IE7 по номеру больше, чем IE6, значит и она старше (тупо больше).

Для всех версий IE

Для всех браузеров, кроме IE

Только для IE 7

Для IE6 и старших версий

Для IE8 и младших версий

Для IE7 и старше

Для IE8 и старше
 
komputer-odДата: Вторник, 23.07.2013, 02:10 | Сообщение # 3
Самый главный тута :)
Группа: Администраторы
Сообщений: 25
Репутация: 777
Статус: Offline
Мигающий текст на JavaScript и jQuery
(Сам пока не проверял, решил другим способом)
Мигающий текст на jQuery::
Плавно мигающий текст с использованием прозрачности на jQuery:

Мигающий текст на JavaScript:
 
komputer-odДата: Вторник, 23.07.2013, 02:21 | Сообщение # 4
Самый главный тута :)
Группа: Администраторы
Сообщений: 25
Репутация: 777
Статус: Offline
Еще дополнение. Это скорей баг, т. е. недоработка создателей стандартных шаблонов.
В моем например на форуме не работали ВВ-коды курсива и полужирного начертания в сообщениях.
Лечится таким макаром:
В редакторе CSS добавляем следующий код:
 
komputer-odДата: Вторник, 23.07.2013, 03:07 | Сообщение # 5
Самый главный тута :)
Группа: Администраторы
Сообщений: 25
Репутация: 777
Статус: Offline
Предпросмотр добавляемого материала

Скрипт работает следующим образом: когда Вы написали материал, появляется возможность просматривать добавляемый материал перед публикацией на сайт.

Тестировался во всех модулях. Вставлять скрипт необходимо после $BODY$
автор Sheriff
 
komputer-odДата: Вторник, 23.07.2013, 23:45 | Сообщение # 6
Самый главный тута :)
Группа: Администраторы
Сообщений: 25
Репутация: 777
Статус: Offline
Доступно о кукисах Cookies:

Размещаю статью с сайта xiper.net автор Андрей Косяк
Парень очень доступно разъясняет что такое куки и с чем их едят smile Перелопатил довольно много примеров работы с куки, нужно было реализовать элементарную вещь, как то создание куки и проверка его наличия, и затем соответствующее действие. Из того что нашел это оказалось самое подходящее и просто для освоения. Для новичка самое то!
Скрипт заключается в код
Cookies — установка

Арт. подготовка

Ты уже знаешь, что куки — строка, а также, знаешь, как выглядит кука глазами браузера. При установке в браузер, кука имеет вид все той же строки:

"cookieName=cookieValue; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/; domain=lessons.xiper.net; secure=true;"

Условия существования куки оговариваются пятью параметрами (парами ключ=значение) (ВАЖНО! После каждого должен стоять символ-разделитель ";"), рассмотрим их:
Начинка куки

"cookieName=cookieValue;" — основной параметр куки, без него кука теряет свой смысл. Здесь cookieName — уникальное имя для куки, а cookieValue — информация (значение), которую она будет хранить. Забегая немного вперед, скажу, что в качестве значения может быть что угодно, любая, удобная тебе, структура хранимых данных (да хоть JSON), а также какие угодно символы. Единственная пара, которая является обязательной при установке куки.
Время жизни

"expires=Fri, 21 Jan 2021 06:10:00 GMT" — эта пара хоть и необязательна, но играет очень важную роль, наряду с первой. Этот параметр определяет время жизни куки, а именно, с точностью до секунды, в указанную дату, кука «прикажет долго жить». Если этот параметр не указать, то кука будет действительна только в течение сессии, а это значит, что при закрытии браузера она будет удалена.

Важным моментом является формат даты. Дата должна быть задана ТОЛЬКО в текстовом формате (Fri, 21 Jan 2021 06:10:00 GMT). Снова, забегая немного вперед, скажу, что в этом нам поможет объект Date, в нем есть все необходимые инструменты.
Путь установки

"path=/" — этим параметром задается путь (каталог), для которого действительна кука. Сейчас path имеет значение "/", это ничто иное, как корневой каталог, поэтому кука будет доступна для чтения абсолютно всем каталогам сайта. В случае если доступ к куке должен быть ограничен, то параметр path просто не указываем или указываем в нем общий родительский каталог, и кука будет установлена для конкретного каталога, но специфика такова, что кука будет доступна всем его подкаталогам, в то же время — не видна смежным и родительским каталогам.

Для чего это? Представим элементарную ситуацию: интернет-кафе, сначала пришел пользователь Вася, поработал со своей страницей в соцсети, а после него пришел Петя и, на том же компьютере, в той же сети, поработал со своей страницей. Страницы участников находятся в одном домене, но лежат, как правило, в смежных каталогах. К примеру: страница Васи — http://socset.com/vasya, страница Пети — http://socset.com/petya. Можно представить, какой будет хаос, если куки будут устанавливаться в корневой каталог: Вася сможет оперировать куками Пети и наоборот. Я думаю ни одному, ни другому такой вариант не понравится. Поэтому, в данном случае, будет уместно, если куки будут привязаны только к каталогу конкретного пользователя, следовательно, ко всем его подкаталогам.
Домен

"domain=lessons.xiper.net" — эта пара определяет домен, в котором действительны куки. Как правило, явно использовать приходится редко. Ситуация с этим параметром похожа на ситуацию с параметром path, с той разницей, что в Domain мы оперируем доменами и сабдоменами а не каталогами. Т.е., в данном случае, куки установленные для сабдомена lessons.xiper.net не будут доступны для tricks.xiper.net. Чтоб исправить это, нужно указать общий для них домен — xiper.net. Если параметр не указан, то по умолчанию используется доменный адрес документа.
Безопасность

"secure=true" — параметр безопасности. Если этот параметр установлен в true, браузер отправит куки только тому серверу, который запросит их по безопасному каналу (SSL). Этот параметр также используется редко. По умолчанию принимает значение false.
Первый блин комом?

Вот теперь попробуем угостить наш браузер печенюшкой. В этом нам поможет объект document.cookie:
Код
document.cookie = 'firstCookie=Первый блин комом?; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;';

Результат можно увидеть, открыв в своем браузере раздел куки или же банально:
Код
document.cookie = 'firstCookie=Первый блин комом?; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;';

alert(document.cookie);

И совсем и не комом! Все гуд, кука на месте.
Заметка

Обращаю внимание на особенность браузеров на WebKit. Они отказываются ставить куки, если документ открыт локально. Я, обычно, в таких случаях пользуюсь локальным сервером, так же он понадобится при работе с AJAX. Поэтому, как говорится, маст хэв! К примеру, Denwer (ссылка в конце статьи).
Больше cookies

C одной кукой разобрались. А как быть, если нужно хранить, к примеру, данные из формы (логин, e-mail, номер телефона и т.п.)? В таком случае можно поступить так:
Код
document.cookie = 'myLogin=Мой логин; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;';
document.cookie = 'myEmail=my@email.com; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;';
document.cookie = 'myPhone=1234567; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;';

Таким образом, имеем три куки, которые хранят соответственно логин, электронный ящик и номер телефона. Но ты же помнишь, об ограничениях на количество куков от одного домена, впрочем, как и их общего количества? Значит, таким способом мы можем хранить только ограниченное количество значений для полей. А если такое ограничение "связывает" нам руки, мы можем поступить так:
Код
var    formData = escape('Мой логин;my@email.com;1234567');

         document.cookie = 'myFormCookie='+formData+'; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;';

В итоге имеем 1 используемое место под куку. Все данные я "склеил" в одну переменную и разделил их символом ";", впрочем, в качестве разделителя внутри переменной можно использовать любой символ, это уже наша инициатива, здесь только нужно позаботиться о том, чтоб этот разделитель не встречался в значениях полей, иначе возникнут трудности в дальнейшем, когда нужно будет их прочесть. В таком случае, конечно же, нужно еще помнить об ограничении на размер куки (4кб).

Зачем функция escape? Все довольно просто, она кодирует значение куки в 16-ричное представление. Для чего? Во-первых, браузер отправляет куки серверу, а для того, чтоб данные одинаково могли быть прочтены на серверах под любыми системами, используется данная кодировка. Во-вторых, если мы, используя разделитель ";" в переменной со значениями полей, не закодируем эту строку, то кука, по меньшей мере, просто не правильно установится, ведь разделитель ";" используется для отделения параметров самой куки. Этот момент нужно взять на вооружение и, впредь, использовать по-умолчанию при передаче информации (cookie, AJAX).
"…и время ни на миг не остановишь"

Теперь разберемся с параметром expires. Неудобство в том, что до этого момента мы прописывали время жизни для куки вручную. Но, в реальных условиях, такой подход практически не применим. Как минимум, потому, что при каждом очередном заходе на сайт, время жизни куков должно продлеваться на какой-то фиксированный строк, что, вобщем-то, оправдано и логично. Поэтому в данном вопросе нам полностью поможет объект Date:
Код
var    formData = escape('Мой логин;my@email.com;1234567');
         cookieExp = new Date();                       // создаем объект Date
         cookieExp.setMonth(cookieExp.getMonth()+1);   // устанавливаем текущий месяц и к нему добавляем еще один

         document.cookie = 'myFormCookie='+formData+'; expires='+cookieExp.toGMTString()+'; path=/;';

Такими действиями мы установили время жизни куки ровно в 1 месяц. Подробно на объекте Date в этой статье оснавливаться не буду, лишь опишу схему установки срока:
строка 2: объявляем cookieExp как объект Date. Теперь cookieExp содержит текущую дату;
строка 3: переустановка в cookieExp месяца. При помощи метода getMonth извлекаем текущий месяц и прибавляем к нему еще один. В итоге в cookieExp запишется следующий месяц;
строка 6: в этой строке используем метод toGMTString(), для перевода даты в текстовый формат;

Таким образом, в зависимости от того, какое время жизни для куки нужно установить, можно использовать и другие методы объекта Date: от get/setMilliseconds() до get/setFullYear() (от получения/установки миллисекунд до получения/установки года).

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

Как видишь, установка куков не есть чем-то сверхъестественным, нужно только помнить (какой раз уже повторяюсь smile ) об ограничениях и все будет типи-тип, ну, или топи-топ. Следующий материал будет о том, как наши печеньки достать из духовочки. Вот там придется немного поразмышлять.
 
Форум » Начинающий WEB мастер » Полезности для сайта » Скрипты (Выкладываем срипты, работающие на сайтах UCOZ)
  • Страница 1 из 1
  • 1
Поиск: