ajax tab

**davidjmorin** · 09-23-2007, 09:21 PM

ajax content

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?

here is the code:

HTML Code:

<html>
<head>














<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">


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(".php")!=-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">
    
#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]-->



</head>




<body>

<div id="glowingtabs">

<ul>
<li><a href="javascript:ajaxpage('http://www.cnn.com', 'rightcolumn');"><span>Aston</span></a></li>
<li id="current"><a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');"><span>Ferrari Page</span></a></li>
<li><a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');"><span>Aston Martin Page</span></a></li>
<li><a href="javascript:ajaxpage('http://www.cnn.com', 'rightcolumn');"><span>Aston</span></a></li>
<li><a href="javascript:ajaxpage('http://www.cnn.com', 'rightcolumn');"><span>Aston</span></a></li>
<li><a href="javascript:ajaxpage('http://www.cnn.com', 'rightcolumn');"><span>Aston</span></a></li>
<li><a href="javascript:ajaxpage('http://www.cnn.com', 'rightcolumn');"><span>Aston</span></a></li>
<li><a href="javascript:ajaxpage('http://www.cnn.com', 'rightcolumn');"><span>Aston</span></a></li>
</ul>
</div>


<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>


</body>
</html>

**davidjmorin** · 09-26-2007, 07:19 PM

please help!!!

**boogyman** · 09-26-2007, 07:27 PM

are you talking that you populate the content into your page? or are you using it to populate an iframe?

in either case.... the problem lies with the url of the css script. if you write code from a different site onto yours you are just writing text, therefore it would take the styles of your page... if you were trying to populate an iframe, well then it should be taking the css from the host site... if you can give us the site url of the page in question, we can better help you trouble shoot.

**davidjmorin** · 09-26-2007, 07:31 PM

basically i want to load lets say google into my div with a click of the button at the top. it loads google but does not load the css. is iframe the easy way to do taht?

**boogyman** · 09-26-2007, 07:39 PM

if thats what you are doing than yes the css will not be loaded too, because you are grabbing straight text, you would need to harvest their css also if you wanted it to look the exact same... although relying on content from another server is very dangerous because you have no control over it. it can be taken down / changed without your notice at all, and also you are harvesting their bandwidth usage.
also, unless it is public knownledge, you should also be asking permission to use their content, as it's considered intellectual property.

**davidjmorin** · 09-26-2007, 07:45 PM

i have permission to do so. im testing using google. because its small and easy to load

Thread: ajax tab

Thread Tools

Search Thread

ajax tab

Bookmarks

Bookmarks

Posting Permissions