Pens from John https://codepen.io/MovingPixel/ en nospam@codepen.io Copyright 2024 2019-10-29T19:43:53-07:00 CSS Grid Items with Aspect Ratio and Internal Alignment https://codepen.io/MovingPixel/pen/bGGopXX https://codepen.io/MovingPixel/pen/bGGopXX John

See the Code - See it Full Page - See Details

]]>
CSS Grid Items with Aspect Ratio and Internal Alignment 2019-10-29T19:43:53-07:00
Drag & Drop Sandwich Maker https://codepen.io/MovingPixel/pen/PmXRvX https://codepen.io/MovingPixel/pen/PmXRvX John

See the Code - See it Full Page - See Details

Use jQuery UI, Drag & Drop, HTML and CSS to make a Sandwich!

]]>
Drag & Drop Sandwich Maker 2018-03-27T02:43:05-07:00
jQuery Slide out Panel https://codepen.io/MovingPixel/pen/KMjRXJ https://codepen.io/MovingPixel/pen/KMjRXJ John

See the Code - See it Full Page - See Details

A very basic Slide out panel or menu bar using jQuery that includes a toggled left/right icon.

]]>
jQuery Slide out Panel 2016-08-25T14:57:42-07:00
D3 Bar Chart https://codepen.io/MovingPixel/pen/pbOpWQ https://codepen.io/MovingPixel/pen/pbOpWQ John

See the Code - See it Full Page - See Details

A minimal demonstration of how to create an HTML bar chart with D3. Fork this template to create your own chart.

]]>
D3 Bar Chart 2016-08-02T19:31:21-07:00
D3 Bar Chart https://codepen.io/MovingPixel/pen/WxgdZy https://codepen.io/MovingPixel/pen/WxgdZy John

See the Code - See it Full Page - See Details

A minimal demonstration of how to create an HTML bar chart with D3. Fork this template to create your own chart.

]]>
D3 Bar Chart 2016-08-02T19:31:48-07:00
jQuery Sandwich Maker https://codepen.io/MovingPixel/pen/MegYRQ https://codepen.io/MovingPixel/pen/MegYRQ John

See the Code - See it Full Page - See Details

Use jQuery and CSS z-index to make a Sandwich!

]]>
jQuery Sandwich Maker 2018-02-15T04:36:14-07:00
CSS hover sliding panel https://codepen.io/MovingPixel/pen/eJPLoJ https://codepen.io/MovingPixel/pen/eJPLoJ John

See the Code - See it Full Page - See Details

CSS only hover using an up/down transition to make a sliding panel mouse over. Can be used as a link also or just text.

]]>
CSS hover sliding panel 2016-05-25T05:20:14-07:00
jQuery Slide out Panel-Starts closed https://codepen.io/MovingPixel/pen/NqLWNE https://codepen.io/MovingPixel/pen/NqLWNE John

See the Code - See it Full Page - See Details

A very basic Slide out panel or menu bar using jQuery that includes a toggled left/right icon.

]]>
jQuery Slide out Panel-Starts closed 2015-07-21T03:21:17-07:00
jQuery Slide out Panel https://codepen.io/MovingPixel/pen/BNpxpZ https://codepen.io/MovingPixel/pen/BNpxpZ John

See the Code - See it Full Page - See Details

A very basic Slide out panel or menu bar using jQuery that includes a toggled left/right icon.

]]>
jQuery Slide out Panel 2015-06-01T04:09:39-07:00
Image Swap Using data Attributes https://codepen.io/MovingPixel/pen/qdEGGj https://codepen.io/MovingPixel/pen/qdEGGj John

See the Code - See it Full Page - See Details

Swapping images on btn click (w/ fade) using html "data-" Attributes and jquery.

]]>
Image Swap Using data Attributes 2015-05-20T03:20:11-07:00