Готовые решения

Опять-таки, все это будет работать только под IE. Вы, конечно, можете возразить - "А зачем надо то, что работает не везде?" А затем, что лучше пользоваться тем, что лучше. Если хотите, чтобы ваш сайт выглядел прилично - делайте 2 его варианта, под IE и NN, и пускай скрипт перенаправляет куда надо. Но по своим возможностям 6NN хуже 3 IE.

Или вообще, пишите под Mosaic :)

1. Как скрыть счетчик посещений на вашей странице?
2. Как сделать выпадающие менюшки, ложащиеся поверх текста?
3. А как сделать эффет блокнота?
4. А что такое IFRAME?
5. А как сделать движущийся текст?
6. Эффект печатной машинки
7. Немного математики

 

 

 

Как скрыть счетчик посещений на вашей странице?

Довольно просто.

Щелкните над документом, удерживая нажатой правую кнопку мыши и клавишу Alt. Должна появиться картинка. (если у вас NN - вы ее и так увидите ;) Так можно сделать с любым объектом.

<body onmousedown="a()" onmouseup="b()">
<img ID="DES" src="images/designsnapshoot.jpg" width="80" height="60"
style="visibility:hidden"></p>
<script>
function a()
{
if ((window.event.button==2) && (window.event.altKey))
document.all.DES.style.visibility='visible';
}
function b()
{
document.all.DES.style.visibility='hidden';
}
</script>
Назначаем объекту ID, в style="" пишем: visibility:hidden. Пишем два обработчика событий - и оп-ля-ля!

Как сделать выпадающие менюшки, ложащиеся поверх текста?

Немножко философии: по-моему, фреймы - это удобно для разработчика, но неудобно для пользователя. Места все время не хватает, один фрейм больше сделаешь - в другом ни черта не видно... Поэтому есть смысл в том, чтобы сделать у всех ваших документов единообразную шапку, похожую на привычное меню приложений под Виндовс, а менять только текст. Это существенно экономит место и не заставляет юзера щелкать то и  дело по бегунку скроллинга. Например.

1
2
3
4
5
6
7
восемь
девять
и десять

(Вынужден огорчить владельцев IE 4 - если дочернее меню делать таблицей, ничего работать не будет. Лучше в этом случае использовать <DIV> - см. ниже. Cобственно, с помощью <DIV> и реализовано навигационное меню в левом верхнем углу)

То есть мы видим, что подменю из третьего пункта смело покрывает наш текст. Удобно? Безусловно! Итак. Делаем главную таблицу, присваиваем ей ID. Делаем несколько дочерних по количеству <= ячеек главной, и всем также присваиваем одинаковый, но отличный от родительского ID. В каждой дочерней - столько пунктов, сколько надо. Химичим со стилями:

<style>
.CHILD
{
visibility:hidden;
position:absolute;
}
</style>


Сделали заготовку.
Для всех ячеек родительской таблицы пишем одинаковые обработчики:

<td onMouseover="light(this,0)" onMouseout="dark(this,0)">
<td onMouseover="light(this,1)" onMouseout="dark(this,1)">

function light(asd,t)
{
document.all.item("CHILDMENU",t).style.visibility="visible";
document.all.item("CHILDMENU",t).style.left=asd.offsetLeft+document.all.MAINMENU.offsetLeft;
document.all.item("CHILDMENU",t).style.top=document.all.MAINMENU.offsetTop+asd.offsetTop+asd.offsetHeight;
document.all.item("CHILDMENU",t).style.width=asd.offsetWidth;
}

function dark(asd,t)
{
document.all.item("CHILDMENU",t).style.visibility="hidden";
},
где у нас:
1). CHILDMENU - ID дочерних таблиц. Не путать с КЛАССОМ CHILD, который задает стиль.
2). MAINMENU - ID родительской таблицы.
3). asd в функцию передается с помощью this - ячейка родительской таблицы.
4). Второй параметр функции - порядковый номер дочерней таблицы в коде документа (ID ведь у них всех одинаковый!)
5). offset -Left -Width -Top -Height - с помощью этих парметров осуществляется точное позиционирование дочернего меню.

Для всех дочерних таблиц тоже однообразно и безобразно:

<table ID="CHILDMENU" onMouseover="this.style.visibility='visible'" onMouseout="this.style.visibility='hidden'"
onClick="this.style.visibility='hidden'">

Ну и наконец, можно украсить, задав в стиле цвет, цвет фона, написав обработчики onmouseover и onmouseout для всек строчек, как у меня :). row - это ID я присвоил всем строчкам дочерних меню.

<script for="row" event="onmouseover">
style.backgroundColor="white";
style.color="black";
</script>
<script for="row"
event="onmouseout">
style.backgroundColor="black";
style.color="white";
</script>

Но вообще, вариантов - море. Можно делать дочерними не таблицы, а <span> или <div> - для совместимости, навигационное меню в левом верхнем углу экрана так и сделано.

<div id=CHILDMENU
style="visibility:hidden; position: absolute; z-index:2; width:300px"
onmouseover="this.style.visibility='visible'"
onmouseout="this.style.visibility='hidden'">
    <a href=' ...  '>First item</a><br>
    <a href=' ...  '>Second item</a><br>
    <a href=' ...   '>Third item</a><br>
</div>

 

можно не описывать одинаковую шапку во всех документах, а сделать нечто вроде библиотеки и вынести ее в файл сценария с расширением .js, и создавать менюшки динамически, в run-time.

 

А как сделать эффет блокнота?

Ну, примерно также. Три кита DHTML - абсолютное позиционирование, невидимость и Javascript.

