js

JavaScript: проверка существования страницы (URL)

Posted on by mak

function returnStatus(req, status) {
//console.log(req);
if(status == 200) {
console.log("The url is available");
// send an event
}
else {
console.log("The url returned status code " + status);
// send a different event
}
}

function fetchStatus(address) {
var client = new XMLHttpRequest();
client.onreadystatechange = function() {
// in case of network errors this might not give reliable results
if(this.readyState == 4)
returnStatus(this, this.status);
}
client.open(“HEAD”, address);
client.send();
}


fetchStatus("/");

 

JavaScript, CSS: зафиксированная реклама которую видно на одном и том же месте даже при прокрутке

Posted on by mak

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

Ситуацию с этим поможет решить зафиксированный блок.

 

<div id=»myAd» style=»position: fixed; top: 10px; right: 2.78%; width: 170px; background: #ffffff; z-index: 1; visibility: hidden;»> 

Здесь код баннера

</div>

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

position: fixed;

как видите из кода DIV’а, этот элемент изначально скрыт. Для того чтобы при прокрутке он отобразился, необходимо добавить JavaScript:

window.onscroll = function() {

	var scrolled = window.pageYOffset || document.documentElement.scrollTop;

	if (scrolled>2850){
		document.getElementById('myAd').style.visibility = 'visible';
	}
	else{
		document.getElementById('myAd').style.visibility = 'hidden';
	}
}

JavaScript: делаем прокрутку на сайте вверх-вниз, без использования jQuery

Posted on by mak 
В html коде страницы создаём в любом месте в пределах тега body (лишь бы не внутри любого другого контейнера),

<div id="scrollBack" onClick="scrollBack()"></div>

в пределах тегов <head></head> пишем следующий код:
var oldPos;
window.onscroll = function() {

	var scrolled = window.pageYOffset || document.documentElement.scrollTop;

	if (scrolled>0){
		document.getElementById('scrollBack').style.visibility = 'visible';
		document.getElementById('scrollBack').innerHTML = 'Up'; //здесь можно подставить например картинку со стрелкой вверх
	}
	else
	{
		document.getElementById('scrollBack').innerHTML = 'Down';// а здесь можно подставить например картинку со стрелкой ввниз
	}
}

function scrollBack(){

	if (window.pageYOffset || document.documentElement.scrollTop > 0){
		oldPos = window.pageYOffset || document.documentElement.scrollTop;
		window.scrollTo(0,0);
	}
	else{
		window.scrollTo(0,oldPos);
	}
}

а в стилях настраиваем нашу панельку с id scrollBack таким образом, чтобы она была слева, зафиксированна, и необходимой длины (я для примера использовал 100%ную высоту)

вот содержимое моего css:

#scrollBack {
			position: fixed;
			left: 1px;
			top: 0px;
			width: 80px;
			height: 100%;
			opacity: 0;
			font-family: sans-serif;
			font-weight: bold;
			font-size: 0.5em;
			color: #000088;
			background: #e0e0ff;
			border: 1px solid #fff;
			padding: 2px;}
#scrollBack:hover {opacity: 0.8;}

PHP: ajax-запрос с помощью jQuery

Posted on by mak

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

Для того, чтобы использовать jQuery, нам понадобится js-библиотека jquery.1.7.1.min.js. Также необходимо создать js-файл с функцией, которую мы будем вызывать из php-файла, чтобы сделать запрос на сервер при помощи javascript. Эта функция выглядит следующим образом:
function zapros(data)
{
$.ajax({
type: "POST",
url: "action.php",
data: "do=zapros&perem="+data,
success: function(html){
$("#id").empty();
$("#id").append(html);
}
});
}
где data — это данные, которые необходимо передать в скрипт action.php;
А сам html-файл, из которого мы вызываем функцию, содержит следующий код:

<html>

<head>

<title></title>

<script src=”jquery.1.7.1.min.js”></script>

<script src=”jscript.js”></script>

</head>

<body>

<a href=”#” onClick=”zapros(‘dannye_peremennoy’)”>Send</a>

<div id=”id”>

Thing

</div>

</body>

</html>

В свою очередь, файл action.php, в который поступает наш запрос, содержит следующее содержимое:

<?php

echo $_POST[‘perem’];

?>

Что и выведет содержимое переменной perem на страницу.

Есть два важных момента, о которых не следует забывать, используя jQuery:
1. Вместо файла action.php, может быть тот же самый index.php;
2. Если ссылаться на другой хост, то это не сработает (в отличии от json).