SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Cookies to make action stay on browser refresh or closed/Re-open

    Hello everyone!

    I have this piece of JQuery:

    Code:
    <script type="text/javascript">
    
    $(document).ready(function() {
    
    $('#tab1').on('click',function(){
    
        $('ol li span').removeClass(function() {
    
              return $(this).attr('class');
    
            }).addClass('default');
    
    });
    
    $('#tab2').click(function(){
    
        $('ol li span').removeClass(function() {
    
              return $(this).attr('class');
    
            }).addClass('style2');
    
    });
    
    $('#tab3').click(function(){
    
        $('ol li span').removeClass(function() {
    
              return $(this).attr('class');
    
            }).addClass('style3');
    
    });
    
    });
    
    </script>

    HTML:
    HTML Code:
    <a id="tab1" href="#">Sample</a>
    <a id="tab2" href="#">Sample</a>
    <a id="tab3" href="#">Sample</a>
    As you can see I simply need to apply a particular style to list in a span when a tab with the specific ID is clicked, the issue is Cookies which I do not eat often.
    How do I make this stay? If the user selects/clicks a particular tab I would rather the style remain on refresh or browser close and if nothing is selected when the page is first visited than the default applies.



    By the way I am using ID on the link (anchor) because it is doing something unrelated to this post.

    I can find my way around applying a single style (default) but in this case there are different styles for each tab clicked.

    This I do not know.

    Thanks for reading my sob story.

    IC

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    If you don't mind not supporting IE 7, you could always use Local Storage. It's new to HTML 5 and allows you simply to save key value pairs to the browsers local storage using JavaScript.
    This website shows you what its supported on: http://caniuse.com/#search=localstorage

    There are two options with local storage
    Local storage - This is persisted beyond page refreshes
    Session storage - This is persisted while the browser session is still active. When you close your browsers tab, the storage is lost.

    Here is an example with your code:
    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery persistence example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <ol><li><span>The mighty span</span></li></ol>
        <a id="tab1" href="#">Tab1</a>
        <a id="tab2" href="#">Tab2</a>
        <a id="tab3" href="#">Tab3</a>
        
        <script type="text/javascript">
          $(document).ready(function() {
            //Class to apply?
            var myClass = localStorage.getItem("myClass");
            $('ol li span').removeClass($(this).attr('class')).addClass(myClass);
            
            $('#tab1').on('click',function(){
              $('ol li span').removeClass($(this).attr('class')).addClass('default');
              localStorage.setItem("myClass", "default");
            });
            
            $('#tab2').click(function(){
              $('ol li span').removeClass($(this).attr('class')).addClass('style2');
              localStorage.setItem("myClass", "style2");
            });
            
            $('#tab3').click(function(){
              $('ol li span').removeClass($(this).attr('class')).addClass('style3');
              localStorage.setItem("myClass", "style3");
            });
          });
        </script>
      </body>
    </html>
    Ref: http://stackoverflow.com/questions/1...tabs-in-jquery

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you don't mind not supporting IE 7, you could always use Local Storage. It's new to HTML 5 and allows you simply to save key value pairs to the browsers local storage using JavaScript.
    This website shows you what its supported on: http://caniuse.com/#search=localstorage

    There are two options with local storage
    Local storage - This is persisted beyond page refreshes
    Session storage - This is persisted while the browser session is still active. When you close your browsers tab, the storage is lost.

    Here is an example with your code:
    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery persistence example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <ol><li><span>The mighty span</span></li></ol>
        <a id="tab1" href="#">Tab1</a>
        <a id="tab2" href="#">Tab2</a>
        <a id="tab3" href="#">Tab3</a>
        
        <script type="text/javascript">
          $(document).ready(function() {
            //Class to apply?
            var myClass = localStorage.getItem("myClass");
            $('ol li span').removeClass($(this).attr('class')).addClass(myClass);
            
            $('#tab1').on('click',function(){
              $('ol li span').removeClass($(this).attr('class')).addClass('default');
              localStorage.setItem("myClass", "default");
            });
            
            $('#tab2').click(function(){
              $('ol li span').removeClass($(this).attr('class')).addClass('style2');
              localStorage.setItem("myClass", "style2");
            });
            
            $('#tab3').click(function(){
              $('ol li span').removeClass($(this).attr('class')).addClass('style3');
              localStorage.setItem("myClass", "style3");
            });
          });
        </script>
      </body>
    </html>
    Ref: http://stackoverflow.com/questions/1...tabs-in-jquery
    Thanks for the response, this seem to work but it is not storing the action.
    When I refresh the page I lose the previous state. And when I click the first tab, I don't go back to default.

    But thanks for the input, I really appreciate it.

    IC

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Morning IC,

    Glad I could help a bit, but I am a little confused by your response.
    Quote Originally Posted by Iconic_creator View Post
    Thanks for the response, this seem to work but it is not storing the action.
    What action? Have I missed something?

    Quote Originally Posted by Iconic_creator View Post
    When I refresh the page I lose the previous state.
    This shouldn't happen. Using the code I supplied, if I click on the link "Tab2", then the span tag gets a class of "style2" applied to it.
    If I refresh the browser then the span tag still has a class of "style2". If I shut the browser and open it again, the span tag still has a class of "style2".
    This is what you wanted, right?
    If this is different for you, then maybe it has something to do with browser compatibility or jQuery version? I'm using the latest version of Chrome in Win7 and the latest jQuery. What about you?

    Quote Originally Posted by Iconic_creator View Post
    And when I click the first tab, I don't go back to default.
    When I do everything described above, then click on the link "Tab1", the span gets a class of "default". This also survives a page refresh or shutting the browser.
    Weird if this isn't working for you.

    If I have misunderstood any of your requirements or if I can help you debug this further, then just let me know.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Morning IC,

    Glad I could help a bit, but I am a little confused by your response.

    What action? Have I missed something?


    This shouldn't happen. Using the code I supplied, if I click on the link "Tab2", then the span tag gets a class of "style2" applied to it.
    If I refresh the browser then the span tag still has a class of "style2". If I shut the browser and open it again, the span tag still has a class of "style2".
    This is what you wanted, right?
    If this is different for you, then maybe it has something to do with browser compatibility or jQuery version? I'm using the latest version of Chrome in Win7 and the latest jQuery. What about you?


    When I do everything described above, then click on the link "Tab1", the span gets a class of "default". This also survives a page refresh or shutting the browser.
    Weird if this isn't working for you.

    If I have misunderstood any of your requirements or if I can help you debug this further, then just let me know.
    Yes you wrote exactly what I was getting at:
    I am using JQuery 1.7.2 and I understand that this does not work in IE7 which I do not mind.
    I'll change the JQuery Version and see what happens.

    IC

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Morning IC,

    Glad I could help a bit, but I am a little confused by your response.

    What action? Have I missed something?


    This shouldn't happen. Using the code I supplied, if I click on the link "Tab2", then the span tag gets a class of "style2" applied to it.
    If I refresh the browser then the span tag still has a class of "style2". If I shut the browser and open it again, the span tag still has a class of "style2".
    This is what you wanted, right?
    If this is different for you, then maybe it has something to do with browser compatibility or jQuery version? I'm using the latest version of Chrome in Win7 and the latest jQuery. What about you?


    When I do everything described above, then click on the link "Tab1", the span gets a class of "default". This also survives a page refresh or shutting the browser.
    Weird if this isn't working for you.

    If I have misunderstood any of your requirements or if I can help you debug this further, then just let me know.
    Okay I have it working in Firefox 15.0.1 but it does not work in IE 9, I am not sure why.

    I'll post back shortly when I have access to a computer with all the other browsers.

    Thanks again and I really appreciate your help.

    IC

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi there IC,

    Are you running it locally?
    If so, try uploading it to a remote server, then it should work as expected in IE9.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay let me try that.

    Update: Now it is working but here is another issue and I hate to drag this along.
    When the page uploads for the first time, the default style is not applied, should I add the default style on the HTML?
    If a user visits the page for the first time, the default will apply and if they return later then the page starts where it left off.

    Can I do that with this?

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Iconic_creator View Post
    When the page uploads for the first time, the default style is not applied, should I add the default style on the HTML?
    If a user visits the page for the first time, the default will apply and if they return later then the page starts where it left off.
    Can I do that with this?
    Not as the code currently stands.
    When the page loads, the first thing that the script does is to get the last known class out of local storage and apply it to the span, in the process removing any class that is already there.

    Change the first two line of the script to this. It will set "default" as the default style to apply:
    Code JavaScript:
    var myClass = localStorage.getItem("myClass") || 'default';

    HTH


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •