Category Archives: Webdevelopment

Jetpack exceeds memory limit

Posted on by
Reply

ffs, jetpack always exhausts my memory limit! (thats a mind controlled jetpack for the uninitiated)

pft, and people doubt my minds abilities.

Well doubt me no more!

Incidentally what I was trying to say was that every time I install the jetpack plugin for wordpress it runs out of memory.

However, it turns out that this was mostly my servers fault. Dear old Moore* seems to have limited my WP install to 32mb of memory. However a little bit of WP config magic and thats all gone away!

 

define('WP_MEMORY_LIMIT', '64M');

 

*thats the servers name btw, personally I’d have gone with Kittens, but thats a story for another day!

Popup google map using FancyBox

Posted on by

This is a neat little trick I used when I was working on my final year project.

You will need the latest version of fancybox, my lightbox of choice.

First things first, go to google maps, and find your wanted location. Once you’ve done that, click the little ‘link’ icon in the top right hand corner and copy the iframe code it gives you. Adjusting the width/height as you see fit.

Now create a new html page placing your google map code in the body tag of said page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=london,+uk&amp;aq=&amp;sll=51.519126,-0.107684&amp;sspn=0.008585,0.021071&amp;vpsrc=0&amp;ie=UTF8&amp;hq=&amp;hnear=Westminster,+London,+United+Kingdom&amp;t=m&amp;z=10&amp;ll=51.500152,-0.126236&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co
m/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=london,+uk&amp;aq=&amp;sll=51.519126,-0.107684&amp;sspn=0.008585,0.021071&amp;vpsrc=0&amp;ie=UTF8&amp;hq=&amp;hnear=Westminster,+London,+United+Kingdom&amp;t=m&amp;z=10&amp;ll=51.500152,-0.126236" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</body>
</html>

Now back to your main site include the relevant jquery gubbins at the top of the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Add this jquery to your javascript file, remember to adjust width/height to the same as your google map

$(document).ready(function() {
$("a#popupmap").fancybox({
'frameWidth': 600, 'frameHeight': 500,
});
});

Then link it all together.

<a id="popupmap" href="map.html">View Map</a>

HTML5 Placeholders for troublesome browsers (ie. IE9)

Posted on by

Edit [30.01.12]: Turns out I got something wrong. I’ve updated the code below to fix this. Note, I’ve only tested this with input and textareas!

I originally found this code here but it didn’t support textareas, so I’ve added that in.

Just add this javascript to your site, and then the following CSS to your stylesheet.

$(function() {
     if(!$.support.placeholder) {
          var active = document.activeElement;
          $('textarea').each(function(index, element) {
           if($(this).val().length == 0) {
               $(this).html($(this).attr('id')).addClass('hasPlaceholder');
               }
        });
          $('input, textarea').focus(function () {
               if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                    $(this).val('').removeClass('hasPlaceholder');
               }
          }).blur(function () {
               if (($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')))) {
                    $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                    //$(this).css('background', 'red');
               }
          });
          $(':text').blur();
          $(active).focus();
          $('form').submit(function () {
               $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
          });
     }
});

Add to your stylesheet

.hasPlaceholder {
     color: #aaa;
}