html « Web Dev Web Log

In my current job, we use Foundation for stuff like modal popups, fancy drop downs etc. I haven’t used it too much but I know for the modal dialogs you can either instantiate them via Javascript ($('#elem').foundation('reveal', 'open', {option: 'value'});) or via HTML attributes (<a href="#" data-reveal-id="elem">Open</a> and <div id="elem" data-reveal>).

Passing options to Foundation via Javascript is pretty trivial, as can be viewed in the example above. However, doing this via HTML attributes isn’t so straight-forward and I found the documentation online pretty hard to find. Luckily I was able to figure it out and it’s simple enough: you add a data-reveal-init attribute and a data-options attribute on your modal div. Each of the options are separated by semi-colons and are of the format option: value, e.g.

1
2
3

So, as I said, easy enough in the end but finding it documented proved tircky! Hope this post helps.

When you have users copying and pasting in data to forms on your website, which then gets stored in your database, you invariably end up with all sorts of ways of encoding and storing special characters. Ideally, these will end up in your database as the correct characters (such as € for the euro symbol), which will then get encoded as HTML entities when you display this data on your website (so, € becomes € in the HTML).

However, with older systems, especially those built in-house, you end up with the HTML entity version of certain characters in your database. It’s pretty much a fact of web development. Let’s use the example of a string that says “Price: €100” but gets stored in the database as “Price: €100”. When you go to display this text on your encoded web-page, you end up seeing things such as “Price: &euro;100” in your browser. This is a result of double encoding, as the & in € is first getting encoded as &.

In order to remove these, I came up with the following function, that uses a simple regular expression to tidy such instances up.

1
2
3
4

function remove_double_encoding($in)
{
return preg_replace('/&([a-zA-Z0-9]{2,7});/', '&$1;', $in);
}

What this does is looks for any 2 to 7 letter strings with & immediately before them and ; immediately after. When it finds a match, it simply replaces the & with &. It does this for all instances in your input string.

Update: Forgot that you can also have purely numeric codes here, so added ‘0-9’ to the regex.

Passing options to Reveal modal in Foundation via HTML

Regular expression (regex) to remove double encoding of html entities