i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Bubble popup in Javascript
03-01-2012, 09:08 PM (This post was last modified: 03-02-2012 06:10 PM by haider.ali.)
Post: #1
Bubble popup in Javascript
You can create a popup on some element hover with js

Code:
<!DOCTYPE html>
<html >
<head>
  
    <title>Bubble Example</title>
<style>
.bubbleInfo {
    position: relative;
}

.popup {
    position: absolute;
    display: none;
}
</style>

   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">


    $(function () {
        $('.bubbleInfo').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this).css('opacity', 0);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    info.css({
                        top: -30,
                        left: 23,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });

                }, hideDelay);

                return false;
            });
        });
    });
    
    //--&gt;
    &lt;/script>

</head>
<body id="page">
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
    
    <div class="bubbleInfo">
        <div class="trigger">
          <a title="Read the release notes" href="">diff user</a>
        </div>
        <div id="dpop" class="popup" style='border:1px solid black;'>
        <select>
  <option >first</option>
  <option >Second</option>
  
</select>
<button>click me</button>
        </div>
    </div>
</body>
</html&gt;


Div with 'trigger' class is the element which is displayed and on hovering mouse pointer over it a popup is displayed, and div with id 'dpop' is the content of the popup. A video tutorial is available from here


reference


Quote
03-01-2012, 11:06 PM
Post: #2
RE: Bubble popup in Javascript
its a cool popup , well done.. i think there is some position issue, cant see left portion a bit in FF chrome and IE9 .


Thanks and Regards
Raju
Quote
03-02-2012, 03:58 AM
Post: #3
RE: Bubble popup in Javascript
try adjusting top and left position
Quote
03-02-2012, 10:37 AM
Post: #4
RE: Bubble popup in Javascript
if you can please fix and update.


Thanks and Regards
Raju
Quote
03-02-2012, 06:32 PM
Post: #5
RE: Bubble popup in Javascript
i've updated the code check it now
Quote
03-04-2012, 08:04 PM
Post: #6
RE: Bubble popup in Javascript
thanks man


Thanks and Regards
Raju
Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  Open Popup in javascript asp.net nisar87 4 7,897 12-27-2011 09:19 AM
Last Post: sankkrit
  Full screen popup in javascript nisar87 0 5,549 07-08-2011 04:42 PM
Last Post: nisar87



User(s) browsing this thread: 1 Guest(s)