{"id":45109,"date":"2019-05-30T03:01:12","date_gmt":"2019-05-29T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45109"},"modified":"2019-05-30T21:26:01","modified_gmt":"2019-05-30T11:26:01","slug":"same-domain-popup-moveto-user-control-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-user-control-tutorial\/","title":{"rendered":"Same Domain Popup Moveto User Control Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Same Domain Popup Moveto User Control Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge_take_control.jpg\" title=\"Same Domain Popup Moveto User Control Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Same Domain Popup Moveto User Control Tutorial<\/p><\/div>\n<p>Moving along &#8230; chortle chortle &#8230; from yesterday&#8217;s <a title='Same Domain Popup Moveto Primer Tutorial' href='#sdpmpt'>Same Domain Popup Moveto Primer Tutorial<\/a> automated (ie. programmed) screen edge popup window moving, can we allow the user to control the popup window positioning?<\/p>\n<p>Before you say &#8220;of course we can, we don&#8217;t run this web application&#8221; we need to explain that <i>popup windows<\/i> are a different kettle of fish in terms of &#8230;<\/p>\n<ul>\n<li>parent &#8230; communicating with &#8230;<\/li>\n<li>child<\/li>\n<\/ul>\n<p> &#8230; than <i>iframes<\/i> are.  With <i>popup windows<\/i> there is no &#8220;parent.&#8221; DOM relationship usage or &#8220;.contentWindow&#8221; DOM content usage, but you can have a &#8230;<\/p>\n<ul>\n<li>Window object <b>via<\/b> &#8230;<br \/>\n<code><br \/>\n var <b>winObj<\/b> = window.open([URL], [WindowName], [pwhx]);<br \/>\n<\/code><br \/>\n &#8230; and today, to monitor position, from that Window object we can access &#8230;<\/li>\n<li>winObj.screenX and winObj.screenY (left and top positioning respectively)<\/li>\n<\/ul>\n<p> &#8230; enough for us to work with comparing these with default edge creeping X and Y to determine if the user has taken control as per the <i>setInterval(tracker, 200)<\/i> controlled &#8230;<\/p>\n<p><code><br \/>\n    var allowmove=true;  \/\/ ie. allow computer to move the popup ... versus the user<br \/>\n    var inarow=0;<br \/>\n    function tracker() {<br \/>\n      if (wois) {<br \/>\n        if (eval('' + pindex) &gt; 0) {<br \/>\n        var ws='';<br \/>\n        var hs='';<br \/>\n        try {<br \/>\n           ws=('' + wois.screenX);<br \/>\n        } catch(wert) {<br \/>\n           ws=pwhx.replace(pwh,'').replace('screenX=','left=').split('left=')[1].split(',')[0];<br \/>\n        }<br \/>\n        try {<br \/>\n           hs=('' + wois.screenY);<br \/>\n        } catch(wert) {<br \/>\n           hs=pwhx.replace(pwh,'').replace('screenY=','top=').split('top=')[1].split(',')[0];<br \/>\n        }<br \/>\n        if (!allowmove && ws == '0') {<br \/>\n          inarow=0;<br \/>\n          allowmove=true;<br \/>\n          wois.focus();<br \/>\n        }<br \/>\n        if (pwhx.replace(pwh,'').indexOf('' + ws) == -1 && ('' + movetosx[eval(pindex % movetosx.length)]).indexOf('.0') != -1) { \/\/ || pwhx.replace(pwh,'').indexOf('' + wois.screenY) == -1) {<br \/>\n          inarow++;<br \/>\n          if (inarow &gt; 10 && ('' + ws + '~').indexOf('0~') == -1) { allowmove=false; }<br \/>\n          console.log('tracker here ' + pwhx + ' ' + ws + ' ... ' + hs);<br \/>\n        } else {<br \/>\n          inarow=0;<br \/>\n          console.log('Tracker Here ' + pwhx + ' ' + ws + ' ... ' + hs);<br \/>\n        }<br \/>\n        } else {<br \/>\n           console.log('pretracker here ');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; combined with the webpage &#8220;blurb&#8221; (ie. instructions) &#8230;<\/p>\n<blockquote><p>\nIn some places you can move this to take the controls from the automated screen edge movements.  If so to relinquish control place at left hand edge again.\n<\/p><\/blockquote>\n<p>You can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html-GETME\" title=\"move_around_edge.htm\">this changed HTML<\/a> out yourself with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html-GETME\" title=\"move_around_edge.htm\">move_around_edge.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='sdpmpt'>Previous relevant <a target=_blank title='Same Domain Popup Moveto Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-primer-tutorial\/'>Same Domain Popup Moveto Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Same Domain Popup Moveto Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.jpg\" title=\"Same Domain Popup Moveto Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Same Domain Popup Moveto Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Australian Postcode Place Modal Backdrop Popup Move Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-move-tutorial\/'>Australian Postcode Place Modal Backdrop Popup Move Tutorial<\/a> outlined a dilemma &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-move-tutorial\/'>\n<ul>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a> based Window with that 3rd argument popup positioning used &#8230;<\/li>\n<li>Window object method <a target=_blank title='Window object method moveTo' href='https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp'>moveTo<\/a> &#8230; when that Window URL is &#8230;<\/li>\n<li>cross-domain<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; but today we change &#8220;cross&#8221; to &#8220;same&#8221; and show what is possible with the Window object method <a target=_blank title='Window object method moveTo' href='https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp'>moveTo<\/a> method.  We can even have webpage windows controlled by a parent window that does not even overlap the popups it is creating, so that we can ring a central window with moving popup windows.<\/p>\n<p>Try this out yourself with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html_GETME\" title=\"move_around_edge.html\">move_around_edge.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html\" title=\"Click picture\">live run<\/a> link, or see this with the video below &#8230;<\/p>\n<p><video style='width:100%;' controls><source src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.mp4' type='video\/mp4'><\/source><\/video><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank title='Same Domain Popup Moveto Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-primer-tutorial\/'>Same Domain Popup Moveto Primer Tutorial<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45097' onclick='var dv=document.getElementById(\"d45097\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/screen\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45097' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45109' onclick='var dv=document.getElementById(\"d45109\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/setinterval\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45109' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Moving along &#8230; chortle chortle &#8230; from yesterday&#8217;s Same Domain Popup Moveto Primer Tutorial automated (ie. programmed) screen edge popup window moving, can we allow the user to control the popup window positioning? Before you say &#8220;of course we can, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-user-control-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[355,400,576,652,2968,967,997,2256,1125,1319,1583],"class_list":["post-45109","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-domain","tag-event","tag-html","tag-javascript","tag-moveto","tag-popup","tag-programming","tag-screen","tag-setinterval","tag-tutorial","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45109"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=45109"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45109\/revisions"}],"predecessor-version":[{"id":45115,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45109\/revisions\/45115"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}