Saturday 23 March 2013

Multi-level Bootstrap Menu on GDrive or site44

I've talked about menus within GDrive and site44 before but I've improved my script so that it allows multi-level menus. Given the following json:

var links = [
    {
        "text": "Cam River Levels",
        "url":[
            {
                "text":"Canal Lock",
                "url":"/canal/"
            }

        ]
    },
    {
        "url":"/star/",
        "text":"Star"
    },
    {
        "url":"/time/",
        "text":"Time"
    },
    {
        "text":"SVG",
        "url":[
            {
                "text":"Swirly Skyline",
                "url":"/img/city.svg"
            },
            {
                "text":"Swirly Colour",
                "url":"/img/sun.svg"
            },
            {
                "text":"Swirly Greyscale",
                "url":"/img/pretty.svg"
            },
            {
                "text":"Spinny Swirly",
                "url":"/img/spinny_swirly.svg"
            }
        ]
    },
    {
        "text":"Experiments",
        "url":[
            {
                "text":"MultiSelect",
                "url":"/multiselect/"
            },
            {
                "text":"data URL",
                "url":"/experiments/data_url_messing.html"
            }
        ]
    }
];
var base = "https://googledrive.com/host/randomstring";

My new jQuery looks like this:

$(function(){
    $.each(links, function(k,v){
        if (v.url instanceof Array) {
            var dropdown = $("<li></li>", {
                "class": "dropdown"
            }).appendTo($("#siteLinks"));
            dropdown.append($("<a></a>", {
                "class": "dropdown-toggle",
                "data-toggle": "dropdown",
                "href": "#",
                "text": v.text
            }).append($("<b></b>", {
                "class": "carat"
            })));
            var dropdownMenu = $("<ul></ul>", {
                "class": "dropdown-menu"
            }).appendTo(dropdown);
            $.each(v.url, function(a, b){
                dropdownMenu.append($("<li></li>").append($("<a></a>", {
                    "href": (b.url.indexOf("http") == -1) ? base + b.url : b.url,
                    "text": b.text
                })));
            });
        } else {
            $("#siteLinks").append($("<li></li>").append($("<a></a>",{
                "href": (v.url.indexOf("http") == -1) ? base + v.url : v.url,
                "text": v.text
            })));
        }
    });
    $("#siteLinks").find("li").each(function(k,v){
        if ($(v).find("a").attr("href") == document.location.href.toString()) {
            $(v).addClass("active");
        }
    });
});

It's simplified the adding of the "active" class. I'm really quite happy with it and it makes the script easier to read.

Making a web page 03: Multi-coloured trees!

Now we've talked about trees and we've created a tree in winter:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
    </head>
    <body>
    </body>
</html>

But I've looked back over what I've written and I realised that I really didn't explain enough about the way the bits of the tree hang together.

Lets correct that now.

We looked at how HTML has it's roots in a language called SGML but what does that mean?

When we write we follow certain rules. We have a paper and a pen or pencil and we start writing words down. Once we've come to a place in the stream of words which feels like it'd be a place where we'd stop to take a breath if we were speaking those words we put a full stop. We then start another sentence. When we've written enough sentences to convey a specific meaning we generally end the set of sentences and start a new set of sentences in a new paragraph.

Now that's simplifying things an awful lot but it's how I think about writing. Sometimes a paragraph can have just one sentence and that's cool as well.

We spend most of our time in school learning these rules and clever people that we are we've created all sorts of tools to help. Those words we talked about, they are made up of letters and sometimes those letters can be in the wrong order or have the wrong letters in them so we've made clever tools that compare those collections of letters to a list of all the combinations of letters in our language and when it doesn't find that combination of letters it can put a wriggly red line under the word. These spell-checkers are brilliant and save me all sorts of trouble as I really can't spell for toffee! If we've got a particularly clever tool it might even check the context of the collection of letters (lets just call it a word) and check to see if it fits within the context of the other words in the sentence. These sorts of tools are even more brilliant because they not only have the list of words but they also have an idea of the meaning of those words and they'll be able tell if you really meant to put "there", "their" or "they're" in the sentence.

