Writing Friendly Code - Sources

home / web / dev / friendly

Writing Friendly Code-

Sources

• JavaScript Source Code
• Stylesheet
• HTML

Javascript Code:

//Globals:
var n=0;
var yPage= new Array();
var n1,n2,n3;
var msgStat1="";
var pg=1;
var Mac=false;
var brid="";
var cntSz=0;
var loadchk=0;
var infos=new Array();
var newwin="";
var sizH=410;
var sizW=630;

//Browser ID

if (parseInt(navigator.appVersion)>=4){ 
if (navigator.appName.indexOf("Microsoft")!=-1)brid="IE"; 
if (navigator.userAgent.indexOf("Mac")!=-1) isaMac=true;
if (navigator.appName.indexOf("Netscape")!=-1) brid="NS"; 

}

function isReddy(){ 
loadchk++;
if (brid=="" )bugOut(1);
if(loadchk>=10)bugOut(2);
if(brid!="" && document.title && infoCats.indexOf("sitcats")!=-1){ 
msgStat1=document.title; 
setTimeout("init()", 500);
}
}

function bugOut(bugz){//this is a testing version see the text
var delayr;
var chooser;
delay=confirm("There may be a problem- try reloading?"); 
if(delayr==true)location.reload(true);
if(delayr==false){
chooser=confirm("Try the noscripts page?");
if(chooser==true)location="ywshono1.htm"; 
if(chooser!=true){
(navigator.appName.indexOf("Netscape")!=-1) ? brid="NS" : brid="IE"; 
alert("We'll try the settings for "+brid);
setPg() ; 
}
}
}

function init(){
if(msgStat1=="")setTimeout("isReddy()",500)
if(msgStat1!=""){
Loaded=true; 
window.defaultStatus=msgStat1;
setPg(); 
}
}

function setPg(){
infos[0]=infoCats+infodun1;
infos[1]=infoW3+infodun;
infos[2]=infoEc+infodun;
infos[3]=infoHelp+infodun;
infos[4]=infoScroll+infodun;
infos[5]=infoSiz+infodun;

if(brid=="IE"){ 
for(var i=0;i<document.all.length;i++){
if(document.all[i].id.indexOf("page")!=-1){
yPage[n]=document.all[i].id; 
n++;
} 
}
n1=(n-1);
n2=(n-2);
n3=(n-3);
document.all.btn0.value="Cover";
document.all["btn"+n2].value="Forum";
document.all["btn"+n1].value="Code";
for(var r=1;r<n-3;r++)document.all["btn"+r].value="Pg "+(r.toString());
document.all.page0.className="coverClass";
document.all.info.className="reff";
document.all.optbtn7.value="Scroll";
sizMan(); 
}
if(brid=="NS"){ 
for(var i=0;i<document.layers.length;i++){
if(document.layers[i].name.indexOf("page")!=-1){
yPage[n]=document.layers[i].name; 
n++; }
}
n1=(n-1);
n2=(n-2);
n3=(n-3); 
}
scale();
turnPage(0,1);
setTimeout("setVis('nexter','visible')",350);
setTimeout("setVis('tabBar','visible')",450);
setTimeout("shoOpts('Hide')",550);
}

function sizMan(wot){
if(brid=="IE"){
sizH=document.body.clientHeight;
sizW=document.body.clientWidth;
if(wot && wot==1)sizH=100;
if(sizH>420 && sizW>620)document.body.scroll="no";
if(sizH<=420 || sizW<=620)document.body.scroll="yes";
}
if(brid=="NS"){
if(cntSz==0)alert(msgNSa);
cntSz++;
}
scale();
}

function scale(){
var nwTop=410;
var nxTop=350;
var tem1,tem2,tem3; 
var nxL=540;
if (brid=="IE"){ 
sizH=Math.floor(document.body.clientHeight); 
if(sizH<=420)nwTop=Math.ceil(document.body.clientHeight-35); 
sizW=Math.floor(document.body.clientWidth);
if(sizW<=650)nxL=Math.ceil(document.body.clientWidth-130); 
tem1=document.all.toolBox.style;
tem2=document.all.nexter.style;
tem3=document.all.optins.style;
}

if (brid=="NS"){ 
if(Math.floor(innerHeight)<=420)nwTop=Math.ceil(innerHeight-35); 
if(Math.floor(innerWidth)<=650)nxL=Math.ceil(innerWidth-130);
tem1=document.toolBox;
tem2=document.nexter;
tem3=document.optins; 
}
tem1.top=nwTop;
(nwTop!=410) ? tem1.top=nwTop-35 : tem1.Top=nxTop;
tem2.left=nxL;
tem3.left=nxL-50; 
}

