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.
Related
I made this website: bosd.eu.
It has a piece of javascript/jQuery that focusses on the proper area of the page when clicked.
However, when I use Firefox, either mobile or desktop nothing works.
So It has to be the javascript right?
var initSmoothScroll = function(){
$('.scroll').click(function () {
doScroll($(this))
});
};
var doScroll = function($element){
$('body').animate({
scrollTop: $('#' + $element.attr('target')).offset().top - 10
}, 300);
};
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#topbutton').fadeIn('slow');
}
else {
$('#topbutton').fadeOut('fast');
}
});
This is how it is processed in HTML:
<a class="scroll" target="story" id="storybutton"><h1>ABOUT</h1></a>
I found this when searching, but it did not provide me with an answer:
Jquery Auto scroll not working in firefox
smooth scroll not working in firefox, works fine in IE
Animate scroll not working in firefox?
Apparently i needed to add HTML to the body.animate:
var doScroll = function($element){
$('body, html').animate({
It works flawlessly now.
I have a dropdown that opens when you click an icon (the little black filter thing that is in fact a link) in a grid that's inside a dialog. It is positioned perfectly in Chrome if I get the co-ordinates from target.position().
Here is a screenshot of what it looks like in Chrome using target.position():
scope.showFilterMenu = function ($event, id) {
var modal = $('div[kendo-window]');
var target = $($event.currentTarget);
var offset = target.position(); // THIS WORKS FOR CHROME BUT NOT IE
var offset = target.offset(); // THIS WORKS FOR IE BUT NOT CHROME
var top = offset.top;
var left = offset.left + 25; // 25 is extra buffer
modal.append(filterMenu);
var filterMenu = $('ul[sgid=' + id + ']'); // the dropdown menu is a ul list
filterMenu.css({
'width': 50 + 'px',
'top': dd_top + 'px',
'position': 'fixed', // must be fixed so that it follows the window contract and expand
'left': left // align LHS with filter icon
});
}
But using target.position() in IE throws it off completely and I have to use target.offset() instead. Does anyone know how I can find a solution for both browsers please?
Why dont you make a simple if condition? Like if(IE) {X} else {Y}
var IE = (document.all) ? true : false;
Edit:
In addition you can check this too:
var ie_browser = jQuery.browser.msie;
Ok, ignore this one. It was removed in jQuery 1.9.
Maybe this helps:
There is a IE 11 update included.
Check if user is using IE with jQuery
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.
I just found this tutorial on making an image cross fade transition with jquery.
The demo page works perfectly (jquery 1.2.3 used).
But when I apply the code to my site (jquery 10.1.0 embedded) it is not working...
When I embed the 1.2.3 version it works.
Anyone an idea whats wrong with the code?
here it comes:
// wrap as a jQuery plugin and pass jQuery in to our anoymous function
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
// cache the copy of jQuery(this) - the start image
var $$ = $(this);
// get the target from the backgroundImage + regexp
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
// nice long chain: wrap img element in span
$$.wrap('<span style="position: relative;"></span>')
// change selector to parent - i.e. newly created span
.parent()
// prepend a new image inside the span
.prepend('<img>')
// change the selector to the newly created image
.find(':first-child')
// set the image to the target
.attr('src', target);
// the CSS styling of the start image needs to be handled
// differently for different browsers
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
// Browser sniffing is bad - however opera < 9.5 has a render bug
// so this is required to get around it we can't apply the 'top' : 0
// separately because Mozilla strips the style set originally somehow...
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
// similar effect as single image technique, except using .animate
// which will handle the fading up from the right opacity for us
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};
})(jQuery);
// note that this uses the .bind('load') on the window object, rather than $(document).ready()
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
$('img.fade').cross();
});
html is that:
<img class="fade" src="original.jpg" style="background: url(hover.jpg);" />
heres the link to the tutorial (dated 2008):
http://jqueryfordesigners.com/image-cross-fade-transition/
$.browser is not supported by new version of jQuery.
I have this div that overlays images to color them blue when you mouseover. Works nicely! Except - it doesn't seem to work in IE at all.
Any ideas?
The js
http://www.rollinleonard.com/elements/overlaymouseover.js
The page
http://www.rollinleonard.com/elements
Thanks!
IE doesn't yet support rgba. IE9 beta does. In your case, since you don't have any text on the overlay, you don't need to set background opacity. Just set regular opacity on your #overlay.
#overlay{
...
background-color: rgb(0, 0, 255);
-moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
...
}
http://davidwalsh.name/css-opacity
http://css-tricks.com/rgba-browser-support/
Update: Like you mentioned, the clicks don't go through to the links. One approach is to add a handler to the overlay, copying the underlying link.
$(window).load(function(){
var $overlay = $('#overlay');
$('img').bind('mouseenter', function () {
var $this = $(this);
if ($this.not('.over')) {
$this.addClass('over');
$overlay.css({
width : $this.css('width'),
height : $this.css('height'),
top : $this.offset().top + 'px',
left : $this.offset().left + 'px',
}).show();
// This is hacked up,could be better, but works, it replaces the handler
// everytime you display it
$overlay.onclick = function() {
location.href = $this.getAttribute('href');
}
}
}).bind('mouseout', function () {
$(this).removeClass('over');
});
});
Use keyword var to declare your variables:
instead of:
$overlay = $('#overlay');
Use:
var $overlay = $('#overlay');
Same thing with $this = $(this);
Update --
Not sure what I was thinking.
As long as you are making an assignment your javascript is valid, however the error in IE is coming from line 15 of overlaymouseover.js:
left : $this.offset().left + 'px', // extra comma breaks IE
And that is your problem.