Issue when using Multiple Constructors

[deplorable]

First of all, great work on RestiveJS Obinwanne. Media Queries are a major PITA to use, and while there will always be detractors, Restive is a step in the right direction, IMHO.

I have a project where I've attempted to use RestiveJS, but I've noticed some breakpoint classes are not being set in the browser on first page load. On subsequent page loads, the breakpoint classes appear - which is kind of strange - I thought it might have been a network latency issue.

Anyway, here is the Javascript I'm using:

$.restive.startMulti();
$('html').restive({ 
    breakpoints: ['748', '978', '1218', '1340', '10000'],
    classes: ['css-748', 'css-978', 'css-1218', 'css-1340', 'css-10000'],
    form_factor: 'pc',
    turbo_classes: 'is_mobile=mobile,is_phone=phone,is_tablet=tablet,is_landscape=landscape,is_portrait=portrait,is_pc=desktop,is_tv=television,is_retina=retina,is_non_mobile=nonmobile'
});

$('html').restive({ 
    breakpoints: ['300', '460', '600', '900', '1200', '1797', '10000'],
    classes: ['css-300', 'css-460', 'css-600', 'css-900', 'css-1200', 'css-1797', 'css-10000'],
    form_factor: 'phone',
    platform: 'ios',
    turbo_classes: 'is_mobile=mobile,is_phone=phone,is_tablet=tablet,is_landscape=landscape,is_portrait=portrait,is_pc=desktop,is_tv=television,is_retina=retina,is_non_mobile=nonmobile'
});

$('html').restive({ 
    breakpoints: ['300', '460', '600', '900', '1200', '1797', '10000'],
    classes: ['css-300', 'css-460', 'css-600', 'css-900', 'css-1200', 'css-1797', 'css-10000'],
    form_factor: 'tablet',
    platform: 'ios',
    turbo_classes: 'is_mobile=mobile,is_phone=phone,is_tablet=tablet,is_landscape=landscape,is_portrait=portrait,is_pc=desktop,is_tv=television,is_retina=retina,is_non_mobile=nonmobile'
});

$('html').restive({ 
    breakpoints: ['300', '460', '600', '900', '1200', '1797', '10000'],
    classes: ['css-300', 'css-460', 'css-600', 'css-900', 'css-1200', 'css-1797', 'css-10000'],
    form_factor: 'phone',
    platform: 'android',
    turbo_classes: 'is_mobile=mobile,is_phone=phone,is_tablet=tablet,is_landscape=landscape,is_portrait=portrait,is_pc=desktop,is_tv=television,is_retina=retina,is_non_mobile=nonmobile'
});

$('html').restive({ 
    breakpoints: ['300', '460', '600', '900', '1200', '1797', '10000'],
    classes: ['css-300', 'css-460', 'css-600', 'css-900', 'css-1200', 'css-1797', 'css-10000'],
    form_factor: 'tablet',
    platform: 'android',
    turbo_classes: 'is_mobile=mobile,is_phone=phone,is_tablet=tablet,is_landscape=landscape,is_portrait=portrait,is_pc=desktop,is_tv=television,is_retina=retina,is_non_mobile=nonmobile'
});

$.restive.endMulti();

On the first page load, the HTML element's classes are: landscape desktop nonmobile On subsequent page reloads/refreshes, the HTML element's classes are: landscape desktop nonmobile css-10000 (ie. as desired)

My desktop resolution is 1920x1080 and I have my browser running in a maximized window. I'm using jQuery 1.8.3 and have tried this code in Chromium 40.0.2186.0 (64-bit) and Firefox 35.0.1.

Any light you could shed on the issue would be appreciated!

Many thanks, Damian.

[obihill]

Hi Damian,

First of all, thanks a lot for using Restive.JS, and also for your words of support. Media Queries are bound to become a lot less useful as we see more device classes like smartwatches becoming ubiquitous.

To answer your question, Restive.JS uses sessionStorage to store a few key variables before the page is loaded. This causes a few challenges when testing on a desktop because Restive.JS would already have captured these settings when the page was loaded in Chrome [desktop mode], so when you switch to Mobile emulation to test on a mobile, the earlier settings persist.

What I would suggest is that you clear sessionStorage immediately after you activate Mobile Emulation, and then reload the page. You can clear sessionStorage by running the following in your Console:

while (sessionStorage.length) sessionStorage.removeItem(sessionStorage.key(0));

When you do this, anything that might have been already set by Restive.JS when the page loaded in desktop mode is removed, and replaced with a clean set.

Note: Make sure you do this after Mobile Emulation is active i.e. Chrome is now showing Mobile devices. Also do this when you change from one mobile device to another.

If this doesn't help, please let me know.

[deplorable]

Thanks for the speedy assistance Obinwanne,

I'm not actually testing/emulating for mobile yet - just for regular desktop PCs. For testing on desktop I clear the browser cache (including session storage - so it's as if I've never visited the page before), and then open the page. The first page load yields landscape desktop nonmobile and subsequent page reloads yield landscape desktop nonmobile css-10000.

The behaviour I expected was for landscape desktop nonmobile css-10000 to be present on the first and second page loads - but it seems like the initial page load where the data is collected and put into sessionStorage doesn't result in the css-10000 breakpoint class being added to the HTML element. I'm not sure why that would be - is that by design?

I've tried placing the script code shown above at the end of HEAD, as well as at the start and end of the BODY section, but it didn't achieve much. :)

[obihill]

No problem. Sorry, I though you were working on mobile.

For the record, it's usually better to have all Restive.JS code in <HEAD>.

I will test this out tomorrow and let you know what I find.

[obihill]

Hi Damian,

My apologies for the delay. Still looking into this. Please give me another 24 hours.

Cheers.

[deplorable]

No worries Obiwanne - delays aren't an issue, especially with an open source project like Restive.JS. We're very fortunate to have a tool like Restive.JS in the first place, so no stress!

Thanks for clarifying that it's better to have Restive.JS code in the <HEAD> - that helps a lot.

Cheers, Damian.

[obihill]

Hi Damian,

I've figured out what was causing this. I'm currently working on a fix and should have that in a new package (1.3.3) in the next couple of days.

More on this soon.

[deplorable]

Many thanks Obiwanne,

I appreciate your efforts and hope the issue wasn't too difficult to isolate. Will stay tuned for updates. :)

Cheers.

[obihill]

Not a problem, Damian. It has to be done. I'll let you when it's ready [should be ready by Friday].

Thanks for giving Restive.JS a chance.

Cheers.

[obihill]

Hi Damian,

Please check the latest Restive.JS release 1.3.3. This issue is fixed. Please confirm and advise.

Cheers.

[deplorable]

Absolutely brilliant - works beautifully in all of the browsers I tried.

Thanks heaps for fixing this issue Obiwanne, I'm so happy to say goodbye to (nightmarish) media queries and hello to Restive.JS!

Best Regards, Damian.

[obihill]

Glad it's working. It was a simple fix but really hard to track down.

Thanks for the words of support. I'm working on something to make Restive.JS a little more accessible for Web developers. More on that soon.

Cheers.

[deplorable]

Sounds good - thanks. Words of support are the least I could do! Hope the project gets more widespread exposure and adoption by developers. Don't let the naysayers get to you - everyone likes to have a whinge, especially when they haven't spent countless hours developing something!

Damian.

[obihill]

Thanks mate.

Cheers.