Popover window how-to

Can anybody point me to good info, preferably all current & modern Ruby
1.9 + Rails 3.1 + JQuery, on doing a popover window and integrating into
a RoR app?

Essentially I need to do something similar to autocomplete, and calendar
pickers, and so on. When focus goes into an area, pop over a grid of
checkbox choices for selecting the most common items, if user starts
typing to select something not in that grid, replace that grid with
search results.


Scott R.
[email protected]
http://www.elevated-dev.com/
(303) 722-0567 voice

Do you mean like json-rpc mapping for rails?

http://www.railslodge.com/plugins/668-json-rpc

Forgot to add this one
http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

Hi Scott,

Still a newbie myself to Rails, but these might help:

http://dailyjs.com/
http://www.justinball.com/2011/03/11/get-jquery-working-with-ruby-on-rails-3/
http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html
http://rubygems.org/gems/jquery-rails

Fabio

I installed the OptinPop plugin to create pop over windows for my
newsletter opt-ins. I wanted to measure the effectiveness of my pop over
window’s ability to get people to sign up for my newsletter. Since I
have been using Dynatracker to track the number of people who click on
my links and also to split test elements on my web pages, I decided to
find a way to split test multiple versions of my pop over window with
Dynatracker to see which one converts the best.
Here’s a sample of my CSS code of the pop over window…

/* POP OVER */
#popover
{
width: 650px;
height: 380px;
margin: 0px;
padding: 0px;
text-align: center;
background-image:
url(“http://www.maverickwebcreations.com/track/s.php?id=X”);
}
#popover #popover_form
{
position: absolute;
top: 280px;
left: 198px;
margin: 0px;
padding: 0px;
}
#popover #popover_form label
{
float: left;
width: 100px;
margin: 3px 5px 10px 0px;
padding: 0px;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
font-style: normal;
color: #000000;
text-align: right;
}
#popover #popover_form input
{
margin: 0px;
padding: 3px;
font-size: 12px;
font-style: normal;
color: #000000;
float: left;
}
#popover #popover_form input.popover_form_textbox
{
width: 185px;
}
#popover #popover_form input.popover_form_button
{
width: 194px;
}
#popover #popover_form br
{
clear: left;
}