The techniques

Java Applets

Java Scripts

Style Sheets

DHTML tags

ColdFusion tags

Download


When you want to leave foreign sites, press Reset at bottom to launch Assists

[TOP]
Variable Image
Popups by overLIB
Assists - Tips 'n Tricks
Assists - Tips 'n Tricks

 Java Scripts

Using javascript is probably the most effective way to implement dynamic data or effects in a web-site. You may want to emphesize text in pop-up windows or mark a menu-cell when rollover by the mouse. JavaScript programming is typical "sub-routine" programming technique that is dedicated to solve specific tasks or problems in a web-page.
The language has its own syntax, but is fully integrated in HTML, ie you can use script-phrases directly in the HTML-code.

There are a few scripts in these pages, though the scripts that reside in all parent pages are also preloaded to save time.
Here is the free bundle -




Script title

Iframe
OverLIB 3.51
Chromeless window 2.1+
Pop-up window
Bookmark this site
Reflection tester
Browser verifier
 


Authorized by

Dynamic Drive
Erik Bosrup
Gabriel Suchowolski power[z]one
www.a1javascripts.com/
Unknown
Andy Scott
Applayit
 

How to implement scripts...
There are two ways to implement the code - the explicit and the implicit way. If you choose the explicit way your scriptcode is wide open in your site. The implicit way is a method to hide your code. The following examples show you the differences.


Explicit way


 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!-- //
function openWin( windowURL, windowName, windowFeatures ) {
return window.open( windowURL, windowName, windowFeatures ) ;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
.....
.....



Implicit way


 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT language="JavaScript" src="../winpop.js"></SCRIPT>
</HEAD>
<BODY>
.....
.....



...and this is the content of winpop.js


 

<!-- //
function openWin( windowURL, windowName, windowFeatures ) {
return window.open( windowURL, windowName, windowFeatures ) ;
}
// -->

 

Cheater ! Whom ? I ?

OK, I confess. Somewhere around in a few sites you have probably found a multilevel drop-down menu. Some time ago I bought a nice little tool called DHTML Menu which is a handy menu-creator. But this is typical a "propritary" tool as all browsers do not behave as IE. The late revision does support among others, Opera until a certain extent. You may maintain the functionality, but not a perfect design. This will alway be a problem. Nevertheless the tool has an easy user interface, and with a little practice you may develop tailor-made drop-down menues as a pro.

If you still are curious, here's the link :


Application title

DHTML Menu


 


Authorized by

Sothink


 

 Chromeless Window

It seems that many have trouble implementing CLW (Chromeless Window). In the following you will find A-Z recipe how to...
Before you go further be sure that your own installation (HW/SW) handles CLW correct. There are a few Browser/OS-dependent "bugs" that probably will deny access to clw or misinterprete the layout; you have to live with that so far.

If you see any discrepancies in loading the window correctly, I would like to hear about it.
Loading comitato>gallery you will find clw v/2.1 and v/3.5 examples. If these behave odd, you have to upgrade your OS (Win2000/XP or above), secondly upgrade your browser (IE6.0+). Start with the last.

Chromeless Window
Deside to go for either v. 2.1 or v. 3.5. The difference in functionality in between is rather marginal.

Version 2.1
Scripts dependencies
- your function script where you identify each window and link the neccessary criteria.
- clw script (do not modify this unless you know what you are doing)
Both scripts may reside in the same folder as your calling site, or you can store it in a js-folder. Be sure to include them according to syntax (see above techniques).

The calling site

 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT language="JavaScript" src="chromeless_21.js"></SCRIPT>
<SCRIPT language="JavaScript" src="clw21_param.js"></SCRIPT>
</HEAD>
<BODY>
.....
.....
<DIV><A onFocus="if(this.blur)this.blur()" href="javascript: supp01();">CLW CALLER</A></DIV>


- supp01() is the function name defined in clw21_param.js

Typical content of clw21_param.js is like this :

 

function  supp01(){
theURL=" anyfile.htm"
wname ="Supp"
W=805;   <!-- window width -->
H=519;   <!-- window height -->
windowCERRARa = "close_a.gif"   <!-- be sure that these files exist -->
windowCERRARd = "close_d.gif"
windowCERRARo = "close_o.gif"
windowNONEgrf = "none.gif"
windowCLOCK = "clock.gif"
windowREALtit = " Quality Audit"
windowTIT = "<font face=tahoma color=000040 size=1><em><strong>  Window Title - anything</strong></em></font>"
windowBORDERCOLOR = "#000099"
windowBORDERCOLORsel = "#747474"
windowTITBGCOLOR = "#fffeee"
windowTITBGCOLORsel = "#eeefff"
openchromeless(theURL, wname, W, H, windowCERRARa, windowCERRARd, windowCERRARo, windowNONEgrf, windowCLOCK, windowTIT, windowREALtit , windowBORDERCOLOR, windowBORDERCOLORsel, windowTITBGCOLOR, windowTITBGCOLORsel)
}


You may include all different functions in the same js-file.

To avoid vertical and horizontal scrollbars expand W and H by 5 pixels according to picture-size if you want to present pictures, otherwise you can set the values as you like.

At last you have to define " anyfile.htm". There is no tricky about that - straight forward html-file.
Path to v/2.1 Examples : Comitato ->Gallery - CLW v/2.1

Version 3.5
Scripts dependencies
- identical to v/ 2.1
- clw script (do not modify this unless you know what you are doing)
Both scripts may reside in the same folder as your calling site, or you can store it in a js-folder. Be sure to include them according to syntax (see above techniques).

The calling site

 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT language="JavaScript" src="chromeless_35.js"></SCRIPT>
<SCRIPT language="JavaScript" src="clw35_param.js"></SCRIPT>
</HEAD>
<BODY>
.....
.....
<DIV<A onFocus="if(this.blur)this.blur()" href="#" onclick="mywindow= supp01( 'anysite.htm',800,556,100,100,'mywindowname')">CLW CALLER</A></DIV>


- supp01() is the function name defined in clw35_param.js

Typical content of clw35_param.js is like this :

 

function supp01(u,W,H,X,Y,n,b,x,m,r) {
 var cU  ='close_a.gif'
 var cO  ='close_o.gif'
 var cL  ='.close_d.gif'
 var mU  ='none.gif'
 var mO  ='none.gif'
 var xU  ='none.gif'
 var xO  ='none.gif'
 var rU  ='none.gif'
 var rO  ='none.gif'
 var tH  ='<font face=tahoma size=1 color=000040><em><strong>&nbsp;&nbsp;Any header text here</strong></em></font>'
 var tW  ='<font face=tahoma size=1 color=000040>&nbsp;&nbsp;Header text</font>'
 var wB  ='#000099'
 var wBs ='#747474'
 var wBG ='#b4b4b4'
 var wBGs='#4B4B4B'
 var wNS ='toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0'
 var fSO ='scrolling=no noresize'
 var brd =b||0;
 var max =x||false;
 var min =m||false;
 var res =r||true;
 var tsz =20;
 return chromeless(u,n,W,H,X,Y,cU,cO,cL,mU,mO,xU,xO,rU,rO,tH,tW,wB,wBs,wBG,wBGs,wNS,fSO,brd,max,min,res,tsz)
}


You may include all the functions in the same js-file. Be sure to give the functions unique names corresponding to the function names in the script-tag.

At last you have to define "anysite.htm". As you have noticed there are small differences; though I think you have better control from v. 3.5 as some parameters are removed from the script-file and included in the script-tag.
Following these examples you will have a successful site. - Good luck.
Path to v/3.5 Examples : Comitato ->Gallery - CLW v/3.5



Stay tuned
EriX