How to achieve Google Reader-like layout in Rails?

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

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

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

On Wed, Apr 6, 2011 at 11:41 AM, Peter H. <

On Wednesday, April 6, 2011 12:17:56 PM UTC+2, Arve K. wrote:

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).

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

Markus

Quoting Arve K. [email protected]:

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

On Wed, Apr 6, 2011 at 12:37 PM, Markus P.
[email protected]wrote:

Markus

Aha, thanks very much for the tip :slight_smile:

Arve

On Wed, Apr 6, 2011 at 5:47 PM, Jeffrey L. Taylor
[email protected]wrote:

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

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs