asked on

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

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?

Michel Plungjan

It would be much more helpful if you post the code that does the open!

sscotti

ASKER

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

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sscotti

ASKER

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.

Michel Plungjan

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)

sscotti

ASKER

Thank you.

sscotti

ASKER

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.

Michel Plungjan

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

Michel Plungjan

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

sscotti

ASKER

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.