wphotline's public fiddles
-
Textarea resize
jQuery 1.7.2, HTML, CSS, JavaScript
-
Vert and Horz centered images in parent with unknown fixed heigh and width
Mootools 1.4.5, HTML, CSS, JavaScript
-
Triangular list bullets
Mootools 1.4.5, HTML, CSS, JavaScript
-
Slide/Fade CSS3
jQuery (edge), HTML, CSS, JavaScript
-
Radio Buttons with 2-Way Exclusivity
Inspired by Chris Coyier's article here: http://css-tricks.com/14402-radio-buttons-with-2-way-exclusivity/ Added event delegation and value switching.
-
CSS arrow nav
Mootools 1.4.5, HTML, CSS, JavaScript
-
Corner ribbon
css only corner ribbon
-
SVG Icon
No-Library (pure JS), HTML, CSS, JavaScript
-
Math Music
Audio synthesizing using the Web Audio API,
-
Fading dark CSS3 gradiant
CSS3 gradiant with no images
-
CSS3 loading animation
Mootools 1.4.5, HTML, CSS, JavaScript
-
wrap the resize in the ready and not trigger it out
http://responsejs.com/#manual_setup
-
jquery .on both ready and resize
jQuery 1.7.1, HTML, CSS, JavaScript
-
Using Javascript to encode images as DataURL
After drawing the image on a Canvas element you can get the data-url by calling toDataURL(). This will return a base64 encoded string, similarly to what you could achieve using PHP or other server side languages. When using Javascript to accomplish this task, be aware that images must be hosted in the same domain of your script. If you try to load images hosted in a different domai, toDataURL() will throw a ‘Security error code: 1000‘.
-
capture html5 video frame
play video and capture a frame for use as a thumbnail
-
Multi-direction hover
Mootools 1.4.2, HTML, CSS, JavaScript
-
vertical align image
when image is link remove blank space on bottom of image with vertical-align: bottom
-
arrow with curved tail
Mootools 1.4.4, HTML, CSS, JavaScript
-
K6Ms4
jQuery 1.7, HTML, CSS, JavaScript
-
post navigation
light and dark with and without gradients