Results 1 to 7 of 7

Thread: CSS won't work when i've put ajax code

  1. #1
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS won't work when i've put ajax code

    1) Script Title:
    Ajax in Html

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...jaxcontent.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>

  2. #2
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...


  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You could try to add a doctype to the page. It might help.

  4. #4
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Doesn't help.. :S

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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..

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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