Defaulting publication to 1 column full zise and using jquery to change the layout

[Carlos Araya]

I'm looking at Treesaver and have the following questions

Is it possible to have a 1 column-full page layout by default? I think it is but want to make sure as to how

How does Treesaver interact with JQuery and Modernizr? I'm thinking about using JQuery to change the number of columns by changing the container class and changing the class of all associated resources. Would this work? Are there alternatives?

Thanks

Carlos

[Andrea Campi]

At face value, you only need to make sure that at a given page size
you only have 1 column grids in resources.

But given the way your question is phrased, I get the feeling there is
more to it :) Am I right?

You shouldn't need to use Modernizr, as we have something very similar
already; if you inspect the page you will see some classes have been
added to the html tag.
As for jQuery, no problem using it with Treesaver. Treesaver also
gives you some convenient events you can hook into.

Using it to change the number of columns, on the other hand, may not be trivial.
Can you give us a high-level overview of what you are trying to do?
That should make it easier to answer your question.

Andrea

[Carlos Araya]

I'm trying to create a settings sidebar to do the following via JQuery

Change the number of columns the text is displayed on (1 by default, with option for 2 or 3 if the size allows). There is some text I'm working on that displays best in 1 column but I want to give the user the option of displaying it in columns

My original thought was that by changing the class of the container I would be able to reflow to the number of columns that I wanted. It this a good assumption to make?

Carlos

[MaccG]

To piggyback on Carlos' question, I too am seeking a way to display 3 columns of text on an iPhone in portrait mode, but when rotated to landscape mode display 5 columns of text. Is this not trivial either, solutions?

Jason

[Andrea Campi]

On Mon, May 14, 2012 at 8:24 PM, MaccG <maccg...@gmail.com> wrote:
> To piggyback on Carlos' question, I too am seeking a way to display 3
> columns of text on an iPhone in portrait mode, but when rotated to landscape
> mode display 5 columns of text. Is this not trivial either, solutions?

that's pretty easy to do, you just need two grids, with 3 and 5
columns respectively.
As long as your CSS sets their width, Treesaver will pick the one that
fits best.

Andrea

[Jason McGovern]

I actually have two grids for landscape and portrait with 5 and 3 columns respectively:

<div class="grid test w3 fixed iphone vertical">

<div class="column c1 w3"></div>

</div>

<div class="grid test w5 fixed iphone horizontal">

<div class="column c1 w5"></div>

</div>

Yet it's not expanding to 5 columns wide. Caveat - I'm using Scott Kellum's Season's template. I've yet to see any examples where an iPhone is landscape mode takes advantage of the width by expanding it further than the token 3 columns wide.

Respectfully,

Jason

[Andrea Campi]

On Mon, May 14, 2012 at 10:34 PM, Jason McGovern <maccg...@gmail.com> wrote:
> I actually have two grids for landscape and portrait with 5 and 3 columns
> respectively:
>
> <div class="grid test w3 fixed iphone vertical">
> <div class="column c1 w3"></div>
> </div>
>
> <div class="grid test w5 fixed iphone horizontal">
> <div class="column c1 w5"></div>
> </div>
>
> Yet it's not expanding to 5 columns wide. Caveat - I'm using Scott Kellum's
> Season's template. I've yet to see any examples where an iPhone is landscape
> mode takes advantage of the width by expanding it further than the token 3
> columns wide.

What happens if you load/refresh in landscape?
The iPhone (or any mobile/tablet device) does add its own set of
challenges, but if you try it out on a desktop, you should see it
working fine.
In my experience, usually there is a good reason why things don't come
out as you expect--it's just non-trivial to figure out what that
reason is ;)

Andrea

[Jason McGovern]

Well, I'm using media queries that are quite buggy. I'm trying to make the text span the normal 3 columns (@100px ea) in portrait mode but it landscape mode on the iPhone have the text span 5 columns. When I refresh in landscape mode then flip to portrait, the media query doesn't fire, but the 2nd time thereafter the media query works as expected. The issue I'm facing is having to always display the text spanning 3 columns in landscape mode, or only find a way to expand it so that then and only then in landscape mode it spans 5 columns.

[Andrea Campi]

On Mon, May 14, 2012 at 10:47 PM, Jason McGovern <maccg...@gmail.com> wrote:
> Well, I'm using media queries that are quite buggy. I'm trying to make the
> text span the normal 3 columns (@100px ea) in portrait mode but it landscape
> mode on the iPhone have the text span 5 columns. When I refresh in landscape
> mode then flip to portrait, the media query doesn't fire, but the 2nd time
> thereafter the media query works as expected. The issue I'm facing is having
> to always display the text spanning 3 columns in landscape mode, or only
> find a way to expand it so that then and only then in landscape mode it
> spans 5 columns.

Right, yes, there are known issues with media queries unfortunately.
Can you use the classes on the html tag instead?

[Jason McGovern]

How would I target orientation without media queries? To which classes are you actually referring me in this case?

[Andrea Campi]

On Mon, May 14, 2012 at 11:08 PM, Jason McGovern <maccg...@gmail.com> wrote:
> How would I target orientation without media queries? To which classes are
> you actually referring me in this case?

E.g.:

html.mobile.landscape
html.mobile.portrait

If you inspect the DOM with Firebug or similar, you will see a bunch
of classes. The orientation ones are only on devices that are capable
of detecting that, of course.

[Scott]

You can define mobile(iPhone)/iPad specific templates using plugins built into Seasons: https://github.com/scottkellum/Seasons/wiki/Mobile-plugin

3-5 columns is kind of insane on the iPhone, do you mean iPad?

With Seasons on the iPad it is easy to change how many columns are on the iPad landscape and portrait.

Simply change the variables in your Sass configuration file:

$ipad-horizontal-columns: 9

$ipad-vertical-columns: 6

Sass plugin:

https://github.com/scottkellum/Seasons/blob/master/sass/plugin/_ipad.sass

[Jason McGovern]

I poorly described what I was aiming for. When I said 3-5 columns, what I actually should have said is that I wanted the width of the text-span to extend all the way to the edge in iphone landscape mode similar to what it does in portrait mode (i.e. not show partials of the prev and next pages on the left and right respectively. Is that doable using the mobile plugin? I started to use it, but haven't been able to get the text/figures to extend all the way in landscape mode.

Jason

[Scott]

Treesaver does not let you change the column width within an article on the same device. You will not be able to change the column width from portrait to landscape.

Hopefully Treesaver will support percentage based widths one day which will solve a lot of problems with smaller screen layouts: https://github.com/Treesaver/treesaver/issues/275