Page 9 of 9

Loop through each character in a string in PHP

The other day I was working on a project that required me to extract a numeric ID from the current page’s URL. The problem was that the ID could either be at the end of the URL string or in the middle, depending if there were any parameters added on or not. Here is how I worked around the problem by looping through each character of the string.

Because the first part of the URL was formatted normally I could use a combination of strpos() and substr() to find the part of the string that contained the ID as well as all the characters that followed it (I could have used regex here, but I prefer to avoid using it if I can help it). This still left me with the problem of getting the ID out of that string, as the actual number could be any length. Luckily for me, the ID was immediately followed by a non-numeric character, so I came up with a solution where I could loop through each character in the string and use each one for the required ID, but stop the loop when I hit the first character that was not a number. In the interest of sharing some useful code, here is the simple snippet that I used to loop through the string along with my use case:

How to track if companies are selling your email address

I recently learned a handy little trick for tracking what companies do with your email address when you sign up for their newsletters, or enter a competition, or they find some other way to sucker you in to giving them your personal information. The only requirement for being able to do this is to have your own domain.

I learnt about this tracking method from reading this blog post on Lazygamer and it’s so simple and makes so much sense that I started using it immediately. Basically, any web server will have a ‘catch-all’ email address – what this means is that you can set any of your existing email address to receive emails that are sent to any other non-existent addresses. So, if you send an email to then I will receive it at my selected catch-all address (I will, of course, immediately block any future emails that are sent to that address).

Practically speaking, how this would work as a form of tracking your email addresses would be for you to sign up for a newsletter using a non-existent email address. For example, if you sign up for a newsletter on the website of Company X just use the email address Emails to this address will be received at your catch-all address and Company X will be none the wiser. Now, a few weeks later you suddenly receive a spam email sent to that comes from Company Y – this obviously means that Company X is being underhanded and giving out your email address to whoever they please. With this knowledge (and a few screenshots of the offending email) in hand you can now take to Twitter and decry the services of both Companies X & Y safe in the knowledge that you are entirely justified in your rants. Who knows, maybe one of the companies will apologies to you and sent you free stuff to say sorry.

An alternative would be to use the Gmail ‘+’ trick just add ‘+sometext’ to your Gmail username and you will receive all the emails at your normal Gmail address – however some website don’t allow you to enter email address with the + in it for this very reason.

Making a semi-transparent background behind opaque text in CSS

When I receive the final PSDs from a designer I invariably want to reach through my computer and slap him for making my life difficult. With very few exceptions, there will almost always be at least one design element that is frustratingly hard to achieve using HTML and CSS (no matter how easy the designer may think it will be). The new properties available in CSS3 have reduced this frustration thankfully, but from time to time there are problems that crop up. One design feature that can be a little frustrating to work around when coding is the inclusion of normal, opaque text on a semi-transparent background. Here is a simple solution to get round this problem.

In the past I have used absolutely positioned divs and the z-index property to achieve the desired result. There is, however, a much simpler solution.

You want the background of a div to be transparent, but not the text – this requires using an RGBa value for the background colour of the div. From time to time you may use RGB values for setting colours in your CSS (e.g. rgb(170, 187, 97)), an RGBa value simply adds an alpha-transparency value to that code, so the HTML and CSS for this is:

This would set the background of the div to have an alpha transparency value of 0.5 – this can range anywhere from 0 (fully transparent) to 1 (fully opaque). This is different from the opacity property, as it only affects the background and not the div contents as well. For browser compatibility’s sake it is always a good idea to set a fallback background colour just in case. In this case, the best option would be to set it to the same RGB value as we have already used (just without the alpha transparency). The browser support for the RGBa colour value is absolutely fine all recent browsers, but will fail in older ones (IE is the main one to watch, as it is only supported from IE 9 and up) so the fallback colour is always necessary.

Understanding CSS positioning

When working with CSS, I have constantly encountered one particular property that is grossly misused – the position property. If you check out the source of almost any website you will see plenty of elements with randomly defined position properties. I just thought I’d clear up some of the confusion, as understanding this property will make your life significantly easier when creating layouts.

You have five values for the position property. They are:

  • static
  • inherit
  • fixed
  • absolute
  • relative

The default value is static – this just means the element appears in the normal flow of the document. The other obvious one is inherit – this you should be familiar with as it is used as a value for most other properties and simply means that the property value is taken from the value of the same property in the parent element.

The fixed value means that the element is positioned in a fixed position relative to the browser window. You can define the position using the left, right, top and bottom properties. This is particularly useful for creating floating menus or buttons that you would like to be permanently available to the user.

Those are the simple values – it is with the final two that things get a little more complicated. Most people use the absolute value as a way to position an element in relation to the <body> tag. In actuality, this value breaks the element out of the normal document flow and positions it in relation to the first parent element that has its position value set to anything other than the default (static). Have a look at the following code (and bear in mind that I’m definitely not advocating the use of the style attribute – I’m just using it for this example):

Because the #second-parent element has a position value of relative (i.e. not static), the #child element will be positioned against its top left corner effectively ignoring the fact that the natural flow of the document would ordinarily place it inside #first-parent. As with fixed, you can use the left, right, top and bottom properties to precisely position the element.

The final value is relative. This simply allows you to  position the element relative to where it would normally appear in the document. Just assigning an element with this value does not do anything on its own – you also need to define how you would like it positioned. This means that, in the above example, #second-parent will not have its position altered in any way by the relative value assigned to it. Once again, you will need to use the leftrighttop and bottom properties to position the element. For example:

The #child element will appear inside the #parent element as the flow suggests, but because of the combination of its position and left values, it will have a left margin of 10px so will effectively be shifted 10px to the right.

The other property that you can use with relative in order to position your element is z-index. I’m not going to go into the details of that here, but basically what it does is position elements on top of each other – the higher the z-index value, the more likely the element is to appear on top. In order to use this property you need to have the element’s position set to relative.

Understanding this CSS property well will make a big difference to how you create layouts and should help you minimise the use of repetitive child elements to apply some simple positioning. Hopefully you should now be able to minimise the clutter in your HTML and remove arbitrary position values that have no real effect.