Websiting

This morning I was just doing more work on my website.

Though, before I started work on that, I read a few photo-class tutorials.

First I tried creating a google search box using javascript, so you could click a button on the page you were on to pop up the search box, rather than having to visit a separate page to type your search query in.

Unfortunately, when I tried creating the google search box using jQuery, I just got an error. I think maybe because the page wasn't finished loading when the script that tries to create the form is executed (the google javascript must be executed before the page finishes loading, and the form must be included in the page before the google javascript is executed).

I could have created the google search form manually using the DOM methods createElement() and setAttribute() instead of jQuery, but that would be too much work, especially now I am used to the ease of creating html using jQuery.

So I tried looking at other sites to see how they worked. One site I knew that used Google Search (like I am at the moment) was Mike Hopley's The Badminton Bible. I noticed that he has the search form on every page, but it POSTs to his search page, where the results are displayed. I also noticed that his search form doesn't display any results if you have javascript disabled.

So I copied Mike's use of the search form POSTing and displaying the results on the search page rather than on the same page via AJAX (which is what I wanted to do really). Because the google javascript is only needed for displaying results, this meant that I could now create the search dynamically using javascript/jQuery after page load.

One thing I came across when writing the jQuery/javascript to create the search form, was that I wanted to write the HTML text string that jQuery parses to create the actual HTML in the same format as I wanted it printed (i.e. using line breaks and an indented hierarchy).

Doing some googling I came across this thread Javascript Multiline Strings (HEREDOC equivalent) - solution. Of course, the answer is actually quite simple - just escape the end of each line with a backslash \. This doesn't actually keep your new lines, so you'll still need to add a "\n" at the start or end of each line, but it does take care of the tabs so you don't have to consider how many "\t"s you should be adding to each line.

After getting that working, I found that when the search box was shown in the header of the page, it wasn't making any difference to the position of my slideshow images on the front page (the images' positions are meant to be calculated based on the header height, among other things).

Alerting the height of the height of header, I found that it was 60px whether the search box was shown or not. 60px is actually the padding top of the header, so it seemed that it wasn't taking the real height of the header at all. I thought I must be using the wrong property to get the height of the header, but googling I just found lots of advice to use element.offsetHeight, which is what I was already using.

One person suggested trying element.scrollHeight, but that gave the same value. $(element).height() gave 0. Highlighting the header in firebug or using the Firefox Web Developer toolbar extension, it seemed that the header was definitely taking up more than 60px, and it was expanding to contain its children rather than them just overflowing it (at least based on the outline that the two tools draw around the element).

Both the nav and google search box are floated right, and the only other element in the header (the website graphic) is positioned absolutely. So I tried inserting an empty div at the bottom of the header, with the div's style clear property set to 'both'. This actually fixed the problem, and I now got the actual height of the header element.

I did now have another problem though - there was a (reasonably large) gap between the header and the content container, neither of which had any padding or margin between them (I even explicitly set them to 0 to make sure). Using the element highlighting tools in firebug and the Web Developer Toolbar extension, I could see that it was an actual gap between the two elements rather than some padding inside one or the other.

I couldn't work out what was causing the gap, so I just set the margin-top of the content container to -20px, and that solved that (I did try increasing the text size to make sure the gap was pixel sized rather than em sized, and it was pixel sized).

In the afternoon and evening I did more work on my photo website, and in the evening I also went on a walk with Moccle, Clare, and L.

Also in the evening, McRad wanted the address of my blog so he could see it Mmmm Manical!

The weather today was mostly sunny, though it started to cloud over about 3.30pm. There wasn't much of a sunset as the sun set behind the clouds.

Food
Breakfast: Bowl of Honey Cheerios; Hot chocolate milk.
Lunch: 2x cheese on toasts; Banana; Pear; Caramel Rocky; cup o' tea.
Dinner: Fish; Leek; Egg; Cheese sauce stuff; Potato; Peas; Butter; Ground Black Pepper. Pudding was a (shop) mince pie heated in the oven with custard. Coffee; 3x pieces of Sainsbury's caramel chocolate.