Question

I’m trying to create a voting/polling system and I want to make sure my idea is even possible before I dig in. I really like how the Colorbox examples look and work for a “popup” window/display, and I’m also really interested in this jqBarGraph plugin for displaying voting results. What I’d like to do when the user votes, is have the Colorbox “popup” come up and have the animated bar graph show up inside. I’m not sure how this would be implemented because in the examples of jqBarGraph that I’ve seen, the “graph” gets hooked up to a <div> tag or some other element. I know you can set up inline HTML in the Colorbox so maybe I would need to set up my <div> element with that, and then have the jqBarGraph use it?

So my question is: Is it possible to 1) Execute javascript when initializing my Colorbox (maybe in onOpen:function(){ ?) and 2) Is there a (easy?) way to display an instance of jqBarGraph inside my Colorbox popup?

Here is my (pseudo) code example so far of how I see this maybe working:

//This would happen in my bntVote click event?
$(".btnVote").colorbox({width:"50%",
                        inline:true, 
                        href:"#myGraph",
                        function(){ 
                                    var arrayOfData = new Array(
                                             [[75],'voter 1'],
                                             [[25],'voter 2']); 
                                    $('#myGraph').jqBarGraph({ data: arrayOfData });

                         }});

<div id="myGraph" style="display:none;"></div>

The idea for the function() above in my code sample where I’d like to execute the javascript for the jqBarGraph, came from here. I’m also open to any other suggestions, I just think these two plugins look very slick and would love to be able to implement them together.

Also, for what it’s worth, I’m using VB.NET (.NET 3.5) and VS2010.

Many thanks in advance!

Answer 1

I think you already have all the pieces you need. Colorbox does support using inlined content, so your graph div would go there, and if you need to do any initialization when Colorbox opens, you can specify that in the onOpen function.