Create pop-ups Coda Bubble style with this jQuery plugin
Based on the tutorial at http://jqueryfordesigners.com/coda-popup-bubbles/ this plugin can be used to create multiple pop-ups Coda Bubble style.
Allow to set options to replace PNG images to .GIF files, or to simply remove bubbles in Internet Explorer, to deal with PNG opacity rendering issue.
Enjoy!
Hi Carlo,
ReplyDeleteGreat plugin for Jquery, however I'm having a problem inplimenting it.
I'm just trying to build a sample page using your example graphics, and I can't seem to get any of the png's to load other than the bubble-tail2.png (bubble-1 - 8 won't display).
Would you have any idea what might cause this? I'm using Coda to develop with as well as jQuery 1.3.2-min and ui-1.7.0.min.
thanks!
-Nick
Hi Carlo,
ReplyDeleteIt looks to be good plugin. but i am unable to implement it even for simple page.
see it below. I have removed start and end bracket from my html tags to pot here otherwise it was not allowing to post. please help me:
link href="bubble.css" rel="stylesheet" type="text/css" media="all" />
script type="text/javascript" src="jquery-1.3.2.min.js">script>
script type="text/javascript" src="jquery-ui.min.js">script>
script type="text/javascript" src="jquery.codabubble.js">script>
script type="text/javascript" src="jquery.codabubble_jso.js">script>
script type="text/javascript">
$(function(){
opts = {
distances : [40,40],
leftShifts : [-30,-30],
bubbleTimes : [400,400],
hideDelays : [0,0],
bubbleWidths : [200,200],
msieFix : true
};
$('.coda_bubble').codaBubble(opts);
});
script>
head>
body>
div class="coda_bubble">
div>
p class="trigger">Trigger Bubblep>
div>
div class="bubble_html">
[BUBBLE CONTENT]
div>
div>
body>
*/
@midKight
ReplyDeleteHello mate,
I think it might be because the css file cannot find the images. it should be an easy fix.
Can you post a link to page where u are using the plugin (or a copy)?
@nik...
Hi there,
Can you also post the link of your page so that I can have a look and help you out?
Cheers
This comment has been removed by the author.
ReplyDeleteplease send me ur mail id.
ReplyDeleteI will send the file in email.
my mail id is nkgupta96@gmail.com
Thanks
Nikhil
Ciao Carlo,
ReplyDeletegreat plugin! just a question, do we really need to include ALL the jquery UI file? Even in the packed version are 44KB, quite heavy.. it would be great a lightweight version of this plugin without the entire UI file
-
Francesco
(ho scritto in inglese cosi' anche gli altri capiscono :)
Ciao Francesco!,
ReplyDeleteThanks for your post!
It is not necessary to include the UI file... I just include it by default generally and forgot to remove it. As UI is loading from google API I assume most visitors might have already it in their cache. Thanks for pointing this out.
Salutoni fratello... ma stai in Italia o qui in UK?
Im trying to use this great plugin on images in blocks on a Drupal powered website without luck? Any ideas how to do it
ReplyDeleteHi Morgan,
ReplyDeleteSorry...I am not familiar with Drupal powered websites. If you can post the link of your page I can have a look... or send it to carlo.tsc.mail@googlemail.com
Cheers
Hi Carlo,
ReplyDeleteGreat job with this! What would need to be altered for the bubble to float downwards as opposed to up?
Best,
Darren.
Hello Darren,
ReplyDeleteThanks!...
I think it possible to do it by changing
top: '-=' + distance + 'px'
to
top: '+=' + distance + 'px'
in both 'animate' function.
Let me know how it goes!
Hello Carlo,
ReplyDeleteMany thanks for that!
With a bit of tweaking I have it functioning only there are a couple of glitches with the full bubble displaying.
It seems bubble-4 and bubble-5 do not want to display... although it was fully displaying when I was working on it locally.
Any thoughts as to why this might be happening?
Hello Darren,
ReplyDeleteI think it is just an issue of the images not being found.
Try using firebug and check the path of the images for each bubble.
Hope this help... if not post here the link of the page you are working on and I will have a look ...
Cheers
Hi Carlo,
ReplyDeleteI see the instructions to switch the animation from up to down (top: '- to top: '+) but unfortunately it just moved the bubble down and did not flip it like I had hoped. But my real questions is..is it possible to do both up and down? For instance, I have two rows of images of two each. I want the top row to animate up and the bottom row to animate down (so the bubbles don't block the above images). I tried adding the changes from above and making two vars (triggerUp and triggerDown) and two functions calling these, but no luck.
Is there a straightforward way of doing this? TIA!
Hi Chris,
ReplyDeleteI would set up an option array variable triggerModes (parallel to other bubble's arrays in plugin) and conditionals to check whether to animate + or - within the loop for each bubble.
maybe give it a try?
ciao Carlo
ReplyDeletecould you provide a link to parameters documentation ?
For example what are hideDelays parameter values for ? I understand the first is the "hide" delay, but what about the second ?
What about bubbleTimes ?
Is there a function to trigger and hide a bubble from the code, something like $('#id').codaBubble.trigger() and $('#id').codaBubble.hide() ?
Grazie!
Hi guys,
ReplyDeletei need to show my coda bubble which is inside a overflow hidden div. z-index doent work.
Any ideas?
Thanx in advance.
I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery!
ReplyDeleteYou can download sources from
http://plugins.jquery.com/project/jqBubblePopup
Example and Tutorials from
http://maxvergelli.wordpress.com/2010/02/10/bubble-popups-jquery/
If you are using Prototype with jQuery, then you will need to modify the Coda Bubble JS file.
ReplyDeleteChange all instances of "$" to "
There are a few instances where this needs to occur, such as "$.browser.msie" to "jQuery.browser.msie".
Of course, this is in addition to using jQuery noconflict:
http://api.jquery.com/jQuery.noConflict/
Hello Carlo, first to congratulate you for this initiative. Second, ask yourself if you have followed or are you going with this development. If you could not go on, I would ask you to authorize us to continue with your work. In this way your work can be developed further.
ReplyDeleteSend me your response to: administrador@acsoftlive.com
Regards
Hello Carlo,
ReplyDeleteThank you for sharing this, really easy to use and it is great to see your interaction with those using it.
I have one question. The content in my pop-ups are dynamically driven and I cannot predict how much text will be entered in them. This fluctuation of the amount of pop-up text dictates the position of the pop-up. Is there a way that I can fix the bottom of the pop-up to be in a certain position and the top of the pop-up will grow according to the amount of text entered? Currently the pop-up windows grow from the bottom down.
Thank you,
Brad
Hi,
ReplyDeleteI just tried downloading coda_bubble from http://www.myjquery.co.uk/docs/x/plugins/coda_bubble/coda_bubble.php (tried using both Chrome and Webkit) but when decompressed (using OS X 10.6.3 Archive Utility) I just get an empty directory.
Hi,
ReplyDeleteIt appears http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js has vanished and myjquery.co.uk is gone. Does anyone have this .js file or know where else I can find it? Thanks!
Josh