obihill / restive.js Goto Github PK

From what I can gather, restive.js pings http://www.restive.io/ping/ua.php to get the user agent.
In my browser, this results in a bunch of messages like so:

  XMLHttpRequest cannot load http://www.restive.io/ping/ua.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

If I understand correctly, restive.io is not giving the right headers.
I created my own ua.php like so:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Pragma, Cache-Control');
echo $_SERVER['HTTP_USER_AGENT'];

I then replaced the line 3150 in restive.js from:

url: "http://www.restive.io/ping/ua.php",

with

url: "http://localhost/ua.php"

It would be good if:
1 - the headers on restive.io would allow CORS
and/or
2 - If there was an option to define our own get_user_agent script or our own get_user_agent function
3 - If there were directions on how to reproduce the ua.php on restive.io, because mine is very simple, but it might be that there are edge cases that I don't know of.

[note: I am aware that my ua.php is totally open to any request from anyone. I'm just using it as a placeholder, as I hope I can fix it without messing up the source of restive.js before I go to production]

Got here because of the recent Smashing Magazine article.

After reviewing the code, I was surprised with the abundant (200+) use of switch with a constant, i.e.: switch(true). There are many cases where an if statement would seem acceptable. Is this intended or was the code preprocessed or converted somehow?

If intended, what is the reasoning behind isRetina()s definition (line 3076) :

function isRetina()
    {
        var pixel_ratio_int = getPixelRatio();
        switch(true)
        {
            case (pixel_ratio_int >= 2):
                return true;
                break;
        }

        return false;
    }

versus

function isRetina ()
{
    return getPixelRatio() >= 2;
}

Seems like the 6,000+ code lines could be massively shortened ;)

When embedding a page that uses restive.js from an external domain; example.com hosts the restive webpage, test.net hosts an iframe that embeds example.com, restive attempts to access the parent window and is denied access. This causes javascript processing to error.

Happens at storage creation, and presumably whenever it attempts to access window.parent.

//Create window storage
window.rstv_store = {'main': {}};
window.parent.rstv_store = {'main': {}};

I added the following code but i dont see the turbo classes, tried in iphone andriod phones tablets :
$('body').restive({
breakpoints: ['10000'],
classes: ['nb'],
turbo_classes: 'is_mobile=r_mobi,is_phone=r_phone,is_tablet=r_tablet,is_landscape=r_landscape',
force_dip: true
});

Hello,

Thanks for your nice and very useful plugin !

I have a question :

how can we test mobile layout on desktop with turbo classes ? Even if we try to resize the browser window, the turbo classes don't appear in the source code. Is there a method to force it ?

Thanks for your answer,

Sincerely,

Alexander

The is_phone turbo was not set when testing our page on a Windows phone 8.1 in the ie mobile browser.

Thanks restivejs looks really good.
Everything works for me when I resize my PC browser.
But when I load the website on my iphone it doesn't work at all.
My body tag stays empty on the iphone.

This is the code I used:

$(document).ready(function () {
        $('body').restive({
      breakpoints: ['240', '320', '480', '640-p', '640-l', '960'],
      classes: ['css-240', 'css-320', 'css-480', 'css-640-p', 'css-640-l', 'css-960']
      });
  });

And when I'm adding turbo_classes:'is_portrait=portrait,is_landscape=landscape,is_mobile=mobi,is_phone=phone,is_tablet=tablet'
then my browser shows this in the body tag of my browser on my PC:

body class="portrait function (){return h} Array() { [native code] } (b,a){Array.forEach(this,b,a);return this} (){for(var b=this.length, a=Array(b);b--;)a[b]=q(this[b]);return a} this.filter(function(b){return null!=b})} (b){var a=Array.slice(arguments,1);return this.map(function(c){return c[b].apply(c,a)})} (b){for(var a={},c=Math.min(this.length,b.length),d=0;d<c;d++)a[b[d]]=this[d];return a={},c=0,d=this.length;c<d;c++)for(var e in b)if(be){a[e]=this[c];delete b[e];break}return (b,a){return-1!=this.indexOf(b,a)} (b){this.push.apply(this,b);return this.length?this[this.length-1]:null} this.length?this[Number.random(0,this.length-1)]:null} (b){this.contains(b)||this.push(b);return a=0,c=b.length;a<c;a++)this.include(b[a]);return a=this.length;a--;)this[a]===b&&this.splice(a,1);return i=0;i<=this.length;i++){this.shift();}} b=[],a=0,c=this.length;a<c;a++){var d=typeOf(this[a]);"null"!=d&&(b=b.concat("array"==d||"collection"==d||"arguments"==d||instanceOf(this[a],Array)?Array.flatten(this[a]):this[a]))}return b} b=0,a=this.length;b<a;b++)if(null!=this[b])return this[b];return null} (b){if(3!=this.length)return null;var a=this.map(function(b){1==b.length&&(b+=b);return b.toInt(16)});return b?a:"rgb("+a+")"} (b){if(3>this.length)return null; if(4==this.length&&0==this[3]&&!b)return"transparent";for(var a=[],c=0;3>c;c++){var d=(this[c]-0).toString(16);a.push(1==d.length?"0"+d:d)}return b?a:"#"+a.join("")} i=1;i<this.length;i++){if(this[i][0]==this[i-1][0]){this.splice(i,1);}}} css-320"

But the body tag on the iphone is still empty and just shows: body

Would be great if you would know why.

Thanks :)

Using restive over "https" protocol causes this error at first call

Mixed Content: The page at 'https://mywebsite.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.restive.io/ping/ua.php'. This request has been blocked; the content must be served over HTTPS.

Possible to update the script to make an https endpoint call?

The 1.3.1 fix that squelched the onAddClass from firing on every resize now causes the initial breakpoint class assignment to not take place until a user manually resizes the browser to cross a breakpoint threshold. Before, pages could "wake up" with their selector classes assigned to whatever the current breakpoint setting defines.

Is there a way to access the events outside of the $('body').restive({ }); ?

Hi there,

i really like restive.js script, i implement it in one of my project, but i occur for quite big problem of delay when script was loaded. I test it in some devices and every time page was loading, some of elements on page was jumping cause of delay. For example if i got showed some elements in normal non restive screen view, and in restive view i want to show in their places other elements and hide screen ones, i had like 0,5 second delay when restive script was loaded. I tried to load it on the very top as one of the first scripts, but it doesn't solve my problem. For example when i take my styles from restive classes to media-queries, problem was solved cause css is loading much faster than restive.

Maybe it's cause of my lack of knowledge about restive.js, but for now i changed my styles to media-queries again only because it's much faster than loading restive.js script.

Regards

Hi, first is a nice Idea. But is it possible to add a mobile First Option? Working with Values that trigger on the Min Value makes it easier.

Also at the End (biggest Viewport) i lost every class, for mobile first is also needed to have a class here.

More like a question: From what source data does RestiveJS determine the device class, and how often is this list updated?

HI there,

your plugin sounds great and I went off implementing it the way described in the docs. Strangely I get console output via firebug but no classes are added to the body tag. Do you have any idea what I am missing?

Got my initial structure under this url so you can view the code directly:
http://bit.ly/1DooXtV

I'd really appreciate a hint or two in the right direction.
Thank you in advance, patowod

I have the following, which I expect the page will become "restified" before the alert is shown. Unfortunately that is not the case on Windows Phone 8 (default IE browser). The page transforms to mobile view only after clicking on OK.

    $( function() { 
        $('body').restive({
            breakpoints: ['10000'],
            classes: ['nb'],
            turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait'
        });
        alert('XXX');
    });

When I include restive.js on my html+css static files it throws the error opening a javascript alert popup that cannot be closed. The error occurs only on firefox and in every page, no matter if I delete all the content or the restive() init call.

