PDA

Просмотр полной версии : Свободное позиционирование посредством JS


undeddy
18.02.2006, 19:34
В сценарии создается некая строка. Как можно именно с помощью JS свободно позиционировать данную строку?

Skubent
20.02.2006, 12:07
offsetLeft, offsetTop

undeddy
20.02.2006, 15:52
Хм.. ну вот, например:
var num = Math.random();
Нужно разместить эту переменную на странице в заданных координатах, например 200px слева и 300px сверху. И как это сделать?
Необходимо, чтобы все делалось только средствами JS.

Skubent
20.02.2006, 16:21
var num=Math.random();
document.write("<div style=\"position:absolute; left:200; top:100;\">");
document.write(num);
document.write("</div>");

undeddy
20.02.2006, 17:22
Спасибо, но у меня появился еще один вопрос.
num = Math.round( Math.random() * 9 );
for(i = 220; i < 222; i+=20){
document.write("<div id = 'div + i ' style='position: absolute; left: i; top: i'>");
document.write(num);
document.write("</div>");
}

Хм. В общем не получается затея, чтобы в цикле создавались новые блоки с разными значениями атрибута id и различными координатами. В чем ошибка?

Skubent
20.02.2006, 17:36
В не читании документации :)

document.write("<div id = 'div' + i + ' style='position: absolute; left:'+ i+'; top: '+i+'>");

undeddy
20.02.2006, 18:56
Приношу извинения за свою некомпетентность и недоходчивость, но возникла вновь пара вопросов по этому коду:
document.write("<div id = 'div' + i + ' style='position: absolute; left:'+ i+'; top: '+i+'>");

I. Почему необходимо 'обрамлять' переменную i в 'плюсики'?

II. С определением значения атрибута id что-то не то, по-моему. Вот, например, попытался проверить так:
alert(document.getElementById('div' + i + ').id);
Но, конечно же, выявились опять-таки непонятные мне ошибки.

Skubent
20.02.2006, 19:07
Мдя... Итак, я там сам набажил хорошо :))
document.write("<div id = 'div" + i + "' style='position: absolute; left:"+ i+"; top: "+i+">");
Обрати внимание, после div+i - двойная кавычка, а за ней - одинарная.

А по пункту II - ты сам прочитай, что написал -
достать элемент с Id = div[значение i]).id);
и незавершенная строка.

Итого - все кавычки должны быть парными.

KidsKilla
20.02.2006, 19:12
document.write("<div id = 'div' + i + ' style='position: absolute; left:'+ i+'; top: '+i+'>");[/code]


I. Почему необходимо 'обрамлять' переменную i в 'плюсики'?

если ны не "обрамишь в плюсики" то в строке
"строка строка строка i продолжение строки" i воспримется как строка "i" а тебе нужна переменная i:
" строка строка строка "+i+" продолжение строки"


II. С определением значения атрибута id что-то не то, по-моему. Вот, например, попытался проверить так:
alert(document.getElementById('div' + i + ').id);
Но, конечно же, выявились опять-таки непонятные мне ошибки.

document.getElementById('div' + i).getAttribute("id");

undeddy
22.02.2006, 13:30
В продолжении выполнения моей работы вышла следующая неполадка.
Вообще, мне необходимо, чтобы вновь созданные 'дивы' отображались один за другим через определенный промежуток времени, например, через 500 мсек. Но...
<html>
<head>
<script>

var ar2 = new Array("1", "2", "3", "4", "5", "6", "7", "8" );
var i = 1, k = 1;
var int;


setTimeout('clearInterval(int)', 9500);

function bedlam(){

for(j = 1; j < 20; j++){

num3 = ar2[ Math.round( Math.random() * (ar2.length - 1) ) ];

document.write('<DIV ID = "div'+i+'" STYLE = "position: absolute; top: 0; left: 0; visibility: hidden; z-index: '+i+'; ">');
document.write(num3);
document.write('</DIV>');

t = Math.round( Math.random() * (document.body.clientHeight - 20) );
l = Math.round( Math.random() * (document.body.clientWidth - 15) );

document.getElementById('div' + i).style.top = t;
document.getElementById('div' + i).style.left = l;

i++;

}


}

function setVisible(){

document.getElementById('div' + k).style.visibility = 'visible';
k++;

}

</script>

</head>
<body onload = "bedlam(); int = setInterval('setVisible()', 500)">
</body>
... выходит какая-то ошибка.

Skubent
22.02.2006, 13:37
Машина не едет, че делать ?
"каких-то" ошибок не бывает :)

А вообще, особо не читая твое творение - int - reserved word, называй переменные как-нить еще :)

undeddy
22.02.2006, 14:07
Все равно, 'машина не едет'

Skubent
22.02.2006, 14:09
Может, научишься ошибки сам читать ?

undeddy
22.02.2006, 15:05
Та ошибка, которую выдает IE ни о чем не говорит.
Предполагается наличие объекта в строке 1А строка 1 - это <html>.
Вот я и на пойму, в чем ошибка.

Skubent
22.02.2006, 15:40
Во-первых, ослик как средство отладки не есть хороший инструмент. Лиса с соответствующим модулем куда-как информативнее.
Во-вторых, строка 1 - это первая строка скрипта, а не HTML-документа.

undeddy
22.02.2006, 16:01
Увы, но вашего жаргона я не знаю и не понимаю, какой броузер ты имеешь в виду под названием Лиса. К тому же, у меня все равно в системе только IE установлен.

Skubent
22.02.2006, 16:25
Если только IE - учить по его сообщениям определять ошибку. И исправлять.

undeddy
22.02.2006, 16:41
Я же обратился за помощью только из-за того, что испрбовал и проверил все, что мог. Ничего не вышло. Как следствие - мое сообщение с запросом некой помощи.
P.S. Скажи, что ты подразумеваешь под Лисой, попытаюсь тогда поискать сей броузер.

Skubent
22.02.2006, 16:53
Лиса = FireFox
http://www.mozilla.org/products/firefox/central.html

undeddy
22.02.2006, 19:59
В Mozilla вообще не выдается ошибок, но и выполнение функции также не осуществляется. Может, все-таки кто-нибудь знает в чем дело?

Skubent
22.02.2006, 20:20
Открой консоль JavaScript - там в FF ошибки пишутся.

undeddy
22.02.2006, 20:38
Гм... пишется, что функция setVisible() не определена. Но почему?!