8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

cookies code help needed (html,css,js)

by Arcsn
6 replies
Hi Guys,

I'm getting crazy over this script. It's not working. Can anyone give me a tip how to fix it?

my codes are following:
inside the <body> tag in my html:

HTML Code:
<div class="cookie-message">
	<p class="cookie-content">This website uses cookies. By Browsing this website you acconsent to the use of cookies. </p>
	<p class="cookie-content"><button class="button">OK</button> &nbsp; <a href="http://here-goes-my-cookie-page.com">Read more about cookies</a></p>	
</div>
my css file is following (it's more for styling):
Code:
.cookie-message {
      width: 100%;
  	  background: #333;
  	  color: #ddd;
	  padding: 1em 1em .5em;
	  position: fixed;
	  left: -5px;
	  bottom: 2em;
	  text-align: left;
	  z-index: 1;
	  }
and my "java" is following:
Code:
<!--Start Cookie Script--> 
<script>
$('.cookie-header').click(function() {
  		$('.cookie-content').slideToggle('fast');
		  $('.cookie-content button').click(function() {
			    $('.cookie-content').slideUp('fast');
		  });
	});
	</script>
	 <!--End Cookie Script-->
in fact I'm completely new to java so I copied it and inserted it before the </body> tag and obviously it is not working...

can someone help me? I need the message to close when pressing the "ok" button...
#code #cookies #css #html #needed
  • Profile picture of the author 2WDHost
    Hi.

    You can try to replace the mentioned script code with this:
    Code:
    <!--Start Cookie Script--> 
<script>
    $('.cookie-header').click(function () {
        $('.cookie-content').slideToggle('fast');
    });
    $('.cookie-content button').click(function () {
        $('.cookie-content').slideUp('fast');
    });
</script>
<!--End Cookie Script-->
    {{ DiscussionBoard.errors[10334177].message }}
    • Profile picture of the author wordpress+expert
      Hi. You should also load Jquery lib:


      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      {{ DiscussionBoard.errors[10334298].message }}
      • Profile picture of the author geokoder
        Originally Posted by wordpress+expert View Post

        Hi. You should also load Jquery lib:


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        Apart from this, make sure your javascript is running AFTER the HTML is inserted, otherwise it will try to bind the click handler to an element on your page that doesn't exist yet.
        {{ DiscussionBoard.errors[10334518].message }}
  • Profile picture of the author Arcsn
    thanks guys,

    I've done as you told so, but it's not working... (??)
    I inserted as following:
    1. the "cookie message" at the very beginning of my <body> tag. (then goes my entire site html code)
    2. the Jquery lib link just before the "cookie script", (my website html code is placed before this link).
    3. "the cookie script" at the end of html, just before the </body> tag.

    Is that correct? I am a beginner with java...
    {{ DiscussionBoard.errors[10335635].message }}
  • Profile picture of the author 2WDHost
    Arcsn,

    Can you post or PM a link to your page?
    {{ DiscussionBoard.errors[10341761].message }}
  • Profile picture of the author wordpress+expert
    Try this code:

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('.cookie-header').click(function() {
    $('.cookie-content').slideToggle('fast');
    $('.cookie-content button').click(function() {
    $('.cookie-content').slideUp('fast');
    });
    });
    });
    </script>

    <style>
    .cookie-message {
    width: 100%;
    background: #333;
    color: #ddd;
    padding: 1em 1em .5em;
    position: fixed;
    left: -5px;
    bottom: 2em;
    text-align: left;
    z-index: 1;
    }
    </style>
    </head>
    <body>
    <div class="cookie-header">
    <div class="cookie-message">
    <p class="cookie-content">This website uses cookies. By Browsing this website you acconsent to the use of cookies. </p>
    <p class="cookie-content"><button class="button">OK</button> &nbsp; <a href="http://here-goes-my-cookie-page.com">Read more about cookies</a></p>
    </div>
    </div>
    </body>
    </html>

    Sample: http://wordpress-expert.net/demo/php...d-html-css-js/
    {{ DiscussionBoard.errors[10341800].message }}

Trending Topics