Code Snippets of Html, Css, Javascript

As I work throughout the day I will run into challenges that I have to workout on my own. A lot of the time have to work them out manually to understand what the problem is. Most of the time they are small tidbits but they are quite useful for the work I am doing. I hope some of these are surprising or at least informative as to what javascript, css and html can do. I have been surprised on some of these and others have been confirmations on what I know to be true. You can find my updated feed for Jsfiddles here: Click

Stacking divs with animations

This one was rather fun to do. I wasn't entirely sure how transitions worked in css and this was a good way to get started with them. Try it out! :)

Float Vs Display Inline:

This one sparked a conversation at work one day but I wrote up an example to compare the two features. I have read online that float wasn't meant for entire layout designs. It was mostly intended for floating images over text. Many people ended up abusing this feature and caused some strange results. I wanted to show that you can achieve the same results using display: inline-block; VS float: left;. Not all cases can be solved this way (displaying elements to the right may require float). Display-inline-block does have some of its own problems such as adding its own spacing that doesn't register as margin or padding. You can re-size the example by clicking on the link to test this out.

JQuery Each test

As I am working on an open source plugin for navigation, I wasn't sure if jQuery actually loads the divs in order. I know if you are using pure Javascript and you try to get properties out of an object they will come out at any order. So I wasn't entirely sure if they did the same thing with objects in the DOM.

String Contains

This one confuses me and I am not sure why Javascript doesn't have a contains function. The function is commonly used and I see it all over the place. What I have below will add it to the string prototype so that way you could essentially do "My Name is bob".contains("bob"); and it will return true or false. Which is a whole lot nicer than "My Name is bob".indexOf("bob") > -1;. I have also provided a bool as a second param that allows you to check case. (I was told checking case with javascript can get hairy and perhaps REGEX would be the better solution)