mzechmeister

## autosuggest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
li {
    display: block;
    padding: 0 2px;
}

## focus_nested.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
li {
    display: block;
    padding: 0 2px;
}

## caret.html
<!DOCTYPE html>
<html>
<style>
    div {background-color: #dfd; width:300px;}
    span {background-color: #fbb;}
    span:nth-child(even) {background-color: #ccf;}
    input {width:90%; font-size: 11px;}
</style>
<body>
Works good with firefox. Android chrome has another behaviour.

## contenteditable_zwsp.html
<!DOCTYPE html>
<html>
<style>
    div {background-color: #dfd}
    span {background-color: #fbb}
    span:nth-child(even) {background-color: #ccf}
    input {width:90%; font-size: 11px}
    #editable:focus-within, .active {outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color;
    }

## gist:847937454ac40207e051847668e8bcec
<!DOCTYPE html>
<html>
<style>
    div {background-color: #dfd}
    span {background-color: #fbb}
</style>

<body>
The checking the caret behaviour in <code>contenteditable</code>. The caret is placed with an offset of 1 and then moved backwards. It is checked whether the caret is still in the current sibling  (return value 0) or has entered the previous sibling (return value 5).

## pseudo_editable_field.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#cursor {
    display: inline;
}

#cursor.collapsed {

## delete_behaviour_contenteditable_false.html
<!DOCTYPE html>
<html>
<style>
   span {color: gold}
   span[contenteditable=false] {color: red}
</style>
<body>
Try to delete the "!":
<div contenteditable>
Here is a <span contenteditable=false>contentEditable False</span>! Ok.

## rubber_zoom.html
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
<div id="myDiv" oncontextmenu="return false"></div>

<script>
var d3 = Plotly.d3,
    N = 1000,
    y = d3.range(N).map(d3.random.normal()),
    data = [{y: y}]

## gist:943ce68c9c84d662cea1ecd42bc3064b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Convert RGBA to RGB</title>
<style>
   #divrgba, #divresult {
      width: 120%;
      padding: 8px;
   }

## desmos_load_data_file.js
// insert everything in the browser console and a "file" button will appear in the submenu

function addfilebutton() {
    if (document.querySelector("#file2xy") ||   // exists already
        !document.querySelector(".dcg-action-newimage"))  // unclick case
        return
    pic = document.querySelector(".dcg-action-newimage").parentNode
    var div = document.createElement('div');
    div.innerHTML = '<style>.dcg-calculator-api-container .dcg-icon-new-file::before { content: "\\e205";}</style><div class="dcg-new-item dcg-action-newfile" onclick="file2tab.click()"><i class="dcg-icon-new-file dcg-expression-icon" aria-hidden="true"></i>Datei2tab</div><input id="file2tab" type="file" style="display: none" onchange="tabFromFile()"></div>'
    pic.after(div)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	</head>
	<style>
	li {
	display: block;
	padding: 0 2px;
	}
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

	<body>
	<div id="myDiv" oncontextmenu="return false"></div>

	<script>
	var d3 = Plotly.d3,
	N = 1000,
	y = d3.range(N).map(d3.random.normal()),
	data = [{y: y}]
	// insert everything in the browser console and a "file" button will appear in the submenu

	function addfilebutton() {
	if (document.querySelector("#file2xy") \|\| // exists already
	!document.querySelector(".dcg-action-newimage")) // unclick case
	return
	pic = document.querySelector(".dcg-action-newimage").parentNode
	var div = document.createElement('div');
	div.innerHTML = '<style>.dcg-calculator-api-container .dcg-icon-new-file::before { content: "\\e205";}</style><div class="dcg-new-item dcg-action-newfile" onclick="file2tab.click()"><i class="dcg-icon-new-file dcg-expression-icon" aria-hidden="true"></i>Datei2tab</div><input id="file2tab" type="file" style="display: none" onchange="tabFromFile()"></div>'
	pic.after(div)