How to achieve Google Reader-like layout in Rails?

rubyonrails-talk
1

Hi

I’m trying to create a web application with a UI that is fundamentally similar to Google Reader, in Rails 3 and probably with some Javascript toolkit (jQuery?). I’m new to web development (my background is in desktop application development), however, and after some experimentation with CSS layout I’m frankly unsure of how to achieve the desired layout. Therefore I’m hoping someone on this list might provide me with some clues :slight_smile:

At the current stage, I just want to lay out a page with a navigation section to the left and a content section to the right. Like in Reader, I want both sections to take all vertical space (i.e. reach all the way to the bottom of the viewport), and the right section should stretch all the way to the right of the viewport. AFAICT Reader achieves vertical stretching through dynamically setting section heights via Javascript, whereas horizontal stretching is plain CSS (width: 100%). How do I best achieve such a layout in Rails (and with jQuery f.ex.?)?

If this isn’t the right place to ask, feel free to point me to a more suitable forum :slight_smile:

Thanks!

Arve

2

Google for something like 'two column css' and play with what you find.

3

I have read about two-column layout in CSS: The Missing Manual, but I don’t think that solution deals with the column height. When I try setting height to 100% with CSS, I don’t see any difference (whereas for width it works well).

Arve

4

You might want to take a look at some cross-browser compatible grid frameworks such as blueprint instead of starting from scratch.

Markus

5

Aha, thanks very much for the tip :slight_smile:

Arve

6

Quoting Arve Knudsen <arve.knudsen@gmail.com>:

Hi

I'm trying to create a web application with a UI that is fundamentally similar to Google Reader, in Rails 3 and probably with some Javascript toolkit (jQuery?). I'm new to web development (my background is in desktop application development), however, and after some experimentation with CSS layout I'm frankly unsure of how to achieve the desired layout. Therefore I'm hoping someone on this list might provide me with some clues :slight_smile:

One approach is use Firebug or similar browser debugger to look at the Google Reader page. Of course, you have to know enough HTML/CSS/Javascript to understand what you are looking at.

Also, look at the URL below. There are some jQuery fragments thay might be useful.

http://coding.pressbin.com/26/Create-a-Google-Reader-knockoff-using-Javascript

HTH,   Jeffrey

7

Quoting Arve Knudsen arve.knudsen@gmail.com:

Hi

I’m trying to create a web application with a UI that is fundamentally

similar to Google Reader, in Rails 3 and probably with some Javascript

toolkit (jQuery?). I’m new to web development (my background is in desktop

application development), however, and after some experimentation with CSS

layout I’m frankly unsure of how to achieve the desired layout. Therefore

I’m hoping someone on this list might provide me with some clues :slight_smile:

One approach is use Firebug or similar browser debugger to look at the Google

Reader page. Of course, you have to know enough HTML/CSS/Javascript to

understand what you are looking at.

Chrome Developer Tools is how I found out that Reader controls the height dynamically through Javascript :slight_smile:

Also, look at the URL below. There are some jQuery fragments thay might be

useful.

http://coding.pressbin.com/26/Create-a-Google-Reader-knockoff-using-Javascript

Thanks :slight_smile:

Arve