http://stilbuero.de Klaus Hartl – Stilbüro - Klaus Hartl

Jump to: Search, Additional Information.

A smoother Thickbox (with less code)

November 6th, 2006

Category:
CSS,
JavaScript,
Web Development,
jQuery

Here’s an instruction on how to make the beautiful Thickbox even better. These things came to my mind while I was implementing Thickbox for Plazes. The result is a much smoother Thickbox with much less JavaScript code.

What bothered me was that when scrolling or resizing the browser window the Thickbox modal window gets moved to stay in the center, but that happens not smooth at all and with a little delay (after the resize/scroll events get fired that is).

So I changed the Thickbox CSS to use fixed positioning, starting with the modal window:

  1. Change CSS to this:

    html, body {
    height: 100%;
}

#TB_window {
    position: fixed;
    top: 50%;
    left: 50%;
    ...
}

  2. Remove the scroll and resize event handler:

    $(window).scroll(TB_position);
$(window).resize(TB_position);

  3. Change the function TB_position to this:

    function TB_position() {
     $("#TB_window").css({marginLeft: '-' + parseInt(TB_WIDTH / 2) + 'px', width: TB_WIDTH + 'px'});
     if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function') ) { // take away IE6
         $("#TB_window").css({marginTop: '-' + parseInt(TB_HEIGHT / 2) + 'px'});
     }
     TB_overlaySize();
}

    It now pushes the modal window half of its width/height to the left/top from the middle so that it is exactly centered.

  4. Fix our special friend IE 6 to emulate a fixed positioning:

    * html #TB_window {
     position: absolute;
     margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

    (Based on http://www.howtocreate.co.uk/fixedPosition.html)

    I use the Star Selector hack to hide these styles from IE 7, which supports fixed
    positioning. Because this being invalid CSS, I recommend inclusion in an extra style sheet via Conditional Comments.

  5. Smoooooth.

  6. The same consideration applies to the overlay and the spinner. There is still some overhead to compute their dimensions and position depending on the state of the viewport.

    Use fixed positioning here as well and make the overlay 100% wide and high:

    #TB_overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     ...
}

#TB_load {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px; /* -height/2 0 0 -width/2 */
    ...
}

  7. Change TB_load_position(); to $('#TB_load').show(); and throw away

    function TB_overlaySize(){
    ...
}

    and all references to it. Also remove

    function TB_load_position() {
    ...
}

function TB_getPageScrollTop(){
    ...
}

    Nearly done!

  8. The only thing we still need to do is to accommodate IE 6 with a Dynamic Property again:

    * html #TB_overlay {
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

    And don’t forget to add * html #TB_load:

    * html #TB_window, * html #TB_load {
    ...
}

Here’s a demo with all these modifications to the original. Try scrolling and resizing the window and you will see the difference. I’d really like to see that in a future version of Thickbox. Have fun!

Comments disabled · Trackbacks disabled · Permalink

37 Comments

