Показать полную графическую версию : Мощь DHTML
Vlad Drakula
17-12-2005, 00:33
предлагаю обсудить DHTML...
цель темы - создать большой объем знаний по этой теме... с как можно большим колличеством примеров и концепций....
для начала неплохо бы понять что кто понимает под "динамическим"
Vlad Drakula
17-12-2005, 22:24
E-mail
я имел ввиду современные концепции майкрософт по этому поводу...
т.е. сейчас динамические страницы уже доросли до класса настоящих приложений!
Underson
18-12-2005, 13:00
ну так начинайте же уже... очень интересно... очень очень
Vlad Drakula
18-12-2005, 21:33
Underson
1) для начала предлагаю отченить сайт http://www.xbox.com, он достаточно интересно сверстан с точки зрения CSS.
2) еще одним интересным примером DHTML является перекодировщик клавиатуры который повешен на эту форму ;)
PS
в тлижайшее время я собираюсь выложить пору листингов... оставляйте заявки...
Vlad Drakula
ты DHTML и DOM случайно не путаешь :) (это я к клавиатуре ;))?
заявки оставляю :)
Vlad Drakula
18-12-2005, 22:32
mar
как раз похоже вы их и путаете...
DOM - документ обджект модел
DHTML - динамик HTML
все что динамически делается со страницей это DHTML (грубо говоря)
а вот делается это с помощью DOM'а...
Vlad Drakula
да знаю я, знаю. Просто кроме всего прочего под DHTML часто попадает ms-реализация динамики (в том числе и связанная с ActveX, связью с данными и прочим). А DOM - модель документа, появившаяся, если мне не изменяет память несколько позже понятия DHTML. Впрочем дальше начинается казуистика :) Так что ждем примеров :)
Тема уже прикреплена, а ничего нету. Ссылка не в счет. :)
А причем здесь CSS, просветите.
Vlad Drakula
18-12-2005, 22:57
Igor_I
А причем здесь CSS, просветите.
дело в том что современный DHTML... это не то что было раньше...
почти все в нем уже завязано на стилях... и ни куда от них не деться... очень многое делается через них...
mar
и до этого дойдем... и даже аджанс затроним...
Vlad Drakula
18-12-2005, 23:03
для примера менюшка которую можно таскать:
<html>
<head>
<title>Web-script</title>
<!-- HEAD START HERE -->
<style>
<!--
#slidemenubar, #slidemenubar2{
cursor:hand;
position:absolute;
left:-152px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
<!-- HEAD END HERE -->
</head>
<body text=black>
<br>
<center>
<br>
<h2>Âûòàùèòå ìåíþ, îíî ñëåâà!</h2>
<!-- BODY START HERE -->
<script language="JavaScript">
var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-150">')
else
document.write('<layer id="slidemenubar">')
var sitems=new Array()
var sitemlinks=new Array()
///////////Edit below/////////////////////////////////
//extend or shorten this list
sitems[0]="Omen"
sitems[1]="Web-script"
sitems[2]="Pupsik"
sitems[3]="Microsoft"
sitems[4]="Yandex"
sitems[5]="Rambler"
sitems[6]="Google"
sitems[7]="Yahoo"
//These are the links pertaining to the above text.
sitemlinks[0]="http://omen.ru"
sitemlinks[1]="http://web-script.narod.ru"
sitemlinks[2]="http://pupsik.ru"
sitemlinks[3]="http://microsoft.com"
sitemlinks[4]="http://yandex.ru"
sitemlinks[5]="http://rambler.ru"
sitemlinks[6]="http://google.com"
sitemlinks[7]="http://Yahoo.com"
//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""
/////////////////////////////////////////////////////////
for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' target="'+target+'">'+sitems[i]+'</a><br>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
document.write('</layer>')
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
var dragapproved=false
var x1,x2
if (ns4)
themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
function move(e){
if (ie4&&event.button==1&&dragapproved){
if(temp1+event.clientX-x1>leftboundary)
themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1)
else
themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1)
}
else if (ns6&&dragapproved){
if(parseInt(themenu.left)+e.clientX-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,temp1+e.clientX-x2)
else
themenu.left=Math.max(leftboundary-2,temp1+e.clientX-x2)
}
else if (ns4){
if(themenu.left+e.x-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2)
else
themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2)
}
}
function drags(e){
if (ie4){
dragapproved=true
temp1=themenu.pixelLeft
x1=event.clientX
document.onmousemove=move
}
else if (ns6){
dragapproved=true
temp1=parseInt(themenu.left)
x2=e.clientX
document.getElementById("slidemenubar2").onmousemove=move
}
else{
themenu.captureEvents(Event.MOUSEMOVE)
x2=e.x
}
}
function stopit(){
if (ie4||ns6){
dragapproved=false
}
if (ns4)
themenu.releaseEvents(Event.MOUSEMOVE)
}
if (ie4){
document.all.slidemenubar2.onmousedown=drags
document.all.slidemenubar2.onmouseup=new Function("dragapproved=false")
document.onselectstart=new Function("return false")
}
else if (ns6){
document.getElementById("slidemenubar2").onmousedown=drags
document.getElementById("slidemenubar2").onmouseup=new Function("dragapproved=false")
}
else if (ns4){
themenu.onmousedown=drags
themenu.onmousemove=move
themenu.onmouseup=stopit
}
</script>
</body>
</html>
чтобы ждать было не скучно привожу (правда не свой, а только слегка модифицированный мной) скрипт, позволяющий менять местами строки в таблице.
Оригинал js можно посмотреть по адресу http://surfmind.com/lab/table_reorder.cfm, но на изменения стоит тоже обратить внимание :)
Итак, имеем комплексную задачу - хочу дать, ну, скажем, админу, - возможность модифицировать порядок показа элементов в каком-то списке (все равно в каком - товаров в магазине, форумов на главной странице форумов и т.д.
делаем раз 1)
- пример для mysql
ALTER TABLE some_table ADD order_id INT( 11 ) DEFAULT '0' NOT NULL;
- для postgresql
ALTER TABLE some_table ADD order_id INT4 DEFAULT '0' NOT NULL;
(для других СУБД лень - сами напишите :))
делаем два 2) html - форма (реализуется в html-файле, или, скорей всего в шаблоне для php, asp, или на чем мы там пишем =) и заполняется динамически)
<html>
<head>
<script language="JavaScript" type="text/javascript" src="/js/table_order.js"></script>
</head>
<body onload="rebuild()">
<form>
<table>
<tr>
<th></th><th></th><th></th><th></th><th>Name</th>
</tr>
<tr id="node1" taskid="1" position="1" origposition="1">
<td>
<input type="hidden" name="id_list[]" value="1">
<input type="text" id="text1" name="order" value="" size="2" disabled>
<input type="hidden" id="order1" name="order[1]" value="">
</td>
<td>
<span onclick="moveDown(this.parentNode.parentNode);">
<img src="t_files/icon_down_12px" height="12" hspace="4" width="12">
</span>
</td>
<td></td>
<td>Текст нумер раз</td>
</tr>
<tr id="node2" taskid="2" position="2" origposition="2">
<td>
<input type="hidden" name="id_list[]" value="2">
<input type="text" id="text2" name="order" value="" size="2" disabled>
<input type="hidden" id="order1" name="order[2]" value="">
</td>
<td>
<span onclick="moveDown(this.parentNode.parentNode);">
<img src="t_files/icon_down_12px" height="12" hspace="4" width="12">
</span>
</td>
<td>
<span onclick="moveUp(this.parentNode.parentNode)">
<img src="t_files/icon_up_12px" height="12" hspace="4" width="12">
</span>
</td>
<td>Вторая строка</td>
</tr>
<!-- и так далее -->
<tr>
<th colspan="4"><input type="submit" name="action" value="Order"></th>
</tr>
</table>
</form>
</body>
</html>
(вроде, главное показала)
3) JavaScript (/js/table_order.js):
var prevNode;
function moveUp(node) {
var newNode = node.cloneNode("true");
newNode.setAttribute("position", (newNode.getAttribute("position") - 1));
var prevRow = node_before(node);
var prevRowNode = prevRow.cloneNode("true");
prevRowNode.setAttribute("position", (parseInt(prevRowNode.getAttribute("position")) + 1.0));
var tableNode = node.parentNode;
var reattachee = tableNode.replaceChild( newNode, prevRow);
var reattachee = tableNode.replaceChild(prevRowNode, node);
rebuild();
}
function moveDown(node) {
var newNode = node.cloneNode("true");
newNode.setAttribute("position", (parseInt(newNode.getAttribute("position")) + 1.0));
var nextRow = node_after(node);
var nextRowNode = nextRow.cloneNode("true");
nextRowNode.setAttribute("position", (nextRowNode.getAttribute("position") - 1));
var tableNode = node.parentNode;
var reattachee = tableNode.replaceChild( newNode, nextRow);
var reattachee = tableNode.replaceChild(nextRowNode, node);
rebuild();
}
function rebuild() {
var count =0;
var movedown = "<span onclick='moveDown(this.parentNode.parentNode);'> <img src='/img/down.gif' width='12' height='12' hspace='4'></span>";
var moveup = "<span onclick='moveUp(this.parentNode.parentNode)'> <img src='/img/up.gif' width='12' height='12' hspace='4'></span>";
var thenode;
var prevbutton;
var tasks = document.getElementsByTagName("TR");
var id_name;
for(var i=0; i<tasks.length;i++) {
thenode = tasks.item(i);
if(thenode.getAttribute("position")) {
// для доступа к id будем использовать count - тогда работа будет идти только с теми строками, у которых есть атрибут position
count++;
idName = 'text' + count; // input type="text"
orName = 'order' + count; // input type="hidden"
var posnode = document.getElementById(idName);
var ornode = document.getElementById(orName);
var newpos = thenode.getAttribute("position");
posnode.value = newpos; // changing field value
ornode.value = newpos; // changing field value
//alert (idName); // проверяем
//alert(newpos); // проверяем
downbutton = node_after(first_child(thenode));
upbutton = node_after(downbutton);
if(count == 1) {
upbutton.innerHTML=""; // - для первой строки стрелочки-обработчика up.gif не будет
} else {
upbutton.innerHTML = moveup;
}
downbutton.innerHTML = movedown;
}
if (i==(tasks.length-1))downbutton.innerHTML=""; // - для последней строки стрелочки-обработчика down.gif не будет
}
}
ну и наконец php 4)
function set_order() {
$order = 0;
foreach ($_POST['id_list'] as $id) {
$order++;
/*
дальше вызваем кто во что горазд -
у меня, например класс-контроллер,
работающий с соответственным объектом базы данных
и функция, делающая там update,
завернутая в обработчик ошибок
(а можно через try-catch)
*/
}
return true;
}
Примечание - для совместимости с Mozilla, нужно подклюить еще библиотеку DOM whitespace (http://www.mozilla.org/docs/dom/technote/whitespace/).
Совсем забыла - из php в базу данных передается переменная цикла $order - которая и опрежеляет получившийся порядок элементов в списке
Немного ссылок:
http://www.quirksmode.org/ - ppk, DOM, сравнение броузеров - очень рекомендую (!)
http://www.evolt.org/ (там раньше был хороший список рассылки, курируемый, в частности, ppk)
вот еще хорошее место: (хотя там больше примеров, чем теории и многое устарело):
http://www.irt.org
http://www.activewidgets.com/ (Professional JavaScript Code)
http://www.mozilla.org/docs/dom/samples/ - url говорит сам за себя :)
пример с проверкой формы (проверка простейшая, т.к. мы вроде как о другом :)). Если поле незаполнено, фокусируем на нем, подсвечиваем название поле красным (DOM) и вывешиваем alert.
Кроме того скрываем и показываем (по галочке в checkbox) поле e-mail (тоже используя DOM). При отправке формы поле проверяется только если оно не скрыто.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var emailStatus;
/*
* проверяем форму перед отправкой показываем
* если поле e-mail скрыто, оно не проверяется
* если показано - проверяется
*/
function CheckForm(f){
submiting = 0;
var err=0;
var id;
var hidMail = document.getElementById("hid_mail");
/* цикл прохода по всем элементам формы */
for (var i = 0; i < f.length; i++) {
var e = f.elements[i];
/* если поле e-mail скрыто, оно не проверяется */
if((hidMail.style.display == "none") && (e.name=="emale"))
continue;
/* это для возможности вставить атрибут отсутствия проверки */
if(e.getAttribute("can_be_null")==1)
continue;
/* узел для выделения цветом названия поля */
var mynode;
var id="ID"+i;
if (document.getElementById) {
mynode = document.getElementById(id);
}
/* собственно проверка - для предложенных полей -
прерывается при первой же ошибке в заполннии
*/
if (( ( (e.type == "text") || (e.type == "textarea") || (e.type == "password") ) && (!e.optional))&& ((e.value == null) || (e.value == ""))){
if (err==1) break;
$id="ID"+i;
err=1;
break;
} //if
if((err==0) && (((e.name=="emale") &&( (e.value.indexOf("\@") < 1) || ((e.value.length) <= (e.value.indexOf("\@")+ 1) ))))) err=1;
if (err == 1) break;
} /* цикл прохода по всем элементам формы - конец */
/* если ошибок нет, все в порядке, можно отправлять форму */
if (err==0) {
return true;
}
/* в противном случае - показываем первое незаполннное поле,
выделяем название цветом и возвращаем false
*/
var errtxt="Please, fill in " + e.name + " field correctly!";
alert (errtxt);
e.focus();
if (document.getElementById) {
mynode = document.getElementById(id);
mynode.color="red";
}
return false;
}
/*
* функция показывает и скрывает блок с полем e-mail
*/
function ShowEmail() {
var hidDiv = document.getElementById("hid_mail");
emailStatus = (hidDiv.style.display == 'none') ? 'block' : 'none';
hidDiv.style.display = emailStatus;
}
</SCRIPT>
</head>
<body>
<table width="300" border="5" cellspacing="0" cellpadding="0" bordercolor="#999999" align="center">
<tr>
<td valign="top">
Вот такая вот форма:<p>
<form name="emalform" id="emalform " method="post" enctype="multipart/form-data" action="qq.php" onSubmit="return CheckForm(this);">
<font id="ID0"> Имя: </font>
<input type="text" name="name">
<br>
<font id="ID1"> Фамилия: </font>
<input type="text" name="sername">
<br>
<div id="hid_mail" style="display:none;">
<font id="ID2"> e-mail: </font>
<input type="text" name="emale" can_be_null="0">
<br>
</div>
Subscribe <input type="checkbox" name="subscribe" onClick="ShowEmail()"><p>
<input type="submit" name="Submit" value="Submit">
</form>
<br>
</tr>
</table>
</body>
</html>
Vlad Drakula
18-12-2005, 23:46
контекстное меню по правому клику:
<html>
<head>
<!-- HEAD START HERE -->
<style>
<!--
.skin0{
position:absolute;
width:165px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
.menuitems{
padding-left:10px;
padding-right:10px;
}
-->
</style>
<!-- HEAD END HERE -->
</head>
<body text="#000000" link="#000099" topmargin="0" leftmargin="0">
<!-- BODY START HERE -->
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
<div class="menuitems" url="http://www.omen.ru">Omen</div>
<div class="menuitems" url="http://www.rambler.ru" target="newwin">Rambler</div>
<div class="menuitems" url="http://yandex.ru">Yandex</div>
<div class="menuitems" url="http://yahoo.com">Yahoo</div>
<div class="menuitems" url="http://microsoft.com">Microsoft</div>
<div class="menuitems" url="http://www.web-script.narod.ru">WEB-SCRIPT</div>
<hr>
<div class="menuitems" url="mailto:webscript@pisem.net">E-mail</div>
</div>
<script language="JavaScript">
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("ie5menu")
function showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
menuobj.style.visibility="visible"
return false
}
function hidemenuie5(e){
menuobj.style.visibility="hidden"
}
function highlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}
function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}
if (ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}
</script>
<!-- BODY END HERE -->
<br>
<center>
<br>
<p align="center">Äëÿ ïðèìåðà íàæìèòå ïðàâîé
êíîïêîé ìûøêè. Çàìåíèòå ññûëêè íà ñâîè - è ó Âàñ áóäåò îòëè÷íîå ìåíþ!</p>
</body>
</html>
Vlad Drakula
18-12-2005, 23:49
аналоговые часы:
<script language="JavaScript">
fCol='0000ff'; //цвет цифр на циферблате.
sCol='FF0000'; //Цвет секундных стрелок.
mCol='444444'; //цвет минутных стрелок.
hCol='444444'; //Цвет часовых стрелок.
Ybase=30; //Высота часов.
Xbase=30; //Ширина часов.
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
}
function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=1; i < dots+1; i++){
document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)
document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec);
document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min);
document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs);
document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=0; i < dots; ++i){
document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}
if (IE4){
Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20;
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}
setTimeout('clock()',100);
}
clock();
//-->
</script>
Vlad Drakula
примеры отсюда (http://www.dynamicdrive.com/)?
Тогда добавляю к списку - http://www.dynamicdrive.com =)
А вопросы можно задавать? Просьбы? Есть 2 вещи которые хотелось бы сделать.
Vlad Drakula
19-12-2005, 22:11
Igor_I
хочется отметить что про вопросы и пожелания я уже сказал в одном из первых постов ;)
PS
конечно можно... для этого тема и создана ;)
1 как сделать подсказки при вводе слова в поисковую форму. На php.net одно время было я посмотрел на код - там черт голову сломит :)
2 Может кто знает скрипт паззла, чтобы при собирании полного изображения выскакивало сообщение о успехе.
© OSzone.net 2001-2012
vBulletin v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.