), and so far the general layout has some problems. I'll send the whole thing (so far) up online soon, but for now, here's my current list of problems. These are CSS and Javascript so far, as I haven't gotten around to making the PHP backbone yet. 1) I'm creating a recoloring feature that lets you recolor the whole site with the touch of a button on the top-right, with a choice of several color schemes. It uses the pixastic library for javascript-powered image recoloration, and for the rest of the website just switches between CSS files. I have it so that it changes on mouseover and changes back on mouseout, but I'm planning to make it permanent by actually clicking on the icon. For this, I need it to create a cookie, and I seem to be having problems with that. My attempts at creating javascript cookies seem to be failing. Here's what I use as the generic javascript cookie code:
Code
function setCookie(name, value, date){
document.cookie = name + "=" + escape(value) + ";expires=" + date;
}
function getCookie(name){
if(document.cookie.length > 0){
startC = document.cookie.indexOf(name+"=");
if(startC != -1){
startC += name.length+1;
endC = document.cookie.indexOf(";",startC);
if (endC == -1) endC = document.cookie.length;
return unescape(document.cookie.substring(startC,endC));
}
}
return null;
}
function delCookie(name){
if (getCookie(name)){
document.cookie = name + "=" + ";expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
document.cookie = name + "=" + escape(value) + ";expires=" + date;
}
function getCookie(name){
if(document.cookie.length > 0){
startC = document.cookie.indexOf(name+"=");
if(startC != -1){
startC += name.length+1;
endC = document.cookie.indexOf(";",startC);
if (endC == -1) endC = document.cookie.length;
return unescape(document.cookie.substring(startC,endC));
}
}
return null;
}
function delCookie(name){
if (getCookie(name)){
document.cookie = name + "=" + ";expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
And here's the current implementation:
Code
function setskin(x,y,z,linkz){
setCookie('skin', x+'|'+y+'|'+z+'|'+linkz, 'Thu, 01-Jan-70 00:00:01 GMT');
}
setCookie('skin', x+'|'+y+'|'+z+'|'+linkz, 'Thu, 01-Jan-70 00:00:01 GMT');
}
The function is executed onClick. I can do it directly, but I'm keeping it open if I need to add to it. Anyway, this doesn't set the cookie; nothing works, and I haven't found it with the cookie search in Chrome.
2) The recoloration library doesn't seem to work with background images, so instead I made it a full image in the banner-area DIV, made it unselectable, and am now trying to stop it from stretching the div to its full 2560 pixels. Theoretically, overflow:hidden should do it, but I haven't been able to get it to work.
3) This part should be rather simple, but... yeah. the layout is banner, two side-panels below the banner as well as a main content area (one for navigation, one for a probably shoutbox or something) and a footer below everything. My current problem is limiting it so that unless something stretches the whole thing, all of this fits on one screen and doesn't go below (so, 92px banner area, 100px footer area, and a 100% - 192 nav/main height). Otherwise, all of the three divs housing the two side panels and the main content area are stretched, and the footer is below them. Here's my current body:
Code
<body onload="loaded();">
<div style="width: 100%; height: 92; overflow:hidden; margin: -8px;">
<div style="height:17px; position:relative; z-index:1;">
<div style="position:absolute; right: 100px; top: 1px;">
<img src = "../Images/red-white.png" onMouseOver="adjusthue(120,0,0,'../Libraries/red.css')" onMouseOut="readjusthue(-120,0,0,'../Libraries/purp.css')" onClick="setskin(120,0,0,'../Libraries/red.css')" />
<img src = "../Images/green-white.png" onMouseOver="adjusthue(-140,0,-20,'../Libraries/green.css')" onMouseOut="readjusthue(140,0,20,'../Libraries/purp.css')" onClick="setskin(-140,0,-20,'../Libraries/green.css')" />
</div>
</div>
<img src="../Images/Banner.png" class = "unselectable" style="position:absolute; z-index:0;" id="banner" />
<div style="width:400px; height:70; margin: 0 auto; position:relative; clear:both; z-index:1;">
<img src="../Images/Banner-Text.png" class="unselectable" style="position:relative; margin: 3px;" id="bantext" />
</div>
</div>
<div style="top:92px; width: 200px; height: 100%; position:absolute; margin-left:-8; margin-bottom:100px;" class="nav">
Navigation
</div>
<div style="top:92px; position:absolute; left: 200px; margin-bottom: 100px">
blah blah content
</div>
<div style="top:92px; position:absolute; width: 200px; right:0px; height:100%;margin-bottom: 100px;" class="extra">Shoutbox and stuff.</div>
<div style="position:absolute; left: 0px; width: 100%; height: 100px; bottom:0px;" class = "footer">Footer and stuff.</div>
</body>
<div style="width: 100%; height: 92; overflow:hidden; margin: -8px;">
<div style="height:17px; position:relative; z-index:1;">
<div style="position:absolute; right: 100px; top: 1px;">
<img src = "../Images/red-white.png" onMouseOver="adjusthue(120,0,0,'../Libraries/red.css')" onMouseOut="readjusthue(-120,0,0,'../Libraries/purp.css')" onClick="setskin(120,0,0,'../Libraries/red.css')" />
<img src = "../Images/green-white.png" onMouseOver="adjusthue(-140,0,-20,'../Libraries/green.css')" onMouseOut="readjusthue(140,0,20,'../Libraries/purp.css')" onClick="setskin(-140,0,-20,'../Libraries/green.css')" />
</div>
</div>
<img src="../Images/Banner.png" class = "unselectable" style="position:absolute; z-index:0;" id="banner" />
<div style="width:400px; height:70; margin: 0 auto; position:relative; clear:both; z-index:1;">
<img src="../Images/Banner-Text.png" class="unselectable" style="position:relative; margin: 3px;" id="bantext" />
</div>
</div>
<div style="top:92px; width: 200px; height: 100%; position:absolute; margin-left:-8; margin-bottom:100px;" class="nav">
Navigation
</div>
<div style="top:92px; position:absolute; left: 200px; margin-bottom: 100px">
blah blah content
</div>
<div style="top:92px; position:absolute; width: 200px; right:0px; height:100%;margin-bottom: 100px;" class="extra">Shoutbox and stuff.</div>
<div style="position:absolute; left: 0px; width: 100%; height: 100px; bottom:0px;" class = "footer">Footer and stuff.</div>
</body>
Again, I'll bring it online in a few hours. Well, I'll try. Not sure if my hosting still works, actually.
Thanks in advance.
None.
