"This website uses cookies. By..." (Cookie Notification popup)

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 1811 Views - Last Post: 20 February 2014 - 10:45 AM

#1 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

"This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 09:33 AM

I've VERY new to Javascript, and I found this code from stack overflow (I can't remember the URL.)

I think it may be jquery, but I'm not sure so I added the link to the google file that will allow it to work - the only problem is; It still doesn't work!!

Once I remove the
style="display:none"
it will show all except the part in the JS code, but won't go away again.

Please someone, some advice?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>
$("#notification").fadeIn("slow").append('Cookies help us deliver our services. By using our services, you agree to our use of cookies.');
$(".dismiss").click(function(){
 $("#notification").fadeOut("slow");
});
</script>
</head>
<style>
#notification {
    position:fixed;
    top:0px;
    width:100%;
    z-index:105;
    text-align:center;
     font-weight:normal;
    font-size:14px;
    font-weight:bold;
    color:white;
    background-color:#585858;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
     cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}
</style>
<body>
<div id="notification" style="display:none">
   <span class="dismiss"><a title="Dismiss Notification">Dismiss Notification</a></span>
</div>
</body>
</html>



I do also have another question; how does jquery differ to normal javascript, and is it supposed to seem more complex to read and understand?

Is This A Good Question/Topic? 0
  • +

Replies To: "This website uses cookies. By..." (Cookie Notification popup)

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9393
  • View blog
  • Posts: 35,273
  • Joined: 12-June 08

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 09:39 AM

Quote

the only problem is; It still doesn't work!!


That tends to be the issue when you copy/paste random code you find on the internet without understanding what it is doing. Perhaps spend some time reading through the jquery documentation on the very few number of calls used there.


Quote

how does jquery differ to normal javascript,


Per http://jquery.com/ :

Quote

What is jQuery?
jQuery is a fast, small, and feature-rich Javascript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write Javascript.


Then there's this:
http://www.dreaminco...lopers-need-it/

.. and this:
https://en.wikipedia.org/wiki/JQuery
Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,598
  • Joined: 15-January 14

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 09:57 AM

Use your browser's Javascript error console, that's what it's there for. You'll see error messages which, if you follow them, will point you to the fact that the element you're trying to change doesn't exist.

Quote

is it supposed to seem more complex to read and understand?

The jQuery developers did do a pretty impressive job of making it more complex to read than plain Javascript, but there is a lot of functionality buried in a few lines of jQuery.
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,892
  • Joined: 30-April 10

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 10:33 AM

If you need help finding the console this will help.
Was This Post Helpful? 0
  • +
  • -

#5 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 01:18 PM

I used CTRL + SHIFT + J in Chrome and there were no errors found on that page.
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9393
  • View blog
  • Posts: 35,273
  • Joined: 12-June 08

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 01:34 PM

So, again, you may want to spend the extra few minutes and check out the documentation for 'fadein'. It's not that complicated.

http://api.jquery.com/fadein/
Was This Post Helpful? 0
  • +
  • -

#7 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1407
  • View blog
  • Posts: 3,123
  • Joined: 05-April 11

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 01:41 PM

You need to change the order of when the script(s) are being executed
You are trying to fade in the div before it has been added to the document view
<html>
<head>
	
</head>
<body>
	<div id="notification" style="display:none">
	   <span class="dismiss"><a title="Dismiss Notification">Dismiss Notification</a></span>
	</div>
	<style>
		#notification {
			position:fixed;
			top:0px;
			width:100%;
			z-index:105;
			text-align:center;
			 font-weight:normal;
			font-size:14px;
			font-weight:bold;
			color:white;
			background-color:#585858;
			padding:5px;
		}
		#notification span.dismiss {
			border:2px solid #FFF;
			padding:0 5px;
			 cursor:pointer;
			float:right;
			margin-right:10px;
		}
		#notification a {
			color:white;
			text-decoration:none;
			font-weight:bold
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
		$("#notification").fadeIn("slow").append('Cookies help us deliver our services. By using our services, you agree to our use of cookies.');
		$(".dismiss").click(function(){
		 $("#notification").fadeOut("slow");
		});
	</script>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#8 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 06 February 2014 - 01:45 PM

Thanks, I've done it! - And now I can have the pleasure of saying I created it myself :)

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>fadeIn demo</title>

<style>
#notification {
    position:fixed;
    top:0px;
    width:100%;
    z-index:105;
    text-align:center;
     font-weight:normal;
    font-size:14px;
    font-weight:bold;
    color:white;
    background-color:#585858;
    padding:5px;
	display: none;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
     cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}
  p {

    position: relative;

    width: 400px;

    height: 90px;

  }

  div {

    position: absolute;

    width: 400px;

    height: 65px;

    font-size: 36px;

    text-align: center;

    color: yellow;

    background: red;

    padding-top: 25px;

    top: 0;

    left: 0;

    display: none;

  }

  span {

    display: none;

  }

  </style>

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<div id="notification">
Cookies help us deliver ur services. By using our services, you agree tom our use of cookies. (<a href="#">click!</a>)

  <div id="notification"><span>CENSORED!</span></div>

</p>

 

<script>



  $( "#notification" ).fadeIn( 100, function() {

    $( "span" ).fadeIn( 100 );

  });

  


