Advertisement
LizeCF

Cookies Colorchanger

Aug 1st, 2015
344
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 2.61 KB | None | 0 0
  1. <head>
  2.     <title>Cookies Colorchanger</title>
  3.    
  4.     <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
  5.     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  6.    
  7.     <style type="text/css">
  8.         body {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .color-menu {
  13.             background-color: rgba(0, 0, 0, .4);
  14.             padding: 5px;
  15.             height: 20px;
  16.             width: 93px;
  17.             position: absolute;
  18.             margin-left: 15px;
  19.             margin-top: 15px;
  20.             border-radius: 3px;
  21.             -webkit-border-radius: 3px;
  22.         }
  23.         .color-menu ul {
  24.             margin: 0;
  25.             padding: 0;
  26.         }
  27.         .color-menu ul li {
  28.             list-style-type: none;
  29.             display: inline-block;
  30.             border-radius: 4px;
  31.             -webkit-border-radius: 4px;
  32.             box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .4);
  33.             padding: 10px 10px;
  34.             cursor: pointer;
  35.         }
  36.         .color-menu ul li.green {
  37.             background-color: #2ecc71;
  38.         }
  39.         .color-menu ul li.blue {
  40.             background-color: #3498db;
  41.         }
  42.         .color-menu ul li.orange {
  43.             background-color: #F5AB35;
  44.         }
  45.         .color-menu ul li.purple {
  46.             background-color: #C476E4;
  47.         }
  48.         body.green {
  49.             background-color: #2ecc71;
  50.         }
  51.         body.blue {
  52.             background-color: #3498db;
  53.         }
  54.         body.orange {
  55.             background-color: #F5AB35;
  56.         }
  57.         body.purple {
  58.             background-color: #C476E4;
  59.         }
  60.     </style>
  61.    
  62.     <script type="text/javascript">
  63.         jQuery(function ($) {
  64.             var color = $.cookie("color");
  65.             $(".colorChanger li").on("click", function (e) {
  66.                 color = $(this).attr("class");
  67.                 $("body").attr("class", color);
  68.                 $.cookie("color", color, {
  69.                     expires: 365 // Die Tage, wie lang es gespeichert werden soll.
  70.                 });
  71.                 return false;
  72.             }).filter(function () {
  73.                 return $(this).attr("class") === color;
  74.             }).click();
  75.         });
  76.     </script>
  77. </head>
  78.  
  79. <body>
  80.     <div class="color-menu">
  81.         <ul class="colorChanger">
  82.             <li class="green"></li>
  83.             <li class="blue"></li>
  84.             <li class="orange"></li>
  85.             <li class="purple"></li>
  86.         </ul>
  87.     </div>
  88. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement