www.webdeveloper.com
Results 1 to 6 of 6

Thread: DOM Checks with javascript...

  1. #1
    Join Date
    Dec 2007
    Posts
    18

    DOM Checks with javascript...

    I have a script that I wrote and it works great in FF, IE7, Opera, Safari, Chrome, but get's a little stuck in IE6.

    Now, I've wrote the script so it's degrades gracefully, so if a user has javascript off the page can still function properly. The only thing I want to do is figure out how to check all the DOM events that I used in my script to see if their browser is capable of carrying out those events, if not I want the script to stop and not be used, I've tried quirksmode.org's method of

    if (!document.getElementById) return false;
    if (!document.setAttribute) return false;
    etc...

    But I want a way to check everything right in the beginning so right at the start of the script, it knows if it can run all of the script or not, and it will stop the script if it can't and will just run the page as gracefully degraded.

    Any ideas?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  3. #3
    Join Date
    Dec 2007
    Posts
    18
    Sorry about that...here's the code....

    Code:
    var regions = new Array(
    	"cent_amer",
    	"north_amer",
    	"south_amer",
    	"sub_saharan",
    	"europe",
    	"fert_cres",
    	"himalayas",
    	"south_asia",
    	"placeholder"
    );
    
    function hide_all() {
    	
    	for (i=0; i<regions.length; i++) {
    		var region = document.getElementById(regions[i]);
    		
    		if (region.id == "placeholder") {
    			region.setAttribute("class","");
    		}
    		
    		else {
    			region.setAttribute("class","hide_me");	
    		}
    	}
    }
    
    function set_areas() {
    	//DOM Checks...
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	
    	var areas = document.getElementsByTagName("area");
    	
    	for (i=0; i<areas.length; i++) {
    		
    		areas[i].setAttribute("title","");
    		
    		areas[i].onclick = function () {
    			clicked_area(this);
    			return false;
    		}
    		
    		areas[i].onmouseover = function (e) {
    			tool_tip(this);
    			find_mouse(e);
    		}
    		
    		areas[i].onmouseout = function () {
    			tip_para = document.getElementById("tool").innerHTML = "";
    			tool_div = document.getElementById("tip_show");
    			tool_div.setAttribute("id","tip");
    		}
    	}
    }
    
    function clicked_area(reg_selected) {
    	//DOM Checks...
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	
    	var anchor_tag = reg_selected.getAttribute("href");
    	var split_anchor = anchor_tag.split("#");
    	var anchor_ref = split_anchor[1];
    	
    	for (i=0; i<regions.length; i++) {
    		var region = document.getElementById(regions[i]);
    		var region_id = region.id;
    		
    		if (region_id == anchor_ref) {	
    			region.setAttribute("class","");
    		}
    		
    		else {
    			region.setAttribute("class","hide_me");
    		}
    	}
    }
    
    function prepare_tip() {
    	tip_ele = document.getElementById("tip");
    	tip_p = document.createElement("p");
    	tip_p.setAttribute("id","tool");
    	tip_ele.appendChild(tip_p);
    }
    
    function tool_tip(over_area) {
    	//DOM Checks...
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	
    	tip_para = document.getElementById("tool");
    	area_id = over_area.getAttribute("id"); 	
    	title_text = document.createTextNode(area_id);
    	tip_para.appendChild(title_text);
    	tool_div = document.getElementById("tip");
    	tool_div.setAttribute("id","tip_show");
    }	
    
    function find_mouse(e) {
    	//DOM Checks...
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	
    	var posx = 0;
    	var posy = 0;
    	if (!e) var e = window.event;
    		if (e.pageX || e.pageY) 	{
    			posx = e.pageX;
    			posy = e.pageY;
    		}
    		else if (e.clientX || e.clientY) 	{
    			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    		}
    
    	posx = posx + 10;
    	posy = posy + 10;
    	tool_div = document.getElementById("tip_show");
    	tool_div.style.top = posy + "px";
    	tool_div.style.left = posx + "px";	
    }	
    
    window.onload = function() {
    	prepare_tip();
    	hide_all();
    	set_areas();
    }
    Now I want to be able to run checks on browser events for the entire script so the script can see if the browser is capable of running the entire thing.

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Just call this function and pass it an event object:
    Code:
    function supportsEvents(e) {
      if (supportsEvents.supported === null) {
        if ( ( typeof(e.pageX) == "number" && typeof(e.pageY) == "number" ) || ( typeof(e.clientX) == "number" && typeof(e.clientY) == "number" ) ) {
          supportsEvents.supported = true;
        } else {
          supportsEvents.supported = false;
        }
      }
      return supportsEvents.supported;
    }
    supportsEvents.supported = null;
    To use:
    Code:
    if (!e) var e = window.event;
    if ( !supportsEvents(e) ) {
      return false;
    }

  5. #5
    Join Date
    Feb 2006
    Posts
    2,926
    By the way, document.setAttribute returns undefined in IE,Safari,Firefox,Opera and chrome...setAttribute is defined on elements, not documents. You could try

    if(document.body.setAttribute)

  6. #6
    Join Date
    Dec 2007
    Posts
    18
    Okay, I understand what mrhoo is saying, but I am not sure how the code that toicontien provided will help. If I am understanding that code right, that's checking the mouses x any y variables to make sure they are numbers, and that's not what I wanted.

    Am I understanding that right, toicontien?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles