jQuery Bubble Popup
jQuery is my new web obsession. I have fallen in love with it; its simplicity, its power. I can find plugins that do nearly everything I could imagine, and things I would never want to do. One thing that I was trying to do is create a simple popup bubble. When a button is clicked, the bubble will pop up and will disappear when the user clicks away from it. This is much like the Google Maps bubbles.
Below is the code that I eventually got to work.
jQuery
-
$(document).ready(function(){
-
$("#button").bind("click", function(e) {
-
$("#bubble").css({
-
left:$(this).offset().left-5,
-
top:$(this).offset().top-$("#bubble").height()-35
-
}).show();
-
e.stopPropagation(); // Stops the following click function from being executed
-
$(document).one("click", function(f) {
-
$("#bubble").hide();
-
});
-
});
-
});
As you can see from the previous code, an event is fired when a button ("#button") is pressed and displays a bubble ("#bubble") at the location of the button that was clicked. This can easily be change to the location of the mouse, or a different location completely.
The key to this example is the `e.stopPropagation()` code which will stop the event from continuing onto the next important element: `$(document).one("click", func);`. This will bind a function to the document to be handled once. Its simple really, but unless you know all the right functions and objects, it can be quite confusing.
One last bit of code allows the user to click on the bubble without making it disappear. It uses the same stopPropagation() function as before. This is personal preference, but I like to have it.
May 22nd, 2008 at 8:40 pm
(ICS Calendar “bug” fix)
Hello!
Sorry for posting this here, but my email to studio@fullimpact.net was rejected.
I found a solution to a bug that some people encountered while working on a client’s website and was wondering if you could maybe incorporate it into the next version of ICS Calendar.
the bug itself and my somewhat trivial solution: http://wordpress.org/support/topic/172180?replies=5#post-765533
cheers
Grigory.
June 14th, 2008 at 1:03 pm
Thanks for this, I’ve implemented a slightly changed version on one of my sites.
July 13th, 2008 at 4:37 pm
Hi! and thanks,
i want to also have a link in the popup that will also close the popup!
here is the code
Some text
some text
Show popup
also close from here This is a test. When you click away, it will disappear.
jQuery(document).ready(function(){
jQuery(”#button”).bind(”click”, function(e) {
jQuery(”#bubble”).css({
left:jQuery(this).offset().left-5,
top:jQuery(this).offset().top-jQuery(”#bubble”).height()-35
}).show();
e.stopPropagation(); // Stops the following click function from being executed
jQuery(document).one(”click”, function(f) {
jQuery(”#bubble”).hide();
});
});
// STOP the menu from disappearing when it is clicked
jQuery(”#bubble”).bind(”click”, function(e) { e.stopPropagation(); });
});
what and where do i put the code for id=”cls”
Thanks! :}