http://www.dynamicdrive.com/dynamici...jaxcontent.htm
Im trying to get this script to work for me and what im trying to figure out is why when i link to an outside site IE: google.com it strips all the css that the page has. can anyone tell me why this is? I have some cleanup to do in the code but still works just cant figure the css thing out. any help please
here is the code:
HTML Code:<html> <head> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #glowingtabs{ float:left; width:100%; font-size:90%; line-height:normal; border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/ } #glowingtabs ul{ list-style-type: none; margin:0; margin-left: 5px; /*Left offset of entire tab menu relative to page*/ padding:0; } #glowingtabs li{ display:inline; margin:0; padding:0; } #glowingtabs a{ float:left; background:url(media/glowtab-left.gif) no-repeat left top; margin:0; margin-right: 5px; /*spacing between each tab*/ padding:0 0 0 9px; text-decoration:none; } #glowingtabs a span{ float:left; display:block; background:url(media/glowtab.gif) no-repeat right top; padding: 4px 12px 2px 3px; font-weight:bold; color:#3B3B3B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #glowingtabs a span {float:none;} /* End IE5-Mac hack */ #glowingtabs a:hover span { color: black; } #glowingtabs #current a{ /*Selected Tab style*/ background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/ } #glowingtabs #current a span{ /*Selected Tab style*/ background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/ color: black; } #glowingtabs a:hover{ /*onMouseover style*/ background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/ } #glowingtabs a:hover span{ /*onMouseover style*/ background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/ } </style> <!--[if IE]> <style type="text/css"> p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/ padding-top: 1em; } </style> <![endif]--> <script type="text/javascript"> /*********************************************** * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var loadedobjects="" var rootdomain="http://"+window.location.hostname function ajaxpage(url, containerid){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ loadpage(page_request, containerid) } page_request.open('GET', url, true) page_request.send(null) } function loadpage(page_request, containerid){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(containerid).innerHTML=page_request.responseText } function loadobjs(){ if (!document.getElementById) return for (i=0; i<arguments.length; i++){ var file=arguments[i] var fileref="" if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) loadedobjects+=file+" " //Remember this object as being already added to page } } } </script> <style type="text/css"> #leftcolumn{ float:left; width:150px; height: 400px; border: 3px solid black; padding: 5px; padding-left: 8px; } #leftcolumn a{ padding: 3px 1px; display: block; width: 100%; text-decoration: none; font-weight: bold; border-bottom: 1px solid gray; } #leftcolumn a:hover{ background-color: #FFFF80; } #rightcolumn{ width:900px; overflow: auto; height: 400px; border: 1px solid black; } * html #rightcolumn{ /*IE only style*/ height: 400px; } </style> </head> <body> <div id="glowingtabs"> <ul> <li><a href="javascript:ajaxpage('http://www.google.com', 'rightcolumn'); ajaxpage('http://www.cnn.com', 'rightcolumn2');"><span>Home</span></a></li> <li id="current"><a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');"><span>CSS Codes</span></a></li> <li><a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');"><span>Forums</span></a></li> <li><a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');"><span>Tools</span></a></li> <li><a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');"><span>JavaScript</span></a></li> </ul> </div><br><br> <br style="clear: left;" /> <center> <div id="rightcolumn">column one</div> <div style="clear: left; margin-bottom: 1em"></div> </body> </html>



Reply With Quote
Bookmarks