Solved

place cross domain dialogue popup window in a popup window

Posted on 2013-11-28
15
651 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
Comment Utility
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
Comment Utility
>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
Comment Utility
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
 
LVL 39

Author Closing Comment

by:thenelson
Comment Utility
That did it! Thank you!
0
 
LVL 38

Expert Comment

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

Author Comment

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

Author Comment

by:thenelson
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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 …

728 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now