0

i'm trying to use the jquery cookie plugin to effectively 'remember' the position of a scrollpane created by the jscrollpane plugin.

basically i want jscrollpane to look at the cookie and set the initial horiztonal position based on the saved value. and then on change of position, update the cookie.

i started out w/ arrays, but am now using objects. the key is the div #id, which i coded to reflect the category of posts it is displaying... this way it will be unique. the key's value is the horizontal position that jscrollpane kicks out.

i thought it would work best to turn the object i want to store as a cookie into a JSON string, but when i try to convert it back into an object using JSON.parse(cookie) i get syntax errors in IE and Chrome.

jQuery(function($){

    //load the cookie 
    var cookie = $.cookie('xpos');
    //Load the saved values or a new array if null.

    var xpositions = cookie ? JSON.parse(cookie) : new Object();

    console.log(xpositions);


    // Loop over each scroll-pane
    $( ".scroll-pane" ).each( function( index ){
        $(this).jScrollPane({showArrows: true, autoReinitialise: true}); //initialize jscrollpane
        var api = $(this).data('jsp'); //access jscrollpane api 

        //var catID = parseInt($(this).attr('id').match(/[0-9]+/)); //grab cat_ID which we've stored as part of the div id#
        var catID = $(this).attr('id');

        if( typeof xpositions[catID] != "undefined" ) {
            console.log(catID +" = element exists in array and position = " + xpositions[catID] );
            api.scrollToX(xpositions[catID]); //set scroll-pane position to position saved in cookie
        } 

        $(this).bind('jsp-scroll-x',function(event, scrollPositionX){   //change cookie on scroll event     
            xpositions[catID] = scrollPositionX;
            console.log(catID + " = " + scrollPositionX);

            //set the cookie with array of x-positions, expires after 7 days
            $.cookie('xpos', JSON.stringify(xpositions), { expires: 7, path: '/' });

            }
        );

    }); //end each


});

you can check out the live version here: http://www.testtrack.tv/

edit: i should also mention that this seems to work on my local XAMPP server, but still fails live. thanks!

edit: why is it that posting on SO seems to point me in a better direction? i have since found the jookie plugin to just flat out WORK where the cookie plugin was failing w/ my object.

http://joncom.be/code/jquery-jookie/

my new code is this:

// initialise a cookie that lives for 1 week
$.Jookie.Initialise("xposition", 60*24*7);

// Loop over each scroll-pane
$( ".scroll-pane" ).each( function( index ){
    $(this).jScrollPane({showArrows: true, autoReinitialise: true}); //initialize jscrollpane
    var api = $(this).data('jsp'); //access jscrollpane api 

    var catID = $(this).attr('id');

    var xpos = $.Jookie.Get("xposition", catID);
    if(xpos) {
        api.scrollToX(xpos); //set scroll-pane position to position saved in cookie
    }


    $(this).bind('jsp-scroll-x',function(event, scrollPositionX){   //change cookie on scroll event     
        // set a value to the cookie
        $.Jookie.Set("xposition", catID, scrollPositionX);
        }
    );

}); //end each

2 Answers 2

1

xpos=%7B%22cat-45%22%3A0%2C%22cat-48%22%3Anull%7D Is what you set as my cookie when I visited your page; a JSON parser isn't going to be able to parse that. You want it to be xpos={..object stuff here..}.

Essentially, if you can't copy the string into a variable manually, the parser will have trouble.

Sign up to request clarification or add additional context in comments.

5 Comments

so does that mean that JSON.stringify(xpositions) is failing to properly turn my object into a JSON string?
Well, more likely something with $.cookie trying to escape things. I have no problem manually setting a cookie as document.cookie = "someId={\"four\":\"five\"}"
@Robert- thank you so much for your help. minutes after posting here (and i've been at this all day) i found the $.jookie plugin, which does exactly what I am trying to achieve. i've edited my question to show my new code.
Are you still having a problem then?
no, that plugin solved in minutes what i've been working on for hours. le sigh. again- i appreciate your help!
1

Have you try to do an eval ?

if (cookie !== null) {
    var jsoncookie = eval("("+cookie +")"); // $.parseJSON(cookie );
}

1 Comment

No I probably didn't try that. Since the question is so old I have no idea what I was working on so I probably won't test it. However, I hope it will help someone else.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.