Grow your CSS skills. Land your dream job.

What jquery plugin is used on jquery homepage

  • # September 23, 2008 at 10:14 am

    What is the plugin that they jquery website is using on their main page for those three links (lightweight footprint, css3 compliant, cross browser) that show the nice rounded corner bubble that pops up when hovered over?

    I looked in their JS file, and found this is controlling the fade :

    Code:
    $(‘#jq-intro li’).hover(
    function(){$(this).find(‘div.jq-checkpointSubhead:hidden’).fadeIn(500);},
    function(){$(this).find(‘div.jq-checkpointSubhead:visible’).fadeOut(500);}
    );

    Is this being controlled by a plugin? The info that pops up in the bubble is populated from a hidden div.

    I want to do something similar on a site I’m working with, but I’m just jumping into jquery so I don’t know what’s what yet ;) I’ve been messing with "clueTips" which is nice, but not exactly what I want. I want something nice and smooth like on the jquery page.

    # September 23, 2008 at 3:20 pm

    I am not sure what they are using. I don’t think it is a plugin. I looked at that same thing. I am assuming they are just hiding the div.jq-checkpointSubhead.
    I think the effect is just built into the jQuery .js file already. Check out the CSS file. The div jq-checkpointSubhead is in there. Its styles are sorted out there. Then in the HTML, all the text and links are in there.
    I was looking at doing that too. Now that you found the effect that helps me out too.
    Here is the CSS I found in their document:
    html.js div.jq-checkpointSubhead {
    display: none;
    }
    body.jq-enhanced #jq-intro li div.jq-checkpointSubhead {
    /*opacity: 0.0001;*/
    position: absolute;
    width: 253px;
    height: 54px;
    background: url(../images/bg_ctaTooltip.png) 0 0 no-repeat;
    top: -1.5em;
    left: -35%;
    z-index: 100;
    }
    body.jq-enhanced #jq-intro li div.jq-checkpointSubhead p{
    font-size: 1em;
    padding: 10px 5px 0 50px;
    color: #AE0001;
    font-weight: bold;
    line-height: 1.3em;
    margin: 0;
    cursor: pointer;
    }

    # September 23, 2008 at 5:44 pm

    Ah I see what they are doing. Sweet. There are doing something like son of suckerfish but adding in the fun fade effect with jquery. Awesome.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".