Pens from Kolja Kutschera https://codepen.io/koljakutschera/ en nospam@codepen.io Copyright 2024 2020-06-25T10:35:26-07:00 EC nav proto https://codepen.io/koljakutschera/pen/Rwrgxvb https://codepen.io/koljakutschera/pen/Rwrgxvb Kolja Kutschera

See the Code - See it Full Page - See Details

]]>
EC nav proto 2020-06-25T10:35:26-07:00
Styleable html5 input-type: file with remove function and drag & drop https://codepen.io/koljakutschera/pen/zdQxZy https://codepen.io/koljakutschera/pen/zdQxZy Kolja Kutschera

See the Code - See it Full Page - See Details

]]>
Styleable html5 input-type: file with remove function and drag & drop 2017-11-02T20:04:10-07:00
Equelizer - jQuery Plugin - Responsive https://codepen.io/koljakutschera/pen/MoLOoj https://codepen.io/koljakutschera/pen/MoLOoj Kolja Kutschera

See the Code - See it Full Page - See Details

Description: Simulated Music Equelizer Version: 0.0.1 Copyright: Kolja Kutschera(koljakutschera.de) License: MIT Usage example: $('.equelizer').equelizer();

]]>
Equelizer - jQuery Plugin - Responsive 2017-08-08T10:15:15-07:00
Interconnect - jQuery Plugin - Connect 2 Elements - Responsive https://codepen.io/koljakutschera/pen/QGvZLJ https://codepen.io/koljakutschera/pen/QGvZLJ Kolja Kutschera

See the Code - See it Full Page - See Details

JQuery Plugin - jquery.interconnect - Interconnect two elements with another element. Responsive by default. For example you can draw a line between two elements...

]]>
Interconnect - jQuery Plugin - Connect 2 Elements - Responsive 2018-07-17T08:07:14-07:00
Animated CSS-only checkbox and radio switches https://codepen.io/koljakutschera/pen/YGvwGB https://codepen.io/koljakutschera/pen/YGvwGB Kolja Kutschera

See the Code - See it Full Page - See Details

]]>
Animated CSS-only checkbox and radio switches 2016-10-12T15:28:01-07:00
elementDirectionAndOffsetByScroll - jQuery Plugin https://codepen.io/koljakutschera/pen/BLYVjV https://codepen.io/koljakutschera/pen/BLYVjV Kolja Kutschera

See the Code - See it Full Page - See Details

This is a fixed header changing its dimensions by scroll- position and direction. Because its fun i made a small jquery-plugin from this task but iam to lazy to put it on github. What it does is adding and removing the following css-classes: scroll-direction-down scroll-direction-up scroll-offset-reached The rest is up to you(css-dude). See css-section of this pen for example. In this example if your scrolling down and the offset is reached the header gets out of view. If you scroll up the header gets back into view but if it has not reached the offset its a bit smaller until the offset is reached finally. This is good for mobile devices and how ios-safari-bars are working. To see how it works and how to configure it scroll down the js-section of this pen. There are some nice options to play around with. If you want to use the jquery-plugin just copy and paste the js-section without the testing-code at the end.

]]>
elementDirectionAndOffsetByScroll - jQuery Plugin 2017-07-13T21:50:15-07:00
mobile css-only infinite multi-level off-canvas navigation menu draft https://codepen.io/koljakutschera/pen/yJyrQe https://codepen.io/koljakutschera/pen/yJyrQe Kolja Kutschera

See the Code - See it Full Page - See Details

]]>
mobile css-only infinite multi-level off-canvas navigation menu draft 2016-10-12T15:02:22-07:00