Форум на Исходниках.RU

FAQ по JavaScript

fatalist — Thu, 10 Feb 2011 15:12:30 +0000

fatalist:

Q: Как получить координаты элемента?

1. Относительно страницы:

function element_point(pElement) {

if (!pElement || pElement == document.body || pElement == document.documentElement)

return { x : 0, y : 0 };

var ppt = element_point(pElement.offsetParent);

return {

x : pElement.offsetLeft + ppt.x,

y : pElement.offsetTop + ppt.y

};

}

2. Если у родительского блока стоит position: relative; то все его дети (у которых позицирование absolute) offsetTop будет указываться не с начала страницы, а с начала родительского блока.
Добавляем условие, при котором родительский элемент является началом координат для данного элемента:

function element_point(pElement) {

if (!pElement || pElement == document.body || pElement == document.documentElement || pElement.style.position == 'static')

return { x : 0, y : 0 };

var ppt = element_point(pElement.offsetParent);

return {

x : pElement.offsetLeft + ppt.x,

y : pElement.offsetTop + ppt.y

};

}

FAQ по JavaScript

fatalist — Sun, 18 Jul 2010 13:46:30 +0000

fatalist:

Q: Как получить доступ к значению поля выбора файла ()?

Никак.

Настройками большинства браузеров запрещен доступ к значению поля , то есть к полному пути файла, выбранного в это поле. Надеюсь не надо объяснять почему?
Существуют некроссбраузерные решения, но здесь они не рассматриваются.

FAQ по JavaScript

fatalist — Thu, 03 Jun 2010 05:08:27 +0000

fatalist:

Q: Где найти бесплатный WYSIWYG редактор для сайта?

Краткий обзор бесплатных WYSIWYG редакторов: http://habrahabr.ru/blogs/webdev/29244/
Краткое содержание:
ConceptRTE
RTEditor
FCKeditor
FreeTextBox
htmlArea
NicEdit
openWYSIWYG
SPAW Editor
TinyMCE

FAQ по JavaScript

Demon_id — Thu, 12 Jul 2007 07:11:56 +0000

Demon_id: Vadikov, в посте #5 есть ссылка, по которой написано как отмечать чекбоксы, причём короче и элегантнее:

function checkAll(oForm, cbName, checked)

{

for (var i=0; i < oForm[cbName].length; i++) oForm[cbName][i].checked = checked;

}

</script>

<input type="checkbox" name="total" value="checkbox" onClick="checkAll(this.form,'checkbox[]',this.checked)">Отметить все

<input type="checkbox" name="checkbox[]" value="checkbox">1

<input type="checkbox" name="checkbox[]" value="checkbox">2

<input type="checkbox" name="checkbox[]" value="checkbox">3

</form>

FAQ по JavaScript

Vadikov — Thu, 12 Jul 2007 05:47:02 +0000

Vadikov: Q: Как отметить все checkbox'ы в форме?
A:

