Every so often you pick up a project that has been coded by somebody else and encounter something and you can’t help but wonder what the f**k they were thinking, often it’s down to naivety or a lack of knowledge, or even a use of old outdated coding methods but then sometimes it’s just mind boggling bizarre.
Here’s a few examples I’ve come across recently but I’m sure there’s plenty of you with more to share. Continue reading
I’ve had a good solid day of coding, probably my first in quite a while. Whilst I was playing round some JQuery I came across a quirk I’ve never noticed before. I call it a quick because it’s certainly not behaviour I’d expect.
When working with some HTML form elements I used the JQuery method val() to set the value of a select box. So as an example here’s a select box and the JQuery to set it.
<select name="DavesSelectBox" id="DavesSelectBox">
<option value="0">Zero</option>
<option value="1">One</option>
</select<
$(DavesSelectBox).val(1);
Now the problem arises when the form is submitted using a normal submit button and post method. I noticed whilst it visually seemed the select box was being set to the value, the posted value didn’t reflect this and posted the original value.
So after some looking around it turns out that if the element has the same name and id then .val() can sometimes be a little problematic. So the quick fix to change the name and id to different values. Strange!
This was requested on the original CSS hover tabs post and as usual it has taken me ages to get around to doing it.
Anyway it is just the previous version realigned and also with an added tab to show you how easy it is to customise and add extra tabs.
You can view the demo here, it’s pretty straight forward and I won’t go into detail as it is all worked using the same principles as the original post so read that first and then take a look at the source of this one. It’ll do you good to do some thinking and look at what’s changed!
I’ve revisited this post here – Revisiting HTML5 placeholder fixes I recommend you check that update out.
One of the nifty new features of HTML5 is the placeholder for forms which is added by putting in a placeholder value.
So I can use this everywhere I’ve just written a quick bit of jQuery to replicate the placeholder functionality in browser that don’t support. It also uses Modernizr to check if the browser already supports the placeholder technique.
Being rather busy I completely forgot to post the link to this last week, but I wrote an article for the great tutorial site NetTuts about CSS3 transitions.
It is a introduction for those who haven’t used the transitions before and goes on to a little more advanced usage within CSS3 animations – so go check it out at http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/