Solved

place cross domain dialogue popup window in a popup window

Posted on 2013-11-28
15
657 Views
Last Modified: 2013-12-30
I use docmein.com to allow our patients to schedule their own appointments. I do not have programming access of docmein.com. Our patients are frequently confused on how to use docmein.com. I have asked the owners of docmein.com to redesign their site to make it more user friendly but they have placed this on a low priority.

In the meantime, I have placed their dialogue popup window over a webpage with instructions behind it. See: https://www.barnwellmd.com/patients/docmeinframe.html.

Since my instructions are in the background, greyed out, they are easy to miss.  Is it possible to place this modal popup window inside my own modal popup window with instructions next to it? If so, how? TiA
0
Comment
Question by:thenelson
  • 7
  • 6
15 Comments
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 39684582
Hi,

Why to place nested popup windows? Instead you can arrange the content in single popup window!

It's will be better user experience!

Hope it helps u...
0
 
LVL 39

Author Comment

by:thenelson
ID: 39685462
>you can arrange the content in single popup window
That is what I want to do. How do I do that?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39704816
First, modernize your markup. The FONT tag was deprecated with html 4.01. Use css for styling. I have inline css for this example but it should be in a style block.

The suggestion in the example is to use the javascript function DOMNodeInserted to detect when the appointment dialog has been added to the DOM then append the instructions to it.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript" language="javascript"
src="https://docmein.com/app/widget/widget.nocache.js" ></script>
<img src="../img/SinglePixel.png"
id="newAppointment_12801944916418372" style="cursor:pointer">
<article id="instructions" style="font-color:#fff;font-weight:bold;display:none">
<span style="font-size:1.5em">NEW PATIENTS: </span>
<br>
<span style="font-size:1em">Select </span>Service <select><option value="v">1ST appointment for NEW PATIENTS (2 hour)</option></select>
<br>
<span style="font-size:1em">Schedule the appointment at least one week in the future. (This gives us time to get records from other providers.)</span>
<br><br>
<span style="font-size:1.5em">EXISTING PATIENTS: </span>
<br>
<span style="font-size:1em">Do not use this. Return to www.barnwellmd.com and select "Existing patients" in the left hand menu.</span>
</article>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
	document.getElementById("newAppointment_12801944916418372").click();
});
$("body").on("DOMNodeInserted", function() {
   var appDialog = $(this).find('.gwt-DialogBox');
   $(appDialog).css('width', '400px'); 
   $('#instructions').appendTo(appDialog).show();
   
});
</script>
</body>
</html>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 39

Author Closing Comment

by:thenelson
ID: 39705246
That did it! Thank you!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39705858
You're welcome. Glad it worked for you. Thanks for the points.
0
 
LVL 39

Author Comment

by:thenelson
ID: 39705883
Thanks again. Did you see my other open question: http://www.experts-exchange.com/Q_28312648.html?
0
 
LVL 39

Author Comment

by:thenelson
ID: 39743211
tommyBoy,

I just discovered the code you provided does not work in IE & FF. It just creates a blank page. I should have checked them before.  Any suggestion on how to correct this?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39743641
Try this version. It uses a jquery plugin to detect DOM node insertion found here instead of the unreliable javascript DOMNodeInsertion event. You will see that I have pasted the minified version of the plugin script directly into the markup. On your finished page of course, you would have this in a separate file. Currently I do not have a convenient way of testing in IE but it works in Firefox on my Mac.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript" language="javascript"
src="https://docmein.com/app/widget/widget.nocache.js" ></script>
<img src="../img/SinglePixel.png"
id="newAppointment_12801944916418372" style="cursor:pointer">
<article id="instructions" style="font-color:#fff;font-weight:bold;display:none">
<span style="font-size:1.5em">NEW PATIENTS: </span>
<br>
<span style="font-size:1em">Select </span>Service <select><option value="v">1ST appointment for NEW PATIENTS (2 hour)</option></select>
<br>
<span style="font-size:1em">Schedule the appointment at least one week in the future. (This gives us time to get records from other providers.)</span>
<br><br>
<span style="font-size:1.5em">EXISTING PATIENTS: </span>
<br>
<span style="font-size:1em">Do not use this. Return to www.barnwellmd.com and select "Existing patients" in the left hand menu.</span>
</article>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// insertionQuery v0.2.1 (2013-11-23) 
// license:MIT 
// naugtur <naugtur@gmail.com> (http://naugtur.pl/) 
var insertionQ=function(){"use strict";function a(a,b){var d,e="insQ_"+h++,f=function(a){(a.animationName===e||a[j]===e)&&(c(a.target)||b(a.target))};d=document.createElement("style"),d.innerHTML="@keyframes "+e+" {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n@"+k+"keyframes "+e+" {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n"+a+" { animation-duration: 0.001s; animation-name: "+e+"; "+k+"animation-duration: 0.001s; "+k+"animation-name: "+e+";  } ",document.head.appendChild(d);var g=setTimeout(function(){document.addEventListener("animationstart",f,!1),document.addEventListener("MSAnimationStart",f,!1),document.addEventListener("webkitAnimationStart",f,!1)},20);return{destroy:function(){clearTimeout(g),d&&(document.head.removeChild(d),d=null),document.removeEventListener("animationstart",f),document.removeEventListener("MSAnimationStart",f),document.removeEventListener("webkitAnimationStart",f)}}}function b(a){a["-+-"]=!0}function c(a){return g&&a["-+-"]===!0}function d(a){return c(a.parentNode)?a:d(a.parentNode)}function e(a){for(b(a),a=a.firstChild;a;a=a.nextSibling)void 0!==a&&1===a.nodeType&&e(a)}function f(f,g){var h=[],i=function(){var a;return function(){clearTimeout(a),a=setTimeout(function(){h.forEach(e),g(h),h=[]},10)}}();return a(f,function(a){if(!c(a)){b(a);var e=d(a);h.indexOf(e)<0&&h.push(e),i()}})}var g,h=100,i=!1,j="animationName",k="",l="Webkit Moz O ms Khtml".split(" "),m="",n=document.createElement("div");if(n.style.animationName&&(i=!0),i===!1)for(var o=0;o<l.length;o++)if(void 0!==n.style[l[o]+"AnimationName"]){m=l[o],j=m+"AnimationName",k="-"+m.toLowerCase()+"-",i=!0;break}return function(b,c){return i&&b.match(/[^{}]/)?(g=c?!1:!0,g&&e(document.body),{every:function(c){return a(b,c)},summary:function(a){return f(b,a)}}):!1}}();