function SelectAllCheckbox (chbox, chtext){

for(var i =0; i < document.forms[chbox].elements.length; i++){

if(document.forms[chbox].elements[i].name.indexOf(chtext) == false){

document.forms[chbox].elements[i].checked = true;

}

Пример:

</form>

<a href="javascript:SelectAllCheckbox('boxes','box');">Отметить все</a>

FAQ по JavaScript

bizar — Wed, 25 Apr 2007 05:55:40 +0000

bizar: Функция определяет высоту к примеру дива (по id) и применяет её к контенту, можно использовать для того чтоб поднать контент в самый верх ;)

function RunTime() {

//alert(document.getElementById('div_content').offsetheight);

document.getElementById('js_cont').style.height = document.getElementById('div_content').offsetHeight;

}

</script>

FAQ по JavaScript

Nadz Goldman — Mon, 04 Dec 2006 09:37:29 +0000

Nadz Goldman: Core JavaScript Reference v.1.5 [content]
Core JavaScript Reference v.1.5 [index]
---
CSS2 [content]
CSS2 [index]
---

Функция округления числа до нужной степени и обрезания буковок

function my_round (obj, stepen)

{

some_num = obj.value.replace (/[^0-9.]/gi, '');

if (stepen == 0)

{

if (!(isNaN(parseInt(some_num, 10))))

{

res_ = (some_num * Math.pow(10, stepen));

res_ = Math.round (res_);

res_ = (res_ / Math.pow(10, stepen));

}

else

if (stepen != 0)

{

if (!(isNaN(parseFloat(some_num))))

{

res_ = (some_num * Math.pow (10, stepen));

res_ = Math.round (res_);

res_ = (res_ / Math.pow (10, stepen));

}

return res_;

}

Вызов:

Суть:
my_round (параметр1, параметр2);
где:
параметр1 - что округляем,
параметр2 - до какой степени. Т.е.: если нужно получить на выходе целочисленное округленное число, то параметр2 = 0, иначе - округляем до нужной степени округления.

FAQ по JavaScript

bizar — Tue, 22 Aug 2006 16:31:37 +0000

bizar: Пример Меню на JavaScript:

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8');

function allclose() {

for (i=0; i < id_menu.length; i++){

document.getElementById(id_menu[i]).style.display = "none";

}

function openMenu(id){

for (i=0; i < id_menu.length; i++){

if (id != id_menu[i]){

document.getElementById(id_menu[i]).style.display = "none";

}

if (document.getElementById(id).style.display == "block"){

document.getElementById(id).style.display = "none";

}else{

document.getElementById(id).style.display = "block";

}

</script>

#menu_body{background:#81A192;width:200px}

#menu_body ul li{list-style-type:none;border-bottom:1px solid #fff;margin-left:-40px;padding-left:7px}

#menu_body ul li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none}

#menu_body ul li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside}

#menu_body ul li ul{border-top:1px solid #fff;margin-left:-7px;padding-left:50px}

</style>

</head>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

Реализовывайте это меню под себя (горизонтально и т.д.)

FAQ по JavaScript

JavaScript — Sat, 25 Mar 2006 19:50:33 +0000

JavaScript: 1.15 Коментарии при наведение на ссылку не будет работаить в IE 6-

FAQ по JavaScript

bizar — Tue, 14 Mar 2006 11:24:05 +0000

bizar: 1.18 Координаты курсора мышки при нажатии на кнопку

ltscript language="JavaScript">

<!--

window.captureEvents(Event.CLICK);

window.onclick= displayCoords;

function displayCoords(e) {

alert("x: " + e.pageX + " y: " + e.pageY); }

// -->

</script>

1.19 При щелчке мыши не выезжает контекстное меню

document.oncontextmenu = function(){return false;};

1.20 Смена курсора мыши

function changeCursor(obj,i)

{

t=i;

if(i==0)t="DEFAULT"

else if(i==1)t="CROSSHAIR"

else if(i==2)t="HEND"

else if(i==3)t="MOVE"

else if(i==4)t="TEXT"

else if(i==5)t="WAIT"

obj.style.cursor=t;

}

Изменение курсора над ссылкой

OnMouseOver="changeCursor(this,1)" href="my_file.htm">Ссылка</a>

FAQ по JavaScript

bizar — Tue, 14 Feb 2006 06:05:43 +0000

bizar:

7. Работа с курсором мыши.

7.01. Наведение мыши на элементы формы

<html>

<body>

<!--

function OnMouseOver() {

myText.innerText = "Курсор над кнопкой";

}

function OnMouseOut() {

myText.innerText = "Курсор бродит по странице";

}

// -->

</script>

<br/>

</body>

</html>

7.02. Подсказки при наведении на ссылки

<html>

<body>

<table>

<tr><td> <a href=yourlink.html onmouseover=show(1);>Здесь ваша ссылка №1</a></td></tr>

<tr><td> <a href=yourlink.html onmouseover=show(2);>Здесь ваша ссылка №2</a></td></tr>

</table>

</td>

<td id=desc valign=top> Здесь будут появляться подсказки</td></tr>

</table>

</body>

</html>

function show(n)

{

var cdesc; switch (n)

{

case 0.1: cdesc="Ваш текст, который будет по умолчанию";

break;

case 1: cdesc="Текст, при наведении на ссылку 1";

break;

case 2: cdesc="Текст, при наведении на ссылку 2";

break;

}

desc.innerText=cdesc;

}

</SCRIPT>

7.03. Изменение цвета фона

<html>

<body>

<tr>

<a href="link1.htm">Пункт 1</a></td>

<a href="link2.htm">Пункт 2</a></td>

</tr>

</table>

</body>

</html>

7.04. Создание ячейки как ссылки

<html>

<body>

<tr>

<a href="link1.htm">Пункт 1</a></td>

<a href="link2.htm">Пункт 2</a></td>

</tr>

</table>

</body>

</html>

7.05. Изменение свойств ячейки

<html>

<body>

<tr>

<a href="link1.htm" onMouseOver="newColor('c1')" onMouseOut="backColor('c1')">Пункт1</a>

</td>

<a href="link2.htm" onMouseOver="newColor('c2')" onMouseOut="backColor('c2')">Пункт2</a>

</td>

</tr>

</table>

</body>

</html>

function newColor(idCell) {

if (document.all) eval('document.all.'+idCell+'.style.background = "#FFCC33"');

else eval('document.getElementById("' + idCell + '").style.background = "#FFCC33"');

}

function backColor(idCell) {

if (document.all) eval('document.all.'+idCell+'.style.background = "#CCCCCC"');

else eval('document.getElementById("' + idCell + '").style.background = "#CCCCCC"');

}

</script>

7.06. Коментарии при наведение на ссылку

<html>

<head>

function load(evt) {

for(i=0; i<document.links.length; i++) {

document.links[i].setAttribute("host",

document.links[i].host);

}

</script>

<style>

a {

color: gray;

}

a:before {

background-image: url("/img/external.link.gif");

width: 20px;

height: 20px;

}

a[host="internal.com"] {

color: red;

}

a[host="internal.com"]:before {

background-image: url("/img/internal.link.gif");

}

</style>

</head>

<ul>

<li>

<a href="http://external.com/dsfsdf">http://external.com</a>

</li>

<li>

<a href="http://internal.com/internal.html">/internal.html</a>

</li>

</ul>

</body>

</html>

7.07. Наведение на img
первый способ:

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)

x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v3.0

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)

x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++)

x=MM_findObj(n,d.layers[i].document); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;

for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)

x.oSrc=x.src; x.src=a[i+2];}

}

//--> </script> </HEAD> <BODY onLoad="MM_preloadImages('1.gif','2.gif')">

<img name="Image1" alt="Text" border="0" src="1.gif"

onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('Image1','','2.gif',1)">

</P></BODY></HTML>

второй способ:

</a>

и там и там всё работает одинакого.

7.08. Проигрывание wav, наведением на объект

<HTML>

<BODY>

<!--

var strOver = "Data.wav";

var strClick = "Data.wav";

var a = new Array("never", "say", "die");

for (var i = 0; i < a.length; i++)

document.writeln('<p><a href="#"'

+ ' onmouseover="soundIt(false)"'

+ ' onclick="soundIt(true)">'

+ a[i] + '</a></p>');

function soundIt(cause)

{

sounder.src = (cause ? strClick : strOver);

}

//-->

</SCRIPT>

</BODY>

</HTML>

</sample>

FAQ по JavaScript

SergeS — Fri, 08 Oct 2004 11:31:23 +0000

SergeS:

7. Как обозначить все checkbox-ы

Автор: Mixxx
Язык: JavaScript

Вот сама функция

function selAll(E)

{

for(var i=0;i<E.length;i++)

if(typeof E[i].type!='undefined' && E[i].type.toLowerCase()=='checkbox')

E[i].checked=true;

}

А вот небольшой пример

<form>

</form>

FAQ по JavaScript

Tishaishii — Thu, 23 Sep 2004 22:42:30 +0000

Tishaishii:

Программка на JavaScript - выводит 10 чаще всего встречающихся слов из документа Word.

HTA - Hyper Text Application - набивное чучело Micrisoft - построение приложений на основе локализованных web-страниц. По крайней мере в Win2000 Professional, файл *.hta запускать можно двумя щелчками.

FAQ по JavaScript

Tishaishii — Thu, 23 Sep 2004 22:29:16 +0000

Tishaishii:

6. Как подгрузить XML на страницу?

Автор: Tishaishii
Язык: HTML и JavaScript

test.html:

<html>

<body>

alert(xml_doc.XMLDocument.documentElement.getElementsByTagName("item")[0].text);

</script>

</body>

</html>

test.xml:

<root>

<item id="i1">Содержание 1</item>

<item id="i2">Содержание 2</item>

</root>

А можно прямо так:

<html>

<body>

<item id="i1">Содержание 1</item>

<item id="i2">Содержание 2</item>

</root></script>

alert(xml_doc.XMLDocument.documentElement.getElementsByTagName("item")[0].text);

</script>

</body>

</html>

А работает только в IE >=6, раньше не проверял.

FAQ по JavaScript

Tishaishii — Mon, 13 Sep 2004 18:23:49 +0000

Tishaishii: Починенный плагин с кодовым именем "таблица-ца-ца" и новый с кодовым же именем "кнопка-ца-ца".
Что внутри? Плагины на JavaScript, которые делают старые компоненты страницы TABLE и BUTTON удобнее или красивее. Ни к чему не обязывают, ничего на странице менять не надо. Только подгрузить файл с плагином и запустить соответствующую функцию. Остальное сделается само.
Плагин "кнопка-ца-ца" работает в Netscape 7, FireFox 0.93, MSIE >=5.0, в Opera - ничего не работает. Вообще Opera, наверное, самый безопасный браузер, - там ничего не работает.:)
Плагин "табли-ца-ца" работает, как и прежде, во MSIE >=5.0, Netscape 7, FireFox 0.93, во всяком случеа, там испытано.

