JSFiddle

viphalongpro's public fiddles

• Curvy solid-color shape with border trick (support non-solid color background)

  This demo demonstrates how to create a curvy solid color shape with pure CSS. The interesting here is it renders OK on a non-solid color background (image background, gradient background). There is a similar technique but it can only render the curvy shape on a solid color background. It's because it does not use border trick, the colored part is rendered by simply using background, while in this demo, we use the border to render a part of the shape.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Show tooltip once on hovering (keep open after mouse leaving) (Pure CSS)

  This demo demonstrates how to open a tooltip on hovering and keep that tooltip open even after mouse leaving the link. The interesting thing here is we use pure CSS (no script at all). In fact the solution is some kind of hack, but it is actually a beautiful hack. We have to set the transition-delay to 0s on hovering, so that it can show immediately as normal, but in normal state, we set transition-delay to as large a value as possible (we set this to about 1 month in this demo) so that after mouse leaving, it has to wait for 1 month to come back to the normal state (which is hidden). The interesting thing here is there won't be any personal computer keeping open with a webpage showing for a month continuously (only workstations may do), however we can even increase the transition-delay to such as a decade (10 years) or more... :)

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Style pseudo-elements via script.

  This demo demonstrates how to style pseudo-elements via script, in this demo we just style the :before element (it's the same for :after element). We all know that we can't access pseudo-elements via script to change their style in the normal way (via the style property). We can just access to the readonly style of them using the pure JS method getComputedStyle. So the idea to change the style of pseudo-elements is via CSSRule, by modify the CSSRule directly we can change the style. However to change the style per element, we need to add more rule, the added rule should target only 1 element or a group of elements based on some unique info such as unique class, unique id, unique attribute... In this demo we choose to set unique attribute for the element (unique class is OK, but the chance to remove all the classes (by setting className to empty) in script is higher than clear all the atrributes (seem not to be done easily if we don't know the attribute name and if so we have to loop through all the attributes NamedNodeMap to remove each one), using unique ID is also OK (this can be taken into account to improve the code), however not all elements need an ID.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Another pure CSS Hexagon supporting both border and image background (using Background Overlapping Technique)

  This demo demonstrates how to render a hexagon supporting border and image background. There was another demo using very a similar technique with Overflow Clipping Technique. However it does not use Background Overlapping Technique (there is just 1 background on an element, all the clippers are used just to clip the main element to shape the hexagon, also because of this, rendering the border is much harder). The Overflow Clipping Technique is also used in this demo but its approach is a little different by also using the Background Overlapping Technique, there are 3 inner shapes (like clippers) to shape the hexagon and they have the same background, these backgrounds will overlap each other to make the full background. This approach at least helps us also render the border around the hexagon (although it's not really perfect).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Simple clock run by CSS animation (not by JS).

  This demo demonstrates how you can use CSS animation to run a clock, normally we run a clock using JS. The Javascript code in this demo is just to modify the CSS rule, not to run the clock directly. So the code logic is simpler. It's a pity that we can't add the CSS animation property beforehand, that way works only for Chrome and Opera. For rotating the second hand by step, we use the step() animation-timing function (instead of linear). This demo works best in Chrome and Opera, works worst in IE.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Squared pattern (with transparent padding between the squares) background using multi background features (pure CSS).

  This demo demonstrates how you can create a squared pattern (like how cells are rendered in a grid or a table). It's much easier if the padding between the squares is NOT transparent. However with that requirement added, it's not easy to achieve the effect and looks like the solution in this demo is the ony way to go. The trick is we have to render 2 linear-gradients, one is from top-left corner to the bottom-right corner, and the other is spreaded in the reverse direction (bottom-right to top-left). Then we have to set the background-position appropriately keeping the background-size the same for both. Note that rendering linear-gradient background in a diagonal direction can give you a chance to render the transparent padding, otherwise (horizontal or vertical) you can't render the transparent padding in one direction.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Render match highlights on the trackbar of a scrollbar (for webkit-browsers).

  This demo demonstrates how you can render match highlights on the trackbar of a scrollbar using ::-webkit-scrollbar-track:vertical pseudo-class. The idea is to set multi linear-gradient backgrounds for the scrollbar. Each background renders 1 line and is positioned by using background-position. It's pity that we can't use just 1 linear-gradient background with different color-stops, for some reason that way the lines are not rendered smoothly and stably (especially when the window is resized). Another important thing is we have to use CSSRule to modify the style applied on ::-webkit-scrollbar-track:vertical and toggle overflow (between hidden and auto) to refresh the scrollbar so that the new style is able to be applied.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Jagged edges (like the stamp edges) using CSS multiple-backgrounds feature

  This demo demonstrates how to render jagged edges using multiple background feature. This solution has its own advantage as an easy and simple way to achieve an acceptable and usable result. There are some other solutions using JS and SVG, which may produce better result (especially when we need some shadow), however the tradeoff is the complexity and javascript/HTML5 support required.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Show custom dropdown when the term does not match in autocomplete list (jQuery UI)

  This demo demonstrates how to show a custom dropdown list when the input/entered term does not match any in the autocomplete source. There may be a nicer solution but this one is acceptable.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Arranging cards (on an ellipse path)

  This demo demonstrates how to arrange some cards on an elliptic path. The important note here is we need 2 individual transforms: rotate and translate. They are combined into one complex transform to place the card correctly.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Wavy background (using multi-backgrounds feature)

  This demo demonstrates how to use multi-backgrounds feature to create a wavy background. The point here is we have to choose the correct point to connect the backgrounds so that when repeated, the connected wavy line is perfect without any flaw.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• palindrome highlighter

  This demo implements an input field highlighting the typed word after checking if it is a palindrome. The highlighting is done on each pair of letters first before highlighting the whole word (if it's a palindrome).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Append dotted lines to the text, filling the remaining space. (works on all browsers)

  This demo is another version supporting all browsers to help auto-fill the remaining space of the text with dotted lines. It works for all browsers but it does not support parent's image background (the parent should have solid color background).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Append dotted lines to the text filling the remaining space. (does not work in FireFox 29)

  This demo demonstrates how to auto-fill the remaining space of some text with dotted line (or dashed ...). This demo supports parent's image background but works only for all browsers except the so-called FireFox. There is another demo working for all but it does not support image background (just solid color background).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Focusing confined in a fake dialog (can't jump outside it).

  This demo demonstrates how to limit the focus jumping in a fake dialog. The point here is we have to use 2 dummy focusable elements to trap the focus jumping outside of fake dialog, in fact if the page has some other focusable elements (before and after the dialog), we don't need these 2 dummy elements, however it's not the general case, there are just some focusable elements before the fake dialog, then when focus jumps out of dialog in forward direction, we will lose control on the focus because it now maybe focuses at the Address bar or something out of the document.... The second important thing is we have to know the direction of tabbing (by handling keydown event).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• This demo demonstrates how to handle the window.onscroll event to auto-select the corresponding link of the currently-in-viewport element.

  In this demo, you have 3 links clicking on which will lead user to the corresponding part (the div element called a chapter). However now we want scrolling down by mouse will auto-select the corresponding link when its chapter is in viewport.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Separate a text into lines (some kind of physical line, not logical line which should end with a line-break char)

  This demo demonstrates how to separate a text into lines, these lines may not end with any line-break, it's just the result of wrapping. So one logical line may be broken into some physical lines. The technique here is simply using the Range object to measure the TextRectangle of each character, from that we can detect the ending character (of each physical line) and then can separate the text into lines. In this demo, after separating the text into lines, we try wrapping each line into a div element and applying different aligning styles.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Turn all headers (h1 - h7) into the corresponding UL.

  This demo demonstrates how to convert all the headers into the corresponding unordered list so that all the headers of the same level will become the corresponding <li> of the same level. Each converted <li> of course may have a UL as its child element.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• dktT4

  jQuery 1.11.0, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• A self-made FitText demo using pure Javascript.

  This demo demonstrates how to adjust the font-size of an element automatically so that the text should be contained/confined in the fixed space of the element (constrained either by fixed width - in singleLine mode - or both fixed width and fixed height - in multiline mode).

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ◀︎
• 2
• 3
• ▶︎
• 4