Javascript Menus: Part 2, set up

Fillmenu function

The function, which is getting all the data from the html code is the "FillMenu" function. We first write all the variables, which we need. "ecn" is the identifier for the canvas class like the classname "munit" followed by the number of canvases "ecnlgth" and a unique id for the variable. We declare the variables as arrays, since we use a for loop to go through all canvases. "txn" is only used for menus, which have separate text divs (I come to that later). "subid" is the variable for the unique id of a menubar and "ih" is the variable for a new instance of the "Imgchange" function. "imgarray" holds the names for all the images.

var FillMenu = function (classname, uniqueid, imgpath, imgwidth, imgheight, textclass=null, colover=null)
{
	var ecn = document.getElementsByClassName(classname);
	var ecnlgth = ecn.length;
	var ecnid = [];
	var contxtid = [];
	var txn = document.getElementsByClassName(textclass);
	var subid = [];
	var ih = [];
	var imgarray = new Array();
    

Next we loop through the canvases, in the present case only two, and fill the variables. We get all canvases ("ecnid[ii]") and then get the drawing methods with the "contxtid[ii]" variables. Further we need the names for the images, which are a substring of the canvas id and are held by the "subid[ii]" variables. In the following "if" statement it is differentiated between the two different types of menus. In both cases new instances of the "Imgchange" function are created. Then we fill the imgarray array with the names and path for the images. Once the end of the for loop is reached we create the initial menu ("InitialMenu"), which will show up and depending on whether we want to show the clicked state of a menubar.

	for(var ii = 0; ii < ecnlgth; ii++)
	{
		ecnid[ii] = document.getElementById(ecn[ii].getAttribute("id"));
		contxtid[ii] = ecnid[ii].getContext("2d");
		subid[ii] = ecn[ii].getAttribute("id").substring (uniqueid.length, ecnid[ii].length);
		
		if (textclass != null && colover != null)
		{
			ih[ii] = new Imgchange (ecnid[ii], contxtid[ii], imgpath + subid[ii] + "click.png", imgpath + subid[ii] + 		"over.png", imgpath + subid[ii] + "normal.png", imgwidth, imgheight, txn[ii], colover);
		}
		else
		{
			ih[ii] = new Imgchange (ecnid[ii], contxtid[ii], imgpath + subid[ii] + "click.png", imgpath + subid[ii] + 		"over.png", imgpath + subid[ii] + "normal.png", imgwidth, imgheight);
		}
		imgarray.push ({img: subid[ii] + "normal.png", idpage: subid[ii] + "click.png", imggetid: ecnid[ii], contx: contxtid[ii]});
		
		if (imgarray.length >= ecnlgth)
		{
			InitialMenu (imgarray, imgpath, imgwidth, imgheight);
		}
	}
}
	

The "InitialMenu" function for the initial menu

In this function the initial images are drawn. So instances of the Image function are created and using the "drawImage" function images are drawn. This is done using a loop. However, we are not using a for loop but use the setInterval function. The reason is that the time in a for loop to get an image is not enough. But in a setInterval function we can extend this time. Here I have chose 500 milliseconds, but much less works also fine. Once the array has reached its end, we clear the function using clearInterval.

var InitialMenu = function (iarray, imgpath, iwidth, iheight)
{
	var imgclicked = [];
	var imgsmenu = [];
	var initarray = iarray;
	var imgwidth = iwidth;
	var imgheight = iheight;
	var timer = 0;
	var a = 0;
	
	// looping through the array
	function iload()
	{
		// creating new image
		imgsmenu[a] = new Image();
		
		// loading alternate image for clicked page
		imgclicked[a] = initarray[a]["imggetid"];
		
		// differentiating canvases with the idpage name and those lacking them.
		if(imgclicked[a].getAttribute("name") == "idpage")
		{
			imgsmenu[a].src = imgpath + initarray[a]["idpage"];
		}
		else
		{
			imgsmenu[a].src = imgpath + initarray[a]["img"];
		}
		
		if (imgsmenu[a].complete) 
		{
			// drawing images when page loads
			initarray[a]["contx"].drawImage(imgsmenu[a], 0, 0, imgwidth, imgheight);
		} 
		else 
		{
    		imgsmenu[a].onload = function () 
    		{
    			// drawing images when page loads
				initarray[a]["contx"].drawImage(this, 0, 0, imgwidth, imgheight);
			}
		}
		a++;
		if(a >= initarray.length)
		{
			clearInterval(timer);
		}
	}
	timer = setInterval (iload, 500, initarray);
}
    

In the next section I will present the code to draw images with fading depending on the mouse event.