Difficult to explain (issue title may not be clear enough), so here are the use cases:

1) Create a context, and then visit the site in a different browser (or private browser window). The context will not apply since that browser doesn't initially have the cookie. You have to resize or refresh to get the correctly loaded context.

2) Create two blocks and two contexts. One context will have max-width: 1199px and show block 1, and the other context will have min-width: 1200px and show block 2. Visit the site with your browser maximized, and you'll see block 2. Open a new tab, shrink your window to well under 1200px, and go to your site...and you will still see block 2. This is because it assumes the stored cookie is applicable, but in this case it's not because the stored cookie doesn't match the new condition of your window being smaller.

I'm attaching a patch as a quick fix. However, this would be better implemented as inline JS in the header so that it would reload the page rather than rendering everything first.

CommentFileSizeAuthor
#1 context_breakpoint-check_existing_cookie.patch2.63 KBsethfisher

Comments

sethfisher’s picture

sethfisher commented
StatusFileSize
new context_breakpoint-check_existing_cookie.patch2.63 KB

The patch.

theduke’s picture

theduke commented

Sorry it took me a while.

Patch is applied.

dadderley’s picture

dadderley commented

Hi guys I have just started using this.
This module would be very useful to me if I could get it to work.

I have this dev release installed:
Last packaged version: 7.x-1.0-alpha5+1-dev
Last updated: December 22, 2012 - 04:46

I have 3 contexts on the go (using 3 Omega breakpoints)
I have these breakpoints in my theme settings:

  • breakpoints[mobile] = (min-width: 0px)
  • breakpoints[narrow] = all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)
  • breakpoints[normal] = all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)
  • breakpoints[wide] = all and (min-width: 1220px)

I am using this to add/remove blocks for different sizes.
Of the 3 contexts I have, only the one using breakpoints[wide] works.
For the other contexts (when resizing) the page reloads the way that it should. It looks like it is trying tries to load the block, then gives up.

dadderley’s picture

dadderley commented

I have been doing more testing.
I am using the same set of breakpoints and they seem to be working as the page re-loads when it hits each breakpoint.

I have a breakpoint condition set up for each of the sizes (mobile, narrow, normal and wide).
Each of these adds a bock to the same region.
Here is what I am seeing:

@mobile width
(specific mobile block) shows.
Then stays in place for all widths (does not go away)

@narrow width
(specific narrow block) never shows
(specific mobile block) remains

@normal width
(specific normal block) never shows
(specific mobile block) remains

@wide width
(specific wide block) shows as it should. Is removed when browser window is sized down. If they all behaved like this one life would be good.
(specific mobile block) remains

So, not sure what is going on.
It almost feels like the breakpoints are not right.
I grabbed them from here http://drupal.org/node/1706600#comment-6295816 and put them in my theme info file.
They get imported without error. I am using an Omega subtheme.

Can you confirm that these breakpoints are correct?
Also, I think what I am experiencing is part of this specific issue "Current context is not checked against existing cookie when page is loaded" so I did not create a new issue. If this is a bad assumption, I could create an new issue.

dadderley’s picture

dadderley commented

Sorry for clouding the issue.

My problem has nothing to do with this issue and everything to do with my breakpoint module configuration.
Context Breakpoint appears to be doing its job.
For my purpose, these settings from http://drupal.org/node/1706600#comment-6295816, do not work.

  • breakpoints[mobile] = (min-width: 0px)
  • breakpoints[narrow] = all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)
  • breakpoints[normal] = all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)
  • breakpoints[wide] = all and (min-width: 1220px)

If any body has a workable set of breakpoints that work for Omega, please post. There seems to be a lack of documentation and examples.

dadderley’s picture

dadderley commented

OK,
It seems that the Breakpoint modelled on Omega media queries are too complex for Context Breakpoint
http://drupal.org/node/1706600#comment-6930600
So back to square one for me in trying to put together all of the pieces to find a workable solution.
I guess, I should start a new issue as none of this has any relevance to this specific issue.

dadderley’s picture

dadderley commented

Sorry for all the confusion.

gurrmag’s picture

gurrmag commented

In relation to the patch in #1, is there any news on the suggestion that:

this would be better implemented as inline JS in the header so that it would reload the page rather than rendering everything first.

Having to reload the page is really slowing performance when visiting my site for the first time from a mobile.

Happy to help with testing if I can...

theduke’s picture

theduke commented
Status: Needs review » Fixed

Sorry for the delay.

The cookie is now checked immediately in the header.
No more waiting for attach() to be triggered.

It is already committed.
I will release a new version tonight.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.