From e890a581a448302cde299d4c07fc9d49dc279003 Mon Sep 17 00:00:00 2001 From: Sebastian Titz Date: Thu, 10 Mar 2022 14:21:02 +0100 Subject: [PATCH 1/8] TODOs --- itooltip.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 itooltip.js diff --git a/itooltip.js b/itooltip.js new file mode 100644 index 0000000..a5c7165 --- /dev/null +++ b/itooltip.js @@ -0,0 +1,5 @@ +//TODO class itooltip +//TODO lade daten von url in data-url +//TODO in der obenhälfte tooltip down untehälte up +//TODO linke hälte tooltip richts sondt links +//TODO fancy fadein \ No newline at end of file From b07f92f49278ff7eb2f07e4ea8f60a5eb45c1447 Mon Sep 17 00:00:00 2001 From: Sebastian Titz Date: Thu, 10 Mar 2022 14:40:09 +0100 Subject: [PATCH 2/8] . --- itooltip.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/itooltip.js b/itooltip.js index a5c7165..a741440 100644 --- a/itooltip.js +++ b/itooltip.js @@ -1,5 +1,26 @@ -//TODO class itooltip +( function() { + 'use strict'; + var showToolTip = function(target) { + var tx; + var ty; + var fullwidth; + var fullheight; + + } + + var fadeIn = function(el) { + //TODO fancy fadein + } + + //class itooltip + var elems = document.getElementsByClassName('itooltip'); + for (var i =0;i Date: Fri, 11 Mar 2022 18:06:45 +0100 Subject: [PATCH 3/8] . --- itooltip.js | 1 + 1 file changed, 1 insertion(+) diff --git a/itooltip.js b/itooltip.js index a741440..fad55d8 100644 --- a/itooltip.js +++ b/itooltip.js @@ -10,6 +10,7 @@ var fadeIn = function(el) { //TODO fancy fadein + } //class itooltip From 81c619228ba8e165f197bbc6f28f3b16f81ffe76 Mon Sep 17 00:00:00 2001 From: troy Date: Fri, 11 Mar 2022 21:33:53 +0100 Subject: [PATCH 4/8] boah ka --- itooltip.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/itooltip.js b/itooltip.js index fad55d8..5f7362f 100644 --- a/itooltip.js +++ b/itooltip.js @@ -1,23 +1,38 @@ ( function() { 'use strict'; - var showToolTip = function(target) { - var tx; - var ty; - var fullwidth; - var fullheight; + var buildToolTip = function(content) { + var tt = document.createElement('tooltip'); + tt.classList.add('hidden'); + var tn = document.createTextNode(content); + tt.appendChild(tn); + } + + var loadToolTip = function(target) { + if(!target.dataset.url) return; + var url = target + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + console.log('ajax:',this.responseText); + //TODO + + } + }; + xmlhttp.open("GET", url, true); + xmlhttp.send(params); } var fadeIn = function(el) { //TODO fancy fadein - + el.classList.remove('hidden'); } //class itooltip var elems = document.getElementsByClassName('itooltip'); for (var i =0;i Date: Sat, 12 Mar 2022 13:12:47 +0100 Subject: [PATCH 5/8] grundfunktion tooltip --- itooltip.css | 10 +++++++++ itooltip.js | 35 +++++++++++++++++++++-------- itooltip.min.css | 1 + itooltip.min.js | 2 ++ itooltip.min.js.map | 54 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 93 insertions(+), 9 deletions(-) create mode 100644 itooltip.css create mode 100644 itooltip.min.css create mode 100644 itooltip.min.js create mode 100644 itooltip.min.js.map diff --git a/itooltip.css b/itooltip.css new file mode 100644 index 0000000..8a8414b --- /dev/null +++ b/itooltip.css @@ -0,0 +1,10 @@ +tooltip { + display:block; + width: 300px; + background-color: rgba(0,0,0,0.8); + color: #fff; + border: 3px solid #fff; + border-radius: 0.5em; + padding: 0.5em; + +} \ No newline at end of file diff --git a/itooltip.js b/itooltip.js index 5f7362f..126778e 100644 --- a/itooltip.js +++ b/itooltip.js @@ -1,26 +1,40 @@ ( function() { 'use strict'; - var buildToolTip = function(content) { + var buildToolTip = function(ev,content) { + //console.log(ev); + + var mouseX = ev.pageX; + var mouseY = ev.pageY; + console.log(mouseX,mouseY); var tt = document.createElement('tooltip'); tt.classList.add('hidden'); + tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ ev.pageX +"px;"; var tn = document.createTextNode(content); tt.appendChild(tn); + document.body.appendChild(tt); } - var loadToolTip = function(target) { - if(!target.dataset.url) return; - var url = target + var loadToolTip = function(ev) { + if(!ev.target.dataset.url) return; + var url = ev.target.dataset.url; + console.log('URL:',url); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { - console.log('ajax:',this.responseText); - //TODO - + console.log('Ajax:',this.responseText); + buildToolTip(ev,this.responseText); } }; xmlhttp.open("GET", url, true); - xmlhttp.send(params); + xmlhttp.send(); + } + + var destroyToolTip = function(ev) { + var tts = document.getElementsByTagName('tooltip'); + for (var i =0;i Date: Sat, 12 Mar 2022 13:27:08 +0100 Subject: [PATCH 6/8] bosschen style --- itooltip.css | 5 +++++ itooltip.js | 3 +-- itooltip.min.css | 2 +- itooltip.min.js | 2 +- itooltip.min.js.map | 7 +++---- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/itooltip.css b/itooltip.css index 8a8414b..e0e52f8 100644 --- a/itooltip.css +++ b/itooltip.css @@ -7,4 +7,9 @@ tooltip { border-radius: 0.5em; padding: 0.5em; +} + +tooltip h3 { + margin: 0; + color: #fff; } \ No newline at end of file diff --git a/itooltip.js b/itooltip.js index 126778e..ce1a256 100644 --- a/itooltip.js +++ b/itooltip.js @@ -10,8 +10,7 @@ var tt = document.createElement('tooltip'); tt.classList.add('hidden'); tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ ev.pageX +"px;"; - var tn = document.createTextNode(content); - tt.appendChild(tn); + tt.innerHTML = content; document.body.appendChild(tt); } diff --git a/itooltip.min.css b/itooltip.min.css index 9a2d9b7..127d016 100644 --- a/itooltip.min.css +++ b/itooltip.min.css @@ -1 +1 @@ -tooltip{display:block;width:300px;background-color:rgba(0,0,0,.8);color:#fff;border:3px solid #fff;border-radius:.5em;padding:.5em} \ No newline at end of file +tooltip{display:block;width:300px;background-color:rgba(0,0,0,.8);color:#fff;border:3px solid #fff;border-radius:.5em;padding:.5em}tooltip h3{margin:0} \ No newline at end of file diff --git a/itooltip.min.js b/itooltip.min.js index 9e628cc..67b8382 100644 --- a/itooltip.min.js +++ b/itooltip.min.js @@ -1,2 +1,2 @@ -!function(){"use strict";for(var buildToolTip=function(ev,content){var mouseX=ev.pageX,mouseY=ev.pageY;console.log(mouseX,mouseY);var tt=document.createElement("tooltip");tt.classList.add("hidden"),tt.style.cssText="position:absolute; top: "+(ev.pageY+10)+"px; left: "+ev.pageX+"px;";var tn=document.createTextNode(content);tt.appendChild(tn),document.body.appendChild(tt)},loadToolTip=function(ev){if(ev.target.dataset.url){var url=ev.target.dataset.url;console.log("URL:",url);var xmlhttp=new XMLHttpRequest;xmlhttp.onreadystatechange=function(){4==this.readyState&&200==this.status&&(console.log("Ajax:",this.responseText),buildToolTip(ev,this.responseText))},xmlhttp.open("GET",url,!0),xmlhttp.send()}},destroyToolTip=function(ev){for(var tts=document.getElementsByTagName("tooltip"),i=0;i Date: Sat, 12 Mar 2022 22:48:51 +0100 Subject: [PATCH 7/8] fade in out css --- fade.css | 10 ++++++++++ fade.min.css | 1 + itooltip.js | 42 ++++++++++++++++++------------------------ itooltip.min.js | 2 +- itooltip.min.js.map | 29 +++++++++++------------------ 5 files changed, 41 insertions(+), 43 deletions(-) create mode 100644 fade.css create mode 100644 fade.min.css diff --git a/fade.css b/fade.css new file mode 100644 index 0000000..75ab3b7 --- /dev/null +++ b/fade.css @@ -0,0 +1,10 @@ +.fadeable { + opacity: 0; + margin-top: -30px; + transition: margin-top 0.2s,opacity 0.2s; +} + +.fadeable.visible { + opacity: 1; + margin-top: 0; +} \ No newline at end of file diff --git a/fade.min.css b/fade.min.css new file mode 100644 index 0000000..371654c --- /dev/null +++ b/fade.min.css @@ -0,0 +1 @@ +.fadeable{opacity:0;margin-top:-30px;transition:margin-top .2s,opacity .2s}.fadeable.visible{opacity:1;margin-top:0} \ No newline at end of file diff --git a/itooltip.js b/itooltip.js index ce1a256..5bf89a2 100644 --- a/itooltip.js +++ b/itooltip.js @@ -1,28 +1,24 @@ ( function() { 'use strict'; - var buildToolTip = function(ev,content) { - //console.log(ev); - - var mouseX = ev.pageX; - var mouseY = ev.pageY; - console.log(mouseX,mouseY); - var tt = document.createElement('tooltip'); - tt.classList.add('hidden'); - tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ ev.pageX +"px;"; - tt.innerHTML = content; - document.body.appendChild(tt); - } - var loadToolTip = function(ev) { + //destroyToolTip(ev); if(!ev.target.dataset.url) return; + + var tt = document.createElement('tooltip'); + tt.classList.add('fadeable'); + tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ (ev.pageX+10) +"px;"; + document.body.appendChild(tt); + var url = ev.target.dataset.url; - console.log('URL:',url); + //console.log('URL:',url); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - console.log('Ajax:',this.responseText); - buildToolTip(ev,this.responseText); + if (this.readyState == 4) { + if(this.status == 200) { + tt.innerHTML = this.responseText; + tt.classList.add('visible'); + } } }; xmlhttp.open("GET", url, true); @@ -31,16 +27,14 @@ var destroyToolTip = function(ev) { var tts = document.getElementsByTagName('tooltip'); - for (var i =0;i Date: Sat, 12 Mar 2022 23:39:58 +0100 Subject: [PATCH 8/8] readme --- README.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index aedf12d..c33a6e9 100644 --- a/README.md +++ b/README.md @@ -260,5 +260,28 @@ einfach ans ende der seite, rest macht das script ## js error sammler in den header, am besten vor allen anderen js ``` - + +``` + +## Fader +``` + + +
...
+``` + +zum ein und ausfaden einfach die class "visible" hinzufügen oder entfernen + +## Ajax ToolTip +benötigt "Fader" + +``` + +... + +blub + +... + + ``` \ No newline at end of file