{"id":23494,"date":"2016-07-25T03:01:05","date_gmt":"2016-07-24T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=23494"},"modified":"2016-07-25T14:24:56","modified_gmt":"2016-07-25T04:24:56","slug":"htmljavascript-window-open-urls-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-window-open-urls-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Window Open URLs Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/windowopen.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Window Open URLs Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_opens.jpg\" title=\"HTML\/Javascript Window Open URLs Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Window Open URLs Primer Tutorial<\/p><\/div>\n<p>Today we have a fairly simple HTML and Javascript web application that has a (supervisor) parent\/child (<a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a>) arrangement collecting URLs off the user that they can subsequently get displayed in popup <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a> windows once the user is happy to display them.  The supervisory HTML does very little today, and is just there, really, as proof of concept for the harder working child iframe part which will become a tool for a future tutorial.<\/p>\n<p>Even though the concept is so very simple, it had some interesting features to it, to our mind, namely &#8230;<\/p>\n<ul>\n<li>the taborder of the HTML <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_form.asp'>form<\/a> became an issue, in that until we turned (our preferred) &#8230;<br \/>\n<code><br \/>\n&lt;<a target=_blank title='HTML inpur element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_input.asp'>input<\/a> type='hidden' name='urls' id='urls' type='text' value=''&gt;&lt;\/input&gt;<br \/>\n<\/code><br \/>\n&#8230; into (our pragmatic alternative idea) &#8230;<br \/>\n<code><br \/>\n&lt;input style='width:1px;margin-left:-9000px;' type='text' name='urls' id='urls' type='text' value=''&gt;&lt;\/input&gt;<br \/>\n<\/code><br \/>\n&#8230; we were getting the (annoying problem of the) address bar becoming a field visited as you tab out of one of the URL input type=text fields &#8230; note the need to have it not be hidden, to be tabbable, but our desire to not have it seen so we shove it off the screen out of the way via CSS <a target=_blank title=\"CSS overflow:hidden idea information from w3schools ... thanks\" href=\"http:\/\/www.w3schools.com\/cssref\/pr_margin-left.asp\">margin-left<\/a> that is hugely negative &#8230; you might be interested to read other ideas about this at <a target=_blank href='http:\/\/stackoverflow.com\/questions\/18207496\/tabindex-hitting-tab-moves-me-to-address-bar-unable-to-work-around-this-usin' title='Useful link'>this link<\/a>\n<\/li>\n<li>we create the URL input type=text fields dynamically via Javascript DOM techniques in an &#8220;as needed&#8221; approach, which requires HTML element <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'><i>innerHTML<\/i><\/a> properties to be updated, and in order not to lose the contents of previous URL input type=text field values as a result of this technique the way to dynamically add in a new set of HTML elements for another user URL definition is via &#8230;<br \/>\n<code><br \/>\n    document.getElementById('mydivongoing' + cnt).innerHTML+=\"Url \" + cnt + \": &lt;input tabindex=\" + cnt + \" style='width:40%;' type='text' id='url\" + cnt + \"' type='text' value='' onblur='addurl(this.value);'&gt;&lt;\/input&gt;&lt;br&gt;&lt;div id='mydivongoing\" + (cnt + 1) + \"' style='text-align: center; width: 100%;'&gt;&lt;\/div&gt;\";<br \/>\n<\/code><br \/>\n&#8230; with the empty &lt;<a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a>&gt;&lt;\/div&gt; above designed to hold the subsequent URL input type=text field that means there is no &#8220;clobbering&#8221; of previous ones when this technique is used\n<\/li>\n<li>input type=text fields were preferred to input type=url fields because we simplified the validation of user entered fields as being okay if they started with &#8220;http&#8221; which could be allowed through or not during the input type=text <a target=_blank title='Javascript event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'>onblur<\/a> event logic, but, if you want some regex validation checking ideas on this subject maybe you could start your research with this <a target=_blank title='Useful link' href='http:\/\/www.the-art-of-web.com\/html\/html5-form-validation\/'>useful link<\/a><\/li>\n<li>Window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> Javascript functionality helps determine the parent&#8217;s document.body dimensions available as the dimensions to work with deciding on the position and size of window.open popup windows, and those dimensions are divided by the number whose square is enough to be bigger than the number of URLs required (ie. 3 URLs is covered by (up to) 2 (x2) rows and two columns of window.open popups)<\/li>\n<li>Events <a target=_blank title='Javascript event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onload.asp'>onload<\/a> helps us out initially and <a target=_blank title='Javascript event onresize information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onresize.asp'>onresize<\/a> helps us out should the window size change to contribute to the document.body width calculation required to derive up to the minute parent document.body width and height dimensions<\/li>\n<\/ul>\n<p>We&#8217;ll leave you with &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/windowopen.html' title='Click picture'>Live Run<\/a> of supervisory parent HTML you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/windowopen.html_GETME' title='windowopen.html'>windowopen.html<\/a><\/li>\n<li>Child iframe HTML\/Javascript you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/windowopens.html_GETME' title='windowopens.html'>windowopens.html<\/a><\/li>\n<\/ul>\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='#d23494' onclick='var dv=document.getElementById(\"d23494\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d23494' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we have a fairly simple HTML and Javascript web application that has a (supervisor) parent\/child (iframe) arrangement collecting URLs off the user that they can subsequently get displayed in popup window.open windows once the user is happy to display &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-window-open-urls-primer-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":[155,281,342,1942,354,452,1801,576,587,1525,609,652,1943,997,1319,1827],"class_list":["post-23494","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-body","tag-css","tag-div","tag-document-body","tag-dom","tag-form","tag-getcomputedstyle","tag-html","tag-iframe","tag-innerhtml","tag-input","tag-javascript","tag-margin-left","tag-programming","tag-tutorial","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/23494"}],"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=23494"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/23494\/revisions"}],"predecessor-version":[{"id":23559,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/23494\/revisions\/23559"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=23494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=23494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=23494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}