Topic: Scrolling Website with iPhone Accelerometer

Dear All,

I would like some help with setting a cookie using javascript. I am trying to write a script for my website's mobile style that will enable the iOS users to scroll the page by tilting their device.

I don't have any knowledge in Javascript and after spending maybe 10 hours of reading and trying i managed to write the following code:

<script type="text/javascript">
var Enabled=true;
function Run()
{
if(Enabled == true)
{
alert("Accelerometer Scrolling Enabled");
window.ondevicemotion=function Scrolacc() {
ay = event.accelerationIncludingGravity.y*10;
window.scrollBy(0,ay).accelerationIncludingGravity.y;
}

}else
{
alert("Acceleration Scrolling Disabled");
window.ondevicemotion=function Scrolacc() {
ay = event.accelerationIncludingGravity.y*10;
window.scrollBy(0,0).accelerationIncludingGravity.y;}
scrolldelay = setTimeout('Scrolacc()',100); // scrolls every 100 milliseconds
}
}

function stopScroll() {
       clearTimeout(scrolldelay);
}
</script>

The script does not work on load (this is what i want) so i need to provide a way to the users to enable/disable the feature. I have included two buttons in the webpage that call the functions of the above script with the following code:

<center>
Use the buttons to enable/disable accelerometer scrolling
<button onclick="Enabled=true;Run()">Enable</button>
<button onclick="Enabled=false;Run();stopScroll();">Disable</button></center>

The problem is that the browser does not remember the settings (if the users have pressed the buttons) so on the next load the user is requested to activate the script again if he/she wishes to.

While i have read enough about setting cookies with javascript i cannot do it. I just don't understand it... This is my first script so please help me.

Can somebody add the code so that the script would add a cookie and save the settings either if enable or disable button has been pressed and be able to read it?

I would appreciate it very much.

Thank you very much.


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Re: Scrolling Website with iPhone Accelerometer

Hi,

Indeed, working with cookies is a real pain with JS.
Here is a code which should help you:

function cookieMan(key, value, options) {

    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = options || {};

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

Now you can set your cookie using:

cookieMan("myCookie", "myValue",  { path: '/' });

and read your cookie using:

var value = cookieMan("myCookie");

Untested but should work. You can also pass some options:

raw: true maining that the value will not be encoded
expires: the expiration date
path: from where the cookie will be applied
domain: the scope of the cookie
secure: whether the cookie need secure access

We need Amazon reviewers. Please do one!
Book: "Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript" Buy Now! (or review).
/!\ Don't forget to "Like" WebApp.Net from the homepage