Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Tooltips on Anything Slider- Firefox bug

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #37025
    pattie13
    Member

    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.

    #98408
    Mottie
    Moderator

    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 });
    #98413
    pattie13
    Member

    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 :)

    #98416
    Mottie
    Moderator

    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).

    #98417
    pattie13
    Member

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

    #98419
    Mottie
    Moderator

    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.

    #98420
    pattie13
    Member

    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?

    #98421
    Mottie
    Moderator

    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.

    #98423
    pattie13
    Member

    ok, will do tomorrow :)

    #98504
    pattie13
    Member

    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.

    #98505
    Mottie
    Moderator

    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.

    #98507
    pattie13
    Member

    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!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.