Category Archives: JS

Замена ссылки JS (jQuery)

Для замены ссылки с помощью JS (jQuery) используем attr

function spbMenu() {
    $('[href="/promo/"]').attr('href','/promo-spb/');
    $('[href="/blog/"]').attr('href','/blog-spb/');
};

function spbMenu() {

$('[href="/promo/"]').attr('href','/promo-spb/');

$('[href="/blog/"]').attr('href','/blog-spb/');

};

Затем вызываем функцию

spbMenu();

1	spbMenu();

js перемешать div

Имеется такая структура

<div class="myItems">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
</div>

</div>

Нужно сделать

<div class="myItems">
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">1</div>
</div>

</div>

Для этого используем функцию

function reorder() {
           var grp = $(".myItems").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".myItems").append($(grp));
       }

function reorder() {

var grp = $(".myItems").children();

var cnt = grp.length;

var temp,x;

for (var i = 0; i < cnt; i++) {

temp = grp[i];

x = Math.floor(Math.random() * cnt);

grp[i] = grp[x];

grp[x] = temp;

}

$(grp).remove();

$(".myItems").append($(grp));

}

Не забываем про вызов функции Используем jQuery Полезная информация Перемешивание DOM-элементов в jQuery stackoverflow

Добавление класса js по содержимому

$('.article__button.button.button--basket span:contains("Товар в корзине")').each(function(){
  $(this).parent('div').addClass("item_in_basket");
});

$('.article__button.button.button--basket span:contains("Товар в корзине")').each(function(){

$(this).parent('div').addClass("item_in_basket");

});

Пример:

<div class="article__button button button--basket">
<span>Товар в корзине</span></div>

1 2	<div class="article__button button button--basket"> <span>Товар в корзине</span></div>

Кнопка наверх jQuery

Не забываем подключить jQuery js (перед </head>)

<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$('#toTop').fadeIn();

} else {

$('#toTop').fadeOut();

}

});

$('#toTop').click(function() {

$('body,html').animate({scrollTop:0},800);

});

</script>

css

<style> 
#toTop {
        width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}
</style>

<style>

#toTop {

width:100px;

border:1px solid #ccc;

background:#f7f7f7;

text-align:center;

padding:5px;

position:fixed; /* this is the magic */

bottom:10px; /* together with this to put the div at the bottom*/

right:10px;

cursor:pointer;

display:none;

color:#333;

font-family:verdana;

font-size:11px;

}

</style>

html Перед </body>

<div id="toTop">^ Back to Top</div>

1	<div id="toTop">^ Back to Top</div>

Еще больше примеров тут.

Маска телефона JS

Подключаем библиотеку jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

С официального сайта скачиваем maskedinput.js В итоге получаем маску телефона на input

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.js"></script>
<script type="text/javascript">
jQuery(function($){
   $("input[name=telefon]").mask("+7 (999) 999-9999");
});
</script>

jQuery(function($){

$("input[name=telefon]").mask("+7 (999) 999-9999");

});

</script>

Если необходимо, можно использовать аргумент (для отключения чистки при частично заполненном номере)

