The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Jquery Cookie Problem

    ioncube
    ioncube
    ioncube
    Forumember


    Male Posts : 279
    Reputation : 41
    Language : eng
    Location : Pakistan
    • Post n°1

    Solved Jquery Cookie Problem

    Post by ioncube September 18th 2011, 2:28 am

    I hav done quite a homework in determining the code to be precise the 'cookie code' such that the browser remember my choice!
    Vistt this : https://defencedog.googlecode.com/svn/welcomebox/jquery_welcome_box.html

    by viewing the source you will determine the two jquery (essential files) that are needed & I ain't tempering with them.
    However I had tried to customise this passage:

    Code:
    <script type="text/javascript" language="javascript">

    $(document).ready(function() {
       $('#sliderBox').slideTo({
          transition:300,
          top:'center',
          left:'center',
          inside:window
       });
       $('#mask').height($(document).height());

       jQuery(window).resize(function() {
          $('#sliderBox').stop().slideTo({
             transition:300,
             top:'center',
             left:'center',
             inside:window
          });
       });

       var closeWelcomeBox;

       $(window).scroll(function(){
          if(!closeWelcomeBox){
             $('#sliderBox').stop().slideTo({
                transition:300,
                top:'center',
                left:'center',
                inside:window
             });
          }
       });

       
       $("#closeWelcomeBox").click(function(){
          $('#sliderBox').stop().slideTo({
             transition:500,
             top:-400
              });
              $('#mask').fadeOut(500);
          closeWelcomeBox = true;
          $.cookie('hidewelcome', 'collapsed');
       });
       
       // COOKIES
        var hidewelcome = $.cookie('hidewelcome');
        if (hidewelcome == 'collapsed') {
            $('#sliderBox').css("display","none");
            $('#mask').css("display","none");
            closeWelcomeBox = true;
        };
    });

    </script>

    First I created a cookie when the button is clicked & giv it its respective property namely 'collapse':
    Code:
    $.cookie('hidewelcome', 'collapsed');
    then I simply wrote this to make browser remember users click event choice (via cookie):
    Code:
       // COOKIES
        var hidewelcome = $.cookie('hidewelcome');
        if (hidewelcome == 'collapsed') {
            $('#sliderBox').css("display","none");
            $('#mask').css("display","none");
            closeWelcomeBox = true;
        };

    This isn't working or am I missing something bwi
    • Back to top
    ioncube
    ioncube
    ioncube
    Forumember


    Male Posts : 279
    Reputation : 41
    Language : eng
    Location : Pakistan
    • Post n°2

    Solved Re: Jquery Cookie Problem

    Post by ioncube September 19th 2011, 2:41 pm

    anyone sir; I need it please
    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°3

    Solved Re: Jquery Cookie Problem

    Post by kirk September 19th 2011, 3:26 pm

    i dont even understand what it's supposed to do?
    or what it has to do with any cookies.


    what are you trying to make or get out of it.
    it looks simple you can see where you add content to the sliding box, then the other content, what ever it's for?
    Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Welcome box</title>
    <style>

    #sliderBox{
       width:200px;
       height:150px;
       background-color:silver;
       position:absolute;
       top:-400px;
       left:-400px;
       z-index:300;
    }

    #mask{
       position: absolute;
       z-index: 200;
       top: 0px;
       left: 0px;
       width: 100%;
       opacity: .4;
       filter: alpha(opacity=40);
       background-color: #333333;
    }

    </style>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="scriptbreaker-slideto-1.0.js"></script>
    <script type="text/javascript" language="javascript">

    $(document).ready(function() {
       $('#sliderBox').slideTo({
          transition:300,
          top:'center',
          left:'center',
          inside:window
       });
       $('#mask').height($(document).height());

       jQuery(window).resize(function() {
          $('#sliderBox').stop().slideTo({
             transition:300,
             top:'center',
             left:'center',
             inside:window
          });
       });

       var closeWelcomeBox;

       $(window).scroll(function(){
          if(!closeWelcomeBox){
             $('#sliderBox').stop().slideTo({
                transition:300,
                top:'center',
                left:'center',
                inside:window
             });
          }
       });

       
       $("#closeWelcomeBox").click(function(){
          $('#sliderBox').stop().slideTo({
             transition:500,
             top:-400
              });
              $('#mask').fadeOut(500);
          closeWelcomeBox = true;
          $.cookie('hidewelcome', 'collapsed');
       });
       
       // COOKIES
        var hidewelcome = $.cookie('hidewelcome');
        if (hidewelcome == 'collapsed') {
            $('#sliderBox').css("display","none");
            $('#mask').css("display","none");
            closeWelcomeBox = true;
        };
    });

    </script>
    </head>
    <body>

    </head>

    <body>

    <div id="mask" ></div>
    <div id="sliderBox">
       <center>
       <input type="button" id="closeWelcomeBox" value="Don't show again"/><br /><br />
       JQuery Welcome box.  Uses the scriptbreaker slideTo function.<br />
       
       </center>
    </div>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    Content goes here
    </body>
    </html>

     
    • Back to top
    ioncube
    ioncube
    ioncube
    Forumember


    Male Posts : 279
    Reputation : 41
    Language : eng
    Location : Pakistan
    • Post n°4

    Solved Re: Jquery Cookie Problem

    Post by ioncube September 19th 2011, 4:06 pm

    Am sorry if i can't explain. Let me giv example of profile position toggler. If you toggle position towards either right or left browser remembers your choice. That is you refresh page & profile position remains unaltered.

    Now with my page. I am designing a welcome popup!! When a user click 'Don't shoe it again' it must NOT appear after even refreshing page. But this isn't happening at present. Visit my page again ...
    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°5

    Solved Re: Jquery Cookie Problem

    Post by kirk September 19th 2011, 4:59 pm

    oh??
    it might depend on the browser as well,
    Not sure i would have to play around with it to see.
    It may be there is just something you can ad to the cookies part of the code, but what that would be??? not sure at this point.
    • Back to top
    ioncube
    ioncube
    ioncube
    Forumember


    Male Posts : 279
    Reputation : 41
    Language : eng
    Location : Pakistan
    • Post n°6

    Solved Re: Jquery Cookie Problem

    Post by ioncube September 19th 2011, 5:27 pm

    you always proved a great help to me; can you refer it to someone who can help...will much appreciate


    Got this cleared :wouhou:

    I have to add this .js file:

    https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

    or else this command be useless:
    Code:
    $.cookie('hidewelcome', 'collapsed');
    • Back to top
    ankillien
    ankillien
    ankillien
    Energetic


    Posts : 5198
    Reputation : 129
    Language : English, XHTML, CSS, JS, PHP, SQL
    • Post n°7

    Solved Re: Jquery Cookie Problem

    Post by ankillien September 19th 2011, 9:43 pm

    Hi,

    Have you added the cookie plugin?

    lol..it was already solved Razz

    Topic Solved
    • Back to top
    ankillien
    ankillien
    ankillien
    Energetic


    Posts : 5198
    Reputation : 129
    Language : English, XHTML, CSS, JS, PHP, SQL
    • Post n°8

    Solved Re: Jquery Cookie Problem

    Post by ankillien September 19th 2011, 9:46 pm

    ioncube wrote:I hav done quite a homework in determining the code to be precise the 'cookie code' such that the browser remember my choice!
    Vistt this : https://defencedog.googlecode.com/svn/welcomebox/jquery_welcome_box.html

    by viewing the source you will determine the two jquery (essential files) that are needed & I ain't tempering with them.
    However I had tried to customise this passage:

    Code:
    <script type="text/javascript" language="javascript">

    $(document).ready(function() {
       $('#sliderBox').slideTo({
          transition:300,
          top:'center',
          left:'center',
          inside:window
       });
       $('#mask').height($(document).height());

       jQuery(window).resize(function() {
          $('#sliderBox').stop().slideTo({
             transition:300,
             top:'center',
             left:'center',
             inside:window
          });
       });

       var closeWelcomeBox;

       $(window).scroll(function(){
          if(!closeWelcomeBox){
             $('#sliderBox').stop().slideTo({
                transition:300,
                top:'center',
                left:'center',
                inside:window
             });
          }
       });

       
       $("#closeWelcomeBox").click(function(){
          $('#sliderBox').stop().slideTo({
             transition:500,
             top:-400
              });
              $('#mask').fadeOut(500);
          closeWelcomeBox = true;
          $.cookie('hidewelcome', 'collapsed');
       });
       
       // COOKIES
        var hidewelcome = $.cookie('hidewelcome');
        if (hidewelcome == 'collapsed') {
            $('#sliderBox').css("display","none");
            $('#mask').css("display","none");
            closeWelcomeBox = true;
        };
    });

    </script>

    First I created a cookie when the button is clicked & giv it its respective property namely 'collapse':
    Code:
    $.cookie('hidewelcome', 'collapsed');
    then I simply wrote this to make browser remember users click event choice (via cookie):
    Code:
       // COOKIES
        var hidewelcome = $.cookie('hidewelcome');
        if (hidewelcome == 'collapsed') {
            $('#sliderBox').css("display","none");
            $('#mask').css("display","none");
            closeWelcomeBox = true;
        };

    This isn't working or am I missing something bwi
    • Back to top

      Current date/time is November 11th 2024, 3:13 pm