Develop Reference

YUI dialog/panel not rendering correctly in IE iframe

I have built a few popups - some using YUI dialog, some using panel. These get rendered correctly in FF, Windows Safari, Chrome. Please refer following screenshots:
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/WorkingDialog-Firefox.PNG
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/WorkingPanel-Firefox.PNG
However in IE 7, 9 & 10 the dialogs appear in a distorted manner sometimes and appear normally sometimes. See the screenshots below:
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/DistortedDialog-IE9.PNG
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/DistortedPanel-IE9.PNG
I am not able to figure out what goes wrong only sometimes in IE. I am using YUI version 2.7.0.
To see this in action, you can access this blog page. Hover on one of the thumbnails and click on preview/download/transmit buttons.
http://embed-test-blog.blogspot.in/2012/04/sample-for-yui-forum.html
The blog url I provided above embeds the following url using an iframe.
http://embed.mediapartner.com/embed.aspx?e=f2+Wk9GtFDM=
I have noticed that if I directly access this url from IE, the dialogs appear to render alright! So I strongly feel that this is something to do with YUI dialogs being invoked within an iframe in IE. But I am not able to figure out how to overcome the problem. Any ideas?
Here is the code I am using for the preview dialog above - just in case that's of any help.
LargePreviewPopup =
{
popup: null,
init: function()
{
this.popup = new YAHOO.widget.Panel("LargePreviewPopup",
{
width: "380px",
height: "410px",
zIndex: 3000,
fixedcenter: true,
visible: false,
draggable: true,
modal: true,
constraintoviewport: false,
effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.10 }
});
if (YAHOO.env.ua.ie > 0)
this.popup.cfg.setProperty("iframe", true);
PluginFix.showHidePlugins(this.popup);
this.popup.setHeader("NA");
this.popup.setBody("NA");
this.popup.render(document.body);
},
onShowLargePreviewClick: function(userId, captionId, height, width)
{
if (!this.popup)
this.init();
this.popup.setBody("<div class='ajaxloader'></div>");
this.popup.setHeader("Preview");
this.popup.hideEvent.subscribe(function()
{
LargePreviewPopup.popup.setBody("<div class='ajaxloader'></div>");
});
this.popup.cfg.setProperty("height", height + 57 + "px");
this.popup.cfg.setProperty("width", width + 35 + "px");
this.popup.show();
var cObj = Custom.Ajax.asyncRequest('GET',
'/embed/embed_operations.aspx?action=large_preview&user_id=' + userId + '&caption_id=' + captionId
+ '&h=' + height + '&w=' + width,
{
success: function(o)
{
LargePreviewPopup.popup.setBody(o.responseText);
}
});
}
};

For anyone who might be facing this problem - I could not figure this out using YUI. So I implemented my pop-ups using jquery-ui on IE. So on all the non-IE browsers I use YUI pop-ups while for IE this is done using jquery-ui.

Why isn't this jquery animation rotating like it's supposed to?

This .js works perfectly in the fiddle
function animationLoop() {
$("#ToBeAnimated").css({
top: ($("#paperTrail").offset().top - parseInt($("#ToBeAnimated").height()) / 2),
left: ($("#paperTrail").offset().left - parseInt($("#ToBeAnimated").width()) / 2)
}).rotate(270);
$("#ToBeAnimated").animate({
top: $("#paperTrail").offset().top + $("#paperTrail").height() - $("#ToBeAnimated").height() / 2
}, 1000, function() {
$(this).animate({
rotate: "180deg"
}, function() {
$("#ToBeAnimated").animate({
left: $("#paperTrail").offset().left + $("#paperTrail").width() - $("#ToBeAnimated").width() / 2
}, 1000, function() {
$(this).animate({
rotate: "90deg"
}, function() {
$("#ToBeAnimated").animate({
top: $("#paperTrail").offset().top - $("#ToBeAnimated").height() / 2
}, 1000, function() {
$(this).animate({
rotate: "0deg"
}, function() {
$("#ToBeAnimated").animate({
left: $("#ToBeAnimated").width() / 2
}, 1000, function() {
setTimeout(animationLoop, 1000);
});
});
});
});
});
});
});
}
animationLoop();​
But on the actual site the scissor rotation isn't working or is somehow broken... I have inspected it... guessed and checked... researched possible conflicts...But Im stuck! Maybe I am missing something obvious?
Thanks a million for helping!... To see the animation on the live site just click the "Clip It!!!" button at the bottom of the 1st coupon!
extreme coupon network
UPDATE: It's something to do with having multiple instances of the animation on the page... When I look at a page with one result it works for me... HOWEVER... I am still unable to make it work with many items on the page (which is what I am really after).... Ideally... Whichever coupon you click on will have the animation appear on it... Currently the animation only works on the 1st coupon... and very shakey
Thanks again!

The fiddle you are testing with is using jQuery version 1.8.2. On your webpage, however, you are using version 1.7.2. If you change your jQuery version in the fiddle to 1.7.2, you get exactly the same buggy behavior (jerky animation in FF, no rotation in IE or Chrome) as on your page.
Solution: Update the version of jQuery you're using in your project!

Jquery tooltip is very jumpy

I'm trying to use the jquery tooltip plugin to expand some image thumbnails, and show the full sized images when someone hovers over the thumbnails. However this is very jumpy, the tooltip jumps around 2-3 times before being fixed in one place even when the mouse stays static.
Why is that? Is there a way to fix it?
Html code:
<ul class="gallery" id="gallery">
<li>
<img src="<?=site_url('images/Balloon Fest..jpg');?>" class="galleryImg" />
</li>
</ul>
Javascript:
$(".galleryImg").tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", this.src)
.attr('width', 300).attr('height', 300);
}
});

I found a solution on the jquery forum.
Just remove show and hide effects like this:
jQuery('#myelement').tooltip({
show: false,
hide: false
});

I've used that same jQuery plug-in, but it was given me some problems with large amount of elements on the same page. After testing some, I've opted for this one:
You can see a working demo here!
And the web page link Here!
EDITED
As requested on the comments, here you have a jQuery extension based on the above plugin:
JQUERY
(function($) {
$.fn.tooltipImg = function(options) {
// options
var opts = $.extend({}, $.fn.tooltipImg.defaults, options);
// when the mouse gets over the element
$(this).hover(function(e){
this.t = this.alt;
var c = (this.t != "") ? "<br/>" + this.t : "",
src = ($(this).data("src")!='') ? $(this).data("src") : this.src,
res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>';
$("body").append(res);
$("."+opts.wrapper)
.css({
"top" : (e.pageY - opts.xOffset) + "px",
"left" : (e.pageX + opts.yOffset) + "px"
})
.fadeIn("fast");
},
function(){
$("."+opts.wrapper).remove();
});
// when the mouse moves while over the element
$(this).mousemove(function(e){
$("."+opts.wrapper)
.css({
"top" : (e.pageY - opts.xOffset) + "px",
"left" : (e.pageX + opts.yOffset) + "px"
});
});
}
// options defaults
$.fn.tooltipImg.defaults = {
xOffset : 10,
yOffset : 30,
wrapper : 'myTooltipImgWindow'
}
})(jQuery);
USAGE
$(document).ready(function(){
$('.tooltipMe').tooltipImg();
// with options
$('.tooltipMe').tooltipImg({
xOffset : 20,
yOffset : 40,
wrapper : 'myToolTipContainerClass'
});
});
You can see this working Fiddle!
This Fiddle illustrates images from cross-domain, with relative path and from the img src.
Note that the relative path under Fiddle is buggy, sometimes you see it, other times you don't, but it works just fine!

I've seen this happen before - that's why I searched for a tooltip that is more flexible, easy-to-use, and easily integrated. I found a great tool through Listly - check out WalkMe.com. I think you'll find the results very pleasing. Let me know how the images work out.

In writing my own simple toolTip, I found that when I appended my tooltip to an non-body element. It was jumpy or jittery between hiding/showing of the toolTip when in IE7, IE8, and IE9.
For example, I had $('li').append(toolTip html..) which results in jittery or jumpy hide/show of toolTip. Was not jumpy or jittery in firefox, Chrome, and Safari. Not fine in IE7, IE8, and IE9.
When I switch to $('body').append(toolTip html..), it displays as expected for IE 7, IE8, and IE9, and it still works fine in firefox, Chrome, and Safari.

This Jquery Menu is Driving Me Nuts?

I'm using a jquery navigation menu that has the line follow when you hover over an element and highlights it. It works now, but I'm having a bunch of quirky issues that I can't figure out for the life of me.
I'll show you my code first and then explain the issues I'm having.
$(document).ready(function()
{
$('#nav2 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav2 li.ybg').stop().animate({left:offset.left+12+"px",width:thiswidth+"px"},400,function(){
$(this).animate({height:"28px"},150);
});
},
function()
{
$('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
var offset=$(this).offset();
$(this).animate({left:offset.left+40+"px",width:"55px"},600,'easeOutBounce');
});
});
});
Also, here is the DIV for the ybg if it helps:
ul.nav li.ybg { background-color:#5222B4; position:absolute; z-index:50; width:55px; height:4px; margin-top:6px; }
The main problem is that when you move your mouse off of the menu it stops where it is and shrinks instead of going back to the left most item (Home).
There are other quirks but I'm hoping that if I can figure this out I'll be able to work out the rest.
Hopefully that makes sense (the URL is www.buildagokart.com if you want to see what I'm talking about - it's just a random URL I'm using to test).

...
$(this).animate({ left: "0px", width: "55px" }, 600, 'easeOutBounce');
...

Removing a hover effect from a revisited page with back button

I'm working on this website, and have a little thorn in my side. When I click a link in the sticky note on this page, then hit the back button, the link still appears to be hovered-over.
What would be the least script-intensive way to prevent the link from thinking it's still being hovered over? The problem appears in Safari, Firefox, and Opera, but not in IE8 or Chrome. Tested on both Mac and Windows with same results (excepting IE8, of course... Windows only.)
I was thinking that it would probably be not efficient to attach any kind of mouseover event to the document, since it would fire quite often, unless I sorely misunderstand the way events bubble up through the DOM.
Here's some javascript and html source if you don't want to wade through what I've linked you to:
/* Link hover effects */
//Fix Opera quirk:
$('.tooltip a').css('left', '0px');
// jQuery hover, animating color smoothly.
// If it's in the #tooltip, bump it to the right 5 pixels while hovered.
$('a').hover(function(){
if ($(this).is('.tooltip a')) {
$(this).stop().animate({
color: '#D42B1D',
left: 5
},{
duration: 'fast'
});
} else {
$(this).stop().animate({color: '#D42B1D'},{
duration: 'fast'
});
}
},function(){
if ($(this).is('.tooltip a')) {
$(this).stop().animate({
color: '#005B7F',
left: 0
},{
duration: 600
});
} else {
$(this).stop().animate({color: '#005B7F'},{
duration: 600
});
}
});
--------------------------------------------------
<div class="tooltip transp">
<ul>
<li>About Us</li>
<li>News / Events</li>
<li>Contact Us</li>
<li>Directions</li>
<li>Links</li>
</ul>
</div>

This will get rid of your problem.
$(window).bind('beforeunload', function(){
$('a.tooltip').css({color: '#005B7F', left: 0});
});
However I would ask yourself if all this js is worth it for something that can mostly be achieved using css and the :hover pseudo class.

Can't give a you a quickfix but a suggestion. Just try to edit your code for a use of mouseenter und mouseleave events. As of jQuery 1.4.1 the hover event can be specified (mapping to "mouseenter mouseleave"). In most cases this works better.
Tested Code
Works for me.
$('.tooltip').delegate('a', 'mouseenter', function() {
$(this).stop().animate({
color: '#D42B1D',
left: '5px'
},{
duration: 'fast'
});
});
$('.tooltip').delegate('a', 'mouseleave', function() {
$(this).animate({
color: '#005B7F',
left: '0'
},{
duration: 'fast'
});
});