Skip to content
This repository has been archived by the owner on Jun 14, 2020. It is now read-only.

Commit

Permalink
Fixed AJAX redraw problem that caused content width not to be updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@Craga89
Craga89 committed Apr 4, 2011
1 parent da90d72 commit 73b536e
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 79 deletions.
2 changes: 1 addition & 1 deletion dist/jquery.qtip.css
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Thu Mar 31 07:57:54 2011 +0100
* Date: Mon Apr 4 16:24:40 2011 +0100
*/

/* Fluid class for determining actual width in IE */
Expand Down
67 changes: 30 additions & 37 deletions dist/jquery.qtip.js
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Thu Mar 31 07:57:54 2011 +0100
* Date: Mon Apr 4 16:24:40 2011 +0100
*/

"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
Expand Down Expand Up @@ -329,52 +329,45 @@ function QTip(target, options, id, attr)
// Content is a regular string, insert the new content
else { elem.html(content); }

// Insert into 'fx' queue our image dimension checker which will halt the showing of the tooltip until image dimensions can be detected
tooltip.queue('fx', function(next) {
// Find all content images without dimensions
var images = elem.find('img:not([height]):not([width])');
// Image detection
function detectImages(next) {
var images;

// Update tooltip width and position when all images are loaded
function imageLoad(img) {
// Remove the image from the array
images = images.not(img);

// If queue is empty, update tooltip and continue the queue
if(images.length === 0) {
function imageLoad(event, i) {
// If queue is empty after image removal, update tooltip and continue the queue
if((images = images.not(this)).length === 0) {
self.redraw();
if(self.rendered && tooltip.is(':visible')) {
self.reposition(cache.event);
}
self.reposition(cache.event);

next();
}
}

// Apply the callback to img events and height checker method to ensure queue continues no matter what!
images.each(function(i, elem) {
// Apply the imageLoad to regular events to make sure the queue continues
var events = ['abort','error','load','unload',''].join('.qtip-image ');
$(this).bind(events, function() {
clearTimeout(self.timers.img[i]);
imageLoad(this);
});
// Find all content images without dimensions, and if no images were found, continue
if((images = elem.find('img:not([height]):not([width])')).length === 0) { return imageLoad.call(images); }

// Apply a recursive method that polls the image for dimensions every 20ms
(function timer(){
// When the dimensions are found, remove the image from the queue
if(elem.height && elem.width) {
return imageLoad(elem);
}
// Apply the callback to img events to ensure queue continues no matter what!
images.one(['abort','error','load','unload',''].join('.qtip-image '), imageLoad)

// Apply a recursive method that polls the image for dimensions every 20ms
.each(function(i, elem) {
(function timer(){
// When the dimensions are found, remove the image from the queue and stop timer
if(elem.height && elem.width) { return imageLoad.call(elem, NULL); }
self.timers.img[i] = setTimeout(timer, 20);
}());

return TRUE;
});
}

// If no images were found, continue with queue
if(images.length === 0) { imageLoad(images); }
});
/*
* If we're still rendering... insert into 'fx' queue our image dimension
* checker which will halt the showing of the tooltip until image dimensions
* can be detected properly.
*/
if(self.rendered < 0) { tooltip.queue('fx', detectImages); }

// We're fully rendered, so reset isDrawing flag and proceed without queue delay
else { isDrawing = 0; detectImages($.noop); }

return self;
}
Expand Down Expand Up @@ -739,13 +732,13 @@ function QTip(target, options, id, attr)
* See: updateContent method
*/
tooltip.queue('fx', function(next) {
// Redraw the tooltip manually now we're fully rendered
isDrawing = 0; self.redraw();

// Trigger tooltiprender event and pass original triggering event as original
callback.originalEvent = cache.event;
tooltip.trigger(callback, [self]);

// Redraw the tooltip manually now we're fully rendered
isDrawing = 0; self.redraw();

// Update tooltip position and show tooltip if needed
if(options.show.ready || show) {
self.show(cache.event);
Expand Down
4 changes: 2 additions & 2 deletions dist/jquery.qtip.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/jquery.qtip.pack.js
View file

Large diffs are not rendered by default.

67 changes: 30 additions & 37 deletions src/core.js
View file
Expand Up @@ -287,52 +287,45 @@ function QTip(target, options, id, attr)
// Content is a regular string, insert the new content
else { elem.html(content); }

// Insert into 'fx' queue our image dimension checker which will halt the showing of the tooltip until image dimensions can be detected
tooltip.queue('fx', function(next) {
// Find all content images without dimensions
var images = elem.find('img:not([height]):not([width])');

// Update tooltip width and position when all images are loaded
function imageLoad(img) {
// Remove the image from the array
images = images.not(img);

// If queue is empty, update tooltip and continue the queue
if(images.length === 0) {
// Image detection
function detectImages(next) {
var images;

function imageLoad(event, i) {
// If queue is empty after image removal, update tooltip and continue the queue
if((images = images.not(this)).length === 0) {
self.redraw();
if(self.rendered && tooltip.is(':visible')) {
self.reposition(cache.event);
}
self.reposition(cache.event);

next();
}
}

// Apply the callback to img events and height checker method to ensure queue continues no matter what!
images.each(function(i, elem) {
// Apply the imageLoad to regular events to make sure the queue continues
var events = ['abort','error','load','unload',''].join('.qtip-image ');
$(this).bind(events, function() {
clearTimeout(self.timers.img[i]);
imageLoad(this);
});
// Find all content images without dimensions, and if no images were found, continue
if((images = elem.find('img:not([height]):not([width])')).length === 0) { return imageLoad.call(images); }

// Apply a recursive method that polls the image for dimensions every 20ms
(function timer(){
// When the dimensions are found, remove the image from the queue
if(elem.height && elem.width) {
return imageLoad(elem);
}
// Apply the callback to img events to ensure queue continues no matter what!
images.one(['abort','error','load','unload',''].join('.qtip-image '), imageLoad)

// Apply a recursive method that polls the image for dimensions every 20ms
.each(function(i, elem) {
(function timer(){
// When the dimensions are found, remove the image from the queue and stop timer
if(elem.height && elem.width) { return imageLoad.call(elem, NULL); }
self.timers.img[i] = setTimeout(timer, 20);
}());

return TRUE;
});
}

// If no images were found, continue with queue
if(images.length === 0) { imageLoad(images); }
});
/*
* If we're still rendering... insert into 'fx' queue our image dimension
* checker which will halt the showing of the tooltip until image dimensions
* can be detected properly.
*/
if(self.rendered < 0) { tooltip.queue('fx', detectImages); }

// We're fully rendered, so reset isDrawing flag and proceed without queue delay
else { isDrawing = 0; detectImages($.noop); }

return self;
}
Expand Down Expand Up @@ -697,13 +690,13 @@ function QTip(target, options, id, attr)
* See: updateContent method
*/
tooltip.queue('fx', function(next) {
// Redraw the tooltip manually now we're fully rendered
isDrawing = 0; self.redraw();

// Trigger tooltiprender event and pass original triggering event as original
callback.originalEvent = cache.event;
tooltip.trigger(callback, [self]);

// Redraw the tooltip manually now we're fully rendered
isDrawing = 0; self.redraw();

// Update tooltip position and show tooltip if needed
if(options.show.ready || show) {
self.show(cache.event);
Expand Down

0 comments on commit 73b536e

Please sign in to comment.