PDA

View Full Version : CSS won't work when i've put ajax code



rosemetal17
12-12-2008, 05:04 PM
1) Script Title:
Ajax in Html

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

I have used one of the ajax code to enable targeting div to mimick an iframe fucntion, but when i used it, the external css i had on the homepage didn't work!! I have no clue what's happening cos im newbie on the script world- don't have a clue really- and yes...help?

Heres my code for index.htm


<html>
<head>
<title>
NenuDESIGN
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<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 bustcachevar=1 //bust potential caching of external pages after initial

request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

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)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() :

"?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, 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>
</head>

<body>
<div id="container">

<div id="menudiv">
<ul id="menu">
<li><a href="javascript:ajaxpage('home.htm',

'main');">Home</a></li>
<li><a href="javascript:ajaxpage('portfolio.htm',

'main');">Portfolio</a></li>
<li><a href="javascript:ajaxpage('before.htm', 'main');">Before

Enquiring</a></li>
<li><a href="javascript:ajaxpage('contact.htm', 'main');">Contact

Us</a></li>
</ul>
</div>

<div id="links">
Sidebar...
</div>

<div id="main">
</div>

<div id="footer">
<p align="center">
Copyright &copy; 2008 by Nenu. All Rights Reserved<br>
www.nenudesign.webs.com<br>
ylee93@hotmail.com<br><br>
</p>
</div>

</div>


</body>
</html>

rosemetal17
12-12-2008, 05:11 PM
actually, the css goes off in mozilla firefox,

the script doesn't work in internet explorer,

in opera, everything looks great except for the script doesn't work...

:(

Snookerman
12-12-2008, 05:25 PM
You could try to add a doctype to the page. It might help.

rosemetal17
12-12-2008, 05:28 PM
Doesn't help.. :S

jscheuer1
12-12-2008, 05:52 PM
AJAX importation of css is not universally supported, at least not via the common AJAX routine used to load in external content. With the script you are using, you could import it via the method described under the heading:

Load page and external CSS /JavaScript link:

on the demo page.

Or (and this is actually a better method if it will work out with your overall intent for the pages involved), just include the css in the head of the 'top' page. That way, when the new content shows up, the style for it will already be in place.

rosemetal17
12-12-2008, 06:03 PM
Load page and external CSS /JavaScript link:


that was for implementing css for the content area only isn't it?

And i already have css in the head area...

And i should mention, css only goes off in firefox -fully updated-, the script function goes off in IE and Opera..

jscheuer1
12-12-2008, 06:20 PM
Css style will affect only those elements that are selected by it. So, may as well put the style for all possible content in the head of the 'top' page. Just make sure its selectors will not affect anything else on the page in an unintended fashion.

BTW, in FF, if the style is being imported, it will be in effect the entire page, not just for the imported content. If it only affects the imported content, it is only the fact that it selects only the imported content that prevents it from affecting the rest of the page.

Once style gets on a page, no matter how it gets there, it affects the entire page.