Okay, so we've had a think about how we write. How might we put those letters, words and paragraphs within a web page? How might we tell a browser what to do with all those words?

HTML comes from SGML, another language that came out of SGML is XML and, even though HTML came before XML, HTML (and particularly later versions of HTML) learnt a lot from XML. XML can look something like this:

<?xml version="1.0"?>
<trunk>
    <bough>
        <branch>
            <leaf/>
        </branch>
    </bough>
    <bough>
        <branch>
            <leaf/>
            <leaf/>
        </branch>
        <branch>
            <branch>
                <leaf/>
                <leaf/>
                <branch>
                    <leaf/>
                </branch>
            </branch>
            <leaf/>
        </branch>
    </bough>
</trunk>

What do you notice about that XML? This is where I'm going to rattle on about trees again. A tree that you see in nature is narrowest in it's trunk, here the trunk is the tallest/widest element and that's because we have to contain all the elements of the tree within the trunk... spend a moment getting your head around that.

In the XML above the trunk has, at the first level, two boughs, those boughs contain branches and those branches can contain other branches or leaves. To an extent a tree is a hierarchy. In a visualisation of a hierarchy things are arranged so that we can tell what a things place is within the hierarchy. They can be at the top or the bottom or somewhere in-between. I used to work nights in a hospital, as such I never met a lot of people who worked in the hospital so I'd hear peoples names and not know what position they held in the hospital so I wrote a program which would - when it knew who their boss was - draw a picture of the hospital organisation. This is known as an organogram and it helped me understand who people were when they were talked about.

Hospitals aren't the only places where hierarchies are important, can you think of some more?