Это сообщение было перенесено сюда или объединено из темы "FAQ"

FAQ по JavaScript

Tishaishii — Fri, 03 Sep 2004 21:49:52 +0000

Tishaishii:

5. Пример многопоточного клиентского макроса на JavaScript.

Эта реализация работает только во MSIE >=5.0. Требует плагин VML.

На самом деле одной из таракашек можно управлять с помощью стрелок на клавиатуре, только она сопротивляется.

FAQ по JavaScript

Tishaishii — Fri, 03 Sep 2004 12:00:22 +0000

Tishaishii:

4. Пример создания собственного интефейса событий на JavaScript.

Этот вариант для загрузчика картинок.

////////////////////////////////////////////////////////////////////////////////////////

function EventHandle(object)

{

this.parent=object;

this.hasParent=this.parent!=null;

this.events={};

return this;

}

function EventHandle.prototype.eventName(name)

{

return "On"+name;

}

function EventHandle.prototype.Call(name)

{

name=this.eventName(name);

if(this.events[name]==null)return null;

else return this.events[name]();

}

function EventHandle.prototype.Attach(name, func)

{

name=this.eventName(name);

this.events[name]=func;

if(this.hasParent)this.parent[name]=func;

return true;

}

function EventHandle.prototype.Detach(name)

{

name=this.eventName(name);

delete this.events[name];

if(this.hasParent)delete this.parent[name];

return true;

}

function EventHandle.prototype.Assign(events)

{

if(events==null)return null;

for(this.last_name in events)

this.Attach(this.last_name, events[this.last_name]);

return true;

}

////////////////////////////////////////////////////////////////////////////////////////

function BitmapLoader(events)

{

this.event=new EventHandle(this);

this.event.Assign(events);

this.event.Call("BeforeCreate");

this.images=[];

this.events=[];

this.counter=0;

this.event.Call("AfterCreate");

return this;

}

function BitmapLoader.prototype.Add(path)

{

this.event.Call("Add");

this.img=new Image();

this.img.src=path;

this.images.push(this.img);

return this.img;

}

function BitmapLoader.prototype.Length()

{

this.event.Call("Length");

return this.images.length;

}

function BitmapLoader.prototype.Count()

{

this.event.Call("Count");

this.counter=0;

for(this.i=0; this.i<this.images.length; this.i++)

if(this.images[this.i].complete)this.counter++;

return this.counter;

}

function BitmapLoader.prototype.Loaded()

{

this.event.Call("Loaded");

this.result=this.Count()==this.Length();

if(this.result)this.event.Call("Load");

return this.result;

}

function BitmapLoader.prototype.Wait(bmploader)

{

if(this.loader==null)

{

if(bmploader==null)return null;

else this.loader=bmploader;

}

if(this.loader.Loaded())return true;

return setTimeOut("BitmapLoader.prototype.Wait()");

}

function BitmapLoader.prototype.Begin(images)

