CSS
I’ve been using jQuery Sortable for quite a while over various projects, and I’ve never encountered any strange behaviour. On my current project however, I had used the jQuery UI Sortable to allow the client to re-order some elements within an HTML list. Oddly though, whenever you scrolled down the page to get to the list, and dragged an element, the offset of the dragged element went a bit mad and flew up the page!
This plagued me for quite some time, and all I found by searching Google were answers that were either 100% wrong (and often idiotic), or people repeatedly saying “use wmode: transparent“. Yeah this is correct, but it didn’t fully accomplish the task at hand. After about 3 hours of searching and finding absolutely nothing of use, I started to do some proper R&D to create my own solution to this problem.
Continue reading “Overlaying Clickable Div Over Flash Movie” »
Today I was passed an article entitled CSS: CamelCase Seriously Sucks! by Harry Roberts, by the front-end developer at work. You guessed it, the article was about CSS Naming Conventions. And it also doesn’t take a genius to work out that Harry Roberts isn’t a massive fan of CamelCase. A summary of his article is that as CSS uses a hyphenated delimiter for all its properties (eg background-color, z-index) you should name your CSS elements in the same hyphenated system. This is a valid point, and at first glance is very logical. However, if you take a step back it might not actually be that practical.
After looking through the HTML5 Boiler Plate techniques, one of many which stuck out to me were the use of multiple body tags. This provided a nice alternative to Conditional Stylesheets and CSS hacks. The concept involves using conditional body tags, rather than loading in separate files. This way the only conditional code is used for 1 body element, keeping the un-used DOM elements to a minimum.
Continue reading “Alternative to CSS Conditional Stylesheets” »
Anyone who does a decent amount of front-end development will probably of come across this floating div issue at some point in their lives. The problem comes with trying to float some div’s inside a container, and have the container div expand to the height of its children. Simple you may think, but its not as simple as it sounds, as shown in the image below.