Hey, not worked on this for a while. Anyone got any suggestions on any code I should change to make it more optimized.
Here is a link to the page:
http://martynleeball.comze.com/discount_koi/
And the code for the main page
PHP Code:
<html>
<head>
<title>Discount Koi Aquatics</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
function init() {
addEvent(document.getElementById('reptiles'), "mouseover", fadeinById);
addEvent(document.getElementById('birds'), "mouseover", fadeinById);
addEvent(document.getElementById('fish'), "mouseover", fadeinById);
addEvent(document.getElementById('mammals'), "mouseover", fadeinById);
addEvent(document.getElementById('utilities'), "mouseover", fadeinById);
addEvent(document.getElementById('reptiles'), "mouseout", fadeoutById);
addEvent(document.getElementById('birds'), "mouseout", fadeoutById);
addEvent(document.getElementById('fish'), "mouseout", fadeoutById);
addEvent(document.getElementById('mammals'), "mouseout", fadeoutById);
addEvent(document.getElementById('utilities'), "mouseout", fadeoutById);
}
//Attach listeners on page load, must be below listener calls.
addEvent(window,"load",init);
//This function attaches events to elements.
function addEvent( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
function fadeinById(e) {
//handle listener
e = e || event;
obj = e.target || e.srcElement;
var fade_id = "tint_" + obj.id;
var fade_counter = 80;
var fade_to = 0;
fade_in(fade_id, fade_counter, fade_to);
}
function fadeoutById(e) {
//handle listener
e = e || event;
obj = e.target || e.srcElement;
var fade_id = "tint_" + obj.id;
var fade_counter = 0;
var fade_to = 80;
fade_out(fade_id, fade_counter, fade_to);
}
var fadeBy = 10; //Amount to fade by
var fadeTime = 50; //Time in milliseconds to fade
function fade_in(obj, fdCoun, fdTo) {
var div = document.getElementById(obj);
fdCoun -= fadeBy;
div.style.filter = "alpha(opacity=" + fdCoun + ")"; //Fade (IE)
div.style.opacity = fdCoun / 100;
if ( fdCoun > fdTo ) {
setTimeout( "fade_in('" + obj + "', " + fdCoun + ", " + fdTo + ")", fadeTime );
}
}
function fade_out(obj, fdCoun_o, fdTo_o) {
var div = document.getElementById(obj);
fdCoun_o += fadeBy;
div.style.filter = "alpha(opacity=" + fdCoun_o + ")"; //Fade (IE)
div.style.opacity = fdCoun_o / 100;
if ( fdCoun_o < fdTo_o ) {
setTimeout( "fade_out('" + obj + "', " + fdCoun_o+ ", " + fdTo_o + ")", fadeTime );
}
}
var max_slide = 32;
var slide_by = 1;
var slide_time = 30;
var menu_hidden = 0;
function hide_nav(contentToload, slide_count, title) {
//Create global variable to say which menu was clicked
window.page_cat = title;
//Navigation div ID and content container
var nav_id = "main_nav";
var content_cont = "content_container";
var div = document.getElementById(nav_id);
//Display menu again once hidden
if (menu_hidden == 1) {
//Hide other crap first
document.getElementById("content_container").style.display = "none";
document.getElementById("show_menu").style.display = "none";
//Now reveal the menu
document.getElementById("main_nav").style.display = "block";
slide_count -= slide_by;
div.style.marginTop = "-" + slide_count + "em";
if (slide_count != 0) {
setTimeout( "hide_nav('" + contentToload + "', " + slide_count + ", '" + title + "')", slide_time);
} else {
//Hide everything except logo and menu
//alert("finished: menu displayed");
menu_hidden = 0;
}
//Menu is not hidden, hide it
} else {
//Check that variable exists first
if (slide_count == null) {
var slide_count = 0;
}
slide_count += slide_by;
div.style.marginTop = "-" + slide_count + "em";
if (slide_count < max_slide) {
setTimeout( "hide_nav('" + contentToload + "', " + slide_count + ", '" + title + "')", slide_time);
} else {
//alert("done");
//Now load the next content
load_content(contentToload);
//Display main content and button to display menu again
//First check that HTML has been loaded
document.getElementById("content_container").style.display = "inline";
document.getElementById("show_menu").style.display = "inline";
fade_out("content_container", 0, 100);
fade_out("show_menu", 0, 100);
//Menu is hidden, make sure it is
menu_hidden = 1;
document.getElementById("main_nav").style.display = "none";
}
}
}
function load_content(page) {
var contentCon_id = "content_container";
//Get the object
var xmlhttp = ajaxObject();
//Fetch HTML
xmlhttp.open("GET",page + "?page=" + page_cat, true);
xmlhttp.send();
//Change div content when loading
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(contentCon_id).innerHTML = xmlhttp.responseText;
} else if (xmlhttp.status == 404) {
document.getElementById(contentCon_id).innerHTML = "Page not found... Please contact the administrator!";
} else if (xmlhttp.readyState == 3) {
document.getElementById(contentCon_id).innerHTML = "Loading...";
}
}
}
function ajaxObject() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
return xmlhttp;
//Code for Firefox, Chrome ect... so modern browsers
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
//Code for IE6, IE5
return xmlhttp;
}
}
</script>
</head>
<body>
<div class="main_nav" id="main_nav">
<?php
//Create navigation HTML from XML
$xmlDoc = new DOMDocument();
$xmlDoc -> load("xml/homepage.xml");
//Level 1
$menu_level = $xmlDoc->getElementsByTagName('menu_item');
//Make variables
$list = array();
foreach ($menu_level as $item) {
$x = array();
if($item->childNodes->length) {
foreach($item->childNodes as $i) {
$x[$i -> nodeName] = $i->nodeValue;
}
}
$list[] = $x;
}
for ($g=0; $g < count($list); $g++) {
echo "<div class=\"nav_img\" style=\"background-image:url('".$list[$g]['image']."');\">";
echo "<div class=\"black_tint\" id=\"tint_".$list[$g]['name']."\"></div>";
echo "<a href=\"#\" class=\"nav_url_u\" onClick=\"hide_nav('".$list[$g]['pageLoad']."', '', '".$list[$g]['name']."')\">";
echo "<div class=\"nav_url ".$list[$g]['color']."\" id=\"".$list[$g]['name']."\">".$list[$g]['text']."</div>";
echo "</a>";
echo "</div>";
}
?>
</div>
<div class="show_menu" onClick="hide_nav('uh', '32')" id="show_menu"><span class="show_menu_arrow"></span> Show Menu</div>
<div class="content_container loading" id="content_container">Loading...</div>
<div class="logo_container">
<img src="images/koi.png">
<h1>DiscountKoi</h1>
<h2>Aquatics - Reptiles - Birds - Mammels</h2>
</div>
</body>
</html>
homepage.xml
Code:
<?xml version="1.0"?>
<menu>
<menu_item>
<name>reptiles</name>
<image>images/snake.gif</image>
<text>Reptiles</text>
<color>green</color>
<pageLoad>pages/categorise.php</pageLoad>
</menu_item>
<menu_item>
<name>birds</name>
<image>images/bird.gif</image>
<text>Birds</text>
<color>red</color>
<pageLoad>pages/categorise.php</pageLoad>
</menu_item>
<menu_item>
<name>fish</name>
<image>images/fish.gif</image>
<text>Fish</text>
<color>blue</color>
<pageLoad>pages/categorise.php</pageLoad>
</menu_item>
<menu_item>
<name>mammals</name>
<image>images/hamster.gif</image>
<text>Mammals</text>
<color>orange</color>
<pageLoad>pages/categorise.php</pageLoad>
</menu_item>
<menu_item>
<name>utilities</name>
<image>images/utilities.gif</image>
<text>Utilities</text>
<color>white</color>
<pageLoad>pages/categorise.php</pageLoad>
</menu_item>
</menu>
catagorise/xml (empty atm)
Code:
<?xml version="1.0"?>
<categorize>
<reptiles>
</reptiles>
</categorize>