popover window how-to

rubyonrails-talk
1

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.

2

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

3

Forgot to add this one

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

4

Do you mean like json-rpc mapping for rails?

5

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

6

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; }