Илья1 мин чтения4.5/5Комментарии к записи Оптимизация jQuery.animate отключены
Задача Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем jQuery.animate. Решение фиговое Javascript 1 $(«#kv2»).animate({left: 550, width: 100},1000); 2 $(«#kv3»).animate({top: 450, width: 100},1000); 3 $(«#kv4»).animate({left: 550, top: 450, width: 100},1000); 4 5 setTimeout(function() {$(«div»).css(«background»,»green»);}, 1001); Проблема данного кода заключается в том, что каждый animate запускает свой таймер со своими перерисовками экрана. Чтобы число перерисовок сократить используем один animate и его функцию step. Функция step будет выполняться на каждом шаге анимации. Дополнительно воспользуемся функцией complete, которая сработает один раз по завершению анимации: Javascript 01 $(«#kv2»).animate( 02 { 03 /* 04 на значение данного параметра будут опираться вычисления для остальных объектов и свойств. 05 выбираем с которым проще работать и меньше математических действий 06 */ 07 left: 550 08 }, 09 { 10 duration: 1000, 11 step: function(now, fx) 12 { 13 $(«#kv2»).css({«width»: 50+(now-250)/6+»px»}); // вычисляем ширину данного блока… Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Как дождаться окончания анимации в jQuery отключены
В этой статейке, я покажу как можно быстро и просто заблокировать действия до завершения анимации, вызванной с помощью jQuery aminate() Очень часто бывает жизненно необходимо дождаться завершения анимации, случаи бывают разные — каруселька, галерея и многое другое. Раньше я изобретал «велосипед» — добавлял всевозможные таймеры, блокировал страницу, и тд. Но сегодня полистав документацию jQuery, я наткнулся на интересную возможность функции animate(). Оказывается, помимо параметров анимации и скорости, эта функция может вызывать действия по завершению анимации. Используя новые знания, я быстро набросал пример, который показывает, как можно заблокировать повторное выполнение анимации, пока не закончится старая. Ниже приведен подробно прокомментированный код: $(document).ready(function(){ // создаем действия при клике на кнопку var animateTest = function() { var widthElement = parseInt($(this).width()); var heightElement = parseInt($(this).height()); var stepZoom = 50; var speedAnimate = 1000; // перед запуском анимации снимаем все действия с кнопки // чтобы пользователь не мог сделать повторные клики $(this).unbind(‘click’); // запуск анимации $(this).animate(… Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Как добавить сайт в поисковики (добавить url в поисковики) Яндекс, Google, Rambler, Yahoo, Bing? отключены
После того, как вы создали свой сайт, блог и наполнили его контентом, необходимо сделать так, чтобы о вашем сайте узнали, для этого понадобится добавить сайт в поисковики. Ведь по статистике большая часть всех посетителей приходят именно через ссылку из поисковиков. Хотя, со временем поисковики сами могут проиндексировать ваш сайт и сами добавят в свой поиск. Но всеже добавить сайт в поисковики самому нужно для гарантии индексирования. Конечно, есть и другие методы того, чтобы поисковики обратили внимание на ваш сайт. К примеру можно добавить сайт в социальную сеть, или, используя сервисы, такие как: Ответы Майл, Ответы Гугл написать ответ на вопрос и вставить туда ссылку на свой сайт. Или же можно добавить сайт на каком-либо форуме, указав ссылку на свой ресурс, а потом активно давать ответы на форумах, оставляя ссылку на свой сайт или в подписи аккаунта. Есть мнение, что такой метод (когда не вы добавляете сайт, а поисковик сам вас находит) предпочтительней…. Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Конфликт версий Jquery отключены
Сегодня при верстке нового сайта столкнулся с проблемой. На сайте присутствует как карусель так и сладйер. А проблема возникла в том что для карусели используется jquery плагин работающий только с версией jquery 1.6, и чуток выше, а на слайдере используется версия jquery 1.9. Соответственно если подключить только старую библиотеку, то не работает слайдер сайта, а с новой не работает карусель. Первый шаг это поиск альтернативного плагина, но тут мои поиски окончились ничем, ничего подобного к сожалению не нашел. При поиске плагина нашел много интересных, красивые движения, «превьюшки» и еще куча мелочей. По сути мой способ решить конфликт между разными версиями jquery не изобретая велосипед, многие о нем знают, но например использовали не совсем для подобной задачи. Собственно речь идет про jQuery.noConflict(), который я думаю многие использовали как минимум при работе с jquery и mootools, здесь же конфликт возникает из-за того что обе библиотеки используют знак $. У меня же просто jquery… Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Что такое API отключены
Рано или поздно любой программист сталкивается с таким понятием как API. Однако, когда такая встреча происходит, не все знают, что это такое, зачем оно нужно и как его использовать. И в этой статье я собираюсь восполнить этот пробел в знаниях некоторых из Вас, а также приведу пример из своей практики. API (application programming interface) — это интерфейс прикладного программирования. Если говорить более простым языком, то это набор различных функций, констант, классов, форматов запросов, которые можно использовать в других программах. Можно считать, что API — это некий объект, реализацию которого мы не знаем, однако, можем его использовать. Например, компьютер — объект, реализацию которого знают очень мало людей, однако, использовать его могут почти все, совершая какие-то действия: просмотр видео, сёрфинг по Интернету, печать текста и прочее. Как это всё работает — мало, кто знает, а вот делать это могут чуть ли не все. Примером API является Windows API, OpenGL API, Direct3D API… Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Как создать свой API на сайте отключены
Не так давно один из моих посетителей мне задал вопрос по e-mail: «Как создать свой API на сайте?«. Я решил, что это будет весьма полезно другим пользователям, тем более, что на кажущуюся сложность процесса, всё очень и очень просто. Необходимо лишь обладать самыми элементарными знаниями PHP. Если Вы вдруг не понимаете, о чём идёт речь, то прочитайте сначала статью: что такое API. Идём дальше. Давайте разберём, а для каких сайтов нужен вообще API: Социальные сети (Facebook и другие). Здесь требуется API для получения информации о различных данных пользователя: его друзьях, личных сообщениях и прочей информации. Почтовые сервисы (например, mail.ru). В первую очередь, для получения писем. Иногда для отправки. Различные сервисы для создания Интернет-магазинов. Например, получить список новых заказов или список всех товаров в заданной категории. И много-много других сайтов. Первое, что необходимо усвоить — это то, что API нужен далеко не каждому сайту (даже если он принадлежит одной из вышеуказанных… Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Как запретить скачивание изображений с сайта? отключены
Скажу сразу — 100% защиты нет, но Можно максимально Усложнить жизнь тем, кто ворует или использует url изображений. Вот несколько способов защиты: 1) При помощи Java Script. При помощи JS блокируем возможность вызова правой кнопкой мыши на изображении меню с Сохранить изображение. Как вариант против неопытных пользователей подходит. <img src=»image.jpg» oncontextmenu=»return false;» /> 2) Состоит в том, чтобы спрятать изображение и отобразить его в качестве background (фона) через стили. Его опять же можно скачать, но только просмотрев CSS-запись, а после введя соответствующий url в строку ввода адреса. Это уже существенно усложнит жизнь тем, кто скачивает Ваши изображения! Код CSS. Создаём класс со скрытым изображением .background {background: url(‘img.jpg’) no-repeat; width: 150px; height: 150px;} и код HTML. Вставляем в соответствующее дял изображение место. <div class=»background»></div> <!— скрытое изображение —> Можно стили сразу в div прописать <div style=»background: url(‘img.jpg’) no-repeat; width: 150px; height: 150px;»></div> 3) Данный способ защитит от того, что url Вашего изображения используют на другом сайте, то есть прописывают адрес изображения Вашего сайта, а отображается оно у них. Такое явление называется —хотлинком. Как результат,… Читать далее »
Илья1 мин чтения4.5/5Комментарии к записи Как изменить адрес входа в админ-панель WordPress отключены
Здравствуйте дорогие друзья! Недавно, от службы поддержки хостинга мне пришло письмо о том, что блог подвергся брут атаке подбора пароля, и они сменили страницу входа. Спустя несколько дней страница перестала работать, и я обратился к ним с этим вопросом. Ответили мне довольно быстро. Написали, что восстановили стандартную страницу входа и попросили как можно быстрее ее сменить. Выяснилось, что в последнее время участились атаки по подбору пароля к панелям администраторов CMS WordPress и Joomla. Злоумышленники используют десятки тысяч IP-адресов, что дает им большое преимущество. Пользователи Joomla могут дополнительно защитить свой сайт, установив на папкуadministrator логин и пароль. Как это сделать уточните у своего хостера. Тем, кто использует WordPress, рекомендую менять стандартную страницу логина (wp-login.php) вручную или с помощью плагина. Сначала хотел предложить пару плагинов, но перепробовав несколько на тестовом сайте, понял, что зря убил время. Не устроило следующее: Плагины давали больше возможностей, чем мне было необходимо. Работа плагинов не устраивала. Она… Читать далее »
Илья2 мин чтения4.5/5Комментарии к записи Как скрыть URL входа админ-панели WordPress отключены
Приветствую, дорогой гость! В данной статье мы рассмотрим, как скрыть URL входа админ-панели WordPress. Похожая тема уже была затронута на блоге DayAfterNight, она называлась “Как изменить адрес входа в админ-панель WordPress“. Ко мне очень часто обращались со следующим: Почему не скрывается админ-панель? Если набрать wp-admin, откроется новая страница логина. Друзья, прошлая статья была направлена именно на замену страницы логина WordPress, а не на ее скрытие от посторонних глаз. Мы заменяли wp-login.php на свое название, например, admin-login.php. Сегодня, скроем данную страницу. Итак, для того, чтобы скрыть страницу входа, нам потребуется зайти на хостинг и отредактировать файл .htaccess, который находится в папке вашего WordPress. Например: Ваш_хостинг/httpdocs/wordpress/.htaccess В файл .htaccess нужно вставить следующий код: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 # Hide admin URL start <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^my_admin_url/?$ /wp—login.php?my_secret_key [R,L] RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in_.*$ RewriteRule ^my_admin_url/?$ /wp—login.php?my_secret_key&redirect_to=/wp—admin/… Читать далее »
Илья2 мин чтения4.5/5Комментарии к записи Параллакс-эффект на чистом CSS отключены
В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS. Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событиепрокрутка, изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно —requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript? Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение — почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта? Теория Прежде чем говорить о принципе работы, давайте выполним базовую разметку: <div class=«parallax«> <div class=«parallax__layer parallax__layer—back«> … </div> <div class=«parallax__layer parallax__layer—base«> … </div> </div> А вот основные стили: .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position:… Читать далее »
