Michel's public fiddles
-
Sublime User Setting
No-Library (pure JS), HTML, CSS, JavaScript
-
Deferred / Promise pattern using jQuery I
jQuery 1.9.1, HTML, CSS, JavaScript
-
jQuery Deferred Progress
jQuery 1.7.2, HTML, CSS, JavaScript
-
jQuery.Deferred test6
jQuery 1.5.2, HTML, CSS, JavaScript
-
Image preload with Deferred Objects
Image preload with Deferred Objects and jQuery 1.6+
-
Überschriftennummerierung mit CSS-counter
Genauere Infos gibt es bei Vladimir Simovic: Näheres: http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/
-
Technical Web Typography: Guidelines and Techniques
http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
-
Practical font sizing
No-Library (pure JS), HTML, CSS, JavaScript
-
Element SetTimeOut
No-Library (pure JS), HTML, CSS, JavaScript
-
Reload page
jQuery 1.9.1, HTML, CSS, JavaScript
-
Dropdown Navigation
http://jmeas.com/projects/git/dd2/menu.html
-
CSS3 Dropdown with Fade
CSS3 Dropdown with Fade ======================== In the past, dropdown menus were only possible through Javascript. Nowadays we can use CSS3 to achieve pretty much every traditional dropdown effect. This dropdown menu is [semantic][sem] & entirely CSS3. There are two versions in this Git. There's one with style and one that's styleless. These are contained in 'styled-source' and 'plain-source,' respectively. [View it live & with styling.][style] [View it live & without styling.][plain] [sem]: http://en.wikipedia.org/wiki/Semantic_Web "Semantic Web" [style]: http://jmeas.com/projects/git/dd1/style/menu.html "CSS3 Dropdown with Fade, Styled" [plain]: http://jmeas.com/projects/git/dd1/plain/menu.html "CSS3 Dropdown with Fade, Plain" ### Compatibility This is 100% compatible with Chrome, Safari, Opera, and Firefox. I also optimized it for use on iOS by utilizing the [double-click feature][click]. [click]: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ "iOS Double Click" The styled version will still function on IE6+, but it won't display as nicely as in those other browsers. This is for a few reasons. Firstly, CSS transitions are only supported in IE10. Secondly, the CSS3 arrows will only display in IE8+. This is for a few reasons. Firstly, we use a CSS unicode character that I don't think is supported pre-IE8. We also use the ::after pseudoelement to display the triangle; again, IE8+. And we're transforming the arrow, which, yet again, is only IE8+. If you remove those pesky CSS arrows, it will otherwise display correctly in IE6+ (aside from the transitions). And, for the record, the plain version is IE6+ compatible, save the transitions. ### Technical details In the styled version, I used a unicode character for the triangle instead of CSS borders. You might be wondering why this is. In Firefox, the border hack for CSS triangles displays black bars along the edges of the triangle when it isn't entirely opaque. These aren't there when it's viewed at 1 opacity, so you never notice in typical usage. But, since this has a fade...yeah. You get the picture.
-
Nice Social Icon Bar
No-Library (pure JS), HTML, CSS, JavaScript
-
Fluid aspect ratio 4:1 to 2:1
Formula here: http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
-
Fixed Aspect Ratio as a background image
No-Library (pure JS), HTML, CSS, JavaScript
-
Index of II
jQuery 1.7.2, HTML, CSS, JavaScript
-
Index of
jQuery 1.9.1, HTML, CSS, JavaScript
-
Index Link jQuery
jQuery 1.4.4, HTML, CSS, JavaScript
-
CSS Navigation
No-Library (pure JS), HTML, CSS, JavaScript
-
ToddMoto Navigation
jQuery 1.8.3, HTML, CSS, JavaScript