<span class="pun">{</span><span class="pln">autoclear</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">}</span>

1	<span class="pun">{</span><span class="pln">autoclear</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">}</span>

Например:

$(control).mask('999-999-9999', {autoclear: false});

1	$(control).mask('999-999-9999', {autoclear: false});

Отправка формы обратной связи средствами AJAX

Для отправки формы обратной связи без перезагрузки страницы, сделаем следующее: Создадим 2 файла: index.php, mail.php. index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<style>
	.top_form_ok,.top_form_error {
		display: none;
	}
</style>
</head>
<body>
<?
echo time();
?>
<hr>
<div class="top_form">
	<form method="POST">
		Введите имя: <input name="name"><br/>
		Введите телефон: <input name="tel"><br/>
		Ваше сообщение: <textarea name="text"></textarea><br/>
		<input type="submit">
	</form>
</div>
<div class="top_form_ok">Успешно отправлено</div>
<div class="top_form_error">Что-то пошло не так</div>

<script>
	$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

		var name = $('.top_form input[name="name"]').val(); 
		var tel = $('.top_form input[name="tel"]').val();
		var text = $('.top_form textarea[name="text"]').val();
																// создаем переменные из полей формы

		var str = {

			'name' : name,
			'tel': tel,
			'text': text
		}														// собираем их в масив	


		$.ajax({
			type: "POST",											// тип отправки данных
			url: "mail.php",  // путь до пхп файла отправки письма
			data: str,												// какие данные отправляем
			success: function(msg) {                              // получаем ответ сервера

				if(msg) {                //если ответ равен  ... то
					$('.top_form_error').css('display','block');
				} else {
					$('.top_form_ok').css('display','block');
					$('.top_form').css('display','none');
				}
			}
		});

		return false;
	});

</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.top_form_ok,.top_form_error {

display: none;

}

</style>

</head>

<body>

echo time();

<hr>

Введите имя: <input name="name"><br/>

Введите телефон: <input name="tel"><br/>

Ваше сообщение: <textarea name="text"></textarea><br/>

</form>

</div>

<div class="top_form_ok">Успешно отправлено</div>

<div class="top_form_error">Что-то пошло не так</div>

$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

var name = $('.top_form input[name="name"]').val();

var tel = $('.top_form input[name="tel"]').val();

var text = $('.top_form textarea[name="text"]').val();

// создаем переменные из полей формы

var str = {

'name' : name,

'tel': tel,

'text': text

} // собираем их в масив

$.ajax({

type: "POST", // тип отправки данных

url: "mail.php", // путь до пхп файла отправки письма

data: str, // какие данные отправляем

success: function(msg) { // получаем ответ сервера

if(msg) { //если ответ равен ... то

$('.top_form_error').css('display','block');

} else {

$('.top_form_ok').css('display','block');

$('.top_form').css('display','none');

}

});

return false;

});

</script>

</body>

</html>

mail.php

<?php
function mailSend () {
	$name 		 = $_POST['name'];
	$tel 		 = $_POST['tel'];
	$text 		 = $_POST['text'];

	$site 		 = $_SERVER['HTTP_HOST'];

	$to 		 = "prog@site.ru";// от кого
	$from 		 = "admin@site.ru";// кому

	$subject	 = "Новое письмо с сайта {$site}";

	$message 	 = "<h1>Вам сообщение с сайта {$site}</h1>";
	$message 	.= "Имя: {$name}<br/>";
	$message 	.= "Телефон: {$tel}<br/>";
	$message 	.= "<hr>";
	$message 	.= $text;

	$header  	 = 'MIME-Version: 1.0' . "\r\n";
	$header 	.= "From: {$from}\r\n";
	$header 	.= "Content-type: text/html; charset=utf-8\r\n"; 
	$header 	.= "X-Mailer: PHP mail script";

	mail($to, $subject, $message, $header);
}

mailSend();
?>

<?php

function mailSend () {

$name = $_POST['name'];

$tel = $_POST['tel'];

$text = $_POST['text'];

$site = $_SERVER['HTTP_HOST'];

$to = "prog@site.ru";// от кого

$from = "admin@site.ru";// кому

$subject = "Новое письмо с сайта {$site}";

$message = "<h1>Вам сообщение с сайта {$site}</h1>";

$message .= "Имя: {$name}<br/>";

$message .= "Телефон: {$tel}<br/>";

$message .= "<hr>";

$message .= $text;

$header = 'MIME-Version: 1.0' . "\r\n";

$header .= "From: {$from}\r\n";

$header .= "Content-type: text/html; charset=utf-8\r\n";

$header .= "X-Mailer: PHP mail script";

mail($to, $subject, $message, $header);

}

mailSend();