Первая часть Вторая часть Третъя часть
Создаем точно также родительскую таблицу со своим ID и несколько дочерних c одинаковым ID, ширина которых равна в точности ширине родительской, а размер их - 1*1. Присваиваем невидимость и абсолютное позиционирование (первой - то есть нулевой дочерней - можно оставить видимость).

 

 

 

 

 

 

 

Или же, можно воспользоваться функциями innerText, innerHTML, outerText, outerHTML и т.п.
Итог: вы, не крутя страничку вверх-вниз, просмотрели кучу информации :). Будьте осторожны, так как эти скрытые таблицы могут "забить" текст под ними, посему - размещайте их в конце документа.Здесь я намеренно вместо display применил стиль visibility, посему этот глюк и проявляется. Внимательно разберите следующий пример.

Иной вариант - запихать несколько таблиц с разным содержанием, и применять не visibility, a display - здесь источник и код. Нижележащий текст благополучно отползает книзу.

 

А что такое IFRAME?


Появился еще один тэг в DHTML - <ifame>, по сути - окно в документе. Если у вас IE 4-5, вы его увидите.

 

<IFRAME
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
BORDER=pixels
BORDERCOLOR=color
CLASS=classname
DATAFLD=colname
DATASRC=#ID
FRAMEBORDER=NO | YES | 0 | 1
FRAMESPACING=pixels
HEIGHT=n
HSPACE=pixels
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=window_name | _blank | _parent | _self | _top
NORESIZE=NORESIZE | RESIZE
SCROLLING=AUTO | NO | YES
SRC=url
STYLE=css1-properties
TITLE=text
VSPACE=pixels
WIDTH=n
>

Все достаточно просто. Нужно заметить, что они также подвергаются позиционированию.

 

А как сделать движущийся текст?

Смотря что и куда двигать :)
1) Если снизу вверх, то так:

<div ID="S1" style="position: absolute; top:200; left:50; right:50">
Здесь должен быть некий текст
</div>, а функция, которая им рулит, вот такая:
<script>
var tb = 200;                                                //отсчет от верхнего края экрана

function move()
{
document.all.S1.style.left=50;
document.all.S1.style.top = tb;
tb-=1;                                                             //уменьшение отступа сверху
document.all.S1.style.posTop = tb;
if (tb<=-300) return;                                      //стоп
setTimeout("move()", 1)                                //рекурсия
}

2) Но можно и по кругу (хоть по параболе:))

MICROSOFT NETSCAPE


<script>
var x=200;
var y=200;
var r=200;
var angle=0;
function round()
{
angle+=5;
document.all.MS.style.left=x+Math.cos(angle/360*2*3.14)*r;
document.all.MS.style.top= y+Math.sin(angle/360*2*3.14)*r;
document.all.NS.style.left=x+Math.cos((angle+180)/360*2*3.14)*r;
document.all.NS.style.top= y+Math.sin((angle+180)/360*2*3.14)*r;

if (angle==365) angle=0;
setTimeout("round()",100)

}
</script>
<div style="height:400; width:600"><a href="http://www.microsoft.com"
ID="MS" style="position:relative">

<p>MICROSOFT</a> <a href="http://www.netscape.com" ID="NS" style="position:relative">NETSCAPE</a>
<br>
</p>
</div>

<p><input type="Button" onClick="round()" value="begin move">

 

Эффект печатной машинки

 

 

Работает, но, чтобы сделать форматированный текст, включающий тэги - необходимо попотеть. Придумайте сами :). Вот код:

<script>
var text="Эффект печатной машинки. Все бы хорошо, но для коротких строчек";
var len=text.length;
var y=0;
var counter=0;
function machine1()
{
clearTimeout(y);
document.all["p1"].innerHTML+=text.charAt(counter);
counter++;
if (counter>len) return;
y=setTimeout("machine1()",50);
}
</script>
<p><input type="button" value="begin print" onClick="machine1()"> </p>

<p id="p1">&nbsp;</p>

 

Немного математики  

Иногда бывает необходимо перевести число из одной системы счисления в другую. Здесь, например, число с 10-ным основанием переводится в 2-ную и 16-форму. Это бывает полезно, если вы работаете с цветом, и необходимо составить 16-чное представление цвета из 3-х десятеричных. Или же можете взять готовый Javascript-калькулятор и немного его усовершенствовать

 

10

2

16

function dectobin(value)
{
var str="";
var mask;
for (var i=0;i<32;i++)
    {
        mask=value&0x01;
        if(mask==0) str="0"+str; else str="1"+str;
        value=value>>1;
       }
return str;
}

function dectohex(value)
{
var str="";
var mask;
for (var i=0;i<8;i++)
    {
        mask=value&0xF;
         if (mask < 10) str = mask +str; else
            {
            if (mask%10==0) str = "a" +str;
            if (mask%10==1) str = "b" +str;
            if (mask%10==2) str = "c" +str;
            if (mask%10==3) str = "d" +str;
            if (mask%10==4) str = "e" +str;
            if (mask%10==5) str = "f" +str;
            }
    value=value>>4;
    }
return str;
}


function run()
{
document.forms(0).T1.value=dectobin(parseInt(document.forms(0).T2.value));
document.forms(0).T3.value=dectohex(parseInt(document.forms(0).T2.value));

}
</script>
<form align="center">
<p><input type="text" name="T2" size="20"> 10</p>
<p><input type="text" name="T1" size="40">2 </p>
<p><input type="text" name="T3" size="20">16 </p>
<p><input type="Button" value="Calculate" name="B1" onClick="run()"> </p>
</form>

Hosted by uCoz