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.

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

Forgot to add this one

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

Do you mean like json-rpc mapping for rails?

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

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…

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* 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;
}