🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The responsive analog clock is something I built a couple years back (see https://front-end-fu.com/2014/04/07/responsive-analog-clock-with-css3-and-javascript/). Recently, I wanted to tweak it so it was responsive relative to its parent element, as opposed to the viewport. To do so, I simply incorporated the CSS-Element-Queries library (http://marcj.github.io/css-element-queries/) to add resize event listeners to page elements. With this, I then bound the resize handler to the section surrounding the clock, rather than the window. Then I made the section resizable by applying the jQuery UI resizable interaction (https://jqueryui.com/resizable/). This allows you to horizontally resize the section by dragging the right border to the left or right, demonstrating that the analog clock is, indeed, responsive to its parent element.

clock

See the Pen by peterhanus (@peterhanus) on CodePen.


This awesome script developed by peterhanus. Visit their official repository for more information and follow for future updates.

You May Also Like