Блог Web-мастера

jQuery, php, CSS и немножко SEO



Архив для категории: ‘javascript’

HTML vs Jquery

Вторник, марта 24, 2009

В этой статье я расскажу как сделать простейшую галерею на html. Название “HTML vs Jquery” ,безусловно преувеличено. Чистый html
не пожет конкурировать как с jquery, так и с другими библиотеками, но всё зависит от поставленной задачи.
Если нам необходимо сделать просто прокрутку изображений, тогда конечно самым простым способом будет использование HTML-тэга marquee. И если нам будет необходимо использовать управление галереей, тогда нам не обойтись без небольших javascript‘ов.

Пример того, что у меня получилось:

Галерея на HTML

Галерея на HTML

HTML Код:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML marquee | HTML vs Jquery | goldblog.com.ua</title>
<!--Подключаем стили сss-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset class="gallery">
<legend>HTML</legend>
<!--Формируем бегущую строку-->
<marquee id="gall" scrolldelay="0" scrollamount="3" direction="up" truespeed
onmouseover='document.getElementById("gall").stop();'
onmouseout='document.getElementById("gall").start();'>
<img src="h.gif" ><img src="t.gif" ><img src="m.gif" ><img src="l.gif" >
</marquee>
</fieldset>
<fieldset class="manage">
<legend>Управление HTML-галлереей</legend>
<!--Устанавливаем кнопки управления галереей-->
<!--Запустить бегущую строку-->
<div id="play"   onclick='document.getElementById("gall").start();'></div>
<!--Остановить бегущую строку-->
<div id="paused" onclick='document.getElementById("gall").stop();'></div>
<!--Изменить направление движения бегущей строки-->
<div id="up"     onclick='document.getElementById("gall").direction="up";'></div>
<div id="left"   onclick='document.getElementById("gall").direction="left";'></div>
<div id="right"  onclick='document.getElementById("gall").direction="right";'></div>
<div id="down"   onclick='document.getElementById("gall").direction="down";'></div>
</fieldset>
<a href="http://goldblog.com.ua">goldblog.com.ua</a>
</body>
</html>

В тело галереи можно вставить всё, чего душа пожелает: блоки, ссылки, изображения и тд…

Описание javascript-функций:

  • document.getElementById(”gall”).start() - запускает бегущую строку с id=”gall
  • document.getElementById(”gall”).stop() - останавливает бегущую строку с id=”gall
  • document.getElementById(”gall”).direction=”up” - заставляет бегущую строку двигаться вверх
  • document.getElementById(”gall”).direction=”left” - заставляет бегущую строку двигаться влево
  • document.getElementById(”gall”).direction=”right”- заставляет бегущую строку двигаться вправо
  • document.getElementById(”gall”).direction=down”- заставляет бегущую строку двигаться вниз

Рабочий пример HTML vs jquery.rar(14 Kb)

Юзайте на здоровье

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Лёгкий движок AJAX

Воскресенье, марта 15, 2009

Часто приходится слышать: ajax-очень сложно, ajax-самостоятельная технология и даже что ajax - это и есть тот присловутый, призрачный web 2.0, о котором все слышали, все всё знают, но ничего конкретного по этому поводу сказать не могут… Ну да ладно, речь пойдет не о web 2.0, а о ajax’e, а точнее о том, что ajax - проще простого!

На самом деле ajax - не отдельная технология, а всего лишь набор javascript‘овых функций:

function createHttpRequest() {
var httpRequest;
// Mozilla/Safari

if (window.XMLHttpRequest)
{
httpRequest=new XMLHttpRequest();
}
// Internet Explorer
else if (typeof ActiveXObject != ‘undefined’)
{
httpRequest = new ActiveXObject(’Microsoft.XMLHTTP’);
}
return httpRequest;
}

function sendRequest(file, _resultId, getRequestProc) {
//- проверяем можно ли отправлять данные
if(document.getElementById(‘ajax_flag’).value==0)
{
//alert(file);
file=encodeURI(file);
resultId = _resultId;
flag_aj=“‘ajax_flag’”;
document.getElementById(resultId).innerHTML = ‘<span style=”border:0px;” onclick=”javascript:document.getElementById(’+flag_aj+’).value=0;”>

<input name=”sub” src=”ajax-loader.gif” type=”image” />// изображение ajax-loader

</span>’;
httpRequest.open(‘POST’, file);
httpRequest.setRequestHeader(‘Content-Type’ , ‘application/x-www-form-urlencoded’);
httpRequest.onreadystatechange = getRequestProc;
httpRequest.send(null);
}
}

function getRequest() {
//– прячем десктопы
if (httpRequest.readyState == 0) {
document.getElementById(resultId).innerHTML = ‘неинициализирован’;
}
if (httpRequest.readyState == 1) {
//– ставим флаг что начали отправку
document.getElementById(‘ajax_flag’).value=1;
}

if (httpRequest.readyState == 4) {
//– ставим флаг что приняли
document.getElementById(‘ajax_flag’).value=0;
document.getElementById(resultId).innerHTML = httpRequest.responseText;
document.getElementById(resultId).style.visibility = ‘visible’;
}
}
var httpRequest = createHttpRequest();
var resultId = ;

