IE6 / Thickbox is locked in location, scrolling results in losing the top of a thickbox
paulnem - July 16, 2008 - 05:20
| Project: | Thickbox |
| Version: | 5.x-2.0 |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | frjo |
| Status: | reviewed & tested by the community |
Description
Hi
I've recently changed theming for a node type, this puts an "email me" button for user profiles below the fold, or basically you have to scroll down to click on it.
If I do this in IE6 the thickbox only shows it's bottom, as the top is at the top of the node. So thickbox / ie6 aren't playing nicely when a page needs to scroll.
This is also an issue when dealing with imagecached photos, if you have to scholl down, you don't get to see all of the photo.
Doing the same thing in FF works just fine.
#1
I've tested this on 2 computers, IE6, IE7 and the latest FF. Only IE6 has a problem.
#2
Any thoughts on this? I realise IE6 is on the out but a large number of people still use it and being unable to view the image is a little annoying.
Can I provide any further information?
#3
I had the same issue with thickbox and IE6 and i think i've can fixed changing the tb_position funcion in thickbox.js
<?phpfunction tb_position() {
// Before
/*
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function')) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
*/
// Now
jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH /
2),10) + 'px', width: TB_WIDTH + 'px'});
var version = jQuery.browser.version;
if (version instanceof Object)
version=version.number();
if ( !(jQuery.browser.msie && version < 7)) { // take away IE6
jQuery("#TB_window").css({marginTop: '-' +
parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
?>
From http://groups.google.com/group/jquery-dev/browse_thread/thread/91fca2de1...
#4
This looks to be working for my issues as well, thickbox placement is now relative to the position on the page, rather than fixed at the top, for IE6. Need to do some more testing in other browsers.
I've tested this on my dev install, Drupal 5.7 with thickbox 2.0 and using IE6, FF3.0.1, FF2.0.0.16 and IE7. Be good to get some further testing.
#5
#6
I've promoted this into my production site after doing a full test on my dev site. I'll now see if the users can break anything.
Prod being 5.10 with the latest updates, including jquery.
#7
Thank you for #3, this works for me with 5.7 and 5.10 and Thickbox 5.x-1.2 too! (ImageCache 5.x-1.6 and jQuery is 1.2.6)
#8
Was this even a problem for versions earlier than 2.0? I didn't have a problem with 1.2 as far as I knew.
#9
Yes, maybe this has to do with jQuery 1.2.6 or the installed jQuery Update 5.x-2.0 module. On another version of my website with jQuery Update 5.x-1.0 module (jQuery 1.1.2) and Thickbox 5.x-1.1 and ImageCache 5.x-1.5 there is no thickbox layout problem in IE6.
#10
Will this fix/workaround make it into the next release?
#11
I believe there is a fix for this committed to 5-dev already. Please try it out and report back here if it works.
http://drupal.org/node/122466
#12
http://drupal.org/node/351584
At 1204x600 image is still too high.
#13
Anyone with a test site where I can see this problem in action? On my own blog I can not replicate it.
#14
@Carlitus just wanted to thank you so much for posting this. I'm using thickbox on a non-drupal site and was having the same problems, and this did the trick! Many thanks!
#15
I tried out the "new" function in IE 6 as posted ín #3, but it doen´t work out. My page is very long and when I click on a image which is linked in the deeper section of the page the thickbox remains at the position, which cannot be seen.
// take
away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
Another problem is that TB_HEIGHT remains at the same value, no matter where I scroll to, so that I cannot get the current position of the scrolling in the page. If I would get it, i would be able to place the thickbox-element right into the current center of the page.
Even the code
var scrolledDown = $(document).scrollTop()-200;
$("#TB_window").css("margin-top", scrolledDown +"px");
did not work -> I get a broken image with it.
Can you PLEASE help me? Thanks in advance.