function setVis(what,boo){
if(brid=="IE")document.all[what].style.visibility=boo;
if(brid=="NS"){
if(boo=="hidden")boo="hide";
if(boo=="visible")boo="show";
document[what].visibility=boo;
} 
} 

function btnVis(bwot){ 
var offB=("btn" +bwot); 
if(brid=="IE")document.all[offB].disabled=""; 
if(brid=="NS"){
formB1=document.toolBox.document.forms[0];
formB=document.tabBar.document.forms[0]; 
if(bwot!=0 && bwot<=n3)formB[offB].value= 'Pg '+bwot; 
if(bwot==0)formB[offB].value="Cover";
if(bwot==n1)formB1[offB].value="Code";
if(bwot==n2)formB1[offB].value="Forum";
} 
}

function turnPage(evnt,mrkr) {
var npage=evnt;
if(evnt==100) npage=pg;
if(mrkr && mrkr==1 && evnt<0)npage=0;
if(mrkr && mrkr==2 && evnt<=0)npage=1;
if(mrkr && mrkr<=2 && evnt>=n3)npage=n3;
pg=npage;
npage=npage.toString();
for (var i=0;i<n;i++){
btnVis(i);
setVis(("page"+i),("hidden")); 
}
setVis(("page"+npage),("visible")); 
if(brid=="IE"){
document.all["btn"+npage].disabled="true"; 
document.all.info.style.visibility="hidden";
(pg<=0)? document.all.bckbtn.disabled="true" : document.all.bckbtn.disabled="";
(pg>=(n3))? document.all.nxtbtn.disabled="true" : document.all.nxtbtn.disabled="";
} 
if(brid=="NS"){
setVis("watermark","visible"); 
var nsbb=document.nexter.document.forms[0].bckbtn;
var nsnb=document.nexter.document.forms[0].nxtbtn;
document.info.document.moInfo.visibility="hide";
document.info.visibility="hide";
(npage<(n2)) ? formB["btn"+npage].value="HERE" : formB1["btn"+pg].value="HERE";
if(!mrkr){
if(pg==n1)nwWind(1); 
if(pg==n2)nwWind(2);
}
(pg<=0)? nsbb.value="First " : nsbb.value=" Back ";
(pg>=(n3))? nsnb.value=" End " : nsnb.value="Next ";
} 
}

function inform(wotis){
tmpg="page"+pg;
if(brid=="IE"){
if(pg>=n2 ) setVis(tmpg,"hidden"); 
document.all.info.style.visibility="visible";
document.all.info.innerHTML=infos[wotis]; 
}
if(brid=="NS"){
if(wotis==4)wotis=5; 
(wotis>0) ? setVis("watermark","hidden") : setVis("watermark","visible") 
document.info.document.moInfo.document.write(infos[wotis])
document.info.document.moInfo.document.close(); 
setVis(tmpg,"hidden"); 
document.info.visibility="show";
document.info.document.moInfo.visibility="show";
}
} 

function nwWind(hrf){
if(brid=="NS" && hrf==1){
newwin=window.open("ywshoe.htm","nsw","resizable,width=580,height=360,scrollbars")
}
if(brid=="NS" && hrf==2){
newwin=window.open("ywforum.htm","nsw","resizable,width=580,height=360,scrollbars")
}

newwin.focus(); 
}

