Wenjie's public fiddles
-
Multi same class to improve the priority of CSS rule
No-Library (pure JS), HTML, CSS, JavaScript
-
[CSS]display: flex; doesn't work on <fieldset>
https://bugzilla.mozilla.org/show_bug.cgi?id=949476
-
[CSS]display: table-cell; doesn't work on <input>
This is still an experiment feature. http://stackoverflow.com/a/15632230/3927953
-
[CSS]Position: fixed; with default value
Position an element without set the top/left/bottom/right Summary: elements with position: fixed; will still display even if they don't set top/left/bottom/right. But it seems you have to set the top/left/bottom/right for background images.
-
[CSS]Position: absolute; with default value
Position an element without set the top/left/bottom/right Summary: elements with position: absolute; will still display even if they don't set top/left/bottom/right. But it seems you have to set the top/left/bottom/right for background images.
-
[CSS]Flex element overlap
The elements in flex box will overlap each other if there is no additional CSS rules This can be fixed by add max-width to these elements.
-
[CSS]Rows with different-height cells
Illustrate how to make the next row start at the right position if there are different-height cells in the previous row. For this case, we commonly use float: left; to make cells to a row. But we have to calculate and set the these cells to the same height. Otherwise, some cells will get stuck to float left. The most important thing in this new solution is using display: inline-block; to the cells.
-
[Javascript]Drag and Drop
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations Important notes: 1. Get native event object from JQuery by useing: e.originalEvent 2. Must disable the 'dragover' event handler of drop area because the default behaviour of this handler is forbidding drop. 3. preventDefault() should be called to prevent the default behaviour of the browser.
-
[Javascript]matchMedia not works on iPad
jQuery 2.1.0, HTML, CSS, JavaScript
-
[Javascript]Strict mode: throw error if variable wasn't declared before used
No-Library (pure JS), HTML, CSS, JavaScript
-
[JQuery]Unwanted right-side space in slideToggle() animation on Chrome
This happens when there is float elements upper to the animation elements. This can be fixed by wrap a .cleafix <div> to the float element.
-
[Javascript]Detect mobile device
Codes come from http://detectmobilebrowsers.com/. By default, it doesn't support to detect tablet. Fix this issue by add "|android|ipad|playbook|silk" to the first regex. See http://detectmobilebrowsers.com/about/. When used in product software, try to GET THE LATEST CODES from http://detectmobilebrowsers.com/
-
[Javascript]Hide controls of HTML5 <video>
jQuery 2.1.0, HTML, CSS, JavaScript
-
rey46ydz
No-Library (pure JS), HTML, CSS, JavaScript