Hello Craig,
i experiencing a big problem while using qTips in IE8.
It's working fine in FF but with IE8 browser completly hanging while i mouseover my img !
Here is a sample of my JS :
JS Code
homeCore.createQtip = function(portletContent){
portletContent
.find('a')
.find('img')
.each(function(){
var id = $(this).attr('id');
var portletID = $(this).parents('.portlet-section').attr('id');
$(this).qtip({
content:{
text: 'Loading...',
ajax:{
url: 'main_ajax.asp',
type: 'get',
data: {
mode: 'hover_info',
portletID: portletID,
id: id
}
}
},
position: {
at: "right center",
my: "left center",
viewport: $(window)
},
style: {
classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
}
})
})
}
Do you have an idea ?
Thank you.
Hmm, well first you can minimize it down a bit by combining selectors:
JS Code
homeCore.createQtip = function(portletContent)
{
portletContent.find('a img').each(function() {
var id = $(this).attr('id'),
portletID = $(this).parents('.portlet-section:first').attr('id');
$(this).qtip({
content:{
text: 'Loading...',
ajax:{
url: 'main_ajax.asp',
type: 'get',
data: {
mode: 'hover_info',
portletID: portletID,
id: id
}
}
},
position: {
at: 'right center',
my: 'left center',
viewport: $(window)
},
style: {
classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
}
})
})
}
Other than that it should work fine.. no reason it should hang. You sure you're not accidentally calling it loads of times or something? Might be some different code thats the problem?
Thanks for your reply.
But it still not working, i don't understand why.
I have disable the call to homeCore.createQtip then it's working fine in IE.
And then I call directly in address bar jhomeCore.createQtip() after changing portletContent.find('a img') to $('.portlet-content-section').find('a img') and when i mouseover an img, IE8 hang.
I will investigate and i let you know ...
It seems that on IE8 i have a infinite loop on the reposition method line 1001 with an event.type 'resize' but i don't know where it is called from.
JS Code
// Adjust positions of the tooltip on window resize if enabled
if(posOptions.adjust.resize || posOptions.viewport) {
//$($.event.special.resize ? posOptions.viewport : window).bind('resize'+namespace, repositionMethod);
}
// Adjust tooltip position on scroll if screen adjustment is enabled
if(posOptions.viewport || (IE6 && tooltip.css('position') === 'fixed')) {
//$(posOptions.viewport).bind('scroll'+namespace, repositionMethod);
}
I have comment these 2 lines (538 and 543) and it solved my problem of infinite loop.
Now qtips are slow to shown but it's working anyway ...
JS Code
position: {
at: "right center",
my: "left center"/*,
viewport: $(window)*/
},
Just removing viewport solved the issue but i need this fonctionnality
reposition should only be being fired on browser window resize... are you resizing the browser in a loop or something? O_o
I've found a blog where it's explain exactly the problem i encounter with qTip on IE.
And there is a demo of this bug :
http://remysharp.com/2008/05/15/windowon...6-and-ie7/
I've found the problem !
It was this property in my CSS file :
body {height:100%;}
Remove this property do the trick !
Thank for your support Craig, keep up the good work !