Ik ben bezig met het opbouwen van een website en ik wou dit eens op een nieuwe manier doen.
Ik heb een pagina die index.php heet. Hieronder een kort stukje van deze pagina:
<html>
<head>
<title>DitIsDeDruppel</title>
<meta http-equiv="imagetoolbar" content="no"/>
<script language="javascript" src="js/client.js"></script>
<script language="javascript" src="js/general.js"></script>
<script language="javascript" src="js/form.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body onload="c.init();" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="50%" rowspan="2" class="bgleft">
</td>
<td valign="top" width="800">
<div id="page">
<div id="logo"><img src="img/logo.gif" width="474" height="225"/></div>
<div id="druppel"><img src="img/bg.jpg" width="600" height="500"/></div>
<div id="menu" class="intro">
<img src="img/menu_txt.gif" width="80" height="18"/>
<ol>
<li id="menu_intro"><a href="#" onClick="setClass('pages','intro');blur();return false;">Intro</a></li>
<li id="menu_join"><a href="#" onClick="setClass('pages','join');blur();return false;">Join</a></li>
<li id="menu_about"><a href="#" onClick="setClass('pages','about');blur();return false;">About the game</a></li>
<li id="menu_rules"><a href="#" onClick="setClass('pages','rules');blur();return false;">The Rules</a></li>
<li id="menu_people"><a href="#" onClick="setClass('pages','people');blur();return false;">Participants</a></li>
<li><a href="phpBB2">The Forum</a></li>
<li id="menu_vocab"><a href="#" onClick="setClass('pages','vocab');blur();return false;">Vocabulary</a></li>
</ol>
</div>
<div id="pages" class="intro">
<div id="intro" class="page">
<p style="color:white;">Hier staat een stuk tekst</p>
<p>Hier staat nog een stuk tekst</p>
<p>En hier vinden we nog een lap tekst</p>
</div>
<div id="people" class="page">
<p>
<ol style="margin-top:0px;">
<div style="margin-top:8px;position:relative;left:-20px;"><img src="img/txt.gif" width="327" height="15"/></div>
<li style="color:white;">Joost</li><li style="color:white;">Marcel</li> </ol>
</p>
</div>
:: Client.JS ::
var c = {
//base components
scriptversion:0.4,
system:'',
browser:'',
browserName:'',
version:0,
dynamic:false,
java:false,
cookies:false,
win_w:0,
win_h:0,
win_l:0,
win_t:0,
scr_w:0,
scr_h:0,
new_left:0,
new_top:0,
colorDepth:0,
init:function(report,doload){
this.checkSystem();
this.checkBrowser();
this.checkClientScreen();
this.checkClientWindow();
//this.checkObject(this);
if(this.dynamic)
document.body.attachEvent('onresize',this.checkClientWindow);
if(report){
window.status = 'client initialized';
window.setTimeout('window.status = "Done";',800)
}
if(doload){
window.doload();
}
},
checkSystem:function(){
var pl = navigator.platform.toLowerCase();
var pls = [{s:'win',pl:'Windows'},{s:'mac',pl:'Macintosh'},{s:'linux',pl:'Unix'},{s:'unix',pl:'Unix'},{s:'sun',pl:'Unix'}];
var system = 'Unknown';
for (var i=0; i<pls.length; i++)if(pl.indexOf(pls[i].s) != -1) system = pls[i].pl;
this.system = system;
},
checkBrowser:function(){
this.java = navigator.javaEnabled();
this.cookies = navigator.cookieEnabled;
var set = 0
var browsers = [
{s:'msie',br:'Internet Explorer',sh:'ie'},
{s:'netscape',br:'Netscape',sh:'nn'},
{s:'',br:'Netscape',sh:'nn'},
{s:'',br:'Mozilla',sh:'nn'},
{s:'firebird',br:'Mozilla Firebird',sh:'nn'},
{s:'konqueror',br:'Konqueror',sh:'??'},
{s:'opera',br:'Unix',sh:'??'},
{s:'skipstone',br:'SkipStone',sh:'nn'},
{s:'lynx',br:'Lynx',sh:'nn'},
{s:'links',br:'Links',sh:'nn'}];
var ua = navigator.userAgent.toLowerCase();
//exception 1
if(ua.indexOf('mozilla') != -1 && navigator.appName == 'Netscape') set = 2;
//exception 2
if(ua.indexOf('mozilla') != -1 && ua.indexOf('netscape') == -1 && ua.indexOf('gecko') != -1) set = 3;
for (var i=0; i<browsers.length; i++) if(ua.indexOf(browsers[i].s) != -1 && browsers[i].s != '') set = i;
this.browser = browsers[set].sh;
this.browserName = browsers[set].br;
var v = 'Unknown';
switch(this.browserName){
case 'Internet Explorer':
v = parseFloat((ua.substring(ua.indexOf('msie')+5).substring(0,4)));
break;
case 'Netscape':
if(ua.indexOf('netscape') != -1)
v = (ua.substring(ua.indexOf('netscape/')+9))*1;
else
v = (ua.substring(ua.indexOf('mozilla/')+8).substring(0,5))*1;
break;
case 'Mozilla':
v = (ua.substring(ua.indexOf('rv:')+3).substring(0,3))*1;
break;
case 'Mozilla Firebird':
v = (ua.substring(ua.indexOf('firebird/')+9).substring(0,3))*1;
break;
case 'Konqueror':
v = (ua.substring(ua.indexOf('konqueror/')+10).substring(0,1))*1;
break;
case 'opera':
v = (ua.substring(ua.indexOf('opera/')+7).substring(0,4))*1;
break;
}
this.version = v;
if(this.browser == 'ie' && this.version > 5) this.dynamic = true;
},
checkClientScreen:function(){
this.colorDepth = screen.colorDepth;
this.scr_w = self.screen.width;
this.scr_h = self.screen.height;
},
checkClientWindow:function(){
if(this.browser =='ie'){
this.win_w = document.body.clientWidth;
this.win_h = document.body.clientHeight;
}else{
this.win_w = innerWidth;
this.win_h = innerHeight;
}
if(this.browser =='ie'){
this.win_l = window.screenLeft;
this.win_t = window.screenTop;
}else{
this.win_l = window.screenX;
this.win_t = window.screenY;
}
//window.status = "width:"+this.win_w+",height:"+this.win_h;
return {width:this.win_w,height:this.win_h};
},
byId:function(id,child){
return (child == 0 || child > 0)?document.getElementById(id).childNodes[child]:document.getElementById(id);
},
checkObject:function(object){
this.checkClientWindow();
var str = '[client]:\n';
for (var name in object) if((object[name]+"").indexOf('function(') == -1) str += name+": "+object[name]+"\n";
alert(str);
}
//component:window opener
,
checkNewWindowPos:function(width,height){
this.new_left =this.win_l+(parseInt(this.win_w)/2) - width/2;
this.new_top = this.win_t+(parseInt(this.win_h)/2) - height/2;
},
newWindow:function(url,name,props,modal){
this.checkClientWindow();
/*
chosen coordinates are offset from window
!window is the visible page...
*/
this.checkNewWindowPos(props['w'],props['h']);
if(props['nt'] != null) this.new_top = (props['abs']?0:this.win_t) + props['nt'];
if(props['nl'] != null) this.new_left = (props['abs']?0:this.win_l) + props['nl'];
if(!modal){
var w = window.open(url, name, "top="+this.new_top+",left="+this.new_left+",height="+props['h']+", width="+props['w']+", status="+((props['st'])?'yes':'no')+", menubar="+((props['m'])?'yes':'no')+", toolbar="+((props['to'])?'yes':'no')+", titlebar="+((props['t'])?'yes':'no')+", resizable="+((props['r'])?'yes':'no')+", scrollbars="+((props['s'])?'yes':'no')+"");
w.focus();
}else{
var returnObject = window.showModalDialog(url, modal.data, "dialogleft:"+this.new_left+"px;dialogTop:"+this.new_top+"px;dialogWidth:"+props['w']+"px;dialogHeight:"+props['h']+"px; status:"+((props['st'])?1:0)+"; resizable:"+((props['r'])?'yes':'no')+"; scroll:"+((props['s'])?'yes':'no')+";");
modal.hnd(returnObject)
}
}
//component:image mouseover
,
imgOver:function(img){
img.src = img.src.substr(0,img.src.length-4)+"_o"+img.src.substr(img.src.length-4);
},
imgOut:function(img){
img.src = img.src.substr(0,img.src.length-6)+img.src.substr(img.src.length-4);
}
//component: form verifier (onsubmit="return c.checkForm(this)")
,
checkForm:function(form){
var str = '';
var send = true;
var lang = form.getAttribute('lang');
var langs = {
nl:['Let op!\n','Je bent de volgende velden vergeten in te vullen:\n\n','\nDeze velden zijn verplicht.'],
en:['Attention!\n','You have forgotten to fill in the following fields:\n\n','\nThese fields are required.']
}
str += langs[lang][0];
str += langs[lang][1];
oristr = str;
for (var i=0; i<form.elements.length; i++) {
var el = form.elements[i];
// document.getElementById('test').innerHTML += el.nodeName.toLowerCase()+"<br/>";
if(el.getAttribute('check')){
switch(el.nodeName.toLowerCase()){
case 'input':
case 'textarea':
if(el.value == '')
str += " - "+el.getAttribute('check')+"\n";
break;
case 'select':
if(el.value == el.getAttribute("default") && el.getAttribute("default"))
str += " - "+el.getAttribute('check')+"\n";
break
}
}
}
send = (str == oristr)?true:false;
if(!send){
str += langs[lang][2];
alert(str)
// document.getElementById('test').innerHTML += str.replace(/\n/g,"<br/>");
}
return send;
}
}
:: General.JS ::
function setClass(id,classname){
document.getElementById(id).className = classname;
if(id=='pages')
document.getElementById('menu').className = classname;
}
:: Onderwereld.JS ::
body {background-color:#a8a8a7;cursor:default;}
body, td {font-family:verdana;font-size:80%;}
#page {
width:800px;
height:100%;
padding:4px;
background-image:url('../img/bg_left.jpg');
background-repeat:repeat-x;
position:relative;
}
h4 {font-size:100%;font-weight:bold;color:white;;margin-bottom:0px;}
a {text-decoration:none;color:white}
a:hover {text-decoration:underline;}
#druppel {position:absolute;top:0px;right:0px;z-index:1;}
#logo {position:absolute;top:0px;left:0px;z-index:2;}
#menu {position:absolute;top:50px;left:520px;z-index:3;}
#menu ol{margin:0 0 0 40px;line-height:1.5em;font-weight:bold;}
#menu a {color:black;text-decoration:none;}
#menu a:hover {color:white;text-decoration:none;}
#menu.intro #menu_intro,
#menu.about #menu_about,
#menu.rules #menu_rules,
#menu.join #menu_join,
#menu.people #menu_people,
#menu.vocab #menu_vocab,
#menu.join_new #menu_join_new,
#menu.colofon #menu_colofon {color:white;;}
#footer {width:450;position:relative;z-index:100;bottom:0px;color:white;text-align:center;font-size:85%;margin:40 0 40 0px;}
#footer a {color:white;}
#footer a:hover {color:black;text-decoration:underline;}
.bgleft {
background-image:url('../img/bg_left.jpg');
background-repeat:repeat-x;
}
.bgright {
background-image:url('../img/bg_right.jpg');
background-repeat:repeat-x;
}
#pages {padding-left:15px;position:relative;z-index:100;margin-top:230px;}
.page {width:450px;color:black;font-weight:bold;line-height:1.5em;display:none;}
.page p {margin-top:0px;text-align:justify;}
#pages.intro #intro,
#pages.join #join,
#pages.about #about,
#pages.rules #rules,
#pages.people #people,
#pages.people #people,
#pages.vocab #vocab,
#pages.join_new #join_new,
#pages.bedankt #bedankt,
#pages.colofon #colofon {display:block;}
.formTable{
}
.formTable .label{
width:100px;
text-align:right;
}
Nou is het zo dat het dus niet werkt. Zodra ik bijv. people aanklik in het menu gebeurd er helemaal niets. Wat zit er niet goed in het script? In internet explorer krijg ik de foutmelding: Object wordt verwacht.
Alvast super bedankt!!!