Forums

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

Home Forums Other What jquery plugin is used on jquery homepage

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23306
    cssgirl
    Participant

    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.

    #49971
    Designer42
    Participant

    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;
    }

    #49960
    cssgirl
    Participant

    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)
  • The forum ‘Other’ is closed to new topics and replies.