</script>
<script type="text/javascript">
$(window).load(function() {
	document.getElementById("newAppointment_12801944916418372").click();
});
insertionQ('.gwt-DialogBox').every(function(element){
	$('.gwt-DialogBox').css('width', '400px');
   	$('#instructions').appendTo('.gwt-DialogBox').show();
});
</script>
</body>
</html>

Open in new window

0
 
LVL 39

Author Comment

by:thenelson
ID: 39744050
The new code is working in Chrome, FF and IE however the docmein popup is now further down on the page and the text ("EXISTING PATIENTS:" etc) is not displaying as it is beyond the page. Is it possible to place the text above the docmein popup or move the docmein popup further up on the screen?

Thanks!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39744662
You can place the text on top of the popup simply by using "prependTo" instead of "appendTo".

insertionQ('.gwt-DialogBox').every(function(element){
      $('.gwt-DialogBox').css({width:'400px'})
         $('#instructions').prependTo('.gwt-DialogBox').show();
});

The popup's position on the page is determined by a dynamically loaded script after the popup is part of the DOM. This script doesn't know to allow for the extra height of the popup due to the addition of the instructions. I assume you still have no way of modifying this script from docmein. Your only choice then is to modify the position of the popup again AFTER the docmein script is finished modifying it.

So...resetting the top position like this DOES NOT WORK (in Firefox):
      
insertionQ('.gwt-DialogBox').every(function(element){
      $('.gwt-DialogBox').css({width:'400px'})
         $('#instructions').prependTo('.gwt-DialogBox').show();
      $('.gwt-DialogBox').css({top:'20px'})
});

..because the docmein script is likely still running and is setting "top" to something else.  Setting the "width" as I have done here DOES work because the docmein script is not modifying the width.

In order to modify the "top" position with your script, you need to build in a slight delay to allow the docmein script to finish. Play with the delay to make sure it works in every browser. Here I have set it to 50 milliseconds. I tested only in Firefox where it proved to be enough of a delay to allow me to change the top position.


insertionQ('.gwt-DialogBox').every(function(element){
      $('.gwt-DialogBox').css({width:'400px'})
         $('#instructions').prependTo('.gwt-DialogBox').show();
      setTimeout(function(){$('.gwt-DialogBox').css({top:'20px'})}, 50);
});
0
 
LVL 39

Author Comment

by:thenelson
ID: 39744792
Quite strange: The code works perfectly when I run it from my hard drive. When I run it from my web server, it works fine in Chrome and IE but is blank in FF.  Here it is published to my web server: https://www.barnwellmd.com/docmeinframe.html
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39744838
Quite simple. Your published web site is on a secure socket layer (https). Your are requesting a jquery library that is not on a secure socket layer with this line:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

You are trying to mix secure content with non-secure. Some browsers will balk at this. The page is blank in Chrome v31 as well.

Simple fix SHOULD be just adding an "s" to the jquery library request:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Alternately, you could copy the jquery library to a directory inside your root directory like "js" then call the library directly from the web server's hard drive.

<script src="js/jquery.min.js" type="text/javascript"></script>
0
 
LVL 39

Author Comment

by:thenelson
ID: 39744965
That took care of it. I missed that. Thanks!

I wonder if you can look at this question: http://www.experts-exchange.com/Microsoft/Development/MS_Access/Q_28326893.html

If you are not skilled in VBA, that's ok. I am and maybe between the two of us we can figure it out.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39746091
I looked at that question but I don't have much to offer. I worked exclusively with Microsoft technologies for years but abandoned all that a couple of years back. I no longer have a handy testing platform. My spidey sense tells me you are barking up the wrong tree by comparing the headers produced using VBA vs just an html form. Authorization generally happens on a different level.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question