{

this.event.Call("Begin");

while(images.length)this.Add(images.pop());

BitmapLoader.prototype.Wait(this);

return this.images;

}

////////////////////////////////////////////////////////////////////////////////////////

var base=[];

var path="images/";

var ext=".gif";

for(var i=0; i<17; i++)

base.push(path+i.toString()+ext);//Создаётся список путей к

// картинкам типа "images/%s.gif"

var bmpLoader=new BitmapLoader({

"Load":new Function("alert('Картинки загружены');")

//При загрузке.

});

var img_handle=bmpLoader.Begin(base);

//Или

bmpLoader.OnLoad();// Вызов процедуры для события "OnLoad" автономно от сыбытия

////////////////////////////////////////////////////////////////////////////////////////

FAQ по JavaScript

Mixxx — Fri, 20 Aug 2004 15:33:47 +0000

Mixxx:

3. Как на JavaScript заставить кнопку не реагировать на нажатие?

При отправке формы на сервер, существует риск, того что форма будет отправленна несколько раз (например, если мышка у юзера барахлит). Как бы сделать так, чтобы кнопку отправки формы можно было бы нажать только один раз?

Автор: Mixxx
Язык: JavaScript

У кнопок, как и у других элементов формы
есть такое замечательное свойство — «disabled».
По умолчанию оно установленно в false, сие означает, что кнопку можно нажимать.
Если же его значение поменять на true, то кнопка перестанет поддаваться нажатию.

Осталось только ответить на два вопроса
После того как форма (которая активируется по нажатию кнопки) будет приготовленна к отправке — это событие в javascript называется onsubmit.

Второй вопрос несколько сложнее: первое, что приходит в голову так это дать кнопке
уникальное имя (атрибут id), и воспользоваться стандартным DOM методом объекта document — document.getElementById('уникальное_имя'):

</form>

Этот способ будет работать, однако он весьма громоздкий и не универсальный (если мы захотим сделать несколько кнопок с запретом после нажатия, придёться изменять id поскольку уникальный идентификатор не может повторяться ).
В нашем случае кнопку из скрипта можно достать более компактным кодом.
Всё дело в том, что если мы пишем какой-нибудь обработчик события внутри какого-нибудь тега, то нам становится доступен указатель на этот самый тег и называется он «this»
А из тега форм до любой её кнопки - добраться очень просто, для этого достаточно знать её имя (в нашем примере она называеться - "subm").

Ввиду всего выше сказанного получаем следующее:

</form>

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

</form>

FAQ по JavaScript

Mastilior — Mon, 16 Aug 2004 21:05:18 +0000

Mastilior:

2. Как при нажатии на одну ссылку загрузить сразу две?

Автор: Mastilior
Язык:HTML и JavaScript

index.htm

<html>

</frameset>

</html>

topframe.htm

<html>

<head>

<!--

function load_two_links(link1,link2)

{

top.frames["frame1"].location=link1;

top.frames["frame2"].location=link2;

}

//-->

</script>

<body>

<a href="javascript:load_two_links('frame1.htm','frame2.htm');">Загрузить две ссылки!</a>

</body>

</html>

frame1.htm и frame2.htm - любые HTML-файлы

FAQ по JavaScript

Mastilior — Mon, 16 Aug 2004 19:50:10 +0000

Mastilior:

1. Как отключить правую кнопку мыши?

Автор: Mastilior
Язык: HTML и JavaScript

Два одинаковых решения на HTML и JavaScript:

HTML:

</body>

JavaScript:

<!--

document.oncontextmenu=function() { return false; }

//-->

</script>

Но имейте ввиду, что этот способ будет работать только в том случае, если пользователь не отключил в своем обозревателе возможность перехвата нажатия правой кнопки мыши.

FAQ по JavaScript

Tishaishii — Sat, 14 Aug 2004 16:16:43 +0000

Tishaishii: Как сделать таблицы на странице удобнее?

Автор: Tishaishii

Скрипт кроссбраузерный. Проверен на MSIE 6.0 и в Mozilla 5.0 FireFox 0.8. В Opera просто не работает, Netscape 7.0 - только подсветка строк без сортировки по столбцам.

Это сообщение было перенесено сюда или объединено из темы "FAQ"