$( "a" ).click(function() {

  $( "#notification" ).fadeOut( 3000, function() {

    $( "span" ).fadeOut( 100 );

  });

  return false;

});
</script>

 

</body>

</html>


Was This Post Helpful? 0
  • +
  • -

#9 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 07 February 2014 - 11:16 AM

Right: the next step is slightly more complex; I've tried to integrate it with my website, but as soon as I click the "dismiss notification" button, then it will take the "navigation" menu and the "my account" menu away. Could this be an error with the navigational menu CSS or this?

New Code:

 <style>
#cookie_policy {
    position:fixed;
    top:0px;
    width:100%;
    height: 65px;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:25px;
    font-weight:bold;
    color:#FAFAFA;
    background-color:#555050;
    padding:5px;
    display: none;
    border:1px solid black;
    padding-top: 25px;
    top: 0;
    left: 0;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
#cookie_policy span.dismiss {
    border:2px solid #FFF;
    padding:0px;
    cursor:pointer;
    float:right;
    margin-right:10px;
	margin:30px 50px; 
    border:1px solid black; 
}
#cookie_policy a {
    color:white;
    text-decoration:none;
    font-weight:bold
}
#cookie_policy p {
    position: relative;
    height: 65px;
}


</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<div id="cookie_policy">
Cookies help us deliver our services. By using our services, you agree to our use of cookies. <span class="dismiss"><a title="Dismiss Notification">Dismiss Notification</a></span>
</div>
<script>
  $( "#cookie_policy" ).fadeIn( 100, function() {

    $( "span" ).fadeIn( 100 );

  });

$( "a" ).click(function() {

  $( "#cookie_policy" ).fadeOut( 3000, function() {

    $( "span" ).fadeOut( 100 );

  });

  return false;

});
</script>


This post has been edited by chris98: 07 February 2014 - 01:57 PM

Was This Post Helpful? 0
  • +
  • -

#10 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,598
  • Joined: 15-January 14

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 07 February 2014 - 11:33 AM

You're fading out all span tags on the page, is that what you want to happen?
Was This Post Helpful? 0
  • +
  • -

#11 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 07 February 2014 - 11:36 AM

Thanks. Now the only problem is to get it to appear once per session - is there a way to set cookies via javascript to check if it's already been displayed?
Was This Post Helpful? 0
  • +
  • -

#12 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,598
  • Joined: 15-January 14

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 07 February 2014 - 12:11 PM

https://www.google.c...=UTF-8&oe=UTF-8
Was This Post Helpful? 0
  • +
  • -

#13 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 07 February 2014 - 01:54 PM

Well, I think (hopefully) I have the answer. It appears to work so I now know basic info about cookies. (I still don't really know much about Javascript ones, they have just gave me a massive headache.

I've looked at w3schools, (http://www.w3schools.com/js/js_cookies.asp), Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/document.cookie), tutorialspoint (http://www.tutorialspoint.com/javascript/javascript_cookies.htm), htmlgoodies (http://www.htmlgoodies.com/beyond/javascript/article.php/3470821/So-You-Want-To-Set-A-Cookie-Huh.htm), javascripter (http://www.javascripter.net/faq/settinga.htm), tried lots of examples and still don't really have a clue about what all the code is for through javascript. I only came across the code I have through the template I downloaded.

Final Code

<style>
#notification {
    position:fixed;
    top:0px;
    width:100%;
	height: 65px;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:25px;
    font-weight:bold;
    color:#FAFAFA;
    background-color:#555050;
    padding:5px;
    display: none;
    border:1px solid black;
    padding-top: 25px;
    top: 0;
    left: 0;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0px;
    cursor:pointer;
    float:right;
    margin-right:10px;
	margin:30px 50px; 
    border:1px solid black; 
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}
#notification p {
    position: relative;
    height: 65px;
}


</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<div id="notification">
Cookies help us deliver our services. By using our services, you agree to our use of cookies. <a href="http://www.*****/privacy/cookies/" title="onclick="window.location(this.href)">Learn More</a>
<span class="dismiss"><a href="#" onclick="javascript: document.cookie='policy=notified';" title="Dismiss Notification">Dismiss Notification</a></span>
</div>
<?php 
if (!$_COOKIE['policy']):
?>
<script>
   $( "#notification" ).fadeIn( 100, function() {

    $( "notification.dismiss" ).fadeIn( 100 );

  });

$( "span" ).click(function() {

  $( "#notification" ).fadeOut( 3000, function() {

    $( "notification.dismiss" ).fadeOut( 100 );

  });

  return false;

});
</script>
<?php endif; ?>


This post has been edited by chris98: 07 February 2014 - 01:57 PM

Was This Post Helpful? 0
  • +
  • -

#14 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,598
  • Joined: 15-January 14

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 07 February 2014 - 02:33 PM

Do you know what a cookie is? There is only one kind of cookie, regardless of which language you use to set or read them. If you understand what cookies are and what the browser does with them then creating them in Javascript should make sense.

So, what is a cookie?
Was This Post Helpful? 0
  • +
  • -

#15 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 34
  • Posts: 861
  • Joined: 06-July 13

Re: "This website uses cookies. By..." (Cookie Notification popup)

Posted 08 February 2014 - 02:17 AM

I'm not really sure, I know it's something that people use login systems for (I.E. FluxBB), I know it's used to store information, but apart from that I know nothing about them.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2