- This topic is empty.
-
AuthorPosts
-
May 11, 2011 at 9:49 am #32684GerwantMember
I’ve encountered a problem with two scripts while working on a site.
There’s a list in one of the containers :
- Track 1Edit
- Track 2Edit
Each element (track 1, track 2 etc.) has a link - an icon, which is hidden and made visible on mousover with the following:
$('.album-playlist li').mouseover(function() {
$('.icons', this).removeClass('hide');
});
$('.album-playlist li').mouseout(function() {
$('.icons', this).addClass('hide');
});The icons also have tooltips :
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});Now it all worked fine...until I introduced the custom scrollbar from there :
http://plugins.jquery.com/project/jScrollPane into the same div. When I did, the tooltip appeared "corrupted" - it didn't appear anymore or it did but for a split second.And after debugging I've managed to find the culprit :
It's the following class, used to center the layout :
.container { width:960px; margin:auto; }
The tooltip+scrollbar started to work properly after I removed the margin:auto from that class. Changing margin into anything else (e.g. 15%) causes the same problem.
Maybe it has something to do with the inheritance of margin property?
Any solutions/workarounds? -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.