The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Jquery Cookie Problem

View previous topic View next topic Go down

Solved Jquery Cookie Problem

Post by ioncube on September 18th 2011, 8: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

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by ioncube on September 19th 2011, 8:41 pm

anyone sir; I need it please

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by kirk on September 19th 2011, 9: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>

 

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by ioncube on September 19th 2011, 10: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 ...

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by kirk on September 19th 2011, 10: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.

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by ioncube on September 19th 2011, 11: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');

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by ankillien on September 20th 2011, 3:43 am

Hi,

Have you added the cookie plugin?


lol..it was already solved Razz

Topic Solved

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Jquery Cookie Problem

Post by ankillien on September 20th 2011, 3:46 am

@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

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum