Мощь DHTML - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - Мощь DHTML (http://forum.oszone.net/showthread.php?t=58177)

предлагаю обсудить DHTML...
цель темы - создать большой объем знаний по этой теме... с как можно большим колличеством примеров и концепций....

для начала неплохо бы понять что кто понимает под "динамическим"

E-mail
я имел ввиду современные концепции майкрософт по этому поводу...
т.е. сейчас динамические страницы уже доросли до класса настоящих приложений!

ну так начинайте же уже... очень интересно... очень очень

Underson
1) для начала предлагаю отченить сайт http://www.xbox.com, он достаточно интересно сверстан с точки зрения CSS.
2) еще одним интересным примером DHTML является перекодировщик клавиатуры который повешен на эту форму ;)

PS
в тлижайшее время я собираюсь выложить пору листингов... оставляйте заявки...

Vlad Drakula
ты DHTML и DOM случайно не путаешь :) (это я к клавиатуре ;))?
заявки оставляю :)

mar
как раз похоже вы их и путаете...
DOM - документ обджект модел
DHTML - динамик HTML

все что динамически делается со страницей это DHTML (грубо говоря)
а вот делается это с помощью DOM'а...

Vlad Drakula
да знаю я, знаю. Просто кроме всего прочего под DHTML часто попадает ms-реализация динамики (в том числе и связанная с ActveX, связью с данными и прочим). А DOM - модель документа, появившаяся, если мне не изменяет память несколько позже понятия DHTML. Впрочем дальше начинается казуистика :) Так что ждем примеров :)

Тема уже прикреплена, а ничего нету. Ссылка не в счет. :)
А причем здесь CSS, просветите.

Igor_I

Цитата:

А причем здесь CSS, просветите.

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

mar
и до этого дойдем... и даже аджанс затроним...

для примера менюшка которую можно таскать:

PHP код:


		
			
<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>&#194;ûòàùèòå ìåíþ, îíî ñëåâà!</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

PHP код:


		
			
ALTER TABLE some_table ADD order_id INT( 11 ) DEFAULT '0' NOT NULL;

- для postgresql

PHP код:


		
			
ALTER TABLE some_table ADD order_id INT4  DEFAULT '0' NOT NULL;

(для других СУБД лень - сами напишите :))
делаем два 2) html - форма (реализуется в html-файле, или, скорей всего в шаблоне для php, asp, или на чем мы там пишем =) и заполняется динамически)

PHP код:


		
			
<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):

PHP код:


		
			
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)

PHP код:


		
			
function set_order() {

        $order = 0;

        foreach ($_POST['id_list'] as $id) {

            $order++;

            /*

                           дальше вызваем кто во что горазд - 

                           у меня, например класс-контроллер, 

                           работающий с соответственным объектом базы данных

                           и функция, делающая там update, 

                           завернутая в обработчик ошибок 

                           (а можно через try-catch) 

                        */

             

        }

            return true;

    }

Примечание - для совместимости с Mozilla, нужно подклюить еще библиотеку DOM 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). При отправке формы поле проверяется только если оно не скрыто.

PHP код:


		
			
<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"> 

            

            &nbsp;&nbsp;&nbsp;Вот такая вот форма:<p>

            <form name="emalform" id="emalform " method="post" enctype="multipart/form-data" action="qq.php"  onSubmit="return CheckForm(this);">

              

                <font id="ID0">&nbsp;&nbsp;&nbsp;Имя:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font> 

                <input type="text" name="name">

                <br>





                <font id="ID1">&nbsp;&nbsp;&nbsp;Фамилия: </font> 

                <input type="text" name="sername">

                <br>

            

        <div id="hid_mail" style="display:none;">

                  <font id="ID2">&nbsp;&nbsp;&nbsp;e-mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font> 

                  <input type="text" name="emale" can_be_null="0">

          <br>

        </div>

                &nbsp;&nbsp;&nbsp;Subscribe&nbsp;&nbsp;<input type="checkbox" name="subscribe" onClick="ShowEmail()"><p>

                

                &nbsp;&nbsp;&nbsp;<input type="submit" name="Submit" value="Submit">



            </form>

            <br>

        </tr>



      </table>

  </body>      

</html>

контекстное меню по правому клику:

PHP код:


		
			
<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>

аналоговые часы:

PHP код:


		
			
<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 =)

А вопросы можно задавать? Просьбы? Есть 2 вещи которые хотелось бы сделать.

Igor_I
хочется отметить что про вопросы и пожелания я уже сказал в одном из первых постов ;)

PS
конечно можно... для этого тема и создана ;)

1 как сделать подсказки при вводе слова в поисковую форму. На php.net одно время было я посмотрел на код - там черт голову сломит :)
2 Может кто знает скрипт паззла, чтобы при собирании полного изображения выскакивало сообщение о успехе.

Igor_I
имеется в виду это? ( http://static.php.net/www.php.net/userprefs.js )

PHP код:


		
			
// Restore the last search as stored in a cookie

function searchHistory()

{

    // Something is already typed in, do not try to overwrite it

    if (document.forms["topsearch"].pattern.value.length > 0) {

        return;

    }



    // Try to get the lastsearch cookie

    lastSearch = getCookie("LAST_SEARCH");

    if (typeof(lastSearch) == "string") {

        

        // Get pattern and show information from cookie

        option  = lastSearch.substr(0, lastSearch.indexOf(","));

        pattern = lastSearch.substr(lastSearch.indexOf(",") + 1);

        

        // Set pattern in form

        document.forms["topsearch"].pattern.value = pattern;

        

        // Set the last selected search method in the dropdown

        for (var i = 0; i < document.forms["topsearch"].show.length; i++) {

            if (document.forms["topsearch"].show[i].value == option) {

                document.forms["topsearch"].show[i].selected = true;

                break;

            }

        }

    }

}

Igor_I
1) я имею представление как это можно сделать, но я еще такого не делал, но скоро наверное буду...
нужно делать короткие запросы к серверу на поиск и выводить подсказку... как на GMAIL

2) я опять же не знаю... но опять же имею представление о том как бы я его писал... просто нужно проверять мобран ли пазл или нет... и все...

Цитата:

как сделать подсказки при вводе слова в поисковую форму. На php.net одно время было я посмотрел на код - там черт голову сломит

Типичная задача для подгрузки данных без перезагрузки страницы
Не так давно такая тема тут обсуждалась, там и ссылка на статью

http://webfx.eae.net/ масса примеров на затронутую тему.... и не только...

mar
Что вы, что вы, если бы оно так было :) К сожалению я потерял тот файл.
Vlad Drakula
А как узнать, что картинка стоит на своем месте?
vadimiron
А ссылочку можно?

Igor_I
так то, что я цитирую, - это же подключаемый файл оттуда с первой стрницы :)
Технология, о которой говорит vadimiron называется AJAX (Asynchronous JavaScript with XML),
Тема Динамическая подгрузка данных без перезагрузки страниц (я ее, пожалуй, прикреплю)
А вот несколько обзоров на opennet

mar
Мы конечно знаем мало, но не настолько :) Я говорил про такой же файл.
За ветку - спасибо, вчера пытался поискать - страница поиска не доступна.

http://phpclub.ru/detail/magazine/ - как нарочно :) И там AJAX
3 просьба - у Котерова есть проект - Орфо - проверка правописания. Есть что-либо еще аналогичное? Для использования локально, в локальной сети.

я вот недавно закончил создание комбобокса...

вот не устроил нас стандартный комбо бокс и по дизайну и по функциональности...

Vlad Drakula
комбобокс - в студию :)
просим, просим :]

mar
нечто вроде такого...
<table>
<tr><td><input type=text/></td><td><input type-button/></td></tr>
<tr><td colspan="2"><div></div></td></tr>
</table>

но мы мспользуем полностью самописные контролы...в том числе и button, по этому там приличная вложенности их xsl темплайтов которые превлащают интерфайс уже в реальный HTML...

сейчас видутся разработки - как ускорить применение шаблонов... планируемое ускорение - 4 раза...

очень интересный сайт:
http://www.backbase.com/

он даст достаточно полное представлении и возможностях AJAX

хочется отметить что в эксплорере сильно тормозят таблицы!

очень плезная ссылка:
http://xpoint.ru/know-how/JavaScript...inatYelementaN

простейший обработчик клавиатьуры на javascript:

PHP код:


		
			
<html>

<head>

<script language="javascript">

document.onkeydown=key;

function key()

{

    window.status=event.keyCode;

    alert('keyCode: ' + event.keyCode);        

}

</script>

</head>

<body>

</body>

</html>