Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts

    Question tools: overlay makes click events fire twice in IE

    OK, this is a weird issue: On this page when you click on the side nav headings it toggles the navigation links. There is a signup overlay when you click on “Log in” at the top.

    What happens in IE now is that the side navigation is somehow influenced by the overlay. If you open a side nav section and click on “log in” the sidenav is closed. But that isn’t even the worst: Close the overlay and click on a side nav heading once again. It will open and close again right after. And as if this wouldn’t be enough if you click “log in” again and close the overlay then, it opens and closes the sidenav two times, and so on…

    So, somehow in IE the number of times the overlay was opened has an influence on the click event in the side nav. I was told that it could have to do with event bubbling but I don’t even know what I have to look for.

    I would be very happy if someone could shed some light on this. What can I do to prevent these things from happening?

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Very weird. It's also happening in FF though.

    Something I noticed:
    1. Open "Document Types" submenu
    2. Click "Log in" (yep, submenu closes)
    3. Close login box
    4. Open "Document Types" submenu (yep, it immediately closes)
    5. Click "Log in" again : login box appears, but overlay is now doubly opaque.

    Something is causing stuff to run twice. And looking at what's happening in Firebug while all this is going in, suggests that scripts are getting loaded and run over and over again.

    Every time that the "signup.html" page is called, "jquerydefaultvalue.js" and "functions.js" are also called. My guess is that something in those files is resetting your submenu open/close classes, and affecting the overlay transparency (or adding an overlay layer) onload. And every time they get called, it happens all over again.

    Any use?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Hm, I’m not seeing this in Firefox 3+, neither in Windows nor in Mac OS. How are you observing this in Firebug? I haven’t used the Script panel very often so far. (but besides that this isn’t happening in Firefox for me anyway so there’s probably not much to observe)

    What I noticed upon your explanation is that every time I click the log in link in IE the overlay takes a little longer to appear which would confirm that with every call the function is being executed one more time or so. The other interesting thing is that I tried several other modalbox scripts and the issue in IE persists, so it’s not specific to this modalbox plugin. Could it be a bug in jQuery?

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I can definitely see it happening in FF3.6/WinXP, at http://www.primacom.net/~k6531190/ml/learn.html, and I can see why it's happening.

    So the login button drops the content of signup.html into div.overlayContent.

    That's essentially the problem. Once you load that signup form you've got an entire HTML document - <head>, <body>, the lot - sitting inside one of your page divs. Look at the page with Firebug DOM inspector when the signup box is visible.

    But the signup.html page also calls functions.js, which has already loaded once as part of the parent page. Now everything in it gets run again, this includes:

    Code:
    // accordion style menu
    $('#sub .subnav h2, #sub .subnav li span').addClass('closed').click(function() {
         $(this).toggleClass('closed').next().toggle('normal');
    }).next().hide();
    - which is what's closing your submenu

    and:
    Code:
     $('body').append('<div class="overlay" id="overlay"><div class="overlayContent"></div></div>');
    - which is appending another semi-transparent layer, making the overlay more opaque each time.

    Take that functions.js out of signup.html and I bet the problem will go away. But better yet, if all you're doing with signup.html is embedding it inside another DOM, then cut it down so it's not writing extra <head> and <body> tags to the page it gets placed on.

  • Users who have thanked Spudhead for this post:

    VIPStephan (02-11-2010)

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Aaaaah, that’s the issue, there we go! Thanks, you’re a life saver. This didn’t even occur to me.

    Well, the problem is that I’m a little anal about valid code and progressive enhancement. My intention is that if JS isn’t available for any reason the user just gets redirected to signup.html and therefore I want it to be a complete HTML document. How would I only load the content (the stuff inside the body) of signup.html via AJAX into the other page?

  • #6
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You can use a bit of PHP to read in a query string and only include the query string if it is called by Ajax... the PHP will echo only the div block if the query string is found. I'm sure there are other (and probably better) ways...

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Well, I’d rather have a pure JS way to do it so it’s server independent. I’m thinking of something like removing the respective elements when the external page is loaded (included in the current page). But I can’t even think of a correct approach. Or isn’t it as simple as I think it would be?

  • #8
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Sorry, missed updates to this thread. I'm not sure how you're loading the html page into that div (and the page is now down so I can't check?) but if you're using jQuery's load() method, you can specify a particular part of the page to load:

    $('#result').load('ajax/test.html #container');

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Thank you, by the way, that helped a lot.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    @Stephan: sorry to be off topic, but I think you are the right person to end the curiosity of peoples here.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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