SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Changing jQuery Hover Link to Onload When Enter Site

    Hi,

    I have a jQuery script that when you hover over a link a text bubble on mouseover will pop up... but I am trying to make the text bubble load when the webpage does instead of having to hover over the link. ( instantly load the text bubble when the page does )

    here is the code...

    jQuery

    /***********************************************************/
    /* tinyTips Plugin */
    /* Version: 1.0 */
    /* Mike Merritt */
    /* Updated: Feb 4th, 2010 */
    /***********************************************************/

    (function($){
    $.fn.tinyTips = function (supCont) {

    /* User settings
    **********************************/

    // Enter the markup for your tooltips here. The wrapping div must have a class of tinyTip and
    // it must have a div with the class "content" somewhere inside of it.
    var tipFrame = '<div class="tinyTip"><div class="content"></div><div class="bottom">&nbsp;</div></div>';

    // Speed of the animations in milliseconds - 1000 = 1 second.
    var animSpeed = 200;

    /***************************************************************************************************/
    /* End of user settings - Do not edit below this line unless you are trying to edit functionality. */
    /***************************************************************************************************/

    // Global tinyTip variable;
    var tinyTip;
    var tText;

    // When we hover over the element that we want the tooltip applied to
    $(this).hover(function() {

    // Inject the markup for the tooltip into the page and
    // set the tooltip global to the current markup and then hide it.
    $('body').append(tipFrame);
    tinyTip = $('div.tinyTip');
    tinyTip.hide();

    // Grab the content for the tooltip from the title attribute (or the supplied content) and
    // inject it into the markup for the current tooltip. NOTE: title attribute is used unless
    // other content is supplied instead.
    if (supCont === 'title') {
    var tipCont = $(this).attr('title');
    } else if (supCont !== 'title') {
    var tipCont = supCont;
    }
    $('.tinyTip .content').html(tipCont);
    tText = $(this).attr('title');
    $(this).attr('title', '');

    // Offsets so that the tooltip is centered over the element it is being applied to but
    // raise it up above the element so it isn't covering it.
    var yOffset = tinyTip.height() - 35;
    var xOffset = (((tinyTip.width() - -112) / 2)) - ($(this).width() / 2);

    // Grab the coordinates for the element with the tooltip and make a new copy
    // so that we can keep the original un-touched.
    var pos = $(this).offset();
    var nPos = pos;

    // Add the offsets to the tooltip position
    nPos.top = pos.top - yOffset;
    nPos.left = pos.left - xOffset;

    // Make sure that the tooltip has absolute positioning and a high z-index,
    // then place it at the correct spot and fade it in.
    tinyTip.css('position', 'absolute').css('z-index', '1000');
    tinyTip.css(nPos).fadeIn(animSpeed);

    }, function() {

    $(this).attr('title', tText);

    // Fade the tooltip out once the mouse moves away and then remove it from the DOM.
    $('div.tinyTip').fadeOut(animSpeed, function() {
    $(this).remove();
    });

    });

    }

    })(jQuery);


    HTML


    <link rel="stylesheet" type="text/css" media="screen" href="tinyTips.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tinyTips.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $('a.imgTip').tinyTips('<img src="demo-image.jpg" /><br />You can even put images or any other markup in the tooltips.');

    });
    </script>



    CSS

    img.tTip { margin: 8px 15px 8px 0px; float: left; }

    .tinyTip { width: 325px; height: 29px; padding: 17px 0px 0px 0px; display: block; background: url(tinyTip-top.png) 0px 0px no-repeat; }
    .tinyTip .content { padding: 0px 15px 0px 15px; font-size: 14px; font-family: "Lucida Sans Unicode"; color: #010101; background: url(tinyTip-content.png) 0px 0px repeat-y; }
    .tinyTip .bottom { height: 17px; background: url(tinyTip-bottom.png) 0px 0px no-repeat; font: 0px/0px sans-serif; }



    Any help would be awesome

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The jQuery .hover() function that this plugin uses is described as shorthand for the mouseenter and mouseleave events. What you might be able to do (untested), is to manually trigger the mouseenter event on the element when the dom is ready. Something like:

    Code JavaScript:
    $(document).ready(function(){
         $('#myElement').trigger('mouseenter');
    });

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure but cannot get this to work. Anyways trying another script now... Thank you Anthony


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •