Decisions

As I said in my post earlier today I was wanting to target the slide up names in the thumbnails so that when the site is being viewed on a mobile device they are just visible instead of sliding up. All because on mobile devices you cant have a hover over (this is how the slide up is triggered).

I had an idea in mind how to make this work but had a look online to see what other options were available and that is why I'm posting this up to explain what I chose and why. Technically you cant do what I want purely with css as jQuery gets triggered for the slide up which means some jQuery was going to have to be used in the solution. I coudl achive somethign simialr with css3 transitions but these would also rely on my needing a hover over which is the issue.

Now option 1 was sniffing via jquery to find out what browser the person was using then targeting a pre defined array of user strings to see if it was a mobile browser. Option 2 was to use some specific css and class's which I woudl inject into the page and then target it with some jQuery and option 3 was to use jQuery to work out the width of the screen and based on that work out if it was a mobile device or not.

All three of these options have good and bad points to them, but in the end I went for an amalgamation of options 2 and 3. I tried option 1 and it worked fine through testing as well but I had a few issues with it future wise. Firstly the names that mobile browsers use are not set in stone and do change from time to time plus with new alternatives appearing all the time who is to say I was capturing them all.

Option 2 seemed a good one but I didnt feel it was robust enough whilst option 3 did what my first thought was of working out screen width then amending things, but i felt that this was a bit overkill as I was looking for something simple and effective.

My thought had always been that I wanted to target different screen sizes other than the highest, rather than targeting mobile devices. as you could have a tablet that almost displays the site in its full width but not quite would that be classed as a mobile device? probably not yet i wanted to target that.

So In the end I created css class that I added to the source of the pages then in my css file I set up a media query that sets this to display none if the width is below a certain amount. Then back in my jQuery I wrote a quick check that looks at that css style and works out if its set to display none. If so then we know not to show the name slide up if it is not then we just display as normal. That way I can target all the devices no mater what they are running and have them all react in the same way based on width opposed to if they are mobile or not. Not only does it work, but it is a more elegant solution than the other more obvious solutions.