Code

This is just a private page for me to quickly test my code but if you want you can test yours, too.
(However you lose permission to edit your codes after your ip address changes.)

Create new code

Most visited codes

Beitragsdynamik: <div style="width: 500px; max-width: calc(100% - 20px); margin-left: 10px; margin-top: 40px;"> <div id="range1"></div> </div> <br><br> Einkommen: <div style="width: calc(100% - 100px); margin-left: 40px; margin-top: 40px;"> <div id="range2" class="tooltipVisible"></div> </div>

.fprange { $barLineWidth: 4px; $barRadius: 2px; $handleWidth: 24px; $handleHeight: 20px; $handleRadius: 2px; $scalaStepHeight: ($handleHeight / 2 - $barLineWidth / 2); $tooltipBorderWidth: 2px; $colorInactive: #E5E5E5; $colorActive: #62D053; $transitionTime: 200ms; padding: ($handleHeight) 0; margin: -($handleHeight / 2) ($barLineWidth / 2); position: relative; display: inline-block; width: calc(100% - #{$barLineWidth});

var options1 = { min: 0, max: 7, step: 1, tooltip: 'fixed', tooltipFormat: { digits: 1, suffix: '%', decimalSeparator: ',', thousandsSeparator: '.', fixed: false }, scala: true, scalaInterval: 1, value: 0 }, options2 = { min: 0, max: 200000, step: 1000,

<input type="text"> <br> <div data-char-input data-char-input-chars="15" data-char-input-gap="1" ></div> <br> <input type="text"> <br><br>

.fpcharinput { display: inline-block; white-space: nowrap; position: relative; background: orange; font-size: 16px; width: 100%; box-sizing: border-box; &.mono { font-family: monospace; background: #fff; } .fpchar { font-family: inherit; background: #fff; text-align: center; outline: 0;

!function($) { var FpCharInput = function($element, options) { this.mobile = screen.orientation || screen.mozOrientation || screen.msOrientation || window.orientation; this.$e = $element.addClass('fpcharinput'); this.options = options || {}; var dataChars = this.$e.data('charInputChars'), dataCharWidth = this.$e.data('charInputCharWidth'), dataGap = this.$e.data('charInputGap'), dataFillGaps = this.$e.data('charInputFillGaps') !== undefined, dataName = this.$e.data('charInputName'); // optionen vom Element ermitteln if (dataChars) this.options.chars = dataChars; if (dataCharWidth) this.options.charWidth = dataCharWidth; if (dataGap) this.options.gap = dataGap; if (dataFillGaps) this.options.fillGaps = dataFillGaps; if (dataName) this.options.name = dataName;

console.log('blub'); console.log({bla:123}); console.log([123, 'abc']); console.log(undefined); console.log(null); $(window).on('click', function(event) { console.log(event); });

html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #canvas { height: 100%;

var canvas = document.getElementById('canvas'), w = +canvas.width, h = +canvas.height, ctx = canvas.getContext('2d'), trunks = [], leaves = [], odd = false, gapX = w / 40, gapY = h / 40, centerX = w / 2, centerY = h / 3, radius = Math.min(centerX, centerY) * .8; function inCircle(point) { return (point.x - centerX) * (point.x - centerX) + (point.y - centerY) * (point.y - centerY) <= radius * radius; } function drawTriangle(pointA, pointB, pointC, color) { ctx.beginPath();

<div data-card="1"></div> <div data-card="2"></div> <div data-card="3"></div>

[data-card] { visibility: hidden; display: inline-block; padding: 20px; border-radius: 5px; border: 1px solid #fff; &:after { content: "Karte "attr(data-card); } &.active { visibility: visible; }

var cards = document.querySelectorAll('[data-card]');

<div id="carousel"> <div class="page prev"> <div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div> <div class="text-col"> <div class="hl">Robert Sasse</div> <p>Endlich eine ETF-Rente, die sich sowohl von der Gebührenstruktur als auch von der Rendite für Anleger bezahlt macht.</p> </div> </div> <div class="page active"> <div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div> <div class="text-col"> <div class="hl">Robert Sasse</div> <p>Endlich eine ETF-Rente, die sich sowohl von der Gebührenstruktur als auch von der Rendite für Anleger bezahlt macht.</p> </div> </div> <div class="page next"> <div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div> <div class="text-col"> <div class="hl">Robert Sasse</div>

body { background: white; color: black; margin: 100px 20px; } .fpcarousel { height: 125px; width: 100%; white-space: nowrap; position: relative; overflow: hidden; .page { height: 125px; width: 70%; position: absolute; display: none;

!function($) { var FpCarousel = function($element, options) { this.$e = $element.addClass('fpcarousel'); this.$page = this.$e.find('.page'); this.options = options || {}; this.interval = this.options.interval || 5000; this.$page.on('transitionend webkitTransitionEnd oTransitionEnd', function() { $(this).removeClass('transition'); console.log('transition ended'); }); //setInterval($.proxy(this.nextPage, this), this.interval); setInterval($.proxy(this.nextPage, this), 2500); }; $.extend(FpCarousel.prototype, { constructor: FpCarousel, nextPage: function() {

Blub Bla<br><br> <a class="link2">Hier ein Link mit Animation zum Test</a> <br><br> <div class="wrapper"><a class="link2">Hier ein Link mit Animation zum Test</a></div> <br><br> <a class="link2"><span class="glyphicon glyphicon-chevron-left"></span>Hier ein Link mit Animation zum Test</a> <br><br> <a class="link2">Hier ein Link <span class="hidden1">mit</span> Animation zum Test</a> <br><br> <a class="link2">Hier ein Link <span class="hidden2">mit</span> Animation zum Test</a> <br><br> <a class="link2"><img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/youtube-128.png" class="icon"> Hier ein Link <img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/youtube-128.png" class="icon"> mit Animation zum Test <img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/youtube-128.png" class="icon"></a> <br><br> <div class="menucont"> <a class="link2 menu">Produkte</a><a class="link2 menu">So geht Altersvorsorge</a><a class="link2 menu">Blog</a><a class="link2 menu">Ãœber uns</a><a class="link2 menu">Faq</a> </div> <br><br>

body { font-family: verdana; color: black; background: white; } .wrapper { display: inline-block; width: 100px; } a { cursor: pointer; color: #000; } .link2 .glow { text-decoration: underline; }

$('.link2').each(function() { $(this) .mouseenter(out) .mouseleave(over) .trigger('mouseleave'); }); function over() { if ($(this).data('hover')) return; $(this).data('hover', true); setTimeout(function($l) { animateLink($l, true, true); }, 0, $(this)); } function out() { if (!$(this).data('hover')) return; $(this).data('hover', false); setTimeout(function($l) { animateLink($l, true, false);

.circle { $size: 100px; position: absolute; background: #555; display: inline-block; width: $size; height: $size; border-radius: 100%; cursor: pointer; transition: 200ms ease-in-out; transition-property: transform, background, opacity, box-shadow; transform: scale(.2, .2); box-shadow: inset -2px -2px 50px rgba(0, 0, 0, .5); opacity: .9; &.active { display: inline-block; transform: scale(1, 1); }

let $circleCollector = $(), circleIterator = 0, zIndexIterator = 0 const createCircle = _ => { console.log('creating new circle') let $circle = $('<div />', { class: 'circle', 'data-hitting': '0' }).data('hitting', $()) $circleCollector = $circleCollector.add($circle) $circle.on('mousedown', dragStart) $(document.body).append($circle) setTimeout(_ => $circle.addClass('active')) return $circle }, circleHitTest = (offset1, offset2, diameter) => { return Math.sqrt( Math.pow(offset1.left - offset2.left, 2) + Math.pow(offset1.top - offset2.top, 2) ) < diameter }, setHitting = (status, $circle1, $circle2) => {

Browser comparison <div class="parent"> Hier kommt<br>ein mehrzeiliger<br>Text <div class="test">test</div> </div> <div class="parent2"> Hier kommt<br>ein mehrzeiliger<br>Text <div class="test2">test</div>

.parent, .parent2 { position: relative; width: 200px; background: rgba(0, 100, 0, .2); div { position: absolute; background: rgba(255, 0, 0, .2); } } .test { left: 0; top: 0; right: 0; bottom: 0; } .test2 {

<input type="radio" name="test" value="1" checked> <input type="radio" name="test" value="2"> <input type="radio" name="test" value="3">

input[type="radio"] { $size: 19px; $bulletSize: 15px; $bulletSizeChecked: 7px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: $size; height: $size; /* äußerer Ring */ &:before { content: ""; display: block; width: $size; height: $size; background: #BBBBCF;