Офис НП AMWAY в Ярославле
→ На карте Купить AMWAY: офис в ЯрославлеКонсультации, презентации, мастер–классы, знакомство с продукцией, заказ и выдача купленного товара:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
FAQ (готовые сниппеты) » JavaScript, JQuery |
"Радужный" текст
Вывод:
Вверх
Код: JS
<script type='text/javascript'>
var speed=50;
if(document.all||document.getElementById){var storetext=document.getElementById?document.getElementById('rainbowText'):document.all.rainbowText;}
var hex=new Array('00','14','28','3C','50','64','78','8C','A0','B4','C8','DC','F0'),r=102,g=0,b=0,seq=1;
function changetext(){
rainbow='#'+hex[r]+hex[g]+hex[b];storetext.style.color=rainbow;
}
function change(){
if(seq==6){b--;if(b==0)seq=1}if(seq==5){r++;if(r==12)seq=6}if(seq==4){g--;if(g==0)seq=5}if(seq==3){b++;if(b==12)seq=4}if(seq==2){r--;if(r==0)seq=3}if(seq==1){g++;if(g==12)seq=2}changetext()
}
function starteffect(){
if(document.all||document.getElementById){flash=setInterval('change()',speed)
}
}
starteffect();
</script>
Вывод:
Код: HTML
<span id='rainbowText'>Сниппеты на www.meweb.ru</span>
Добавлено: Pisatel
Вверх
Частичное обновление страницы
Данный код будет раз в 10 секунд обновлять содержимое див'а с id='refresh'
Вверх
Данный код будет раз в 10 секунд обновлять содержимое див'а с id='refresh'
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
setInterval(function(){
$("#refresh").load(location.href+"#refresh>*","");
}, 10000); // 1000ms = 1секунда
});
</script>
Добавлено: Pisatel
Вверх
Вернуться на предыдущую страницу
Ссылка "назад"
Вверх
Ссылка "назад"
Код: HTML
<a href="javascript:history.back()" onMouseOver="window.status="Назад";return true">Назад</a>
Добавлено: Pisatel
Вверх
Дефолтный текст в строке поиска
1.Устанавливает для поля ввода с ид "search" значение "поиск"
2.При фокусе на поле меняет цвет текста на черный
3.Если текст в поле равен значению по умолчанию, то очищаем поле
4.При потере фокуса меняем цвет текста на серый
5.Если поле пустое, возвращаем значение по умолчанию
Вверх
Код: JQUERY
<script type="text/javascript">
$(document).ready(function(){
$("#search").val("поиск").css("color", "#ccc").focus(function(){
$(this).css("color", "black");
if ($(this).val() == "поиск") {
$(this).val("");
}
}).blur(function(){
$(this).css("color", "#ccc");
if ($(this).val() == ""){
$(this).val("поиск");
}
});
});
</script>
1.Устанавливает для поля ввода с ид "search" значение "поиск"
2.При фокусе на поле меняет цвет текста на черный
3.Если текст в поле равен значению по умолчанию, то очищаем поле
4.При потере фокуса меняем цвет текста на серый
5.Если поле пустое, возвращаем значение по умолчанию
Добавлено: Pisatel
Вверх
Добавление/ удаление класса при наведении курсора
Данные решения кроссбраузерны
Вверх
Данные решения кроссбраузерны
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('#mydiv').hover(function(){
$(this).addClass('myhover')}, function(){
$(this).removeClass('myhover') });
});
</script>
// или проще: проверяем, если существует- убираем, нет- добавляем
<script type='text/javascript'>
$(document).ready(function(){
$('#mydiv').toggleClass('myhover');
});
</script>
Добавлено: Pisatel
Вверх
Выделяем весь текст в поле textarea
Вверх
Код: HTML
<textareа rows='5' cols='49' name='mytext' onclick='this.select()'>
Здесь текст, который мы хотим выделить
</textarea>
Добавлено: Pisatel
Вверх
Задаем событие при бездействии пользователя на сайте
Вверх
Код: JQUERY
idleTimer = null;
idleState = false;
idleWait = 5000; // время ожидания 5 секунд
(function($){
$(document).ready(function(){
$('*').bind('mousemove keydown scroll', function(){
clearTimeout(idleTimer);
if (idleState == true){ // пользователь активировался, приветствуем
$("body").append("<p>Доброго времени суток!.</p>");
}
idleState = false;
idleTimer = setTimeout(function(){ // после прошествия заданного времени выводим
$("body").append("<p>Уже " + idleWait / 1000 + " сек. отдыхаешь! Заскучал?</p>");
idleState = true;
}, idleWait);
});
// Инициализация
$("body").trigger("mousemove");
});
});
Добавлено: FileMan 05. июня 2014
Вверх
Кнопка "Вверх"
Этот простой код позволит пользователям проскроллить страницу вверх
Вывод:
Вверх
Этот простой код позволит пользователям проскроллить страницу вверх
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('#uptop').click(function() {
$(document).scrollTo(0,500);
});
});
</script>
Вывод:
Код: HTML
<a id='uptop' href='#'>Вверх</a>
Добавлено: Pisatel
Вверх
Использование фреймворка JQuery с другими библиотеками
Чтобы не было конфликтов, можно воспользоваться следующей конструкцией
Вверх
Чтобы не было конфликтов, можно воспользоваться следующей конструкцией
Код: JS
var $j = jQuery.noConflict();
//теперь можно использовать '$j' вместо '$', например
$j('div').hide();
Добавлено: Pisatel
Вверх
Обрабатываем несуществующие изображения
Показываем при ошибке изображение по-умолчанию
Или банально скрываем
Вверх
Показываем при ошибке изображение по-умолчанию
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('img').error(function(){
$(this).attr('src', 'notfound.png');
});
});
</script>
Или банально скрываем
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('img').error(function(){
$(this).hide();
});
});
</script>
Добавлено: Pisatel
Вверх
Преобразование URL из текста в ссылку
Пример текста и разметки
Вверх
Код: JQUERY
<script type="text/javascript">
$(document).ready(function(){
$.fn.replaceUrl = function(){
var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
this.each(function(){
$(this).html(
$(this).html().replace(regexp,'<a href="$1">$1</a>'));
});
return $(this);
}
// например, ищем ссылки в див'е mydiv
$('.mydiv').replaceUrl();
});
</script>
Пример текста и разметки
Код: HTML
<div class='mydiv'>На сайте http://www.meweb.ru можно найти полезные сниппеты JQuery</div>
Добавлено: Pisatel
Вверх
Проверка сложности вводимого пароля
Использование
Соответственно, можно настроить стили для всех классов предупреждений.
Вверх
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('#pass').keyup(function(e){
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())){
$('#passstrength').html('Должно быть больше 6 символов!');
} elseif (strongRegex.test($(this).val())){
$('#passstrength').className = 'ok';
$('#passstrength').html('Сложный пароль');
} elseif (mediumRegex.test($(this).val())){
$('#passstrength').className = 'alert';
$('#passstrength').html('Средняя сложность');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Ошибка!');
}
return true;
});
});
</script>
Использование
Код: HTML
<input type='password' name='pass' id='pass' />
<span id='passstrength'></span>
Соответственно, можно настроить стили для всех классов предупреждений.
Добавлено: Pisatel
Вверх
Простые функции добавления, выборки и удаления cookie
Вверх
Код: JS
function setCookie(c_name,c_value,c_expiredays,c_path,c_domain) { //функция добавления
var c_exdate=new Date();
c_exdate.setDate(c_exdate.getDate()+c_expiredays);
document.cookie=c_name+ "=" +escape(c_value)+((c_expiredays==null) ? "" : ";expires="+c_exdate.toUTCString()) +"; path="+ c_path +"; domain="+ c_domain;
}
function getCookie(tag) { //функция выборки
var value = null
var myCookie = document.cookie + ";"
var findTag = tag + "="
var endPos
if (myCookie.length > 0) {
var beginPos = myCookie.indexOf(findTag)
if (beginPos != -1) {
beginPos = beginPos + findTag.length
endPos = myCookie.indexOf(";",beginPos)
if (endPos == -1)
endPos = myCookie.length
value = unescape(myCookie.substring(beginPos,endPos))
}
}
return value
}
function deleteCookie(cookie) { // функция удаления
var yesterday = 24 * 60 * 60 * 1000
var expireDate = new Date()
expireDate.setTime (expireDate.getTime() - yesterday)
document.cookie =cookie + "=" + escape("nothing") + ";" + "expires" + "=" + expireDate.toGMTString()
}
Добавлено: Pisatel
Вверх
Определяем версию Internet Explorer
Определяем версию ИЕ: иногда это необходимо. JQuery не ниже версии 1.9
Вверх
Определяем версию ИЕ: иногда это необходимо. JQuery не ниже версии 1.9
Код: JQUERY
$(document).ready(function(){
if (navigator.appName == "Microsoft Internet Explorer") {
ie = true;
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
if (re.exec(ua) != null){
ieVersion = parseInt(RegExp.$1);
}
} else {
ie = false;
}
});
Добавлено: FileMan 05. июня 2014
Вверх
Показ скрытого содержимого при клике на checkbox
Разметка:
Вверх
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function () {
$("#extra").css("display", "none"); //скрываем див с id='extra'
$("#checkme").click(function () {
if ($("#checkme").is(":checked")) {
$("#extra").show("fast"); // показываем скрытый див
} else {
$("#extra").hide("fast"); // иначе- скрываем
}
});
});
</script>
Разметка:
Код: HTML
<div id='extra'>Здесь можно разместить любое содержимое, например, форму</div>
<input type='checkbox' id='checkme' />
<label>Нажми</label>
Добавлено: Pisatel
Вверх
Поиск всех внутренних ссылок
Ищем все ссылки, которые начинаются с имени домена, слеша, относительного пути к файлу или хэша
Вверх
Ищем все ссылки, которые начинаются с имени домена, слеша, относительного пути к файлу или хэша
Код: JQUERY
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
Добавлено: Pisatel
Вверх
Поиск выделенных чекбоксов на странице
Один чекбокс
Все выделенные чекбоксы на странице
Вверх
Один чекбокс
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('#checkBox').prop('checked'); // вернет true или false
});
</script>
Все выделенные чекбоксы на странице
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('input[type=checkbox]:checked');
});
</script>
Добавлено: Pisatel
Вверх
Музыка при наведении на ссылку
Разметка:
Инициализация (JQuery должен быть уже подключен):
Вверх
Разметка:
Код: HTML
<a href='#' title='Звук при наведении' class='aaudio'>Жми!</a>
<audio id='audio' preload='auto'>
<source src='/oops.mp3'>
<source src='/oops.ogg'>
<source src='/oops.wav'>
</audio>
Инициализация (JQuery должен быть уже подключен):
Код: JS
$(document).ready(function() {
var play_audio = $('#audio')[0];
$('.aaudio').mouseenter(function() {
play_audio.play();
});
});
Добавлено: Pisatel
Вверх
Отменить переход по ссылке при обработке клика
Иногда необходимо отменить переход по ссылке, однако не отключать другие возможные обработчики событий. Делается это просто:
Сама разметка будет выглядеть так:
Вверх
Иногда необходимо отменить переход по ссылке, однако не отключать другие возможные обработчики событий. Делается это просто:
Код: JQUERY
$(function() {
$('a.myhref').click(function(e) {
e.preventDefault();
});
});
Сама разметка будет выглядеть так:
Код: HTML
<a href='mypage.html' class='myhref'>Перехода по этой ссылке не будет</a>
Добавлено: Pisatel 18. октября 2014
Вверх
JQuery: сделать ссылки некликабельными
Если хотим сделать ВСЕ ссылки некликабельными, добавляем этот код
А если нам нужны некликабельные только ссылки с определенным классом, чуть изменяем
Вверх
Если хотим сделать ВСЕ ссылки некликабельными, добавляем этот код
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('a').click(function() {
return false;
});
});
</script>
А если нам нужны некликабельные только ссылки с определенным классом, чуть изменяем
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
$('a.myclass').click(function(){
return false;
});
});
</script>
Добавлено: Pisatel
Вверх
Сделать ссылку кликабельной
Например, у нас есть адрес вида www.meweb.ru, и нужно сделать его кликабельным. В принципе, это можно сделать так
Сам вывод- пустой див
Вверх
Например, у нас есть адрес вида www.meweb.ru, и нужно сделать его кликабельным. В принципе, это можно сделать так
Код: JQUERY
<script type='text/javascript'>
$(document).ready(function(){
var myUrl = 'www.meweb.ru';
$('#mysite').html(myUrl.replace(/(.*?)/i, '<a href="http://$1" target="_blank">$1</a>')).prepend('Сайт: ');
}); // на выходе получим Сайт: здесь_кликабельная_ссылка
</script>
Сам вывод- пустой див
Код: HTML
<div id='mysite'></div>
Добавлено: Pisatel
Вверх
Удаляем/ заменяем слово в тексте
Вверх
Код: JQUERY
var el = $('#mydiv'); // будет искать и удалять в этом див'е
el.html(el.html().replace(/word/ig, "")); // соответственно, word- необходимое слово
// можно не удалять, а заменять
el.html(el.html().replace(/word/ig, "peace")); // меняем word на peace
Добавлено: Pisatel
Вверх
Последние активные темы форума
Темы | Просмотров | Ответов | Последние сообщения | |
Вопрос по переделке bb-кода PHP, MySQL |
22344 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
68644 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15363 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
17913 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
144963 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14429 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
22568 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26271 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7669 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
37032 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
11804 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31052 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
128512 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8848 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23198 | 13 | Pisatel 03. апреля 2015 |