viphalongpro's public fiddles
-
sf4zx0be
No-Library (pure JS), HTML, CSS, JavaScript
-
Font Awesome Examples
No-Library (pure JS), HTML, CSS, JavaScript
-
wuvtsghq
No-Library (pure JS), HTML, CSS, JavaScript
-
Convert object to FormData
This is very convenient when you want to use FormData (such as to post File content easily) but you don't want to build it manually (which may be very complicated if the post data has a very deep and complex structure). Usually we can use JSON as post data, however if the data contains a mix of normal data and File data (uploading), we should use FormData (not easily use JSON without hacking it)
-
A simple add-slider extension (extending jQuery) used to add a jQuery slider to some existing element.
This is convenient when you need to dynamically add a jQuery slider to some existing element (rendered on that element - default at bottom, supporting auto-hiding ...)
-
A simple mouse-tooltip extension (extending jQuery)
jQuery 3.3.1, HTML, CSS, JavaScript
-
3D Bars using pure HTML & CSS
No Canvas, No SVG, just HTML & CSS for pure bars with nice perspective.
-
Text measure, auto-size, ellipsizi
No-Library (pure JS), HTML, CSS, JavaScript
-
A simple and cool tick input (a custom check input). (pure css)
A convenient check input rendered like a V-shaped tick.
-
A simple editor supporting highlighting keywords.
This is a simple editor which can highlight keywords. It is composed by 2 divs. One is used to render the formatted/styled text while the other (which has contenteditable set to true) is actually used for editing (interactive to user).
-
Magic RadioButton (a simple and familar way to custom input elements)
No-Library (pure JS), HTML, CSS, JavaScript
-
Auto-build HTML table based on input data's graph (just the first thought about solving the problem, there may be some better code).
Read the input data to derive the table scheme and auto build the corresponding HTML table. The hardest problem is solving the colspan and rowspan issue. We need to parse those info for each row and generate the HTML tags accordingly.
-
Come in - fade in, come out - fade out.
A simple effect related to onscroll event by changing the element's opacity based on its visibility. This makes use of the important native js function getBoundingClientRect.
-
Rotate arrow pointing to mouse with continuous and smooth rotation (the arrow rotation has transition)
This is just a simple version, not working perfectly - it cannot track the mouse when the transition duration is large/long. Currently the maximum transition duration is about 0.1s, the higher it is, the slower the mouse movement is to help the arrow keep tracking the mouse pointer correctly.
-
A simple loading indicator which looks fairly like the style of the Windows 10 loading indicator.
NOTE: This implementation ensures the best and easy placement for the indicator (meaning that you can position the indicator relative to your other elements more easily). But it has a trade-off involving the performance of animation. Sometimes it's flickering. If the performance is more important, you need to remove the translate(-50%,-50%) in each animation keyframe. The indicator then may need some absolute value to be positioned correctly (when placed in your layout).
-
Expandable circular menu (pure CSS)
This demonstrates the technique of using transform (nested transform). Together with using transition to create a simple but nice effect. The nested transform here is the key to create this demo. The first transform is applied on all menu-item to initially rotate all the tracks at even angle distance of 30deg. This is the outer transform (which applies on all the inner transforms automatically). The inner transform will simply translate all the circle items along the corresponding rotated track.
-
Circle chart with spaces in-between (collected)..
The interesting point here is we draw an overlay path to graphically combine with the drawn layers to create the in-between spaces (which are rectangular - not arc-shaped). Without this trick, we need to do a lot of maths operations to manually draw everything.
-
Repeat animateTransform with some delay in each cycle. (SVG).
In CSS we can use keyframes to control the delay in each cycle easily. However using animateTransform in CSS to achieve the same effect is not easy. The begin attribute seems to work just once (the first time). After that the transform is repeated (and animated) without any delay in between. Fortunately that we have the values attribute which can be specified with multi values separated by semi-colons. The transform will be applied to each value in the values list and the duration of each stage is divided evenly from the total duration. We can pad some dummy values to increase the delay. The dummy values depend on the transform, such as for translate it's "0,0", for scale it's "1,1" ... it should keep the SVG unchanged. This may not be the best solution. The documentation for SVG is not very popular and detailed enough.
-
Simple yin-yang symbol using SVG.
This demo uses just a little SVG to render the yin-yang symbol.
-
A test against the preciseness in calculation of browsers.
The red frame should be rendered OK with different values of width and height. The result shows that IE 11 and FireFox 31 pass the test (FireFox is still worse than IE). All webkit-based browsers including Google Chrome, Opera and Maxthon suck together fairly much (causing the red frame hidden and very unstable at some points).