The Project Is Under Construction At Location: http://www.webdevref.biz.nf/index.xhtml
Developed regarding maximum compliance with W3C and ECMA International standarts and distinguishing the differences between browsers. For more detailed information read W3C Tutorials.
(X)HTML CSS JavaScript DHTML DOM JS Key Objects

(X)HTML
Mozilla Developer Network
HTML Elements
XHTML

CSS
http://www.webbedenvironments/dhtml/builtwith
http://www.pechpit.com/vqs/DHTML3
CSS mozilla reference
developer.mozilla.org/en/CSS/Getting_Started
Full property table - www.w3.org/TR/CSS21/propidx.html

Стойности и мерни единици

Относителни стойности за дължина
име тип единица същност
em тройно тире ширина на буквата M за даден шрифт
ex x-височина височина на буквата x за даден шрифт
px пиксел точка от екрана
стойноси за цвят
тип единица същност
#RRGGBB шеснайсетично число
rgb(Rdec,Gdec,Bdec) десетични числа
rgb(R%,G%,B%) стойноси в проценти
color name име на цвят
безопасни уеб цветове
формат използвани стойности
hex 00 33 66 99 cc ff
dec 0 51 102 153 204 255
% 0 20 40 60 80 100

Същност на CSS

http://www.w3.org/Style/CSS/current-work
Задаване на правило за селекор
selector {property: value;}
Видове правила
Видове правилаПример
HTML селекторh1 {font: bold 12pt times;}
Клас.classname {color: red}
ID идентификатор на елемент#object1 {position: absolute;}
CSS с други езици
XML (Extensible Markup Lanaguage)
XHTML (Extensible Hypertext Markup Language)
XLS (Extensible Stylesheet Language)
SVG (Scalble Vector Grpahics)

