maplace.js – simple map with markers

Maplace.js is a library for google maps. This snippet creates a map creates 2 marker applies some “style” to this map https://github.com/danielemoraschi/maplace.js <div id=”map” style=”height: 300px”></div> <script src=”https://code.jquery.com/jquery-2.2.4.min.js” integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script> <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAMgZvDq9HAESOi_JbgZdA5RPYxKBgNYTg&callback=initMap” async defer></script> <script src=”maplace.min.js”></script> <script> function initMap() { var data = [ { lat: 45.9, lon: 10.9, title: Read more…

Check if a form has changes before unload the page

Html: <form data-js-dirtyform-check=”true”> <!– form inputs –> </form> Javascript: // dirty form check to avoid going back in history and lose data $(“[data-js-dirtyform-check]”).each(function () { var _isDirtyAndNotSubmit = false; $(this).find(“:input”).on(“change.js-dirtyform-check”, function () { _isDirtyAndNotSubmit = true; }); $(document).on(“submit.js-dirtyform-check”, function () { // on window submit, disable the dirt check _isDirtyAndNotSubmit Read more…

Making a websites’s mega menu accessible for tablets and below

The goal is to allow click events on the first level for desktop browsers, and to trigger a hover event for mobile browsers. How to detect a mobile browser? I chose this approach: http://stackoverflow.com/a/14301832/4074710 The mega menu: <nav> <ul> <li> <a href=”#”>Item</a> <ul> <li><a href=”#”>Subitem</a></li> <li><a href=”#”>Subitem</a></li> </ul> </li> <li> <a href=””>Item</a> <ul> <li><a Read more…

Form validation with javascript for Oxid

Folgende Schritte sind notwendig: Einbinden von oxinputvalidator.js <Form> mit .oxValidate  versehen <Input> mit .js-oxValidate  und anderen Validatoren versehen Verfügbare Validatoren: js-oxValidate js-oxValidate_email js-oxValidate_notEmpty js-oxValidate_length js-oxValidate_match js-oxValidate_date Passwort Länge: <input type=”hidden” id=”passwordLength” value=”[{$oViewConf->getPasswordLength()}]”> Validierungs Nachrichten: <span class=”js-oxError_notEmpty”>[{ oxmultilang ident=”ERROR_MESSAGE_INPUT_NOTALLFIELDS” }]</span> <span class=”js-oxError_length”>[{ oxmultilang ident=”ERROR_MESSAGE_PASSWORD_TOO_SHORT” }]</span> <span class=”js-oxError_match”>[{ oxmultilang ident=”ERROR_MESSAGE_USER_PWDDONTMATCH” }]</span> <span class=”js-oxError_email”>[{ oxmultilang Read more…