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 5 of 5
  1. #1
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts

    Lightbox2 overlay div height too short in IE <= 7

    Not sure if the root problem is a js load issue or rather css. Problem page is here: http://arcangelmetalworks.com/pictures.php

    I've had success using the Lightbox2 module on several Drupal-based sites, but this is the first time I've handled the straight code and tried to drop it into a hand-coded site. Internet Explorer fails to draw the overlay div to the full page height. Firefox 3 performs as expected.

    The web site suggests setting the body margin and padding to zero, but those were set anyway and tweaking didn't help. Another suggestion was to stick initLighbox() into the body onload, but that function doesn't exist. Also tried initialize() and Lightbox.initialize(), but again it's claimed those functions don't exist. Looking into the code, however, initialize() is where the div height is calculated, I think.

    It should be noted that the lightbox still works on IE even when using one of these failed onload attempts. And I don't actually get IE to report any js error with the onloads - I have to rely on Firebug for that.

    Anyone have an idea of what I'm overlooking? I've spent too much time staring at code and coming up blank.
    Last edited by tomws; 03-17-2009 at 01:19 AM.
    Are you a Help Vampire?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    So can you show us the code that draws the overlay so we don't have to go poking around for it??

    Yes, I see the effect. Looks like it's drawing it only to the physical height of the window, not to the full scrollable height. You might have to use some browser-specific code.

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I don't think about people not using Firebug to look at code. See here: http://arcangelmetalworks.com/js/lightbox.js

    Actually, now that I look at what I copied, I need to check why it's still nested. I thought I had moved the code and linked up to the top level /js directory thinking that it might have been a hard-coded path issue in the lightbox code.

    EDIT: I moved the code to the top level directories (like I dreamed I had done before, apparently), but the problem is still there. Fixed my link above to point to the current location.
    Last edited by tomws; 03-17-2009 at 01:06 AM. Reason: changed path to current location
    Are you a Help Vampire?

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Found the fix thanks to a response elsewhere. Will post the link to the solution and the solution itself.

    Link: http://www.dynamicdrive.com/forums/s...84&postcount=5
    The solution involves IE specific code, as suggested above. I'll assume that the Drupal module maintainers do something to add this in themselves since I've never had a problem with that.
    If you are concerned with getting the code off of the page, the best approach would be to create two additional files:

    ie_lb.css:

    Code:
    #overlay {
    top:expression(fixedIE('Top',0));
    left:expression(fixedIE('Left',0));
    }
    and ie_lb.js:

    Code:
    function fixedIE(tl, n, el){
    var sc = 'scroll'+tl, d = document, c = 'compatMode',
    b = d[c]&&d[c]=='CSS1Compat'? d.documentElement : d.body;
    n = n-0; if(typeof n!='number')return 0;
    if(/^(Top|Left)$/.test(tl))
    return b[sc]+n+'px';
    if(/^(Bottom|Right)$/.test(tl)&&typeof el=='object'){
    tl = tl=='Right'? 'Left' : 'Top', sc = 'scroll'+tl;
    var dim = 'client' + (tl=='Top'? 'Height' : 'Width');
    return b[sc]+b[dim]-el[dim]-n+'px';
    }
    return 0;
    }
    You could then replace the code on the page with this:

    Code:
    <!--[if IE]>
    <script type="text/javascript" src="ie_lb.js"></script>
    <link rel="stylesheet" href="ie_lb.css" type="text/css">
    <![endif]-->
    Just make sure that the src and href attributes point to the files' actual locations on your server.
    Are you a Help Vampire?

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    Found the fix thanks to a response elsewhere. Will post the link to the solution and the solution itself.

    Link: http://www.dynamicdrive.com/forums/s...84&postcount=5
    The solution involves IE specific code, as suggested above. I'll assume that the Drupal module maintainers do something to add this in themselves since I've never had a problem with that.
    Hello, I developed a solution on my blog to correct incompatibilities lightbox with Internet Explorer:

    see:
    lightbox internet explorer

    Ai está a solução para o bug do internet explorer na galeria ligthbox!


  •  

    Posting Permissions

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