4c4
< "Cloudy" World Clickaround - RJM Programming - April, 2015
---
> World Clickaround - RJM Programming - April, 2015
11c11
< var elem, elemfriend;
---
> var elem;
19,21c19
< var x=-1, y=-1;
< var dopac=0.5;
< var bigh=0;
---
> var x, y;
88,90d85
< SetBox("canvaselement");
<
<
97,113d91
< elemfriend = document.getElementById('boxdiv');
<
<
< // Add event listener for `click` events.
< elemfriend.attachEvent('onclick', function(event) {
< if (event.clientX || event.clientY) {
< x = event.clientX - elemLeft;
< y = event.clientY - elemTop;
< } else {
< x = event.pageX - elemLeft;
< y = event.pageY - elemTop;
< }
< elem.click();
< x = -1;
< y = -1;
< });
<
116d93
< if (x < 0 && y < 0) {
124d100
< }
159,177d134
< elemfriend = document.getElementById('boxdiv');
<
<
< // Add event listener for `click` events.
< elemfriend.addEventListener('click', function(event) {
< if (event.clientX || event.clientY) {
< x = event.clientX - elemLeft;
< y = event.clientY - elemTop;
< } else {
< x = event.pageX - elemLeft;
< y = event.pageY - elemTop;
< }
< elem.click();
< x = -1;
< y = -1;
< });
<
<
<
180d136
< if (x < 0 && y < 0) {
188d143
< }
231,298d185
< function percentask() {
< var vsdopac=prompt("Enter 'world' cloudiness as number between 0.0 and 1.0", dopac);
< if (vsdopac != null) {
< if (vsdopac != dopac && vsdopac != "") {
< document.getElementById('boxdiv').style.borderTop = bigh + 'px solid rgba(255,255,255,' + vsdopac + ')';
< dopac = vsdopac;
< }
< }
< }
<
< // Thanks to http://help.dottoro.com/ljvmcrrn.php below ...
< // always return 1, except at non-default zoom levels in IE before version 8
< function GetZoomFactor() {
< var factor = 1;
< if (document.body.getBoundingClientRect) {
< // rect is only in physical pixel size in IE before version 8
< var rect = document.body.getBoundingClientRect ();
< var physicalW = rect.right - rect.left;
< var logicalW = document.body.offsetWidth;
<
< // the zoom level is always an integer percent value
< factor = Math.round ((physicalW / logicalW) * 100) / 100;
< }
< return factor;
< }
<
< function SetBox(what) {
< var div = document.getElementById (what);
<
< if (div.getBoundingClientRect) { // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
< var rect = div.getBoundingClientRect ();
< x = rect.left;
< y = rect.top;
< w = rect.right - rect.left;
< h = rect.bottom - rect.top;
<
< if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
< // the bounding rectangle include the top and left borders of the client area
< x -= document.documentElement.clientLeft;
< y -= document.documentElement.clientTop;
<
< var zoomFactor = GetZoomFactor ();
< if (zoomFactor != 1) { // IE 7 at non-default zoom level
< x = Math.round (x / zoomFactor);
< y = Math.round (y / zoomFactor);
< w = Math.round (w / zoomFactor);
< h = Math.round (h / zoomFactor);
< }
< }
<
< //alert (" Left: " + x + "\n Top: " + y + "\n Width: " + w + "\n Height: " + h);
< document.getElementById('boxdiv').style.position = 'absolute';
< document.getElementById('boxdiv').style.top = y + "px";
< document.getElementById('boxdiv').style.left = x + "px";
< document.getElementById('boxdiv').style.width = w + "px";
< document.getElementById('boxdiv').style.height = h + "px";
< document.getElementById('boxdiv').style.borderTop = h + 'px solid rgba(255,255,255,0.5)';
< bigh=h;
< //document.getElementById('boxdiv').style.borderLeft = '3px solid yellow';
< //document.getElementById('boxdiv').style.borderBottom = '3px solid yellow';
< //document.getElementById('boxdiv').style.borderRight = '3px solid yellow';
< //document.getElementById('boxdiv').style.zIndex = -999;
< //document.getElementById('boxdiv').onclick = " alert(99); elem.click(); "
< }
< else {
< alert ("Your browser does not support this example!");
< }
< }
305c192
< "Cloudy" World Clickaround
---
> World Clickaround
309d195
<