Теперь всё, что нам необходимо сделать - подключить этот скрипт на сайт:


//подключаем файл ajax.js
<script name=”JavaScript” src=”Путь к файлу” type=”text/javascript”></script>
//ставим флаг, обязательно!
<INPUT id=”ajax_flag” type=”hidden” value=”0″>

//пример

<p onclick=’sendRequest(”путь к подгружаемому файлу“, “res_id“, getRequest)’>Кликните, чтобы подгрузить файл</p>

<div id =”res_id“>Здесь будет результат</div>

Всё, готово!
Примеры:

Наведите курсор, чтобы подгрузить файл с изображением
Кликните, чтобы подгрузить файл с изображением
Кликните, чтобы подгрузить файл ajax.js

Здесь будет результат

Рабочий примерчик - demo(154 Kb)
Юзайте на здоровье

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Проверка паролей на javascript

Четверг, марта 5, 2009

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

Проверка пароля на javascript

Проверка пароля на javascript

Теперь расскажу по подробнее.
Код html:

<form name=”form” action=”" method=”post“>
<input type=”password” name=”pass1onKeyUp=”passValid(’form’,'pass1′,’pass12′,’submit’),isRavno(’form’,'pass1′,’pass2′,’pass22′,’submit’)“> - Введите пароль

<span id=”pass11” >< span id=”pass12” ></span></span><br />

<input type=”password” name=”pass2 onKeyUp=”isRavno(’form’,'pass1′,’pass2′,’pass22′,’submit’)“> - Повторите пароль

<span id=”pass22” >< /span>< br />

<input type=”submit” name=”submit” value=”Далееdisabled><br />
</form>

Код Javascript:

var min_length=6;//минимальная длина пароля
function passValid(form,pass1,pass12,submit)//проверка длины пароля
{
PASS12=document.getElementById(pass12);//индикатор длины пароля
PASS1count=document.forms[form].pass1.value.length;//количество символов в пароле
MARG_LEFT= 10*PASS1count-100;//высчитываем смещение индикатора в зависимости от количества символов в пароле
if(MARG_LEFT<0)//если индикатор не полностью выдвинут, тогда выдвигаем
{
PASS12.style.marginLeft=MARG_LEFT+“px”;
}
if(MARG_LEFT>=0)//если индикатор полностью выдвинут, тогда не выдвигаем
{
PASS12.style.marginLeft=“0px”;
}
//задаем цвет индикатора в зависимости от количества символов
if(PASS1count<4){PASS12.style.background=“#f00″;}
else if((PASS1count>=4) && (PASS1count<6)){PASS12.style.background=“#FF9F00″;}
else if((PASS1count>=6) && (PASS1count<8)){PASS12.style.background=“#CBFE01″;}
else if((PASS1count>=8)){PASS12.style.background=“#0EFE01″;}

}

function isRavno(form,pass1,pass2,pass22,submit)//сравниваем пароли
{
PASS1=document.forms[form].pass1.value;//первый пароль
PASS1count=document.forms[form].pass1.value.length;//количество символов в 1 пароле
PASS2=document.forms[form].pass2.value;//второй пароль
PASS22=document.getElementById(pass22);//индикатор совпадения паролей
SUBMIT=document.forms[form].submit; //кнопка отправки формы
if(PASS1==PASS2)//если совпадают формируем индикатор совпадения паролей
{
PASS22.style.border=“1px solid #446B01″;
PASS22.style.background=“#E0FFB3″;
PASS22.style.color=“#558701″;
PASS22.innerHTML=“Пароли совпадают”;

//если количество символов в пароле больше или равно минимальной длине, делаем кнопку отправки активной
if(PASS1count>=min_length)
SUBMIT.disabled=0;
}
else //если не совпадают формируем индикатор совпадения паролей
{
PASS22.style.border=“1px solid #A40004″;
PASS22.style.background=“#FFD7E9″;
PASS22.style.color=“#D5172B”;
PASS22.innerHTML=“Пароли не совпадают”;
SUBMIT.disabled=1;// делаем кнопку отправки не активной
}
}

Итак,  функционал:

  • В скрипте задано значение минимального количества символов в пароле : min_length. Если ввели меньше, тогда кнопка submit не активна
  • Есть графический индикатор количества символов (без изображений) на css
  • Проверка совпадения паролей: функция isRavno(form,pass1,pass2,pass22,submit). form - имя формы, которую проверяем; pass1 - имя (name) первого поля пароля; pass2 - имя (name) второго поля пароля; pass22 - id блока, в котором отображается совпадают пароли или нет; submit - имя (name) кнопки отправки формы.
  • Индикатор количества символов: функция passValid(form,pass1,pass12,submit). form - имя формы, которую проверяем; pass1 - имя (name) первого поля пароля; pass12 - id блока - индикатора; submit - имя (name) кнопки отправки формы.

По умолчанию, у блока-индикатора margin-left:-102px, в зависимости от количества введенных символов, выдвигаем его, т.е. меняем margin-left.

Вродибы всё, юзайте на здоровье! Если чё не ясно, в комментах излейте душу, помогу чем смогу.

Гы точно! Чуть не забыл, рабочий примерчик (2.4 kb)

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !