Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Adding an External Stylesheet through Javascript / Ajax

    So Firefox will let me create an external style sheet reference and append it to the head once a response is received from an http request. IE however doesn't seem to take the style sheet instructions, though the DOM inspector does show that it has been appended to the document.

    Here is an example of the problem, just click the "Pricing" tab.

    http://www.rateprice.com/combo/pricefinal.asp

    This is the xml page I am requesting:
    http://www.rateprice.com/combo/pricing.asp

    Once the response is received, I append both the js and css files to the head of the document using this code:

    Code:
    function loadURL(xml,str){
    	var doc=xml.documentElement;
    	var content=toXHTML(doc.getElementsByTagName('div')[0]);
    	clearNodes(document.getElementById('pagecontent'));
    	document.getElementById('pagecontent').appendChild(content);
    	var c_styles=document.getElementsByTagName('link');
    	var len1=c_styles.length;
    	var n_styles=doc.getElementsByTagName('link');
    	var len2=n_styles.length;
    	for(var i=0;i<len2;i++){
    		var s1=n_styles[i];
    		var flg=0;
    		for(var j=0;j<len1;j++){
    			var s2=c_styles[j];
    			if(s2.getAttribute('href').toLowerCase()==s1.getAttribute('href').toLowerCase()){
    					s2.parentNode.replaceChild(toXHTML(s1),s2);
    					flg=1;
    			}
    		}
    		if(flg==0){
    			document.getElementsByTagName('head')[0].appendChild(toXHTML(s1));
    		}
    	}
    	var c_scripts=document.getElementsByTagName('script');
    	var len1=c_scripts.length;
    	var n_scripts=doc.getElementsByTagName('script');
    	var len2=n_scripts.length;
    	for(var i=0;i<len2;i++){
    		var s1=n_scripts[i];
    		var flg=0;
    		for(var j=0;j<len1;j++){
    			var s2=c_scripts[j];
    			if(s2.getAttribute('src').toLowerCase()==s1.getAttribute('src').toLowerCase()){
    					s2.parentNode.replaceChild(toXHTML(s1),s2);
    					flg=1;
    			}
    		}
    		if(flg==0){
    			document.getElementsByTagName('head')[0].appendChild(toXHTML(s1));
    		}
    	}
    }
    The javascript appended to the document goes off without a hitch in both browsers, however the css:

    Code:
    #pricingnav{
    	margin:0px;
    	padding:0px;
    	width:100%;
    	list-style:none;
    	height:18px;
    	margin-top:10px;
    }
    #pricingnav li{
    	float:left;
    	margin-left:15px;
    }
    #pricingnav li a{
    	display:block;
    	height:100%;
    	width:100%;
    	font-size:.8em;
    	background-color:#D6E7F7;
    	text-decoration:none;
    	text-align:center;
    	border:solid 1px;
    	padding:0px 5px 0px 5px;
    }
    Only takes effect in Firefox.


    Any suggestions on how to get the style sheet to take in IE7?

    Thanks,
    Basscyst
    Last edited by Basscyst; 10-23-2007 at 01:57 AM.
    Helping to build a bigger box. - Adam Matthews

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    All right, so if I just create a link element and give it the appropriate attributes, it does actually work in IE 7 as seen here:

    http://www.rateprice.com/combo/test2.asp

    So it seems there is something about the following code I wrote, which parses the XML into html that IE7 doesn't like when creating a link element.

    Its returning the proper node structure, but when I append the link node to the document it doesn't implement the CSS. Still only have this problem in IE. Anyone see anything that might screw with IE when appending the element to the head?

    Code:
    //********************************
    // Parses (x)html from an xml doc,
    // pass the top most element that should be parsed as 
    // (x)html
    //********************************
    function toXHTML(obj){
    	var div=document.createElement('div');
    	makeChild(obj,div);
    	function makeChild(src_xml,targ_html){
    		var new_html=transformXML(src_xml);
    		targ_html.appendChild(new_html);
    		var kids=src_xml.childNodes;
    		var len=kids.length;
    		for(var i=0;i<len;i++){
    			makeChild(kids[i],new_html);
    		}
    	}
    	return div.firstChild;
    }
    function transformXML(obj){
    	if(obj.nodeType==1){
    		var ie = (document.all && !window.opera)?1:0;
    		var flg=0;
    		if(ie){
    			if(obj.tagName.toLowerCase()=="input"){
    				if(obj.getAttribute('type').toLowerCase()=="radio"||obj.getAttribute('type').toLowerCase()=="checkbox"){
    					var flg=1;
    					var html_obj=document.createElement('<'+obj.tagName+' name='+obj.getAttribute("name")+'" />');	
    				}else{
    					var html_obj=document.createElement(obj.tagName);
    				}
    			}else{
    				var html_obj=document.createElement(obj.tagName);
    			}
    		}else{
    			var html_obj=document.createElement(obj.tagName);
    		}
    		var atts=obj.attributes;
    		var len=atts.length;
    		for(var i=0;i<len;i++){
    			switch(atts[i].name.toLowerCase()){
    				case "name":
    					if(flg==0){
    						html_obj.name=atts[i].value;
    					}
    				break;
    				case "class":
    					html_obj.className=atts[i].value;
    				break;
    				case "value":
    					html_obj.value=atts[i].value;
    				break;
    				case "colspan":
    					html_obj.setAttribute("colSpan",atts[i].value);
    				break;
    				default:
    					html_obj.setAttribute(atts[i].name.toLowerCase(),atts[i].value);	
    			}
    		}
    	}else if(obj.nodeType==3){
    		html_obj=document.createTextNode(obj.nodeValue);	
    	}
    	return html_obj;
    }
    Last edited by Basscyst; 10-23-2007 at 07:44 PM.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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