SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: DOM's

Hybrid View

  1. #1
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM's

    Hi,
    I am trying to re-write my dropdown menu script (JavaScript), so it works with netscape 6, IE6 and so on. I was just wondering if anyone could save me some time and show me where to get some kind of DOM model for the above browsers and any other browser you can think of (opera, earlier versions of Netscape and IE).

    Thanks
    Atirez

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Atirez,

    IE5.5+ & NN6+ use document.getElementById

    if (document.getElementById)
    document.getElementById(divID).innerHTML = something;
    else if (document.all)
    document.all[divID].innerHTML = something;
    else if (document.layers) //nn4+
    {
    document.layers[divID].document.open();
    document.layers[divID].document.write(something);
    document.layers[divID].document.close();
    }

    if interested see the "dHTML: an Introduction" script/tutorial at my site (GrassBlade) and the Ryan article on dHTML at: http://www.pageresource.com

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help,
    but what I really need is a reference to all the objects and their child elements and objects for most if not all new and old browsers. I have had a look on the Microsoft and Netscape websites but its like searching for a needle in a haystack.

    I now need it more than ever as I have just found a little problem with my rollOvers in netscape 4.7 as it doesnt allow you access to the images contained in layers from the main document object, without having to go document.layers['myLayer'].document.images[]. I am struggling mostly with getting a reference to an image in a layer, then getting its parent layers id or name. So that I can perform the roll over as normal.

    My script allows multiple roll overs on one mouse over and this presents another problem as I cant pass a reference to an image that isnt calling the function nor will this then allow me to get that images layer id or name, if it is not contained in the same layer: .... if that makes any sense.

    My roll over script
    Code:
    <!--
    // RollOver Images and Preloader
    // By Barry Jones
    // Version: 1.1
    
    d 		= 	window.document;
    d.preload 	= 	new Array();
    var oldName 	= 	new Array();
    var pictureSrc;
    var oldSrc 	= 	new Array();
    var tempName;
    var count;
    
    
    // Check if we are in NS4.7 or lower if so no rollovers
    // in layers can take place
    
    // Creates an array to hold all of the pre-loaded images
    //
    // You pass path information into this function, this can
    // be a relative path:
    //	e.g.
    //	getImages('images/myImage.gif','images/anotherImage.gif')
    //
    // There is no function limit on the amount of images you can preload
    // on one document.
    //
    function getImages()
    {
    		
    	// Check if the document actually contains images.
    	if (d.images)
    	{
    		// If preload function does not exist
    		// create it.
    		if (!d.preload)
    		{
    			d.preload = new Array();
    		}
    		
    		// Declare variables
    		var i;
    		var j 		= 	d.preload.length;
    		var args 	= 	getImages.arguments;
    
    		// for each of the images in the arguments,
    		// create a new Image() type and place the
    		// src arg into it.
    		for (i=0; i<args.length; i++)
    		{
    			d.preload[j] = new Image();
    			d.preload[j].src = args[i];
    			j++;
    		}
    	}
    }
    
    
    // RollOver function, this can handle multiple rollovers, just pass
    // the image name and the new image path to be placed into the image
    // holder.
    //
    //	e.g.
    //	rollOver('thisImage','images/myImage.gif','thatImage','images/anotherImage.gif')
    //
    function rollOver()
    {		
    	printObject(document.layers["baseLayer"].document.images);
    	
    	alert(this.document.images.length);
    	
    	// Declare local variables
      	var count 	= 	0;
      	var i		=	0;	
      	
      	for (i = 0; i < rollOver.arguments.length; i++)
      	{
    		// hold old names for rollOut function
    		oldName[count] = rollOver.arguments[i];
    		tempName = rollOver.arguments[i];
    
    		// get the src from the arguments
    		i++;
    		oldSrc[count] = d.images[tempName].src;
    
    		// swap the image
    		d.images[tempName].src = rollOver.arguments[i];
    		count++;
      	}
    }
    
    
    function rollOut()
    {
    	// Local variable decleration
    	var i		=	0;
    	
    	for (i = 0; i < oldName.length; i++)
    	{
    		// get the first image space from the array
    		name = oldName[i];
    		d.images[name].src = oldSrc[i];
      	}
    }
    //-->
    my Drop down menu code
    ----------------------
    Code:
    <!--
    // Declare variables ---------------------------------------------
    var activeMenu; 
    var timerID;
    var type 		= 	new String();
    var layer 		= 	new String();
    var style 		= 	new String();
    var n 			= 	new String();
    var seconds 		= 	1000; 		// number in milliseconds before menu disapears
    var timerRunning 	= 	"false";
    var menuSupported	= 	"false";
    var useAge 		= 	navigator.userAgent;
    
    // Set the layer and style attributes with a browser check.
    if(navigator.appName == "Netscape")
    {
    
    	if(useAge.indexOf("4.7") != -1)
    	{
    		layer="document.layers";
    		style="";
    	}
    	else if(useAge.indexOf("Netscape6/") != -1)
    	{
    		alert("Version 6.01");
    	}
    	else
    	{
    		alert("Unknown Version");
    	}
    }
    else if(navigator.appName == "Microsoft Internet Explorer")
    {
    	// Internet Explorer version can be identified by checking
    	// the indexOf with the following text:
    	//	MSIE 4.0
    	//	MSIE 5.0
    	// 	MSIE 5.5
    	
    	// Setup the style and layer reference variables
    	layer="document.all";
    	style=".style";
    }
    else
    {
    	alert("Unknown Browser");
    }
    
    // Change menu visible called by mouseOver in HTML
    function menuVis(layerRef)
    {
    
    	// If activeMenu is null then no menu is currently visible, so
    	// do not call the menuHide or timer functions.
    	if(activeMenu != null)
    	{
    		menuHide(activeMenu);
    		clearTimeout(layerRef);
    		timerRunning = "false";
    	}	
    	
    	// If "None" is passed through on layerRef then the user just
    	// wants to hide any current menus and not display any new ones.
    	//  So set activeMenu to null to show the rest of the application
    	// that no menu is currently visible. Then exit the function.
    	if(layerRef == "None")
    	{
    		activeMenu = null;
    	}
    	else
    	{
    		eval(layer + '["' + layerRef + '"]' + style + '.visibility = "visible"');
    		activeMenu = layerRef;
    	}
    }
    
    
    
    // Change hides the activeMenu
    function menuHide(layerRef)
    {
    	// Hide the layer passed through on layerRef.
    	eval(layer + '["' + layerRef + '"]' + style + '.visibility = "hidden"');
    }
    
    
    
    // Clock function called my mouseOut in HTML
    function startClock(layerRef)
    {	
    	menuName = layerRef;
    	timerRunning = "true";
    	timerID = setTimeout("menuHide(menuName)", seconds);
    	return timerID;
    }
    
    
    
    
    // MENU'S - Array's for the menu's.
    // -----------------------------------------------------------------
    
    // Menu item Builder
    function menuItem(text, src, imgNorm, imgOver, arr){
    
    	this.text = text;
    	this.src = src;
    	this.imgNorm = imgNorm;
    	this.imgOver = imgOver;
    }
    
    
    
    // menuItem('name of link','the destination URL', 'normal image state', 'over image state')
    lyrPortfolio = new Array();
    lyrPortfolio[0] = new menuItem("About Me","#", "assets/portAboutMe.gif", "assets/portAboutMeO.gif");
    lyrPortfolio[1] = new menuItem("Qualifications","#", "assets/portQuals.gif", "assets/portQualsO.gif");
    lyrPortfolio[2] = new menuItem("Test Link 2","", "assets/portWebMenuB.gif", "assets/layerOverNosub.gif");
    lyrPortfolio[3] = new menuItem("Test Link 3","#", "assets/portOldport1.gif", "assets/portOldport1O.gif");
    lyrPortfolio[4] = new menuItem("Test Link 4","#", "assets/portOldport2.gif", "assets/portOldport2O.gif");
    lyrPortfolio[5] = new menuItem("Test Link 4","#", "assets/portLIST.gif", "assets/portLISTO.gif");
    lyrPortfolio[6] = new menuItem("Test Link 4","#", "assets/portDesign.gif", "assets/portDesignO.gif");
    lyrPortfolio[7] = new menuItem("Test Link 4","#", "assets/portDrax.gif", "assets/portDraxO.gif");
    
    lyrScripts = new Array();
    lyrScripts[0] = new menuItem("Link","", "assets/scriptJSMenuB.gif", "assets/layerOverNosub.gif");
    lyrScripts[1] = new menuItem("Link","#", "assets/scriptRollOver.gif", "assets/scriptRollOverO.gif");
    lyrScripts[2] = new menuItem("Link","#", "assets/scriptDDM.gif", "assets/scriptDDMO.gif");
    
    lyrApps = new Array();
    lyrApps[0] = new menuItem("Link","", "assets/appsWebMenuB.gif", "assets/layerOverNosub.gif");
    lyrApps[1] = new menuItem("Link","#", "assets/appsCC.gif", "assets/appsCCO.gif");
    lyrApps[2] = new menuItem("Link","", "assets/appsNetworkMMenuB.gif", "assets/appsCCO.gif");
    lyrApps[3] = new menuItem("Link","#", "assets/appsDriveMan.gif", "assets/appsDriveManO.gif");
    
    
    
    // MENU BUILDER --- Be carefull changing this part of the script
    // -----------------------------------------------------------------
    // This part builds the layers that act as the drop down menu's.
    function buildMenu(name){
    var j = eval(name + ".length");
    	n = "";
    	n = "<Div name=\"" + name + "\" id=\"" + name + "\" onMouseOut=\"startClock('" + name + "')\" onMouseOver='clearTimeout(timerID)'>\n";
    	n += "  <table cellpadding='0' cellspacing='0' border='0' width='100' id='" + name + "Tab'>\n";
    	for (var  i = 0;i < j; i++){
    		n += "    <tr>\n";
    		n += "      <td>";
    		
    		// Check if there is a link, if not do not place inside <a> tags.
    		if(eval(name + "[" + i + "]" + ".src") != "")
    		{
    			n += "<a href='" + eval(name + "[" + i + "]" + ".src") + "' onMouseOver=\"rollOver('" + name + i + "','" + eval(name + "[" + i + "]" + ".imgOver") + "')\" onMouseOut='rollOut()''><img src='" + eval(name + "[" + i + "]" + ".imgNorm") + "' border='0' name='" + name + i + "'></a></td>\n";
    		}
    		else
    		{
    			n += "<img src='" + eval(name + "[" + i + "]" + ".imgNorm") + "' border='0' name='" + name + i + "'></a></td>\n";
    		}
    		
    		n += "    </tr>\n";
    		}
    	n += "  </table>\n";
    	n += "</Div>\n\n";
    	return n;
    }
    
    //-->
    Sorry about tehe large amount of code but any help here would be greatly appreciated. I have been trying to solve this problem for a day or so now and I now cant see for looking

    Thanks in advance
    Atirez


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •