Google maps coördinaten ophalen met klik op een kaart

Het gebruiken van een Google maps (of iedere andere kaartleverancier) voor het tonen van winkels, gebouwen, locaties enzovoorts is steeds gebruikelijker. Normaliter kun je op basis van een adres of postcode prima bepalen waar iets gelegen is. Heel soms willen mensen echter iets meer precisie hierin. Bijvoorbeeld omdat het formele adres anders is dan wat voor bezoekers logisch is of omdat het een groot pand betreft waarbij de exacte locatie niet altijd de meest gewenste is.

Met het volgende simpele stukje code kun je een Google maps kaart renderen die, als men erop klikt, de latitude en longitude beschikbaar stelt om bijvoorbeeld op te slaan of in een veld van een formulier te wijzigen.

De HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="/javascript_code_zoals_hieronder_getoond.js"></script>
  </head>
  <body>
    <div id="maps" style="width: 400px; height: 400px; border: 1px solid grey"></div>
  </body>
</html>

JavaScript code

<script>
    function initialize() {
        var mapOptions = {
            zoom: 7,
            center: new google.maps.LatLng(51.9568120077237, 4.570355415344238)
        };

        var map = new google.maps.Map(document.getElementById('maps'), mapOptions);

        google.maps.event.addListener(map, 'click', function(e) {
            if (confirm("GEO-locatie (opnieuw) vaststellen?") == true) {
                if(!marker) {
                    var marker = new google.maps.Marker({
                        position: map.getCenter(),
                        map: map
                    });
                }
                map.setCenter(e.latLng);
                marker.setPosition(e.latLng);

                console.log(e.latLng.lat());
                console.log(e.latLng.lng());
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Chrome font rendering windows 7

Tijdens het testen van de nieuwe Webparking website viel ons op dat deze in Chrome heel lelijk renderde qua font in Windows 7. Nog even getest op andere devices en platforms maar daar was alles prima. Na enig onderzoek kwamen we diverse melden hiervan tegen en het lijkt te maken te hebben met een ongelukkige samenloop van Windows font-rendering en Chrome. In Firefox en Internet Explorer zag het er wel netjes uit.

De oplossingen voor Chrome font rendering windows 7

Die liepen redelijk uiteen. Nu gaan de meeste oplossingen uit van een andere volgorde van CSS markup voor het font maar; in dit geval is het een Google web font dus de exacte stack is niet aan ons om te bepalen. Na nog vele oplossingen geprobeerd te hebben legden wij ons er al bijna bij neer dat het zo was. Het leek namelijk iets te zijn waar ooit vanuit Chrome wel een oplossing voor zou komen.

Daar een prettige rendering wel zo fijn was hebben wij uiteindelijk het gewenste effect bereikt middels een hele kleine text-stroke.

Verschil text-stroke 0.2px

Hieronder een afbeelding met het visuele verschil. bovenste afbeelding is zonder de text-stroke en de onderste afbeelding is met de text-stroke;

Untitled-1
De oplossing in code

Absoluut niet perfect maar beter (zie o.a. de P in apps);

-webkit-font-smoothing: antialiased !important;
-webkit-text-stroke: 0.2px;

Skeleton CSS framework 1024 px

Persoonlijk hou ik van lichtgewicht en eenvoudig. Om responsive websites snel te maken wilde ik wel iets van een framework gebruiken maar o.a. Bootstrap vind ik persoonlijk te nadrukkelijk aanwezig en te zwaar.

Skeleton CSS

Al enige tijd gebruik ik Skeleton CSS wat erg prettig werkt door zijn compacte opzet. Skeleton is bedoeld als ‘style agnostic’ en richt zich puur op het faciliteren van het responsive grid. Ondanks deze fantastische bedoeling heeft de auteur toch besloten om wat styling toe te voegen voor bijvoorbeeld de typografie en buttons. Snap absoluut niet waarom dit toch gedaan is omdat het naar mijn idee zeer weinig toevoegd. Gelukkig is de styling er redelijk eenvoudig eruit te halen en dan hou je een mooi en lichtgewicht framework over met een handig grid van 16 kolommen.

Ga naar de website van het Skeleton CSS Framework

Skeleton CSS framework 1024 px

Daar mist iets. Het framework gaat maar tot 960px en is al paar jaar niet meer van updates voorzien. Omdat ik nu echt een 1024px versie nodig had heb ik hem zelf aangevuld. Gelijk dit moment aangegrepen om de overbodige styling eruit te halen en paar fixes door te voeren (viel me op dat hij in bepaalde smalle renderings beetje ongelukkig uitkwam qua breedte). Mijn update is terug te vinden in Github voor wie dat prettig vindt.

Ga naar mijn toevoeging voor 1024px ondersteuning

CSS3 box shadow en Internet explorer <9

Nu CSS3 steeds meer onderdeel wordt van het dagelijks leven blijf je altijd weer met Internet explorer zitten. Alle meestgebruikte versies ondersteunen een hoop leuke CSS3 zaken niet. Vandaag was mijn irritatiepuntje de box shadow. Ik wilde deze met zo min mogelijk moeite werkend krijgen in IE zonder allerlei ingrepen. Nu zijn op zich de meeste zaken wel mogelijk zoals positieve, of negatieve offsets door middel van Microsoft filters. Alleen ik wilde een drop shadow langs alle kanten. Dit leek me zo voor de hand liggend maar het heeft me toch even gekost voor ik enige zinnige implementaties en voorbeelden hiervan had gevonden.

Ik heb voor het gemak even 3 heldere voorbeelden van drop shadows uiteen gezet met CSS code erbij (-webkit, -moz, CSS3 tag zelf en IE alternatief).

Resultaat in Internet explorer 8

Het resultaat in Firefox

Klik hier om de demo te bekijken

Een stap verder

Er zijn nog leukere mogelijkheden maar die vergen iets meer verdieping. Zo kun je bijvoorbeeld met een extra div voor de shadow om je primaire div heen ook nog gekkere dingen doen. Op css-tricks.com staat dit heel helder uitgelegd.

WordPress style save confirmation

WordPress heeft bij het bewerken of aanmaken van een nieuwe blogpost een melding die je om bevestiging vraagt als je probeert de pagina te verlaten zonder iets op te slaan. Nooit echt bewust over nagedacht maar leek me een leuke toevoeging qua user experience in een nieuw project. Even een beetje nagedacht hoe ik dit in mijn Jquery wereld kon “opbergen” zonder dat het in de weg zou zitten en kwam met de volgende oplossing;

// Set the default state to false
jQuery.data(document.body, 'confirmationPrompt', false);

// On a keypress in any form field set confirmation to true
$('input,textarea').keypress(function() {
   jQuery.data(document.body, 'confirmationPrompt', true);
});

// On change of a select or any other form element (like radio buttons etc)
// Set confirmation to true
$('input,select').change(function() {
    jQuery.data(document.body, 'confirmationPrompt', true);
});

// On any form submit set confirmation to false
$('form').submit(function() {
    jQuery.data(document.body, 'confirmationPrompt', false);
});

// Check if confirmation is needed before unloading
window.onbeforeunload = function(){
    if(jQuery.data(document.body, 'confirmationPrompt')){
        return 'Are you sure?';
    }
};

Dit dekt op zich aardig de lading zo. De reden dat ik jquery.data() gebruik en niet gewoon een losse variabel is dat ik op deze manier ook vanuit andere functies de confirmationPrompt var op false kan zetten. Bijvoorbeeld als je sommige forms middels een AJAX call opslaat waardoor er geen formele form submit voorbij komt.

Jquery fadeIn loop (supersimpel)

Wilde net even twee blokken met tekst in elkaar laten overlopen. Leek me overkill hiervoor een cycle plugin te gebruiken dus ging even kijken wat voor leuks ik nog niet had toegepast/ontdekt in Jquery. Nu blijkt dat je met delay() functie in combi met fadeIn/out erg leuke dingen kunt doen.

HTML:


<div id="blockHolder">
    <div id="block1">Tekst 1</div>
    <div id="block2">Tekst 2</div>
</div>

CSS:


#blockHolder {
    width: 100px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}

#block1,
#block2 {
    background-color: white;
    position: absolute;
    left: 0;
    top: 0;
}

Jquery code:


function fadeLoop(){
    $('#block1').fadeIn().delay(3000).fadeOut('slow', fadeLoop).delay(3000);
}

$(document).ready(function() {
    fadeLoop();
});

Op zich redelijk basic maar werkt wel leuk zo. Wat de fadeLoop() nu doet is eigenlijk #block1 transparant maken, 3 seconde wachten, weer zichtbaar maken, 3 seconde wachten en weer zichzelf aanroepen voor een herhaling. Dit werkt prima met blokken die over elkaar gepositioneerd staan via CSS en waarbij de voorste transparant/niet-transparant wordt waardoor de achterste zichtbaar wordt.

BMI calculator met Jquery

Voor een project wat nog in ontwikkeling is moest ik een BMI calculator maken. Ik had er ooit wel eens één gemaakt maar die werkte via een POST en ‘berekende’ alles met PHP. Het leek me leuk dit keer Jquery te gebruiken.

De oude BMI calculator

Zoals je ziet op zich prima maar een beetje statisch. Tevens niet echt superduidelijk. Er zit een 1 px wit lijntje wat je huidige BMI aanduidt maar je moet wel goed opletten om die te zien.

De nieuwe BMI calculator

Zoals je ziet wel wat overeenkomsten (zelfde opdrachtgever dus moest zelfs alles een beetje gelijk houden) maar toch net even wat frisser. Een duidelijkere pointer voor je BMI en in plaats van invulvelden en een submitbutton gewoon twee Jquery UI sliders.

De code

Wat heb je in iedere geval nodig?

  1. Jquery
  2. Jquery UI
  3. Een BMI afbeelding voor de achtergrond
  4. Eventueel een leuke afbeelding voor de pointer

Voor het gemak kun je het hele gebruikte pakketje voor deze implementatie hier downloaden.

De te includen bestanden in de header

  1. reset.css
  2. screen.css
  3. jquery-ui-1.8.16.custom.css
  4. jquery.1.6.1.min.js
  5. jquery-ui-1.8.16.custom.min.js
  6. bmi.js

De HTML

Dit is de kale HTML voor de slider met tabel etc.


<div id="lengthSlider"></div>
<label for="length">Uw lengte is <input type="text" id="length" /> centimeter</label>

<div id="weightSlider"></div>
<label for="weight">Uw gewicht is <input type="text" id="weight" /> kilogram</label>

<div id="bmiScale">
    Uw Body Mass Index is
    <div id="bmiScalePointer"></div>
</div>

<div id="bmiInformation">
  <h4>Wat is een gezonde BMI?</h4>
  <table border="0" cellpadding="0" cellspacing="0" width="500">
    <tbody>
      <tr>
        <td width="10"><img src="</assets/images/bmi-yellow.gif" alt="ondergewicht" height="10" width="10"></td>
        <td width="130">Tussen 16 - 20</td>
        <td width="240">Uw BMI is iets te laag</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-green.gif" alt="gezond gewicht" height="10" width="10"></td>
        <td>Tussen 20 - 25</td>
        <td>gezond gewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-yellow.gif'" alt="normaal - licht overgewicht" height="10" width="10"></td>
        <td>Tussen 25 – 27</td>
        <td>normaal - licht overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-orange.gif" alt="normaal - overgewicht" height="10" width="10"></td>
        <td>Tussen 27 -29</td>
        <td>normaal - overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-red-orange.gif'" alt="overgewicht" height="10" width="10"></td>
        <td>Boven de 30</td>
        <td>overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-red.gif" alt="ernstig overgewicht" height="10" width="10"></td>
        <td>Boven de 40</td>
        <td>ernstig overgewicht</td>
      </tr>
    </tbody>
</table>
</div>

De Jquery code

De volgende code berekend de BMI, verplaatst de pointer etc.
Zie ook de opmerkingen ertussen.

// Function to calculate the BMI using lenght in centimeters and weight in kilograms
function calculateBMI(lenght, weight)
{
  // Calculate the BMI and round at 1 decimal
  var result = Math.round(weight / (lenght/100 * lenght/100)*10)/10;

  // Determine the left position of the bmiScalePointer (and subtract 50% of it's width)
  var leftPos = (result*10)-22;

  // If the leftpos is > 450 it would run out of the scale so stop it here
  if(leftPos > 450) {
  leftPos = 450;
  result = Math.round(result);
}

// Update the bmiScalePointer value
$('#bmiScalePointer').html("BMI<br/><br/>" + result);

// Move the bmiScalePointer to it's new position
$('#bmiScalePointer').css('left', leftPos);
}

$(document).ready(function() {
  // Just plain Jquery UI slider functionalitiy
  $("#lengthSlider").slider({
    value: 175,
    min: 130,
    max: 220,
    step: 1,
    slide: function( event, ui ) {
      // Initiate the calculation function on sliding
      calculateBMI(ui.value, $('#weight').val());
      $("#length").val(ui.value);
    }
  });

  $("#length").val($("#lengthSlider").slider("value"));

  $("#weightSlider").slider({
    value: 75,
    min: 24,
    max: 250,
    step: 1,
    slide: function( event, ui ) {
      // Initiate the calculation function on sliding
      calculateBMI($('#length').val(), ui.value);
      $("#weight").val(ui.value);
    }
  });
  $("#weight").val($("#weightSlider").slider("value"));

  // Do a initial calculation
  calculateBMI($('#length').val(), $('#weight').val());
});

Nogmaals voor het gemakt: Het hele gebruikte pakketje voor deze implementatie kun je hier downloaden.

Jquery alle hyperlinks naar afbeeldingen koppelen aan Fancybox

Een tijdje terug heb ik voor een klant als service een microstukje javascript gemaakt met Jquery om alle hyperlinks in de content te hooken aan Fancybox (of welk ander script dan ook voor de weergave van foto’s). Wat hij doet is alle a elementen in de dom (of een selectie daarvan) opzoeken, kijken of ze een href hebben en of die linkt naar een afbeelding en zo ja, Fancybox eraan hangen. Normaal doe je dit gewoon door een class of iets aan de afbeelding te hangen die je gebruikt als selector maar ik wilde dat alle via het CMS ingevoerde links naar afbeeldingen ook meegepakt werden. Om de klant niet te hoeven uitleggen wat hij moest doen om afbeeldingen te linken kwam ik hierop uit.


$(document).ready(function() {
    $("a").filter(function(){
        if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
            $(this).fancybox();
        }
    });
});

ps. Als je sommige afbeeldingen eruit wilt houden kun je altijd nog iets toevoegen als een not()conditie (waarbij je in dit geval dus aan de hyperlink de class .noFancy meegeeft:

$(document).ready(function() {
    $("a:not(.noFancy)").filter(function(){
        if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
            $(this).fancybox();
        }
    });
});

CSS prism kleuren van stylesheet bepalen

Geen idee of we dit ooit nodig gaan hebben maar wel weer een grappige app. In het kort de werking;

  1. Je geeft hem een url naar een stylesheet
  2. Hij geeft je alle kleuren terug die erin gebruikt worden
  3. Je kunt kleuren in één keer in hele stylesheet aanpassen
  4. Je krijgt een aangepaste stylesheet retour die je in je site kunt gebruiken

Eens testen
Hop, Webparking stylesheet erin en ik krijg inderdaad een scherm met kleurtjes:

 

Als je dan op een kleur klikt zie je welke kleur, kun je hem aanpassen en krijg je gelijk te zien waar hij in de CSS te vinden is:

Als je klaar bent met aanpassen kun je rechtsboven de aangepaste CSS downloaden en klaar. Erg simpel, erg handig en vooral iets waarvan je vergeet dat het er is. Weet nu al dat mocht ik ooit op deze manier iets moeten refactoren ik het vermoedelijk gewoon doe middels een search en replace in mijn code.

Spritecow CSS sprite generator

En we zijn weer een fantastische stukje web-app tegengekomen. Spritecow is een online app waarmee je sprites kunt genereren vanuit een afbeelding. Vorige week getest met een project en het werkt verbazingwekkend prettig eigenlijk. In het verleden hadden we wel eens gespeeld met een plugin voor Photoshop die automatisch sprites en CSS maakte maar dit werkte, in mijn visie in iedere geval, niet echt lekker.

Hoe werkt spritecow?

Eigenlijk supereenvoudig. Je upload je sprite-afbeelding, klikt op een icoontje of wat dan ook welke je als sprite wilt gebruiken en automatisch zoekt hij de randen van je afbeelding op en krijg je onderin de benodigde CSS te zien. Indien nodig kun je ook gewoon met de hand een “regio” selecteren in de afbeelding.

Er staat ook een redelijk helder voorbeeldbestand met begeleidende teksten.

Link naar de site: www.spritecow.com

Browser ondersteuning css3 & html4

Als webdeveloper ben je constant bezig met de vraag “zou het werken in IE7 of niet” als het gaat om de leuke nieuwe technieken die CSS3 en HTML5 ons bieden/gaan bieden. Er zijn superveel sites die hierover stukjes informatie bevatten. Kwam pas echter op http://caniuse.com en moet zeggen dat ik hem wel prettig genoeg vindt qua gebruik om hem te delen.

O ja, wel een “let op, lelijke site alert!” maar functioneel zit het aardig in elkaar. Hieronder een screenshot hoe bijv. het zoeken naar border-radius eruit ziet:

Online favicon.ico maken in 3-stappen

Voorbeel van een favicon

Voorbeeld van een favicon in actie

Laat uw website opvallen tussen andere websites met behulp van een favicon. Dit icoontje van 16 x 16 word door de meeste browsers in de adresbalk getoond en maakt het mogelijk uw website op te laten vallen tussen de overige tabbladen. Ook in de bladwijzers en favorieten word het favicon gebruikt.

Het maken van een favicon is in 3-stappen gedaan:

  1. Maak een plaatje van 16 x 16 pixels en sla deze op als .png, .gif, .jpg of .bmp
    (.png en .gif mogen ook transparant zijn)
  2. Ga naar www.dynamicdrive.com, upload uw bestand en klik op create icon
  3. Download uw favicon en sla deze op als favicon.ico

Als dit is gelukt hoeft u de favicon alleen nog op uw website te plaatsen. Om dit te doen doorloopt u de volgende 2-stappen. Het enige wat u hier voor nodig heeft is toegang tot de bestanden van uw website (FTP en een beetje kennis van HTML. Toevoegen van uw favicon gaat als volgt:

  1. Voeg de hieronder staande HTML code toe aan de code van uw website, doe dit tussen de <head> en </head> in uw broncode
    <link rel=”shortcut icon” href=”/favicon.ico”>
  2. Upload vervolgens de favicon.ico in de zelfde map als uw pagina.

Wanneer dit gelukt is zou de favicon moeten werken. Het kan zijn dat u de favicon niet direct ziet, start dan uw browser opnieuw of leeg uw cache.

DD_roundies ronden hoeken in alle browsers

Nu CSS3 steeds meer als mogelijkheid wordt gezien en de opties voor ronde hoeken door de verschillende browsers ondersteund worden gaat dit interessant worden. Echter niet alle browsers ondersteunen ronde hoeken en de tags om ze toe te passen wijken nog af omdat ze voorafgegaan worden door “browser unieke” tags zoals -moz en -webkit.

Op zich is hier nog omheen te komen maar IE6, IE7 en IE8 doen helemaal nog niet mee. Nu zijn er flinke hoeveelheden oplossingen met o.a. Jquery (altijd een goed verkoopargument) om de ronde hoeken overal werkend te krijgen. Echter heb ik een enorm enthousiast gevoel bij de oplossing van Drew Diller.

Wij waren al bekend met zijn werk rondom één van de leukere PNG fixes voor Internet Explorer, DD belated PNG.

Nu heeft Drew Diller ook een prachtige fix gemaakt voor ronde hoeken welke je, in het kort, op twee manieren kunt toepassen;

Als aanvulling op je CSS3 code voor ronde hoeken in IE



Als enige bron van ronde hoeken in je code

Met de 3e parameter op true geef je opdracht om alle browsers van ronde hoeken te voorzien. DD roundies kijkt zelf welke syntax er nodig is voor je browser.



Download hier DD roundies en lees ook de volledige documentatie over de mogelijkheden (het is namelijk ook mogelijk met DD roundies ook gelijk DD belated te initiëren).

Legaal fontgebruik op websites (deel 2)

Eerder berichtte ik over Typekit wat de nodige bezoekers naar ons weblog trok en dus blijkbaar een onderwerp is wat erg leeft op dit moment. Nu kwam ik een ontzettend uitgebreide posting tegen op Smashingmagazine.com die wel zo’n ontzettend goede aanvulling vormt op mijn eerdere bericht dat ik die toch even onder de aandacht wilde brengen.

Andrew Follett bespreekt daar namelijk nagenoeg alle bekende oplossingen voor web fonts (waaronder Typekit). Van alle oplossingen geeft hij aan hoeveel fonts er beschikbaar zijn, tegen welke kosten, welke voordelen en nadelen ze precies hebben en hoe ingewikkeld/eenvoudig implementatie is.

Mocht je dus met web fonts aan de slag moeten gaan in een project dan is deze posting zeker even het bezoeken waard.

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/