Comments feed

  1. Thanks Klaus!

    If those IE < 7 fixes are put into a CC-stylesheet for “IE lt 7″, you don’t even need that start hack, right?

    Comment by Jörn, November 6th, 2006 at 9:48 am

  2. Author Comment

    Hi Jörn,

    yes correct. It’s just a habit of mine to put hacks for IE 6 and 7 into a single style sheet – most of the fixes still apply to both… I wasn’t clear about that.

    Comment by Klaus, November 6th, 2006 at 11:03 am

  3. Did you test your modifications with IE and a select element below the thickbox? I’m not sure what is wrong with is, but according to my own tests, the select is visible above both the box and the overlay…

    Comment by Jörn, November 6th, 2006 at 11:44 am

  4. Author Comment

    I did test with IE of course, but not with a select box. I haven’t touched anything regarding that on the other hand and a quick look at Plazes showed me no problems…

    Comment by Klaus, November 6th, 2006 at 12:49 pm

  5. I think you just need to change the style definitions for #TB_overlay from:

    #TB_overlay{…}
    to
    #TB_overlay,#TB_HideSelect{…}

    So that the element that hides the selects (the iframe) covers the same area.

    Nice work Klaus. Thanks!

    Comment by Paul McLanahan, November 6th, 2006 at 4:07 pm

  6. Does this centre pages imported via Axaj? It seems to me that your revised code does not allow for this. Or am I missing something? When I tried it, only the top left corner of the page was in the centre of the window, so it wasn’t applying a width/2 negative margin to bring the imported content back to the centre. I love how it works for images though.

    Comment by Joel Birch, November 11th, 2006 at 4:33 am

  7. Hi Klaus,

    Was wondering if your special friend had a similar experience as I am having with internet explorer. When the page loads initially the thickboxes open like a “_self”… after I hit back they open nicely. Firefox works just fine.

    Test Here (click on product or “Thick Box More Info” Link down the page).

    Comment by Joe, December 8th, 2006 at 10:41 pm

  8. Great stuff, Klaus. Thanks for this – it’s just what I needed.

    Mike

    Comment by Mike, December 13th, 2006 at 3:32 pm

  9. Regarding my previous post above, your silence spoke volumes. My problem was due to brain fade. I was not appending the height and width via the query string in links so Thickbox could not know what width and height to divide by two for the offset required to centre the page. I thought I better give your readers closure on this. Thanks for the great improvements to Thickbox.

    Comment by Joel Birch, January 24th, 2007 at 6:49 am

  10. Have you by chance tested these changes on a site that has a horizontal scrolling site instead of a vertical? The script, was re-worked so as to allow for both types of sites. Do these changes effect that functionality?

    Comment by Cody Lindley, January 26th, 2007 at 5:25 pm

  11. After a bit of testing, this all seems to be working fine. The only thing that needs to be added is the same treatment for the TB_HideSelect declaration. Then the select element will be hidden in IE 6.

    The use of TB on a horizontal scrolling site seems to work also, except in IE 6.

    Nice work here! I love it when TB gets smaller…instead of bigger.

    Comment by Cody Lindley, January 26th, 2007 at 5:50 pm

  12. Author Comment

    Cody, thanks for stopping by… Good point, I have to admit I didn’t think of horizontal scrolling – I will check that in IE 6, I think I know what to do.

    Comment by Klaus, January 27th, 2007 at 1:01 pm

  13. You say to remove all references to TB_overlaySize() but you have it included in your TB_position() function.

    First you say to change TB_position() function to yours (which contains TB_overlaySize();) but later on you say to remove all references to TB_overlaySize().

    Please carify.

    Also, on FF 2.0 I get vertical scrollbars that don’t need to be there. Is there a way to do this without getting the scrollbar?

    Thanks for a great fix to an already great script :)

    /Shahin

    Comment by Shahin, January 31st, 2007 at 9:24 pm

  14. Author Comment

    The instructions were meant step by step, you can just remove TB_overlaySize(). I cannot reproduce the vertical scrollbar, thus I assume it is an issue with your CSS. Maybe you have declared a padding on your body…

    Comment by Klaus, February 1st, 2007 at 12:06 pm

  15. everything works great in ff and ie7.. the only problem now is in ie6 and earlier. the thickbox window shows up but only the top 1/4 of it is on the bottom window and the rest is below the fold.. if you scroll down it just scrolls down with it and you can never see the whole thickbox window..

    Comment by andy, February 2nd, 2007 at 10:39 pm

  16. Klaus, thanks for your excellent modification. Quick question: is there anyway to force greybox to stay 80px from the top at all times, rather than have it automatically vertically centered? I would still like the horizontal centering.

    Thanks again for the hard work!

    Comment by Kirk, February 19th, 2007 at 9:26 pm

  17. Author Comment

    Kirk, take away the if block from the function TB_position and change the top positioning for #TB_window in the style sheet to top: 80px;

    For IE in * html #TB_window { ... } let alone position: absolute; but remove the declaration for margin-top.

    Comment by Klaus, February 19th, 2007 at 10:19 pm

  18. Klaus, thanks for the quick reply! The fix you recommended worked perfectly. I continued to tinker around and found that I would like to have my window positioned a portion above absolute center. In function TB_position() I replaced

    $j("#TB_window").css({marginTop: '-' + parseInt(TB_HEIGHT / 2) + 'px'});

    with

    $j("#TB_window").css({marginTop: '-' + parseInt(TB_HEIGHT / 1.7) + 'px'});

    It achieved the desired effect, however when I resize the screen, the TB_window div easily goes out of the top of the browser display. Is there a simple way to modify the function so if that if the top of the TB_window div is at top: 0; it won’t go beyond that?

    Thanks for your help!

    Comment by Kirk, February 19th, 2007 at 11:09 pm

  19. Great plugin Klaus!

    I am new to all this, and I’m also wondering how to manage long/wide text in the tab. Can the tabs be as wide as the content/label? Does that involve using more than one image for the tab display?

    These questions seemed to have been asked a few times, but I haven’t seen any replies?

    thank you

    Comment by Tobin, April 25th, 2007 at 7:58 pm

  20. Can you guys look at this and some one send me an e-mail leting me know how to fix it. It works great in ie 6 and fire fox but not ie 7

    thanks for any help you can give,

    mike.newspin360@gmail.com

    http://demo.newspin360.net/echocanyon_tb/Tour_echo.html

    Comment by Mike Windham, May 8th, 2007 at 11:29 pm

  21. I wonder if you can load a form instead of an image and do a simple validation, like a log in for example.

    I also ran into a problem with the close hyperlink, I used the Demo as a reference but neither IE 7 or FF 2 like the close link. FF2 says

    "$("#TB_imageOff").unclick is not a function
    $("#TB_imageOff").unclick();"

    Can you tell me what the problem is?

    Thanks!

    Comment by Jay, June 19th, 2007 at 2:58 pm

  22. Author Comment

    I’m sorry, I can’t give support here for Thickbox. I’m about to release my own implementation called “Thickbox Reloaded” soon, which I will give support for of course, but if you’re using Cody’s Thickbox you should head over to his page, he has a complete forum running…

    Comment by Klaus, June 19th, 2007 at 3:38 pm

  23. Klaus, please incorporate support for the easing functions, to “smoothen” the transition between images, instead of hiding, show loading bar and showing again. This would be really cool!

    Comment by Gilles, June 22nd, 2007 at 9:50 am

  24. Hello Klaus !

    Thx for this great work – my question, in IE6 the box is not centered, it’s on the very bottom of the site because maybe depending on my tables ?! I read about a fix

    Comment by Thomas, August 28th, 2007 at 9:21 am

  25. Nice fixes , but i have to mention that your thickbox does not work with jquery 1.1.4 , i defaulted back to 1.0.2

    Comment by alexa mancini, September 3rd, 2007 at 12:37 pm

  26. Author Comment

    Alexa, as far as I know all these fixes went into Thickbox 3 which was released by Cody Lindley a while ago. There’s no need to apply these fixes any longer given that you’re using the latest Thickbox.

    That being said, I’m not planning to fix anything related to Thickbox and jQuery 1.1.4 and besides I’m going to release my own “Thickbox Reloaded” soon.

    Comment by Klaus, September 3rd, 2007 at 2:57 pm

  27. It looks like your IE 6 hack is now built-in to thickbox 3.1. However, it doesn’t seem to be working for me. In IE 6, the thickbox loads very low on the screen – so low that the bottom of the thickbox is not visible. Is it just me, or is anyone else noticing this?

    Comment by Nate, December 3rd, 2007 at 10:42 pm

  28. So, here’s the IE6 hack:

    * html #TB_overlay { /* ie6 hack */
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);
    }

    How might you modify this to raise the position of the thickbox to the top of the screen instead of the center just to be safe?

    Comment by nate, December 13th, 2007 at 6:47 pm

  29. Actually here’s the code that would probably need to be modified, right?

    * html #TB_window { /* ie6 hack */
    position: absolute;
    }

    Comment by Nate, December 13th, 2007 at 6:54 pm

  30. Klaus – excellent work here indeed. Thank you very much!!

    I was wondering if you are still planning on releasing Thincbox Reloaded, and if so when it may be available. Also what fixes and enhancements will it have over the latest Thickbox 3.x? Thanks again!

    Rob

    Comment by Rob, January 26th, 2008 at 7:15 am

  31. Klaus,

    Is there a beta or alpha version of Thickbox Reloaded available? I’ve been googling like crazy but can’t find anything. Very anxious to try this out but not sure if you are still planning on releasing it. In a September post you mentioned “soon” and was wondering if that means we are now pretty close? Thank you.

    Comment by Rob, February 2nd, 2008 at 9:46 pm

  32. Author Comment

    Rob, a lot of other things (jQuery UI) came into my way and out of a sudden Cody released Thickbox 3 – thus I lost a bit of interest. Nonetheless I am using TR in one of my projects and it is stable and very easy to use. You can checkout the source from SVN…

    Comment by Klaus, February 5th, 2008 at 11:29 am

  33. Hi Can you help me with this.

    http://www.beyondsnow.com/09/team.php

    If I open a picture with thickbox its not cnetered and after closing 2 browser scrollbars pop up. but this happens only in IE

    Can you help me?

    Comment by Koen, September 2nd, 2008 at 1:11 pm

  34. Hello,

    How I can remove the preloading function ?

    I want to use it to open an HTML page whith some jpg images on it in a Iframe.
    But I want to remove the preloading of the page (not only the animated gif but all the pre loading process) because in this case, when you clic on the thickbox link, instead to wait and see nothing, just the animated gif during the preloading, the page will load traditionally and you will see immediately the progressive jpg appear…

    Thanks

    Comment by ben, September 4th, 2008 at 10:21 am

  35. Author Comment

    I do not maintain the official Thickbox, find support here.

    Comment by Klaus, September 4th, 2008 at 11:39 am

  36. Yes I guess but it could be a similar syntax with your tweaked version, unfortunately I have already asked the question on official thickbox support one month ago, without success this is why I search some help somewhere else.

    Comment by ben, September 4th, 2008 at 4:03 pm

  37. Author Comment

    I see. But these tweaks were related to version 2 of Thickbox and went into version 3 already.

    Comment by Klaus, September 4th, 2008 at 4:13 pm

Klaus Hartl – Stilbüro is powered by WordPress, jQuery, XHTML, CSS and me.