Is it possible to make "breakpoints" and "classes" optional, if I only intend to use the turbo classes? Guess this makes a feature request.

Restive, while on iOS with Provate browsing mode enabled, makes the site to just show infinite alerts and force you to close Safari. Tried both full and minified version of JS, with multiple iPads and iPhones.

Hey!

Really loving your plugin and currently retrofitting an existing client's desktop site with restive.js to make responsive. Has been working exactly as expected up until a few days ago.

Now, it seems whenever I'm using the chrome emulator or other user agent emulators, it doesn't always pick up that I'm on a mobile device, but only picks up the resolution.

Is this a known issue or could I be doing something wrong?

Here's the snippet I'm using on the page.

Any help would but appreciated! Thanks!

As per above.

(Sorry for the influx of issues as I am currently evaluating Restive to be used in a project)

$(document).ready(function () {
$('body').restive({
breakpoints: ['240','320','480','640','720','960','1280'],
classes: ['rp_240','rp_320','rp_480','rp_640','rp_720','rp_960','rp_1280'],
turbo_classes:'is_portrait=portrait,is_landscape=landscape,is_mobile=mobi,is_phone=phone,is_tablet=tablet' });
});

I wrote the following code above..
My selector tag does not read the "mobile, phone and tablet" when it is activated. But it read "portrait and landscape". How can I solve this?

I can't seem to get turbo_classes, other than "is_mobile" to show up in the selector. Any ideas?

Is there a way to get the mobile display (viewport < 600) switch to full desktop display via the restive call? (i.e., if I'm using turbo classes like "mobi" and "phone" on mobile display, is there a way to remove those classes from the body tag when a certain link to "switch views" is clicked)?

Is it possible to get the viewport width calculated without scrollBars when i define my breakpoints in html

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.

Hi
This plugin have really nice capabilities and looks promising. I am going to propose restivejs to my team soon.
But it would be really great if the main restivejs site also responsive.

Regards
Avinash

onAddClass fires on every resize event even if the class has already been added:

$('body').restive({
                        breakpoints:[ '480', '640',  '768',  '960', '100000' ],
                        classes:    [ 'R S', 'R ML', 'R MP', 'R L', 'MAX' ],
                        force_dip: true,
                        onAddClass: function(name) { $('body').trigger('restiveAddClass', name); }
                    });

...elsewhere...

    $('body').on('restiveAddClass', function(e, name) {
        console.log('restiveAddClass = ' + name);
    });

I would expect the onAddClass event to occur only if the class is truly added (meaning: it wasn't there before -- I only want to be notified once, otherwise I'd just use onResize). The only way to work around this is to keep track of the last class name and only trigger my event listener if there was a change. I think the plugin should take care of that.

If it is too late to change this behavior, I would welcome an onChangeClass event that is only called once if jQuery addClass or removeClass executed, and it would pass the class name with a Boolean indicating the add or remove state.

I'm finding an issue purely with the latest Safari where the breakpoints are being triggered at roughly half their defined pixel widths. I set a test at 2000 pixels and after it's perceived that this width is reached in Safari the class is completely removed and the styling reverts to the default.

Hello,
I insert this code to my page:
`<script type="text/javascript" src="js/restive.min.js"></script>

and add two class to my css file:
.css-768{ /*some code*/ } .css-922{ /*some code*/ }
but when I refresh page I got this error msg:
TypeError: this.prop is not a function

what is wrong?!

When the phone is held in portrait and the keyboard is brought up (say, by clicking on a text input), and the keyboard happens to be tall, the landscape mode is wrongly triggered by Restive. This is because Restive thought the viewport width is greater than the height.

Great plugin!
Is there a way to maintain the classes of the breakpoints after passing the corresponding width? I want to emulate the max-width behavior of the media queries.
For example, if I have 2 breakpoints - 500 and 700 - is there a way to maintain the 700 breakpoint class when the device gets to 500 width, so it will show the 500 class and the 700 class?
I want to change something at 700 breakpoint and keep it like for any width below that.

Thank you.