function shoOpts(wopts){ 
if(wopts=="Options"){ 
setVis("toolBox","visible");
setVis("optins","hidden"); 
}
if(wopts=="Hide"){
setVis("toolBox","hidden");
setVis("optins","visible"); 
}
if(wopts=="Show Tabs"){
setVis("tabBar","visible");
if (brid=="IE") document.all.optbtn1.value="Hide Tabs";
if (brid=="NS") document.toolBox.document.forms[0].optbtn1.value="Hide Tabs";
}
if(wopts=="Hide Tabs"){
setVis("tabBar","hidden");
if (brid=="IE") document.all.optbtn1.value="Show Tabs";
if (brid=="NS") document.toolBox.document.forms[0].optbtn1.value="Show Tabs";
}
}

function restat(){
if(newwin!="" && newwin.closed==false){ 
newwin.close();
}
status="";
defaultStatus=""; 
}

//Window event handlers:

if(brid=="NS")window.captureEvents(Event.RESIZE || Event.LOAD || Event.UNLOAD);
window.onresize=sizMan;
window.onload=isReddy;
window.onunload=restat;

//created by Areoka and the Carpenter's Cat
//at the Yankee Webshop
//November,1999 all rights reserved 

 

StyleSheet

iframe{position:absolute;left:5;top:35;width:580;height:300;z-index:2}
.bordrClass{position:absolute; visibility:visible;z-index:1; 
left:40; top:5;width:610; height:385;border-style:ridge;
border-width: 8;border-color: #dc143c}

.wmClass{position:absolute; visibility:visible;top:120;left:450;
width:200;height:201;clip:rect(0 200 201 0);border:0;z-index:2;
background-image:url("../../shared/yankee_s.gif") } 

.pageClass{ position:absolute; visibility:hidden;z-index:2; 
left:55; top:35;width:590;height:365; clip:rect(0 590 365 0);
font-weight:bold; padding:0}

.tabClass{position:absolute; z-index:3; top:10;visibility:hidden;
width:560;height:30; left:50;clip:rect(0 560 30 0)} 

.toolClass{position:absolute; z-index:3; visibility:hidden} 
#toolBox{top:410;left:50;width:500;height:35; clip:rect(0 500 35 0)} 
#nexter{top:370;left:550;width:120;height:30;clip:rect(0 120 30 0)}
#optins{top:40;left:560;width:80;height:30; clip:rect(0 80 30 0)} 

.innerClass{position:absolute; visibility:hidden;z-index:2;text-align:center;
background-color:#c0c0c0;vertical-align:middle;font-weight:bold;
top:40;left:10;width:400}

.reff{position:absolute; visibility:hidden;z-index:3;
vertical-align:middle; font-weight:bold;top:40;left:100;width:400;height:320;
clip:rect(0 400 320 0); background-color:#ffdead;padding:5 5 5 5;
border:ridge 2 #000080}

.inf{color:#006400;font-weight:800;text-decoration:underline}

.coverClass{position:absolute; visibility:hidden;z-index:2; 
left:46; top:35;width:600;height:360; clip:rect(0 600 360 0);
font-weight:bold; padding:6 10 10 20} 

.coverClass h3{padding:10} 
.coverClass p{padding:10}

---

HTML template

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"https://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>The Yankee Reader-November 1999</title>
<meta name="author" content="Areoka and the Carpenter's Cat" >
<meta name="status" content="workshop version" >
<meta name="description" content="A web application using scripted elements and events">

<link rel="stylesheet" type="text/css" href="../../ywEd/reader.css">
<script language="JavaScript" type="text/javascript" src="../../ywEd/reader.js"></script>

</head>

---

<body background="../../art/backpage.jpg" >

<div class="noClass" >
<h1>Welcome!</h1>
<noscript>
<h2>Egad!</h2>
<h2>You are not using scripts!</h2>
<p>No matter. It won't hurt to scroll down. 
</p>
<h2><a href="../../shared/sosorry.html">Click here for help</a></h2>
<h2><a href="../../default.htm">Click here to get out.</a></h2>
</noscript>
</div>

---

<!-- cover page -->
<div class="pageClass" id="page0" >
<h2 >Practical Internet Code</h2>
<h3 ><img align="left" src="../../art/malcolm.gif" border="0" width="100" height="113" 
alt="Malcolm." />
from the Yankee Webshop</h3>
<h3>November 1999</h3>
<h3 >New Code and Original Art by</h3>
<h3 >Areoka and the Carpenter's Cat </h3>
<p >Links:<br>
<a href="https://www.areoka.com/areoka.html">Areoka's World </a><br>
<a href="https://www.yankeeweb.com/webshop/welcome.htm">The Yankee Webshop</a><br>
<a href="../ywshono1.htm">This page without scripts or styles</a>
</p>
<p>
Back Issues of Practical Internet Code(coming soon)
</p>
</div>

---

<!-- Content this is where the changing content goes-->
<div class="pageClass" id="page1">
</div>
<div class="pageClass" id="page2">
</div>
<div class="pageClass" id="page3">
</div>
<div class="pageClass" id="page4">
</div>
<div class="pageClass" id="page5">
</div>
<div class="pageClass" id="page6">
</div>
<div class="pageClass" id="page7">
</div>
<!-- New pages are added easily. -->

---

<div class="pageClass" id="page8" >
<h3>Feedback- Send us Your Questions and Comments</h3>
<iframe id="formSrc" src="ywforum.htm"></iframe>
</div>
<div class="pageClass" id="page9">
<h3>Source Code</h3>
<iframe id="codeSrc" src="ywcss.htm">
</iframe>
</div>
<!-- Border for whole thing -->
<div class="bordrClass" id="bordr" >
<p class="stuff">&nbsp;
</p>
</div>
<!--watermark -->
<div class="wmClass" id="watermark">
<p class="stuff">&nbsp;
</p>
</div>
<!-- help and tips block-->
<div class="pageClass" id="info" >
<h3 >Help</h3>
<div class="innerClass" id="moInfo" >
</div>
</div>

<div class="noClass" id="noscrLast">
<noscript>
<h3>The Yankee Webshop Reader&reg;
<br>
created by Areoka and the Carpenter's Cat
<br>
at the Yankee Webshop 
<br>
November,1999 all rights reserved 
</h3>
 email :<a href="mailto:[email protected]">Send Email</a></h4>
</noscript>
</div>

---

<!-- the rest of the page are the control options for any document-->

<div id="optins" class="toolClass">
<form>
<input type="button" class="btn" name="optbtn" value="Options" onclick="shoOpts(this.value)">
</form>
</div>

<div id="tabBar" class="tabClass">
<form name="turner">
<input type="button" class="btn" name="btn0" value="Cover" onclick="turnPage(0)">
<input type="button" class="btn" name="btn1" value="Pg. 1" onclick="turnPage(1)">
<input type="button" class="btn" name="btn2" value="Pg. 2" onclick="turnPage(2)">
<input type="button" class="btn" name="btn3" value="Pg. 3" onclick="turnPage(3)">
<input type="button" class="btn" name="btn4" value="Pg. 4" onclick="turnPage(4)">
<input type="button" class="btn" name="btn5" value="Pg. 5" onclick="turnPage(5)">
<input type="button" class="btn" name="btn6" value="Pg. 6" onclick="turnPage(6)">
<input type="button" class="btn" name="btn7" value="Pg. 7" onclick="turnPage(7)">

</form>
</div>

<div class="toolClass" id="toolBox">
<form>
<input type="button" class="btn" name="optbtn1" value="Hide Tabs" onclick="shoOpts(this.value)" >
<input type="button" class="btn" name="btn8" value="Forum" onclick="turnPage(n2)">
<input type="button" class="btn" name="btn9" value="Code" onclick="turnPage(n1)">
<input type="button" class="btn" name="optbtn7" value="Resize" onclick="inform(4)">
<input type="button" class="btn" name="optbtn8" value="Hide" onclick="shoOpts(this.value)">
<input type="button" class="btn" name="optbtn4" value="Help" onclick="inform(3)" >
</form>
</div>



<div class="toolClass" id="nexter">
<form>
<input type="button" class="btn" name="bckbtn" value="Back" onclick="turnPage(pg-1,1)">
<input type="button" class="btn" name="nxtbtn" value="Next" onclick="turnPage(pg+1,2)">
</form>
</div>


</body>

</html>

Comments are welcome

 


Created: Dec. 2, 1999
Revised: Dec. 7, 1999

URL: https://webreference.com/dev/friendly/