Свободное позиционирование посредством 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]

Цитата:

Сообщение от undeddy

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

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

Цитата:

Сообщение от undeddy

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>

... выходит какая-то ошибка.