Will an html article (created with CSS & Javascript) that is imported into DPS and published to the App store run natively on an iPad tablet or will the html pages still require access to the internet to run? Do DPS imported html pages become part of the native app?
As a follow up question, the Javascript includes a script coming from the internet. (Example: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>) So, will the script still run without access to the internet?
No it won't as it is requesting a live site. Just use the common practice for that:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="local/js/jquery-1.7.2.min.js"><\/script>')</script>
I replaced the script src as suggested in your reply, but it still doesn't run properly when I test offline. I loose the javascript actions and the CSS styling when offline. I've disabled the original script src that was running ok with Wi-Fi and replaced it with the script above. I'm creating mult-state objects with links to local html files that include jquery which opens and closes tables. The script needs to run on and offline. Could you please review my code below? Thanks for your help.
<body>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></sc ript>
<script>window.jQuery || document.write('<script src="local/js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- Script runs on this code when access to internet -->
<!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>-->
<script>
$('document').ready(function(){
var count = 0;
$('#questions').hide();
$('#answers').hide();
$('#questions tr:nth-child(2)').attr('id','currow');
var q1 = $('#currow td:nth-child(2)').html();
var q3 = '<div id="d' + count + '"><p>' + q1 + '</p>' ;
var a1 = $('#currow td:nth-child(3)').html();
var r1 = q3 + a1 +'</div>';
$('#showquestion').html(r1);
$('li').live('click',function(){
$(this).addClass('selected').siblings().removeClass('selected');
var target = $(this).attr('id');
var parid = $(this).parent().parent().attr('id');
var parnum = parseInt(parid.slice(1,3));
count = count + 1;
var ps = $('#showquestion div').length;
$('#showquestion div').each(function() {
var divid = $(this).attr('id');
var divnum = parseInt(divid.slice(1,3));
if(divnum > parnum)
$(this).remove();
})
$('td' ).each(function(){
var qnum = $(this).text();
if(qnum == target) {
var q = $(this).next('td').html();
var q2 = '<div id="d' + count + ' "><p>' + q + '</p>';
var a = $(this).next('td').next('td').html();
var qs = $('#showquestion').html();
var r = qs + q2 + a +'</div>';
$('#showquestion').html(r);
window.scrollBy(0,400);
}
});
});
});
</script>
<div id="showquestion" class="answers"></div>
This now should work if you edit the local jQuery path to where your local jQuery file is located.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DPS HTML5-Boilerplate</title>
<meta name="description" content="Description">
<!-- Please be aware that this prevents the user from scaling your website via pinch-gesture. The user is not able to zoom text or other elements. If you need scaling, do not use this snippet but the one listed on h5bp.com/viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">
<!-- add css here and meta as well as a title -->
</head>
<body>
<div id="showquestion" class="answers"></div>
<!-- Now load your javascript regardless it is online or offline -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="local/js/jquery-1.7.2.min.js"><\/script>')</script>
<script>
$('document').ready(function(){
var count = 0;
$('#questions').hide();
$('#answers').hide();
$('#questions tr:nth-child(2)').attr('id','currow');
var q1 = $('#currow td:nth-child(2)').html();
var q3 = '<div id="d' + count + '"><p>' + q1 + '</p>' ;
var a1 = $('#currow td:nth-child(3)').html();
var r1 = q3 + a1 +'</div>';
$('#showquestion').html(r1);
$('li').live('click',function(){
$(this).addClass('selected').siblings().removeClass('selected');
var target = $(this).attr('id');
var parid = $(this).parent().parent().attr('id');
var parnum = parseInt(parid.slice(1,3));
count = count + 1;
var ps = $('#showquestion div').length;
$('#showquestion div').each(function() {
var divid = $(this).attr('id');
var divnum = parseInt(divid.slice(1,3));
if(divnum > parnum)
$(this).remove();
})
$('td' ).each(function(){
var qnum = $(this).text();
if(qnum == target) {
var q = $(this).next('td').html();
var q2 = '<div id="d' + count + ' "><p>' + q + '</p>';
var a = $(this).next('td').next('td').html();
var qs = $('#showquestion').html();
var r = qs + q2 + a +'</div>';
$('#showquestion').html(r);
window.scrollBy(0,400);
}
});
});
});
</script>
</body>
</html>
HONGina,
You're missing part of what users are saying here. You need to include the jquery/css locally, not path to it at an external internet address. Doing that will always require an internet connection. So you must include these resources it in the HTMLResources.zip, or use a local path so that it is pulled in when the HTML article is bundled.
Example:
<script src="../HTMLResources/js/jquery-1.7.2.min.js"></script>
Please read the PDF for more details.
http://help.adobe.com/en_US/digitalpubsuite/using/digitalpubsuite_help .pdf
North America
Europe, Middle East and Africa
Asia Pacific