Code

A collection of code snippets that I’ve found useful

Transparent/broken HTML form validation warnings in Webkit and FirefoxApril 29th, 2011

In the latest versions of Chrome and Firefox, if you use the new bits of HTML forms such as validation (the ‘required’ attribute) and the ‘email’ type, there’s now some validation

If you was to enter something that wasn’t a valid email address, or left the field empty if it was required, you’d get a nice looking tooltip notification as such:
HTML form validation error tooltip

But sadly, if you use some popular CSS resets such as the lovely one made by Meyer, you’ll get something that looks like this:

HTML form validation error tooltip, not as nice looking

The fix is to look for code similar to this in the reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

And replace the div selector with body div

Posted in Code, Web design | No Comments »
Permalink

Problems with attributes not working in IE and Opera?August 30th, 2010

So, what did I do with my bank holiday weekend? I was intrigued by some odd Opera and IE behaviour — that’s what

I was presented with a site whose styling wasn’t working for certain tags. It was an odd one. I thought it might be an absolute positioning bug, but testing was bringing up nothing – why on earth would simple CSS styling, nothing special, fail completely in Opera?

Then I took a closer look at the source — and something caught my eye. There was some malformed HTML:
<h1 title="test""style="background-color: #ccc">Test</h1>

Gotcha! Removing that innocent looking multiple quote fixed the problem. But I still wasn’t happy. Browsers should recognise and fix badly formed HTML, no? It’s not like a closing tag was completely missing. So I made a basic HTML template with little more than the h1 tag you see above, and just enough HTML5 to make it validate.

Then I played around with it. What happens if I add a space?
<h1 title="test"" style="background-color: #ccc">Test</h1>

That fixed it. Hm. Why on earth would the lack of space break things? Lacking a space is completely fine in both HTML and XHTML. Let’s remove the space again, and test some more. What if I replace the rogue ” with another character – say $?
<h1 title="test"$style="background-color: #ccc">Test</h1>

Wait — that’s a turnout for the books — it now breaks in Chrome. Then it dawned on me. If I replace that dollar sign with a normal alphanumeric character — the character ‘a’:
<h1 title="test"astyle="background-color: #ccc">Test</h1>

That’s it! Without the space between attributes, Opera and Internet Explorer are treating “style as the attribute, with Webkit and Gecko being smart and removing the extra quote. Add the space, and Webkit does the same. Obvious when you think about it, isn’t it?

So that’s what I did with my bank holiday weekend. What did you do?

Tags: , ,
Posted in Code, Web design | No Comments »
Permalink

Reusing primary keys in MySQLJanuary 22nd, 2010

I’ve recently had need to reuse the primary key for a table whenever a row gets deleted, for example if a row of ID 5 gets deleted, the next entry will re-use the ID of 5. Usually this causes problems with foreign keys, but as no other table had a foreign key linked to this table, it would cause no problems.

The biggest hurdle was finding what the first missing primary key actually is. This takes a bit of SQL, but the following almost gets it:
SELECT MIN(table.id + 1) AS nextID FROM table LEFT JOIN table t1 ON table.id + 1 = t1.id WHERE t1.id IS NULL

I say almost, because if row/id 1 is deleted, the above code won’t catch it. I’m afraid that you’ll have to use SELECT to check for this:
SELECT count(id) FROM table WHERE id = 1
If the value is 0, then you know you need to create row id 1.

And that’s it. All you need to do is throw this together into a MySQL function (or a php function if you’re not feeling adventurous), and you have the lowest unused primary key all ready for you to put into your INSERT line.

Tags:
Posted in Code | No Comments »
Permalink

Categories