Advanced Search

Results 1 to 5 of 5

Thread: ajax messing up with ie

  1. #1
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ajax messing up with ie

    I'm trying to do a css drow-down menu.

    when i simply put its code into div-it works perfectly.
    Here's demo: http://dophp.info/dem.html

    But when i load it's content into div with ajax, in IE it doesn't pop out.
    demo: http://dophp.info/dem2.html

    Thanks for help.

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    My guess is that IE already applied all CSS to the elements at the start and isn't prepared for AJAX to introduce new elements that haven't been informed of the CSS. Translating the CSS rules to JS and calling them from loadurl may fix your problem. I suggest that you only give this JS to IE but give the CSS to everyone else because it will run better.
    Last edited by Jesdisciple; 07-28-2008 at 06:12 PM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  3. #3
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Jesdisciple View Post
    My guess is that IE already applied all CSS to the elements at the start and isn't prepared for AJAX to introduce new elements that haven't been informed of the CSS. Translating the CSS rules to JS and calling them from loadurl may fix your problem. I suggest that you only give this JS to IE but give the CSS to everyone else because it will run better.
    Could you give an example of css translated to js? i don't understand what you mean

  4. #4
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Code:
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
    
    #menu a:hover {
    color: #a00;
    background: #fff;
    }
    These could be replaced by this JS in triggered:
    Code:
    var menu = document.getElementById('menu');
    menu.onmouseout = function(){
        menu.style.color = '#000';
        menu.style.background = '#efefef';
    };
    menu.onmouseover = function(){
        menu.style.color = '#a00';
        menu.style.background = '#fff';
    };
    menu.style.textDecoration = 'none';
    menu.onmouseout();//no need to write the same code twice
    Note that this is untested. Giving this only to IE could be implemented in PHP or whatever server-side script you use. If you don't use a server-side script, you could use a JS browser-detect with an if-statement around the above code instead. EDIT: My apologies; this would need to traverse the DOM and find all A elements under menu. Unfortunately, I don't have time to implement this right now.
    Last edited by Jesdisciple; 07-28-2008 at 08:56 PM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  5. #5
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Download Prototype (http://www.prototypejs.org/assets/20...6/prototype.js) for this...
    Code:
    var link = $$('#menu a');
    link.onmouseout = function(){
        link.style.color = '#000';
        link.style.background = '#efefef';
    };
    link.onmouseover = function(){
        link.style.color = '#a00';
        link.style.background = '#fff';
    };
    link.style.textDecoration = 'none';
    link.onmouseout();//no need to write the same code twice
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

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
  •