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.

CommentFileSizeAuthor
#4 thickbox_ie6_placement_283238.patch1.1 KBpaulnem

Comments

paulnem’s picture

paulnem commented
Title: IE6 Thickbox appears in same location always, even if you scrolled to the bottom » IE6 / Thickbox is locked in location, scrolling results in losing the top of a thickbox

I've tested this on 2 computers, IE6, IE7 and the latest FF. Only IE6 has a problem.

paulnem’s picture

paulnem commented

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?

carlitus’s picture

carlitus commented

I had the same issue with thickbox and IE6 and i think i've can fixed changing the tb_position funcion in thickbox.js

function 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...

paulnem’s picture

paulnem commented
Status: Needs review » Active
StatusFileSize
new thickbox_ie6_placement_283238.patch1.1 KB

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.

paulnem’s picture

paulnem commented
Status: Active » Needs review
paulnem’s picture

paulnem commented
Status: Reviewed & tested by the community » Needs review

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.

green_nature’s picture

green_nature commented
Version: 5.x-2.0 » 5.x-1.2
Status: Active » Needs review

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)

paulnem’s picture

paulnem commented
Version: 5.x-1.2 » 5.x-2.0
Status: Needs review » Reviewed & tested by the community

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.

green_nature’s picture

green_nature commented
Status: Needs review » Reviewed & tested by the community

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.

paulnem’s picture

paulnem commented

Will this fix/workaround make it into the next release?

frjo’s picture

frjo commented
Assigned: Unassigned » frjo

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

alxbkh’s picture

alxbkh commented

http://drupal.org/node/351584

At 1204x600 image is still too high.

frjo’s picture

frjo commented

Anyone with a test site where I can see this problem in action? On my own blog I can not replicate it.

amuhlou’s picture

amuhlou commented

@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!

placsta1980’s picture

placsta1980 commented

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.

frjo’s picture

frjo commented
Status: Reviewed & tested by the community » Closed (won't fix)

Please test the new Colorbox module and see it that works better.

http://drupal.org/project/colorbox

I have ported all Thickbox features to Colorbox so it should work as a drop in replacement.

When Colorbox has a stable release I will start actively recommend people to switch/upgrade from Thickbox to Colorbox. I'm the maintainer of Thickbox and a co-maintainer of Colorbox.