Видове HTML тагове
Блокови Инлайн Заменяеми елементи
blocquote
center
dd
dfn
dir
div
dl
dt
h1..h7
li
ol
ul
p
table
th
tr
td
a
b
big
cite
code
em
font
i
pre
span
strike
strong
sub
sup
tt
u
br
img
input
object
select
textarea
Задаване на стилове
Директно в HTML документа <style type="text/css" media="screen"> /* comments */ rules </style>
Външен стил <link rel="stylesheet" href="filename.css">
В секция със стилове или външен CSS файл @import url(filename.css);
Примери за използване на CSS
Вид употреба Синтаксис Пример
Предефиниране на HTML тага tagname {rules} p {font-size: 12px}
Потребителски класове .classname {rules} .myclass {text-align: center}
Подчинени класове tagname.classname {rules} blockquote.myclass {color: #ffcc00}
Стилове към идентификатор на обект #objectID {rules} #mypicture {border: solid 12px}
Задаване на стилове с еднакви правила style1,style2 {rules} #hidden, .myclass, pre {font-size: 11pt}
Контекстни селектори selector1 selector2 {rules} p a:link {color: green;}
div.menu a:active {font-weight: bold;}
Директно вложени селектори selector1>selector2 {rules} div>em {font: sans-serif;}
Прилагане при първото срещане след първия селектор selector1 + selector2 {rules} h2 + p {font-size: x-large}
Псевдо класове selector:psudoclass{rules} a:link {color: #0000cc;}
a:visited {color: red;}
a:active {color: #ff00ff; font-weight: bold;}
Видове псевдо класове
Означаване Значение Пример
:active Избран елемент
:first-child Пръв насладник на елемент
:focus Елемент на фокус
:hover Елемент под курсора на мишката
:link Непосетен елемент-връзка
:visited Посетен елемент-връзка
:first-line Първи ред от блоков елемент
:first-letter Първа буква от блоков елемент
Създаване на бити букви (drop caps) чрез псевдо елементи
p.dropcap:first-letter {
font: bold 800% times serif;
color: red;
float: left;
margin-right: 5px;
}
Придаване максимална тежест на дефиниция чрез !important
selector { property: value !important}
p {font-size: 12px; !important;}

Стилове за отпечатване
<link rel="stylesheet" href="print.css" media="print" />
Коментари в CSS /* comments here */
Контроли за шрифтове
Семейства шрифтове / Font Family Примери / Examples
serifTimes New Roman
sans-serifHelvetica, Arial
monospaceCourier New
cursiveApple Chancery
fantasyWebdings
Основни шрифтове на Microsoft
Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Impact, Times New Roman, Trebuchet MS, Veranda, Webdings, Adobe Minion Web
Характеристики за шрифтове
Свойство възможни стойности примери
font-size <length> <percentage> smaller , larger, xx-small, x-small
small, medium, large, x-large, xx-large
font-size: 10px
font-style normal, italic, oblique font-style: oblique;
font-weight normal, bold, bolder, lighter, 100 .. 900 font-weight: 200
font-variant normal, small-caps font-variant: small-caps
font <font-family> <font-variant> <font-size> <font-style> <font-weight> <font-height> <visitor-style>
visitor-style caption, icon, menu, messge-box, small-caption, status-bar
Контроли за текст
letter-spacing normal, <length>
word-spacing normal, <length>
line-height normal, <length>, <percentage>, <number>
text-transform capitalize, uppercase, lowercase, none
text-align left, right, center, justify
vertical-align super, sub, baseline, <percentage>, <relative>-> (top, middle, bottom, text-top, text-bottom)
text-indent <length>, <percentage>
text-decoration none, underline, overline, linr-through, blink
direction rtl, ltr
unicode-bidi bidi-override, embed, normal
white-space normal, pre, nowrap
Контроли за елементи
display block inline list-item table table-cell table-footer-group table-row table-row-group none
width <length>, <percentage>, auto
height <length>, <percentage>, auto
max/min-width/height in Mozilla
margin <length>, <percentage>, auto
margin-top/left/bottom/right <length>, <percentage>, auto
border
border-width thin, medium, thick, <length>, inherit
border-style doted, dashed, solid, double, groove, ridge, inset, outset, none, inherit
border-color <color>, transparent, inherit
border-top-style/width/color
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
<length>, <percentage>
padding
padding-top/-right/-bottom/-left
<length>, <percentage>
background
background-color <color>, transparent
background-image uri, none
background-repeat repeat-x, repeat-y, repeat, no-repeat
background-attachment scroll, fixed
background-position <percentage>, <length>, top, center, bottom, left, right
Контроли за позициониране на елементи
position static, relative, absolute, fixed
top left bottom right <length>, <percentage>, auto
z-index auto 0 1 2 .. 7 0 below all
float left, right, none
clear left, right, both, none
white-space: normal, pre, nowrap visibility: hidden, visible, inderit clip: rect(<toplength>,<rightlength><bottomlength><leftlength>, auto overflow: scroll, hidden, visible, auto -moz-opacity: <0..1> 1 - non-transparent
контроли за списъци таблици и интерфейси
list-style:
list-style-type: none, disc, square, decimal, decimal-leading-zero, upper-roman, lower-roman, upper-alpha, lower-alpha, lower-greek
list-style-position: inside, outside
list-style-image: none, URI
border-collapse: collapse, separate
caption-side: top, left, bottom, right
cursor: none, auto, URI, crosshair, e-resize, hand, help, move, ne-resize, n-resize, nw-resize, pointer, se-resize, sw-resize, s-resize, text, wait, w-resize

JavaScript

Javascript Mozilla Guide
Javascript Reference
* http://jquery.com/
* jQuery UI
* http://jquery.org/license
* http://sizzlejs.com/
* www.prototypejs.org/
<!-- Prototype, YUI, dojo -> Javscript Libraries -- >



var varname;
var varname = 'string';
var varname = "string\twith\tspecial characters";
\\ \b \f \n \r \t
true false 0 1 null
+ - * / % ++ --
== != > < >= <=
AND && OR || NOT !
AND & XOR ^ OR | NOT~ LeftShift << RightShift >> RightShiftZeroFill >>>
Conditions and loops
if (condition){
statements
}
else {
statements
}
switch (variable) {
case "string":
...
break;
default:
}
for (varname = 1; varname < 10; varname += 1;)
{
statements
}
while (condition)
{
statements
}
do {
statements
} while (condtion)
Objects
function object_properties(property1, property2, propertyN) {
this.property1 = "value1";
this.property2 = "value2";
...
this.propertyN = "valueN";
}
var objectname = new object_properties("value1", "value2", "value3");
var something = objectname.property2;
objectname = {property: value} // javascript 1.2
Built-in Objects
navigator
navigator.javaEnabled
navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.cookieEnabled
navigator.mimeTypes
navigator.language
navigator.platform
navigator.plugins object
navigator.plugins['plugin_name']
navigator.plugins.description
navigator.plugins.filename
navigator.plugins.plugins.length
navigator.plugins.name
navigator.plugins.plugins.refersh()
document
document.alonkColor
document.anchors
document.aplets
document.bgColor
document.cookie
document.domain
document.embeds
document.fgColor
document.formName
document.forms[]
document.images
document.lastModified
document.layers Netscape
document.all IE
document.linkColor
document.links[]
document.plugins[]
document.referrer
document.title
document.URL
document.vlinkColor
window
window.closed
window.defaultStatus default message in the status bar
window.frames[] array of all frames in the window
window.length
window.location
window.name
window.opener
window.parent
window.self
window.status
window.top
window.alert()
window.confirm()
window.find() search inside the douments in the window window.find("some text");
window.print()
window.prompt()
window.open()
window.close()
window.blur()
window.focus()
window.moveBy()
window.moveTo()
window.resizeBy()
window.resizeTo()
window.scrollBy()
window.scrollTo()
window.setInterval() window.setInterval("functionname();", time);
window.clearInterval()
window.setTimeout() window.setTimeout("functionname();", time);
window.clearTimeout()
window.stop()
window.home()
window.history object
window.history.length numers of the pages in the history
window.history.go() moves nuber of pages in the history
window.history.back()
window.history.forward()
window.location object
window.history.host domain of the current host
window.history.href full URI of the current address
window.history.replace(URI)
window.history.reload()
window.document object
window.document.title
window.document.cookie
window.document.referrer
window.document.bgcolor
window.document.fgColor
window.document.alinkColor
window.document.vlinkColor
window.document.linkColor
window.document.getElementById(id)
window.document.getElementByName(name)
window.document.getElementByTagName(tagname)
function f_name() {} var variable = window.setInterval("f_name();", 15000); <tagname onclick="window.clearInterval(variable)" />
window.document.forms[]
document.forms["formname"]
window.document.forms[].action
window.document.forms[].elements
window.document.forms[].encoding
window.document.forms[].length
window.document.forms[].method
window.document.forms[].name
window.document.forms[].target
window.document.forms[].reset()
window.document.forms[].submit()
document.forms[0].length
document.forms.length
document.formname.elements[0];
document.forms[0].element[0];
document.formname.fieldname.value;
document.formname.fieldname.options[1].value;
<input type="text" onblur="this.form.annoy.click();" />
<input type="reset" name="annoy" value="Reset form">
onsubmit="return myfunction();"
var email_ad = document.fi.em.value;
if (( email_ad.indexOf('@' == -1) || (email_ad.indexOf('.') == -1) {..}
document.f1.s1.options[document.f1.s1.selectedIndex].value for (var i; i < elm.value.length; i++) { if(elm.value.charAt(i) < "0" || elm.value.charAt(i) > "9") }
window.document.images[]
document.images[image_name]
document.image_name
window.document.images[].src
window.document.images[].name
document.image_name.src
document.image_name.name
window.open(URI, target, "attribute1=value1, attribute2=value2"); attributes-> directories, location, menubar, resizable, scrollbars, status, toolbar
Arrays
var arrayname = new Array(element0, element1); var array1 = new Array("1","2");
var array2 = new Array("3","4");
var arrayname = new Array(number_of_elements);
var arrayname = new Array();
The object array
array.constructor
array.index
array.input
array.length
array.prototype
Array.prototype.new_property = default_value;
array.concat() var big_array = array1.concat(array2, array3);
array.join() join elements of the array in 1 string var long_string = big_array.join(":");
array.pop() removes the last element var picked_element = big_array.pop()
array.push() add element at the end of array array1.push("7");
array.reverse() reverse the array from the last element to the first array1.reverse();
array.shift() removes the first element of the array and retuns it var removed_element = big_array.shift();
array.unshift() add element at the beggining of the array array1.unshift("0");
array.slice() extracts the pointed elements and returns new array var a_slice_array = array1(0,2);
array.splice()
arrayname.splice(element_index, number_of_elements);
removes or replaces elements from the array var a_spliced_array = big_array(1,2);
array.sort() sorts the elements of the array arrayname.sort()
Hashes
var arrayname = new Array();
arrayname["key"] = value;
Object Math
Math.Ewindow.alert(Math.E);
Math.LN10Natural logarithm of 10window.alert(Math.LN10);
Math.LN2Natural logarithm of 2window.alert(Math.LN2);
Math.LOG10Ewindow.alert(Math.LOG10E);
Math.LOG2Ewindow.alert(Math.LOG2E);
Math.PIPitagorus constantwindow.alert(Math.PI);
Math.SQRT2square of 2window.alert(Math.SQRT2);
Math.SQRT1_2square of 1/2window.alert(Math.SQRT1_2);
Math.abs()Abslute valuewindow.alert(Math.abs(2));
Math.acos()Arcus cosinuswindow.alert(Math.acos(5));
Math.asin()Arcus sinuswindow.alert(Math.asin(6));
Math.atan()Arcus tangenswindow.alert(Math.atan(6));
Math.ceil()window.alert(Math.ceil(6.45));
Math.cos()window.alert(Math.cos(1));
Math.exp()window.alert(Math.exp(5));
Math.floor()window.alert(Math.floor(3.87));
Math.log()window.alert(Math.log(3));
Math.max()window.alert(Math.max(5, 8));
Math.min()window.alert(Math.min(3, -1));
Math.pow()window.alert(Math.pow(6, 3));
Math.random()window.alert(Math.random());
Math.round()window.alert(Math.round(5.49));
Math.sin()window.alert(Math.sin(4));
Math.sqrt()window.alert(Math.sqrt(2));
Math.tan()window.alert(Math.tan(2));
var largenum = Math.max(num1, num2);
var smallnum = Math.min(num1, num2);
var a_power = Math.pow(num1, power);
Object Date
var instance_name = new Date();
instance_name.constructor
instance_name.prototype
instance_name.getDate()
instance_name.getDay()
instance_name.getHours()
instance_name.getMinutes()
instance_name.getMonth()
instance_name.getSeconds()
instance_name.getTime()
instance_name.getTimezoneOffset()
instance_name.getYear() year in 2 digits
instance_name.getFullYear() year in 4 digits
instance_name.parse() ms since 1 Jan 1970 00:00
instance_name.setDate()
instance_name.setHours()
instance_name.setMinutes()
instance_name.setMonth()
instance_name.setSeconds()
instance_name.setTime()
instance_name.setYear()
instance_name.setFullTime()
instance_name.toISOString()
instead of instance_name.toGMTString()
instance_name.toLocaleString()
Object String
var instancename = new String('string value there');
Properties
instancename.constructor
instancename.length
instancename.prototype
Methods
instancename.anchor()
instancename.big()
instancename.blink()
instancename.bold()
instancename.charAt()
instancename.charCodeAt()
instancename.concat()
instancename.fixed()
instancename.fontcoloer()
instancename.fontsize()
instancename.fromCharCode()
instancename.indexOf()
instancename.italics()
instancename.lastIndexOf()
instancename.link()
instancename.match()
instancename.replace()
instancename.search()
instancename.slice()
instancename.small()
instancename.split()
instancename.strike()
instancename.sub()
instancename.substr()
instancename.sup()
instancename.toString()
instancename.toLowerCase()
instancename.toUpperCase()
var stringname = stringvalue;
var sliced_string = stringname.slice(startposition, <endposition + 1>);
var substr_string = stringname.substr(startposition, <endposition + 1>);
var uppercased_string = stringname.toUppercase();
Forms by Javascript
document.forms[] array containing all forms in the document
document.forms.length number of the forms in the document
document.forms[number].length number of the elements of the form [number]
Properties
document.forms[NUM].action the value of action attibute
document.forms[NUM].elements[] array containing all elements in the form
document.forms[NUM].encoding the value of enctype attibute
document.forms[NUM].length number of elements in the form
document.forms[NUM].method the value of method attibute
document.forms[NUM].name the value of name attibute
document.forms[NUM].target the value of target attibute
Methods
document.forms[NUM].reset()
document.forms[NUM].submit()
Elements properties and methods of the form
name properties methods
button form, name, type, value blur(), click(), focus()
checkbox checked, defaultChecked, form, name, type, value blur(), click(), focus()
hidden form, name, type, value no
radio checked, defaultChecked, form, name, type, value blur(), click(), focus()
reset form, name, type, value blur(), click(), focus()
select form, name, options, selectIndex, type blur(), focus()
submit form, name, type, value blur(), click(), focus()
text defaultValue, form, name, value, type blur(), focus(), select()
textarea defaultValue, form, name, type, value
Frames
top.frames[]
top.famename
self.propertyname
if (top.frames.length > 0) { top.location = URI;}
Regular expretions
var varname = /pattern/flags;
regex_name.test(string_to_test);
Flags
i ignore case sensitivity
g matches again after first search
ig usage both ig flags
Special characters
^ matches at the beggining of the string
$ matches at the end of the string
* matches 0 or more characters
+ matches 1 or more characters
? matches 0 or 1 characters
. mathes any character exept NEWLINE character
() save in $n memory for further use
| alternatives between LEFT|RIGHT
{x,y} number of character to be matched
[] symbolic class matches any character inside [] [a-zA-Z0-] [123efrtB-Q]
[^] negates the symbols inside []
\ changes the mening of the next character
[\b] BACKSPACE key
\b word border
\cLETTER CTRL + LETTER
\d single digit character
\D single non-digit character
\f new page character
\n new line character
\r return carriges
\s single space character
\S single non-space character
\t tabulation
\V vertical tabulation
\w single word character
\W single non-word character
varname = stringname.replace(regex, newstring);
Cookies
Setting cookie
document.cookie = "name=cookiename";
document.cookie = "name1=value1&name2=value2";
document.cookie = "name1:value1|name2:value2";
Method escape()
var cookie.text = "name1=value1&name2=value2";
var escaped_text = escape(cookie.text);
var expiritiy_date = "expires=" + toGMTString(Date("March 12.2011"))
reading cookie
var cookien = document.cookie;
unescape(cookien);
var cookiename = document.cookie;
var fixed_cookie = unescape(cookiename);
var pairs = fixed_cookie.split("&");
Using eval()
eval (variable + "string");
document.images[the_name].src = eval(the_name+"_init.src");
document.images[the_name].src = eval(the_name+"_new.src");
screen object
screen.width
screen.height
screen.pixelDepth
screen.colorDepth
screen.availHeight
screen.availWidth
Style properties
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
borderColor
borderWidth
bottom
clear
clip
color
fontFamily
fontSize
fontStyle
fontWeight
height
left
letterSpacing
lineHeight
listStyleImage
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
overflow
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
position
right
textAlign
textDecoration
textTransform
top
verticalAlign top, bottom, baseline, uiddle
visibility visible hidden
width px %
wordSpacing px em
Codes
document.forms[0]first form in the document
document.forms[1].lengthnumber of the fields in second form
document.forms.lengthnumber of the forms in the document
document.formname.elements[0]
document.forms[0].elements[0]
.propertiesaction elements encoding length method name target
onclick="this.form.favurl.value = "http://.."
<select name="optlist">
document.formname.optlist.options[1].value;
document.formname.fieldname.value
<input type="reset" name="annoy" value="Reset form">
onblur="this.form.annoy.click()";
onsubmit="return yourfunction();"
var email_ad = document.fi.em.value;
if ((email_ad.indexOf = ("@" == -1)) || (email_ad.indexOf = ("@" == -1)))
document.fi.s1.options[document.fi.s1.selectedIndex].value
document.simple OR this
function isReadyForm(form) {
if (form.message.value != "") return true;
for (var i; i < elm.value.length; i++) {
if (elm.value.charAt(i) < "0" || elm.value.charAt(i) > "9") &&
if (elm.value.charAt(i) < "a" || elm.value.charAt(i) > "z") &&
if (elm.value.charAt(i) < "A" || elm.value.charAt(i) > "Z")
... }
var pattern = /[^0-9]/i
if (pattern.test(elm.value)
/^[a-zA-Z0-9\-]+\@[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3})$/
<body onLoad="getValues()" onUnload="setValues();">
function setValues() {
var reg = document.forms["red"];
setCookie(reg.yourname.name, reg.yourname.value, exp); }
x = document.forms[FORMNUMBER].xVal.value
document.getElementById('ID').innerHTML = 'html code';
var aChanger = document.getElementById('ID');
aChanger.innerHTML = "html code";

DHTML
function passItOn() {var evt = (evt) ? evt : ((window.event) ? event : null);
alert.clientX
evt.cancelBubble
} if (document.images) { document.writeln('something');}
else { document.writeln('other');} function findDOM (objectID, withStyle) {
if (withStyle) {
if (document.getElementById) return (document.getElementById(objectID).style);
else if (document.all) return (document.all[objectID].style);
else if ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) == 4)) return (document.layers[objectID]);}
else {
if (document.getElementById) return (document.getElementById(objectID));
else if (document.all) return (document.all[objectID]);
else if ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) == 4)) return (document.layers[objectID]);}
} var object = findDOM(objectID, true); /* with style */ var object = findDOM(objectID, false); /* without style */ var isIE = 0; var isNS = 0; var isOtherBrowser = 0;
if (navigator.appName.indexOf('Netscape') != -1) { isNS = 1 }
else if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) { isIE = 1 }
else { isOtherBrowser = 1 }
var browserVersion = parseInt(navigator.appVersion); var pixels = screen.pixelDepth;
var pageURI = self.location;
var pageTitle = document.title;
var liveScreenHeight = screen.availHeight;
var screenHeight = screen.height;
var screenWidth = screen.width;
var liveScreenWidth = screen.availWidth;
var colorDepth = screen.colorDepth;
function findColors() { return (screen.colorDepth);} function findBrowserHeight() {
if (window.outerHeight != null)
return window.outerHeigth;
return null;
} function findBrowserWidth() {
if (window.outerWidth != null)
return window.outerWidth;
return null;
} function findLiveBrowserHeight() {
if (window.innerHeight)
return window.innerHeigth;
if (document.body.clientHeight)
return (document.body.clientHeight);
return null;
} function findLiveBrowserWidth() {
if (window.innerWidth)
return window.innerWidth;
if (document.body.clientWidth)
return (document.body.clientWidth);
return null;
} function findScrollLeft() {
if (document.body.scrollLeft)
return document.body.scrollLeft;
return (null);
} function findScrollTop() {
if (document.body.scrollTop)
return document.body.scrollTop;
return (null);
} function findObjectID(evt) {
var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
if (objectID)
alert('You clicked ' + objectID + '.');
return;
} function findWidth() {
var object = findDOM(objectID, false); /* without style */
if (object.offsetWidth)
return object.offsetWidth;
return (null);
} function findHeight() {
var object = findDOM(objectID, false); /* without style */
if (object.offsetHeight)
return object.offsetHeight;
return (null);
} function findLeft() {
var object = findDOM(objectID, false);
if (object.offsetLeft)
return object.offsetLeft;
return (null);
} function findTop() {
var object = findDOM(objectID, false);
if (object.offsetTop)
return object.offsetTop;
return (null);
} function findRight() {
var object = findDOM(objectID, false);
if (object.offsetLeft)
return (object.offsetLeft + object.offsetWidth);
return (null);
} function findBottom() {
var object = findDOM(objectID, false);
if (object.offsetTop)
return (object.offsetTop + object.offsetHeight);
return (null);
} function setLayers() { /* init page */
for (i=0; i<=4; i++) {
var object = findDOM(('object' + i), true);
object.zIndex = i;
}
} function findLayer(objectID) {
var object = findDOM(objectID, true);
if (object.zIndex)
return object.zIndex;
return (null);
} function setinitVisibility(objectID, state) {
var object = findDOM(objectID, false);
object.style.visibility = state;
} function findVisibility(objectID) {
var object = findDOM(objectID, false);
return object.style.visibility;
return;
} 258 - 264 function findEventType(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
if (evt.type) { alert('This was triggered by a ' + evt.type + ' event');}
;} function initFindModifierKey() {
window.document.onkeydown= findModifierKey;
} function findModifierKey(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
if (evt.shiftKey) code;
if (evt.ctrlKey) code;
if (evt.altKey) code;
if (evt.metaKey) code;
};
} 270 - 276 function set_toggleVisibility(objectID, initialstate) { /* initialstate (false inherit visible hidden hide show) || */
var object = findDOM(objectID, true);
var change = true;
if (initialstate) { object.initialstate = initialstate; change = false; };
var state = object.visibility;
if (change) {
if ( state == 'hidden' ) { object.visibility = 'visible'; }
else if ( state == 'visible' ) { object.visibility = 'hidden'; }
else { object.visibility = 'visible'; }
}
} function set_toggleDisplay(objectID, initialstate) { /* initialstate (false block none) */
var object = findDOM(objectID, true);
var change = true;
if (initialstate) { object.initialstate = initialstate; change = false; };
var state = object.display;
if (change) {
if ( state != 'block' ) { object.display = 'block'; }
else if ( state != 'none' ) { object.display = 'none'; }
}
} function moveObjectTo(objectID,x,y) {
var object = findDOM(objectID, true);
object.left = x + "px";
object.top = y + "px";
;
} function moveObjectBy(objectID,deltaX,deltaY) { /* if needed += shuld be used */
var object = findDOM(objectID, false);
if (object.offsetLeft != null) {
var plusLeft = object.offsetLeft;
var plusTop = object.offsetTop;
object.style.left = deltaX + plusLeft + 'px';
object.style.top = deltaX + plusTop + 'px';
}
} 287 - 290 var object = finDOM(objectID, false); object.innerHTML = 'write something here'; 298 - 314 function magnifyWindow(dWindowWidth,dWindowHeight) {
if (window.outerWidth) {
resizeBy (dWindowWidth,dWindowHeight);
} function scrollPageTo(x,y) {
document.body.scrollLeft = x;
document.body.scrollTop = y;
return;
} 318 - 324 if (navigator.appVersion.indexOf('Mac') != -1) document.write ('<link href="mac.css" rel="stylesheet" type="text/css">'); if (navigator.appName.indexOf('Mac') != -1) document.write ('<link href="netscape.css" rel="stylesheet" type="text/css">'); if (document.layers) { origWidth = innerWidth; origHeight = innerHeight; } function reloadPage() { if (innerWidth != origWidth || innerHeight != origHeight) { location.reload(); } 327 - 329 function addStyleDef(objectID, styleName, newVal) {
var object = findDOM(objectID, true);
object [styleName] = newVal;
} function addStyleDefinitionIE(selector, definition) { // for Ms Internet Explorer
document.styleSheets.MyStyles.addRule(selector,definition);
} function setClass(objectID, newClass) {
var object = document.getElementById(objectID);
object.className = newClass;
} <style id="strangeStyle">
.bizzaro { rules here }
</style> 340 <script src="external.js" name="externalScript1"></script> <iframe id="content" name="content" src="external.html" frameborder="0" marginwidth="5" marginheight="5" scrolling="no" align="top" height="600" width="100%">
<a href="external.html">External Content</a>
</iframe> Оформяне на таблици table {
font: 75px "arial black";
border: solid 2px red;
}
td {
text-align: center;
width: 150px;
height: 150px;
border: inset 8px red;
align: center;
}
td.lightBG { background-color: #cccccc; }
td.darkBG { background-color: #666666; } fieldset.FormFieldSet {
padding: 10px;
width: 325px;
border: solid 5px #f00;
} <fieldset class="">
<legend class=""></legend>
<form id="" action="" method="get">
<p><label>Label: </label><input class="formField" type="text" name="" size="" /> </p>
</form>
</fieldset> - 375 -384 function toggleClassShellMenu(objectID) {
var object = document.getElementByID(objectID);
if (object.style.display == 'block') object.style.display = 'none';
else object.style.display = 'block';
return;} <a class="menuHead" href="javascript: toggleClassShellMenu('menu1')">>Menu1</a><br />
<span class="menu1">
<a class="menuOption" href="option1.html" target="content">Option1</a><br />
<a class="menuOption" href="option2.html" target="content">Option2</a><br />
<a class="menuOption" href="option3.html" target="content">Option3</a><br />
</span> <style>
.menuHead {}
#menu1, #menu2, #menu3 { display: none;}
<style//> function() {
var object = findDOM(objectID, true);
;
} function() {

;
} document.getElementById(objectID) document.all[objectID] document.layers[objectID] navigator.appVersion Operating System <string> screen.width <pixels> screen.height <pixels> screen.availWidth <pixels> screen.availHeight <pixels> screen.colorDepth <number> navigator.appName Browser Name <string> parseInt(navigator.appVersion) Browser Version <number> window.outerWidth <pixels> window.outerHeight <pixels> self.location <string> document.title <string> window.innerWidth <pixels> document.bodyclientWidth <pixels> window.innerHeight <pixels> document.bodyclientHeight <pixels> window.pageXOffset <pixels> document.body.scrollLeft <pixels> window.pageYOffset <pixels> document.body.scrollTop <pixels> evt.target.id.evt <string> srcElement.id IE4 O5 <string> offsetWidth <length> style.width <length> offset.Height <length> style.height <length> offsetLeft <length> pixelLeft <length> style.left <length> offsetTop <length> pixelTop <length> style.Top <length> style.zIndex <number> style.visibility visible hidden show hide style.clip[] <array> style.clipBottom <length> style.clipLeft <length> style.clipRight <> style.clipTop <>


Mozilla Developer Network
XML - MDC Doc Center
Namespaces - MDC Doc Center

11 незаменими онлайн ресурса за всеки web developer

1. W3 Schools - http://www.w3schools.com/
2. A List Apart- http://www.alistapart.com/
3. Webmonkey - http://www.webmonkey.com/
4. Dev Shed - http://www.devshed.com/
5. Smashing Magazine - http://www.smashingmagazine.com/
6. Developer Tutorials - http://www.developertutorials.com/
7. Ajaxian - http://ajaxian.com/
8. DZone - http://www.dzone.com/links/index.html
9. IBM developerWorks - http://www.ibm.com/developerworks/
10. Sitepoint - http://www.sitepoint.com/
11. O'Reilly - http://oreilly.com/

НАЧАЛО

Valid XHTML 1.0 Transitional revalidate
hosted by Biz.nf