Armies run in hierarchies. Individual Soldiers are arranged into Units who take their orders from a Sargent, a set of Sargents take orders from a Captain, Captains take orders from Generals (as you can probably tell - I know nothing about the armed forces - so if I've made a mistake, forgive me).

So in the above XML the trunk contains everything else, it's the root element. Generally speaking something done to the trunk will have an effect of everything that depends upon it. Trees are generally green in colour but suppose that the XML tree above is in a place where trees are red, can you imagine how we might make it red?

We could go along and change each tag/element (can we just settle on calling them elements now? That okay? Cool!), we could change trunk to redtrunk, bough to redbough, branch to redbranch and leaf to redleaf... but what would happen if we wanted to colour the tree blue? What would happen if we wanted future trees to have a smaller type of branch called a twig? Would we end up with bluetrunk, bluebough, bluebranch, blueleaf, twig, redtwig and bluetwig... that'd be very complicated and mean that we'd have to go through each tree that we'd written and make sure that each element was called the right thing... what would happen if we had a redtrunk, two greenboughs, a handful of bluebranchs and then lots of yellowleaves?

That's an awful lot of complications and rules in which to get stuck in. We've already unconsciously absorbed one set of rules though haven't we? We know that the trunk is the root element and that the only element that can come after the trunk is the bough element, the bough elements can have branches that can then have further branches and/or leaves. That's an interesting one that isn't it? Our language and our understanding of trees means that unconsciously we know the rules of making a tree!

But getting back to out multi-coloured tree we can, instead of altering each and every element simply alter the root elements attributes. What do I mean by this? If each element is surrounded by angle-brackets (<branch>) and is either matched by an ending (</branch>) element or self closing (<leaf/>), then most elements can have extra stuff within the element, between the angle brackets. These extras are in the form of a word (or set of words separated by "-"s) and can be followed by an equals sign ("=") and then some more words within speech marks. We can then alter the colour of the tree above by replacing the first <trunk> with <tree colour="red"> and we get a red tree... well... we would if a browser understood the tree dialect of XML.

Browsers don't understand our tree though... although perhaps they do? What happen's when you save the above xml as tree.xml and open it in a browser? My guess is nothing though some browsers will try to draw a representation of the XML.

Those extras within the element are called attributes and they're very important within HTML as well. We can add a paragraph to out winter tree now. Because Tim Berners-Lee knew that he'd be doing an awful lot of writing using HTML he made the paragraph dead easy to remember, he called the paragraph element p.

Open your bare tree (I think we called it index.html) in your editor of choice and, within the body element write something. When you've finished writing add a p within angle-brackets at the beginning of the text (<p>) and a /p within angle-brackets at the end (</p>). It should looks something like this now:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
    </head>
    <body>
        <p>My first paragraph.</p>
    </body>
</html>

Just for giggles lets add an attribute to the paragraph, lets alter it's colour (though for some reason within HTML colour is spelt "color"...?). So lets add colour="red" to our paragraph element, just like we did with out tree trunk. Look at the page in your browser and give yourself a pat on the back, we've covered a lot today!

Thursday 21 March 2013

ICT 001

The word "computer" is, you'd think, quite a new word. That's not so though and I was quite surprised that the word actually comes from the early 1600s. Originally a computer was a person that was employed to do mathematics, literally "one who computers".

It wasn't a particularly interesting job - can you imagine doing Maths lessons all day everyday?

More recent computers have their routes in World War II, Can you imagine any reasons for this being the case?

Reasons for the change were two-fold: because of the need for male bodies on the front there were less people to work as computers and computers were required in order to process the massive amounts of data produced in weapons development and for decryption.

We've talked about data and information above and it's perhaps worth looking at this a little more.

The following is some data:

8950 4e47 0d0a 1a0a 0000 000d 4948 4452
0000 0208 0000 000d 0804 0000 0111 a06e
e400 0000 0467 414d 4100 00b1 8f0b fc61
0500 0000 0262 4b47 4400 ff87 8fcc bf00
0000 0970 4859 7300 000b 1300 000b 1301
009a 9c18 0000 0007 7449 4d45 07dd 0314
1406 1f3a d2be 9600 0000 1d69 5458 7443
6f6d 6d65 6e74 0000 0000 0043 7265 6174
6564 2077 6974 6820 4749 4d50 642e 6507
0000 0372 4944 4154 68de ed5a db92 2b21
0884 54fe ff97 7b1f 36f1 820d a2c9 4c72
f68c 55d9 b546 0790 c1e6 a22a cf06 51f1
1b9c e75a 4654 d0fc a4fc 7dce d1c2 c170
ba89 081e 5346 8628 7d2d 8c9e 7fb5 1344
9bb9 4c60 75fa 4b0d 0f61 f160 50fb 6846
5b11 e0f4 0cd5 5b37 a592 e0a4 857c b6aa
7eab 4375 f540 9eb6 8cd0 0923 cd5a fb59
4c4f 18b4 d5ea 8d2d 510c 374e b5d7 7bfb
ae2f 0f52 368d 55e3 978d 0df3 4f34 a506
36c3 096f 041d 4e48 4101 6e90 163d eabb
da00 c138 2b32 ef76 f60c e9ca f88d 6e05
0c26 0e3a ca6d 410b 6efd 9aab 3668 8624
2d75 97aa 8583 d0ad 6695 d88f 5035 de27
f6a1 c60b d47e 8bff fd97 c400 5cbf 2320
1cd0 c17e bf78 b862 a351 6b64 d3a0 2a5c
d8df f87f 3061 b628 7c0d 788e be09 c4b9
c2f1 3d30 1ecb dbe2 3034 46d7 6dd7 c166
c8e0 c53c 7801 f57a 3ce6 c86a 1554 7393
7673 96d6 63ce eb9f 1434 a478 9fc1 ae3a
c216 c89e c88d 2118 d609 8d88 8b0e 5cc6
519f a676 a8ae 213f 245d fa81 7871 b53f
eb0a c4dd b938 d91c ac2b 8863 362f f282
41b6 d839 6471 6aa4 288b 9126 8b4d 31a0
7324 8f2f 2fc2 846e e232 b061 2a38 c50c
f025 f883 20f4 3e9e b61f 9b64 bf19 9ccd
8d1a 238c a117 0bb9 b820 70f7 ae90 f0cc
0bc4 6c00 c592 0fb6 e776 0d25 8b25 62ea
56d9 5861 07bb ea33 4d94 5532 c591 5153
3522 42d1 adf6 5419 7020 d89d f1a7 e400
284e 04ee ffbe 1511 f682 68bc 40fb 1844
3059 038a 7d28 55bd d2aa 2d9c 0856 3b5a
76b9 6d79 a0d6 45d1 f57b a17b a966 de79
e65f e3f7 79ff 5905 575a 5c8d 31aa 1d55
3adf ce55 2a89 0648 0117 2fb4 a302 836d
d8db 0f3b 7371 289f ab7d 34a7 c002 20e1
3283 bf96 46ce 0293 ac2f 3c2f f53c 96b2
5f6d f46a 90b3 3ea6 6348 bd0b 729e b7da
8fe9 f37e 665c a63c 30a5 e995 34bc 67b3
e8d4 264a d6cd 82d6 b1e3 4a72 ae16 0cd9
3f2f 8d75 1847 917c 7689 15cf 0298 0bf5
5fd5 63b6 72ac 876a bbcd 3cbd 71f0 cc54
e6f5 6f1d e25c 1b25 e729 e46a edde 4d8f
7a5e dc1e 8756 6934 3833 f0f2 fe91 9792
2742 e559 777b fd29 45fd cfef a834 e524
718b 4519 8f36 f76f 3388 d8f5 6348 00ce
8a6f f3f1 ff28 403b 72db e647 30a4 a778
a31c 6a6e 23bc 0a82 ea1b b3f9 92f9 0343
efae 02a6 7267 92fb d7e0 1b22 071c 2242
9c23 d8fb 0126 f799 a653 bfa0 d3fa adaf
3efd f07a 55de 7fba 8c4d da1a cef6 ae04
ad4a 8f84 af5f 7dce ec85 af7e bc20 c7af
d769 725d baa9 512c 417b 66ad d1bb 07d8
3836 4676 e99e 9184 5c89 ced5 ce4c 0be3
6817 e155 b1b7 b4fb f51d ae76 b5af 8a71
4ff4 df63 fb01 ad79 31fa 7b1b d4d0 0000
0000 4945 4e44 ae42 6082

Can you tell what that means? I'll help you and display it in another way:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAAANCAQAAAERoG7kAAAABGdBTUEAALGPC/xhBQAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QMUFAYfOtK+lgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAADcklEQVRo3u1a25IrIQiEVP7/l3sfNvGCDaLJTHL2jFXZtUYHkMHmoirPBlHxG5znWkZU0Pyk/H3O0cLBcLqJCB5TRoYofS2Mnn+1E0SbuUxgdfpLDQ9h8WBQ+2hGWxHg9AzVWzelkuCkhXy2qn6rQ3X1QJ62jNAJI81a+1lMTxi01eqNLVEMN06113v7ri8PUjaNVeOXjQ3zTzSlBjbDCW8EHU5IQQFukBY96rvaAME4KzLvdvYM6cr4jW4FDCYOOsptQQtu/ZqrNmiGJC11l6qFg9CtZpXYj1A13if2ocYL1H6L//2XxABcvyMgHNDBfr94uGKjUWtk06AqXNjf+H8wYbYofA14jr4JxLnC8T0wHsvb4jA0Rtdt18FmyODFPHgB9Xo85shqFVRzk3ZzltZjzuufFDSkeJ/BrjrCFsieyI0hGNYJjYiLDlzGUZ+mdqiuIT8kXfqBeHG1P+sKxN25ONkcrCuIYzYv8oJBttg5ZHFqpCiLkSaLTTGgcySPLy/ChG7iMrBhKjjFDPAl+IMg9D6eth+bZL8ZnM2NGiOMoRcLubggcPeukPDMC8RsAMWSD7bndg0liyVi6lbZWGEHu+ozTZRVMsWRUVM1IkLRrfZUGXAg2J3xp+QAKE4E7v++FRH2gmi8QPsYRDBZA4p9KFW90qotnAhWO1p2uW15oNZF0fV7oXupZt555l/j93n/WQVXWlyNMaodVTrfzlUqiQZIARcvtKMCg23Y2w87c3Eon6t9NKfAAiDhMoO/lkbOApOsLzwv9TyWsl9t9GqQsz6mY0i9C3Ket9qP6fN+ZlymPDCl6ZU0vGez6NQmStbNgtax40pyrhYM2T8vjXUYR5F8dokVzwKYC/Vf1WO2cqyHarvNPL1x8MxU5vVvHeJcGyXnKeRq7d5Nj3pe3B6HVmk0ODPw8v6Rl5InQuVZd3v9KUX9z++oNOUkcYtFGY82928ziNj1Y0gAzopv8/H/KEA7ctvmRzCkp3ijHGpuI7wKguobs/mS+QND764CpnJnkvvX4BsiBxwiQpwj2PsBJveZplO/oNP6ra8+/fB6Vd5/uoxN2hrO9q4ErUqPhK9ffc7sha9+vCDHr9dpcl26qVEsQXtmrdG7B9g4NkZ26Z6RhFyJztXOTAvjaBfhVbG3tPv1Ha52ta+KcU/032P7Aa15Mfp7G9TQAAAAAElFTkSuQmCC

Getting an idea? Let me help a little more and show you it again:

There's a shortcut to giving meaning to the data. If you copy and paste the line starting with "data:image/png;base64," into a new tab on your browser the browser should be clever enough to produce the image above this paragraph. It's a very long line of text though isn't it? One way to select a long line of text is to click on it three times with your mouse, you'll need to click quite quickly!

(This is an interesting trick in itself. Generally if you click twice while your mouse is over some text you'll select a word, click once more and you'll select the whole block of text.)

From the gobbledygook of a long line of mixed up characters your computer has produced some information.

This illustrates an important part of ICT: Data with some context or Meaning produces Information!

As an experiment, take that long line and copy it into a text editor like notepad and change a letter or 2 and see what happens when you paste it into a new tab of your browser.

If you're very, very lucky then nothing will change significantly... if not then you'll see something like this:

This is your browser telling you that the image is broken and illustrates another important thing about ICT. If you put Garbage In then you'll get Garbage Out (GIGO). I guess it's a little like giving someone a puzzle which can't be solved no matter how long you spend on it because the instructions you give them are wrong.

Saturday 16 March 2013

SVG Canal Lock

I spent the morning finishing this. The original I made years ago using proprietary Adobe SVG scripting techniques and after recently falling for Raphaël I thought I'd make it work in modern browsers but using similar techniques.

I did the original in order to help teach the kids about how a lock works - they'd been through enough of them and cycled over one at least once a day on the way to primary school - that I thought that a visual representation might be in order.

Please play with it and tell me if you see any problems... I've tried and not been able to find anything wrong!

If you like it then feel free to copy it, check the source for how the script works: it's something of a clumsy approach to animation I'm afraid - as I noted above - the technique was taken from an old approach to SVG animation. I'd welcome critique and alternatives. I'm sort of unhappy about the movement of the boat particularly as I keep manipulating the line string and I'm not sure that that's for the best - I know it doesn't work on IE10 you see...

I'd like to thank Sarah for the colours, I did have it using just primary colours and it was really quite garish!

Wednesday 6 March 2013

Adding a delay within a jQuery each()

Well isn't that annoying! I've just spent 30 minutes trying to introduce a delay within a jQuery each call so that each request is delayed by a little bit. I guess my original Google-fu was pants though as I racked my brains until I finally came up with this:

$(".clickMe").each(function(k, v){
    var $this = this;
    setTimeout(function(){
        myfunction($this)
    }, (k + 1) * 200);
});

Then, as I was congratulating myself on my coolness, I did a search and discovered that Rob came to much the same conclusion as I on stackoverflow.

I know why it works as well. I originally had it differently but all things then just ran as one after the delay and that's because JavaScript is non-blocking. The solution is to set up a number of function calls and add lengthening delays to the setTimeout. Then JavaScript could add them to it's list of things to do in the future without worrying.

Here's a jsfiddle to demo it.

Monday 4 March 2013

It was the pig what did it!

Pig by griffinstock

I'm not all together well. I say that not to elicit sympathy but to explain that the balance of my mind might not be totally horizontal.

It's 01:00 on a Monday morning and I've just woken to the startling fact that it was the pig what did it!

Let me explain: At 13:20 yesterday afternoon, whilst at work, I was afflicted with a migraine... I distinctly remember struggling to first see what was to the right of me and then, an hour later, I couldn't see to my left. I struggled on and managed to get quite a fair deal done but eventually, feeling rather nauseous and somewhat queer down below, went home to discover 'er indoors watching Call the Midwife.

She's recently been watching Downton Abbey, to which I object as I see it as propaganda designed to condition us poor plebs into accepting a life of more obvious servitude. But Call The Midwife I was quite looking forward to. It wasn't some miserable period peace about some grim subject like abortion (bugger knows what she liked about Vera Drake), it is more like All Creatures Great and Small but instead of interesting farm animals being violated by vets we get the poor of the East End being seen to by the female scions of the Upper Crust.

Utterly brilliant! Yet through each episode I watched there seemed to be a couple of pervasive messages. The first is a little miserable and far too close to home at the minute and basically goes along the lines of: love allows the greatest pain but makes it bearable. The second seems to stem from the first and revolves about the nature of untruth: basically love allows for any truth the be ignored (and thus any lie to be told - even, and most especially - to oneself).

Deep ehh? Also heartwarming in a way that I can't really explain. Why is love with pain and suffering greater than love with no pain nor any suffering! Arseholes to that thinks I (well, at least I do now, I want my cake and I want to eat it).

But that's not the reason I woke, ohh no, I woke with the clear feeling that there was something else at play! That all that talk of love, pain and lying was a mere veneer upon something altogether more menacing.

That core meaning, ladies and gentlemen, is obedience! The sisters obeyed their vows, the nurses obeyed the strictures of their society. Miranda Hart's character wrote herself out of the story when she married her copper and disobeyed her mother, the kleptomaniac Nun got into all sorts of bother when she started going mad and disobeyed her order. And poor old Jenny kept obeying that faceless c**t Gerald ('er indoors phrase, not mine! Now there's a cove who wants his cake and to eat it! And he really must be a rum 'un in order for such profanities to pass 'er lips!).

It was the incestuous cleaner that switched me on though. She was right as sixpence right up until the pig went waddling over her nice clean floor. Then the next time we see her she's obeying the long gone people who broke her spirit when she was a child in the workhouse. The cheeky chappie stopped all his various money-making schemes once the pig came and the whole set of characters ended up fetching and carrying or helping with the delivery of the fowl creatures litter!

Ohh yes, it was the pig what did it, and my money is on worms!

I think that the pig infected all and sundry with some sort of parasitic larvae which took root in everyone's brain and started munching... munched all around anything that had any resemblance of free will and left love, pain, sacrifice and bold-faced lies all in order to protect itself and its brood! Brilliant when you think of it, it's not for nothing that George Orwell had a pig as the villain of his great work is it? That murdering pig killed after infecting others with it's vile doctrine, I can only hope that this one doesn't.

Bugger knows what happens in series two, but I'll be willing to bet that the pig is still there, in the central courtyard, like some great, evil, spider in the middle of it's web, pulling everyone's strings and eating the best cake (another give away that), or blood and feather coated toffee-apples. I just hope that Jenny can get out of it's evil control and cop off with her nice young man and stop all that malingering with her asthma... gets old very quick that does and so very convenient the timing of its onset!

But, as I say, I'm not well. The migraine's gone now and left me feeling ever so slightly peculiar!

Just keep your eye on the pig!