Solved

Open Window with Javascript (?other method) in Safari IOS.  Pop-up issue

Posted on 2013-06-23
10
8,254 Views
Last Modified: 2013-11-19
I am sure that this one has been asked before, but I am modifying an existing website so that it will work on IOS devices.  The old site was using exported Captivate files that were .swf and did not work on IOS devices.  Now that Captivate can export HTML5 I want to migrate to IOS.

The HTML5 seems to work OK.  The issue that I am having, and have had before, is that I am using a select list drop down to select items and the selection then opens a new window with the HTML5 Captivate project.  This works fine on a desktop browser but is problematic with Safari on IOS devices.  You have to enable pop-ups in Safari, and you still get a warning even if pop-ups are allowed.

I am new to IOS web development and I'll have to look into something like Phonegap or other development kit, but for the time being seems like this is a simple problem, and the rest of the site actually works pretty well.  I suppose that if I want to make an app I will have to get a bit more involved.

<select onchange="openHTML5('Genitourinary_name')" name="Genitourinary_name" id="Genitourinary_name">
<option value="none">- Select Case File -</option>
<option value="/cases/Genitourinary/Crohn%20Disease/index.html">Crohn Disease</option>
</select>

Open in new window


The function call basically opens the HTML5 index page in the center of the viewport (code not shown).

Just wondering if there is "an appropriate" way to do what I want in IOS, and if there is a workaround if I don't want to delve into something like PhoneGap just yet.  Regarding that, how difficult is it to migrate an existing site that otherwise is coded relatively well to a mobile app?
0
Comment
Question by:sscotti
  • 5
  • 5
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
It would be much more helpful if you post the code that does the open!
0
 
LVL 5

Author Comment

by:sscotti
Comment Utility
Relevant Generated code follows.  It actually works OK in both Mac OS X and IOS, except that I need to enable pop-ups for Safari in IOS.  If you have a better way to reset the dropdowns using jquery or a better way to write the JS using jquery that would be appreciated.  Is there now a development kit for jquery mobile?


Select List dropdown:

<select onchange="openCASE('Genitourinary_name')" name="Genitourinary_name" id="Genitourinary_name">
<option value="none">- Select Case File -</option>
<option value="/cases/Genitourinary/Crohn%20Disease/index.html">Crohn Disease</option>
</select>

Open in new window


Function resets the dropdowns and opens the Captivate packaged output in a new window

function openCASE(section) {
    for (k=0;k<11;k++) {  //reset dropdowns
      if (section.indexOf(subDir[k]) == -1) {
document.getElementById(subDir[k]+section.slice(section.indexOf("_"),section.length)).selectedIndex =0;
}
else {
var sectionName = subDir[k];
}
}

var selectedpid=$('#'+section+' option:selected').val();  // file name for selected case

if (selectedpid != "none") {
        //  pop up window in center of screen
	var width=1024;  //ipad Mini resolution is 1024 x 768
	var height=700;  //ipad screen resolution is 2048 x 1536
	var url= "http://www.radimaging.net"+selectedpid+"?cpQuizInfoStudentID="+userid+"&cpQuizInfoStudentName="+username+"&email="+useremail+"&sectionName="+sectionName;
    var leftPosition, topPosition;
    //Allow for borders
    leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
    //Allow for title and status bars.
    topPosition = (window.screen.height / 2) - ((height / 2) + 50);
    //Open the window.
    window.open(url, "Teaching_Case","status=no,height=" + height + ",width=" + width + ",resizable=yes,left="+ leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="+ topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
}
return false;
}

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
There is jQuery mobile.

Anyway, all you need are links with target="_blank" so I suggest the following:

1) change
  window.open(url, "Teaching_Case","status=no,height=" + height + ",width=" + width + ",resizable=yes,left="+ leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="+ topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");

to

  var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
  if (!iOS) {
    var w = window.open(url, "Teaching_Case","status=no,height=" + height + ",width=" + width + ",resizable,left="+ leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="+ topPosition);
  return w?false:true;
  }

and have links instead of a select

These links have to be on the format

<a href="someurl" target="_blank" onclick="return openCASE(this)"
and the function can do

function openCASE(link) {
  var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
  if (!iOS) {
    var w = window.open(link.href, link.target,"status=no,height=" + height + ",width=" + width + ",resizable,left="+ leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="+ topPosition);
  return w?false:true;
  }
  else return true;

}

If that is not useful, please show me a select that goes with the code you showed me. You have a select with url in the value and you call openHTML5 but the open code you have does not use that URL and is called openCASE

I can convert the select to hrefs onload so the iOS device will see a list instead

If that is not interesting, I suggest, assuming the target pages are on the same server, to ajax the content into a div on the existing page
0
 
LVL 5

Author Closing Comment

by:sscotti
Comment Utility
Thank you for the information.  I will try out some of your suggestions and explore some of the capabilities of jQuery mobile.

I actually did just rename the function, so that was a change from the original post, sorry.

So are you referring to something like this:

http://css-tricks.com/convert-menu-to-dropdown/

regarding changing the select list to an unordered list?

I really want to convert the code so that it will work decently as a desktop web app and as a mobile app.  I've been out of coding for awhile, so I need to catch up regarding mobile app coding.

What are the advantages or disadvantages of opening in a new windows vs. a div via AJAX.  I was using a div via AJAX originally, but opening a new window with the current code seems to work a little better.  The pop-up window index page is actually the index page from an exported Captivate 7.x exported HTML5 format learning module.  It is a rather large package with a very large javascript library that handles the interface and quiz reporting.  Very javascript intensive, but it seems to work on the iPad mini, which what I have for testing.

Thanks.

Are the jQuery mobile builder tool or something like Codiqa worth looking into.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
the huge advantage with legacy pages that have their own frameworks and css is of course a new window will not need any changes.

My suggestion was actually the opposite. To create a list of links instead of a select since you can use target on the links instead of window.open

I do not use any builder tools. When I did an xCode webinar, my handhacked code was almost as quick to write as the drag and drop used by the instructor in the builder he had (which could have been codiqa)
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 5

Author Comment

by:sscotti
Comment Utility
Thank you.
0
 
LVL 5

Author Comment

by:sscotti
Comment Utility
The format of the generated select list (PHP code generated) is:

<select onchange="openCASE('Genitourinary_name')" name="Genitourinary_name" id="Genitourinary_name">
<option value="none">- Select Case File -</option>
<option value="/cases/Genitourinary/Crohn%20Disease/index.html">Crohn Disease</option>
</select>

It works as designed on a desktop.

The <option> tag values have the link to the page that is to be opened.

Do you just programmatically replace the selects with a <ul>, wrap the options with a <li></li> and convert the options to <a href>?, using the value for the target and adding target="_blank"?, doing that only if the browser is an IOS device?

The actual dev site is at:  http://www.radimaging.net/

Not sure if it is reachable from the net.  Little bit of trouble recently with my router.

How would I convert to a series of links with target="_blank" in an unordered list so that it'll work in IOS, using say jquery?  I don't really want to rewirte for a mobile app at this point, maybe later.  Learning curve for XCode and jquery mobile is going to take awhile to traverse.  Might be worth it though.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
If I can offer my honest opinion: The page is a mess. You have DOM and jQuery in a huge spaghetti. The learning curve of XCode will be nothing compared to bugfixing your code on various devices. I STRONGLY recommend to refactor using jQuery before you go any further.

Yes I would take the select and create links. However I am surprised you are considering mobile devices, the imagery on your site would be hard to see on a mobile I would have thought

Here are the validator messages which surprisingly only number 7
Validation Output: 7 Errors

 Line 20, Column 10: Stray end tag script.
	</script>

 Line 463, Column 106: Saw a start tag image.
…lis.com" target="_blank"><image src="/images/radiolopolis_logo.png" /></a></li>

 Line 463, Column 106: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
…lis.com" target="_blank"><image src="/images/radiolopolis_logo.png" /></a></li>
¿
 Line 490, Column 7: No li element in scope but a li end tag seen.
		</li>
¿
 Line 495, Column 22: Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
		<ul id="myNavTools">
Contexts in which element ul may be used:
Where flow content is expected.
Content model for element ul:
Zero or more li elements.
 Line 623, Column 7: End tag for body seen, but there were unclosed elements.
</body>

 Line 515, Column 22: Unclosed element div.
<div id="mainContent">

Open in new window


I can give you some code to flatten the selects
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I do not understand the openCASE function - it does not have anything to do with the url in the option.

Anyway here is code to replace selects with lists. I only replace selects that have openCASE in the onChange handler, you should give the selects a class and use that to test instead

DEMO

var isMobile =/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
$(function() {
    if (isMobile) {
        $("select").each(function() { // change this to $(".selectsToFlatten") 
            var onc = this.onchange.toString(); // this can be removed if you use classname
            if (onc.indexOf("openCASE") !=-1) { // and so can this if
                var $links = $("<ul/>");
                for (var i=1;i<this.options.length;i++) {
                    $links.append('<li><a href="'+this.options[i].value+'">'+this.options[i].text+'</option></li>');
                }
                $(this).replaceWith($links);
            }
        });
    }
});

Open in new window

0
 
LVL 5

Author Comment

by:sscotti
Comment Utility
Thank you for the advice and constructive criticism.  I guess maybe I should dive into XCode if I want to continue writing code.  Can you suggest any good tutorials or resources for learning that?

The images are actually reasonably good on an iPad or even an iPad mini.  Not OK for an iPhone.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

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 …
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.

772 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

10 Experts available now in Live!

Get 1:1 Help Now