Tag Archives: jquery

jQuery EU Cookie Law popups

UPDATED: GDPR compliance with the jQuery EU Cookie Law plugin

The EU Cookie Law does actually seem to apply to most of our websites — we are based in the UK and are using Google Analytics, so there is no way out. Useless as it might be the e-Privacy Directive, the worst part is the scam-like pages that offer “solutions”. Instead, I just went ahead and created a plugin that can be installed by adding 4 lines of code.

An easy-to-install jQuery plugin to create EU Cookie Law popups.

Supports multiple layouts out of the box. Works well with Bootstrap 3. Easy to customize markup and CSS.

This is the demo page. For the code, install instructions and to see how amazingly free it is, go to Github.

Get started

To get started, first include jQuery and import the plugin’s files:

<script src=”js/jquery-2.1.3.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery-eu-cookie-law-popup.css”/>
<script src=”js/jquery-eu-cookie-law-popup.js”></script>

(Mind you, you need to run the code on a webserver to be able to set cookies.)

Simple popup

In its simplest form, you can add an EU Cookie Law popup by simply adding the “eupopup” classes to any HTML tag.
<body class=”eupopup eupopup-top”>

You can also choose from these layouts:

jQuery EU Cookie Law popups (demo)

  • Top of the page (“eupopup”, or “eupopup eupopup-top”)
  • Fixed banner on top (“eupopup eupopup-fixedtop”)
  • Fixed to bottom (“eupopup eupopup-bottom”)
  • Fixed window, to bottom left (“eupopup eupopup-bottomleft”)
  • Fixed window, bottom right (“eupopup eupopup-bottomright”)
  • Inline (“eupopup eupopup-block”)

And these colours or styles:

jQuery EU Cookie Law popups (demo)

  • White text on dark background (“eupopup-color-default”)
  • Dark text on light background (“eupopup-color-inverse”)
  • Compact (“eupopup-style-compact”)

Custom HTML

To use a custom HTML markup, you can either add it as a Javascript parameter (read about it later), or by adding a DIV with the classname “eupopup-markup”.
<div class=”eupopup eupopup-container eupopup-container-block”>
  <div class=”eupopup-markup”>
    <div class=”eupopup-head”>This website is using cookies</div>
    <div class=”eupopup-body”>We use cookies to ensure that we give you the best experience on our website. If you continue using the site, we\’ll assume that you are happy to receive all cookies on this website.</div>
    <div class=”eupopup-buttons”>
      <a href=”#” class=”eupopup-button eupopup-button_1″>Continue</a>
      <a href=”http://www.wimagguc.com/?cookie-policy” target=”_blank” class=”eupopup-button eupopup-button_2″>Learn more</a>
    </div>
    <div class=”clearfix”></div>
    <a href=”#” class=”eupopup-closebutton”>x</a>
  </div>
</div>

Parameters

The script takes quite a few parameters. The suggested method to override these is from the init method (find the out-of-the-box one in the jquery-eu-cookie-law-popup.js):
$(document).euCookieLawPopup().init({
  cookiePolicyUrl : ‘http://www.wimagguc.com/?cookie-policy’,
  popupPosition : ‘top’,
  colorStyle : ‘default’,
  compactStyle : false,
  popupTitle : ‘This website is using cookies’,
  popupText : ‘We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we\’ll assume that you are happy to receive all cookies on this website.’,
  buttonContinueTitle : ‘Continue’,
  buttonLearnmoreTitle : ‘Learn more’,
  buttonLearnmoreOpenInNewWindow : true,
  agreementExpiresInDays : 30,
  autoAcceptCookiePolicy : false,
  htmlMarkup : null
});

Events

If you need to be notified about the consent somewhere in your code (for example, to enable the cookies in other parts of your software), you can listen to the ‘user_cookie_consent_changed’ event.
$(document).bind(“user_cookie_consent_changed”, function(event, object) {
  // true or false
  console.log(“User consent: ” + $(object).attr(‘consent’) );
});

As seen on

Released under MIT, do-with-the-code-whatever-you-please License

j j j

Google Maps Latitude and Longitude Picker

A jQuery Latitude and Longitude plugin to pick a location using Google Maps.

Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS.

This is a demo page; the newest live demo will always be here.
For the code, install instructions and to see how amazingly free it is, go to Github.

Basic functions

  • Move the marker on the map to receive the updated latitude, longitude and zoom values in the hidden fields
  • “location_changed” event will be fired, with the gllLatlonPicker Node JS object as attribute for easy access

Move the marker, or double click on the map.

Google Maps

<fieldset class=”gllpLatlonPicker”>
<div class=”gllpMap”>Google Maps</div>
<input type=”hidden” class=”gllpLatitude”/>
<input type=”hidden” class=”gllpLongitude”/>
<input type=”hidden” class=”gllpZoom”/>
</fieldset>

Simple form with a Google Maps search field and default values

  • If the search has results, the first element will appear on the map (with the default zoom value 11)
  • You can set default latitude, longitude and zoom values in the hidden fields
  • If you don’t give an ID to the map, the script generates one; feel free to use custom ID’s though

Move the marker, or double click on the map. Search for cities, countries or landmark names.

Google Maps

<fieldset class=”gllpLatlonPicker” id=”custom_id”>
<input type=”text” class=”gllpSearchField”>
<input type=”button” class=”gllpSearchButton” value=”search”>
<div class=”gllpMap”>Google Maps</div>
<input type=”hidden” class=”gllpLatitude” value=”52″/>
<input type=”hidden” class=”gllpLongitude” value=”1″/>
<input type=”hidden” class=”gllpZoom” value=”12″/>
</fieldset>

Reverse lookup: retrieves the location name once it’s picked

  • After the position change you’ll have the location name in the gllpLocationName field.
  • If there is no value, the field will be emptied.
  • The “location_changed” event will also be fired with the gllLatlonPicker Node JQuery object as attribute.

Move the marker, or double click on the map.

Google Maps

Found:

<fieldset class=”gllpLatlonPicker”>
<div class=”gllpMap”>Google Maps</div>
<br/>
<input type=”hidden” class=”gllpLatitude”/>
<input type=”hidden” class=”gllpLongitude”/>
<input type=”hidden” class=”gllpZoom”/>
<input type=”text” class=”gllpLocationName” size=42/>
</fieldset>

Editable and selectable Latitude/Longitude values

  • You can set your own latitude, longitude and zoom values. The map shows your data after pressing the update button.
  • You can still hide the Zoom field (or any other fields)

Move the marker, double click on the map, search, or set new values to interact.

Google Maps

lat/lon: / , zoom:

<fieldset class=”gllpLatlonPicker”>
<input type=”text” class=”gllpSearchField”>
<input type=”button” class=”gllpSearchButton” value=”search”>
<br/>
<div class=”gllpMap”>Google Maps</div>
lat/lon: <input type=”text” class=”gllpLatitude” value=”20″/> / <input type=”text” class=”gllpLongitude” value=”20″/>, zoom: <input type=”text” class=”gllpZoom” value=”3″/> <input type=”button” class=”gllpUpdateButton” value=”update map”>
</fieldset>

Released under free (do whatever you want) license.


j j j