Вверх

Блог
RSS лента

JavaScript

Вы на странице, которая посвящена одному из языков программирования, который позволяет сайт сделать ярче, веселее, оригинальнее. Речь пойдет о фишках javascript.

Сейчас в сети очень много предложений по поводу того, чтобы скачать javascript бесплатно. Пишут скрипты и начинающие, и опытные программисты. Идеи, как я заметил, обычно возникают у людей, которые ведут свои блоги, заботятся о своих  сайтах.

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

  • - javascript скачать и применить его на своем сайте или определенной странице:
  • - написать в одном из известных текстовых редакторов NotePad++, блокнот, Dreamweaver;
  • - вставить готовый кусочек в тело на html и выполнить просмотр в браузере, который должен поддерживать ява скрипты.

 

Обычно исполняются javascript строки после того, как пользователь произвел некоторое действие на просматриваемой странице. Это может быть клик мышкой, прокрутка, подвод курсора к тексту, баннеру, картинке и многое другое. Результатом действия станет работа скрипта, который может сменить фон или изменить вид курсора, запустить мух на экран или устроить настоящий снегопад и многое другое.

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

Очень хочу знать ваше мнение. Пишите комменты даже в несколько слов или задавайте вопросы, на которые не только я, но и постоянные пользователи будут давать ответы.

Вместе мы сделаем наш второй мир – виртуально-реальный – красивым и классным!

Устраняем конфликт между разными версиями jquery. А так же как сделать что бы YoxView работал с новой версией jquery

Сегодня при переносе сайта с ucoz столкнулся с проблемой. На сайте есть встроенная галерея, фотографии вставляются вручную, в определённый div, но на страницах сайта напоминают галерею. А проблема возникла в том что для галереи используется jquery плагин YoxView, но он работает только с версией jquery 1.4.2, и чуток выше, а на сайте используется версия jquery 1.7.1. Соответственно если подключить только старую библиотеку, то не работает функционал сайта, а с новой не работает галерея. Вернее не правильно работает, фотографии открываются, но нет кнопок перелистывания, и панели пропадают сразу же после открытия фото и больше не появляются, а если перелистывать фото нажав кнопку слайда или использовать комбинацию клавиш CTRL+стрелка влево или в право, то перелистывание работает неадекватно.

lightBox эффект всплывающих фотографий для Ucoz

Ранее я писал как делать всплывающие фотки на сайтах. Но вот почему то по тому принципу на Укозовском сайте у меня работать не захотело. Но ничего я сделал по другому.
В моем случае мне нужно было что бы все фотографии которые находятся в теле статьи и которые были уменьшены но есть ссылка на большую фотографию, увеличивались с эффектом.
А реализовать это элементарно. Нужно для начала скачать вот этот архивчик ТЫЦ
С него берем файл jquery.lightbox.js и lightbox.css.
Дальше прописываем стиль:

  1. <head>
  2. <link rel="stylesheet" href="/lightbox.css" type="text/css">
  3. </head>

Подключать нужно между тегами хеад
А вот скрипт нужно подключать после БОДИ, иначе не пашет. Почему не знаю.

  1. <body>
  2.  <script src="/jquery.lightbox.js" type="text/javascript"></script>

Дальше указываем скрипту какие ссылки преображать:

  1. <script type="text/javascript">
  2.  $(document).ready(function(){

Как отключить отправку формы по нажатию enter?

Припустим вам нужно что бы форма срабатывала только при нажатии кнопки.
У меня задача была такова что бы отправить сообщение нужно было разблокировать форму, то есть как в новых телефонах, или яблокофонах от куда эта технология пошла. Другими словами вы тяните бегунок с левого угла в правый и появляется кнопочка отправить.
Это реализовали. Но вот при тестировании оказалось что если ввести какие то данные в input и нажать ентер срабатывало событие submit.
Вот и пришлось выдумывать как заблокировать ентер, в принципе решение не особо сложное.
Нужно в форму прописать антиентер
<form  id="theForm" onsubmit="return false;">
А кнопку сделать не submit, а button, а на нее повесить код:

  1. $(function(){
  2.        
  3.  $('.buttom').click(function() {
  4.        
  5.    $('#theForm').submit();
  6.          
  7.  });   
  8.  
  9. });

в инпуте вставить класс class="buttom"
<input type="button" value='Отправить' class="buttom">
Ну вот как то так.

jQuery lightBox plugin - lightBox эффект всплывающих фотографий

Решил написать как делаются эффекты всплывающих фотографий при клике.
Все секреты и технологи я думаю смысла нет рассказывать, если захотите сами поковыряете файлы и думаю разберетесь.
А используется плагин так:
Для начала скачайте архив с скриптами, либо от сюда http://leandrovieira.com/projects/jquery/lightbox/ , это сайт разработчиков, либо от сюда (ТЫЦ)
Потом подключаем на страничку, сначала в хедер

Скрипты:

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Стиль:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Теперь еще нужно указать каким картинкам присваивать эффект

  1. <script type="text/javascript">
  2. $(function() {
  3.         $('a[@rel*=lightbox]').lightBox(); //все ссылки где содержится лайтбокс атрибут

Ширина options select IE

Как вы знаете в Интернет експлоере есть такая неприятная штука как если вы укажете фиксированную ширину select например в 50 пикселей, то и выпадающие свойства будут такого же размера, когда как в остальных браузерах выпадающие свойства растягиваются на ширину самого длинного option. То есть в ИЕ у вас всё обрежится, что не есть красиво.

Выглядит это примерно так:

А в других браузерах так:

К сожалению как полностью сделать идентичные я не знаю, но знаю как сделать что бы поля не резались. Выглядеть будет так:

Делается следующим образом. Для начала скриптец:

  1. $(".sel-4").mousedown(function(){
  2. if($.browser.msie) {
  3. $(this).css("width","auto");
  4. }
  5. });
  6. $(".sel-4").change(function(){
  7. if ($.browser.msie) {
  8. $(this).css("width","50px");

Прелоадер страницы на jquery

Считаю использование прелоадера для не флешевых сайтов бесполезным, человек должен видеть то что загружается, если даже сайт большой, но я зашел посмотреть например контакты, смысл мне ждать пару минут пока загрузятся, все баннера, текст и картинки, но иногда заказчики хотят такую технологию.
Велосипед я не изобретал, это решение предложил Гайя Кесслер на своем блоге http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
Пример можете посмотреть вот здесь ТЫЦ
Довольно любопытное кстати решение. Его вполне можно переделать под свои нужны, дизайн и тд.
Сами скрипты скачать можно здесь ТЫЦ

Подключение простенькое:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

Определение браузера и ОС через javascript

Тут все вроде понятно без обьяснений.

  1. if (navigator.userAgent.indexOf (”Opera”) != -1) var isOpera =1;
  2. else if (navigator.userAgent.indexOf (”Firebird”) != -1) var isFb =1;
  3. else if (navigator.userAgent.indexOf (”K-Meleon”) != -1) var isKm =1;
  4. else if (navigator.userAgent.indexOf (”Phoenix”) != -1) var ispx =1;
  5. else if (navigator.userAgent.indexOf (”Safari”) != -1) var isSf =1;
  6. else if (navigator.userAgent.indexOf (”Lotus-Notes”) != -1) var isLn =1;
  7. else if (navigator.userAgent.indexOf (”Lynx”) != -1) var isLx =1;
  8. else if (navigator.userAgent.indexOf (”Crazy”) != -1) var isCb =1;
  9. else if (navigator.userAgent.indexOf (”Galeon”) != -1) var isGl =1;
  10. else if (navigator.userAgent.indexOf (Flock) != -1) var isFlock =1;
  11. else if (navigator.userAgent.indexOf (”MSIE”) != -1) var isIE =1;
  12. else if (navigator.userAgent.indexOf (”Navigator”) != -1) var isNets =1;
  13. else if (navigator.userAgent.indexOf (”Firefox”) != -1) var isMoz =1;

height: 100% с помощью jquery (вложений)

Я думаю что многие сталкивались с проблемой когда при соблюдении стандартов (<!DOCTYPE ), нужно растянуть таблицу или див на весь экран браузера, ну это можно побороть с помощью цсс, но вот когда в этом диве есть вложение тут уже тяжелее. И тут на помощь приходит jquery.
Обрисую мою ситуацию. Была у меня табличка в одной из ячеек был див который нужно было тянуть по все высоте этой ячейки. И сделал я это вот так:

  1. <script type="text/javascript">
  2.  
  3.  $(document).ready(function () {  
  4.      $("#left_menu").height($("#left_td").height());    
  5. });
  6.  
  7. </script>
  8. <table>
  9.  <tr>
  10.   <td id="left_td">
  11.    <div id="left_menu"></div>
  12.   </td>
  13.  </tr>
  14. </table>

left_menu - это тот див который нужно тянуть.
left_td - эта ячейка в которой находится див который нужно тянуть
То есть логика такая, мы берем высоту ячейки и просто присваиваем её диву.

Если вам нужно что бы просто див или таблица была на весь экран то это можно сделать так:

Как заставить работать Cufon с :hover

А заставить элементарно нужно рядышком где вы прописываете теги или классы в которых должен преображаться шрифт, прописать следующее:

  1. Cufon.replace('a', {
  2.         hover: true
  3. });

Cufon. Загружаем нестандартные шрифты на сайт

Cufon – библиотека написанная на java script. Ее предназначение очень простое – использование нестандартных шрифтов на html страницах в независимости от того, установлен ли этот шрифт на клиентской машине.

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

Ну и расскажу как сделать красивый шрифт.
Сначала нужно сгенерировать этот шрифт.

Главная | Портфолио | Услуги | Контакты | Блог