Tooltips on Anything Slider- Firefox bug

[pattie13]

I am using the Anything Slider set up to fade instead of slide. Using ProLosers Main Demo 1 as a base, I managed to get tooltips to show up on the jQuery generated slide nav- using this code:

$(function(){

$('#slider1').anythingSlider({

autoPlay: true,

autoPlayLocked: true,

resumeDelay: 500,

theme : 'metallic',

easing : 'easeInOutBack',

navigationFormatter : function(index, panel){

return [index - 1];

},

onSlideComplete : function(slider){

// alert('Welcome to Slide #' + slider.currentPage);

},

animationTime: 0,

// set this delay to fade out the current slide before animating

// set here to match the fade time

delayBeforeAnimate : 500,



onSlideBegin: function (e, slider) {

slider.$items.fadeOut(500);

},

onSlideComplete: function (slider) {

slider.$items.fadeIn(500, "swing");

}

});



$.jatt();

});

Everything works exactly how I want it to in all browsers tested except Firefox- when I click on a nav item the tooltip also appears in the upper left corner. I need to get rid of the duplicate and just have the tooltip above the nav on hover.
Here is a link to my files: http://www.dragonflyint.com/Slider-wFade-tooltips/test.html

Anyone know of a workaround for this in Firefox Windows and Mac?

Thanks.

[Mottie]

Hmm, yeah I think that just might be because of my crappy tooltip plugin that I haven’t updated in a while LOL. Try using Tipsy. The only difference you’d need to make would be to remove the $.jatt(); and replace it with this:

$('a.tooltip').tipsy({ live: true });

[pattie13]

Thanks again, Mottie! I literally made the switch in the source code and the bug was fixed…but I lost all my styling. What should I call my css styles to work with this? Right now for jatt they are:

.tooltip { cursor: pointer; }
#tooltip {
min-width: 100px;
color: #dddddd;
background: #444;
border: 1px solid #777;
padding: 8px;
display: none;
opacity: 0.9;
filter: alpha(opacity=90);
text-align: center;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
z-index: 1000;
}
#tooltip .body {
display: block;
text-align: center;
}

What should I rename them for tipsy? Sorry if this is a dumb question- that sometimes happens when you mix designers with code :)

[Mottie]

Well, try this:

.tipsy {

font-size: 10px;

position: absolute;

padding: 5px;

opacity: 0.9;

filter: alpha(opacity=90);

z-index: 100000;

}

.tipsy-inner {

background-color: #444;

color: #ddd;

min-width: 100px;

padding: 5px 8px 4px 8px;

text-align: center;

border-radius: .5em;

-moz-border-radius: .5em;

-webkit-border-radius: .5em;

}

If you want the include the full stylesheet, you can find it here (click on “Raw” to get the plain stylesheet for copying and pasting).

[pattie13]

hmmm, the styles aren’t working. I just get the default yellow box.

[Mottie]

Hmm, I’m not sure… With Tipsy, you’re kinda stuck with one color, so maybe copy the entire stylesheet and not the modified css I shared above and see if that makes a difference.

[pattie13]

Sorry, I mean that I see the default box you get on a Mac- none of the tipsy styles are showing up… i plugged in these scripts-


Should there be another?

[Mottie]

I’m not sure what you mean, I don’t own a mac… are you sure there aren’t any errors on the page? It sounds like something is broken. If you are using a modern browser, just press F12 and click on the console tab and look for any errors.

If you don’t have any errors, can you share any recent changes you made since the time the tooltips were working.

[pattie13]

ok, will do tomorrow :)

[pattie13]

Hi Mottie,
Yes, the error says: “Error: $(“a.tooltip”).tipsy is not a function”
Here’s what I did differently:
Replaced $.jatt(); with $(‘a.tooltip’).tipsy({ live: true }); – this fixed the Firefox bug but I lost all styling. So then, I copied the tipsy.css- added some scripts: ‘jquery-1.2.3.min.js,
‘jquery.tipsy.js’, js/projects.js and deleted the old ‘jquery.jatt.min.js’ script. All remains unchanged, the tooltips have no styling.

[Mottie]

Oh, you added another copy of jQuery? You only need one – I definitely wouldn’t use version 1.2.3. Is the Tipsy css added using a <link> tag or inside of a style tag? Maybe update your test page (link you shared above), so I can help better.

[pattie13]

Oh, I got rid of that since I last posted. Also, the problem is solved-I didn’t name the js files with the proper directory path. Now everything works beautifully!

Thanks, Mottie!

[Author]

Posts