Forum | Appery.io

I have a script that lets the user change the text size for a book app. The script increases or decreases the size and saves it as a cookie. One issue I'm having on some android devices (specifically ones on android 4.2) is that it will only accept the first input (just one event) and will ignore all additional attempts to increase or decrease the text.

When I view the app in the device browser, Chrome, or the Appery testing app, I don't have this issue.

I thought if I could force the app to run inside whatever device browser the phone or tablet was running, it would alleviate this problem. Is this a good method? Is this even possible? Maybe there's something wrong with my javascript and I can avoid this all together.

Here are the two buttons I use
code <div id="changeFont">
<a href="#" id="smaller" class="decreaseFont">
A<span class="minus">-</span>
</a>

                             <a href="#" id="bigger" class="increaseFont"> 
                                 A<span class="plus">+</span> 
                             </a> 

                         <> 

/code

And the JS

code
var docCookies = {
getItem: function (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document&#46;cookie&#46;replace(new RegExp("(?:(?:^|&#46;;)\s" + encodeURIComponent(sKey)&#46;replace(/[\-
var docCookies = {
getItem: function (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.;)\s" + encodeURIComponent(sKey).replace(/[\-\.\*]/g, "\$&") + "\s\=\s([^;]).$)|^.$"), "$1")) null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey /?:expires|max\-age|path|domain|secure$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) { return false; }
return (new RegExp("(?:^|;\s)" + encodeURIComponent(sKey).replace(/[\-\.\*]/g, "\$&") + "\s\=")).test(document.cookie);
},
keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s;)[\=]+)(?=;|$)|\s|\s(?:\=[^;])?(?:|$)/g, "").split(/\s(?:\=[^;])?;\s/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};

function change_size(element, size) {
var new_size;
var current = parseInt(docCookies.getItem("FontSize"));
if (current !== "") {
current = parseInt(element.css('font-size'));
}
if (size === 'smaller') {
if (current 12) {
new_size = current - 2;
}
} else if (size === 'bigger') {
if (current < 22) {
new_size = current + 2;
}
}

 element.css('font-size', new_size + 'px'); 
 docCookies.setItem("FontSize", new_size, Infinity); 

}

$('#smaller').click(function () {
change_size($('.pageformat_scriptural_basis, .numOfverses, .chapterlabel2, .chapterlabel1'), 'smaller');
})

$('#bigger').click(function () {
change_size($('.pageformat_scriptural_basis, .numOfverses, .chapterlabel2, .chapterlabel1'), 'bigger');
});

var fontSize = docCookies.getItem("FontSize");
if (fontSize) {
$('.pageformat_scriptural_basis, .numOfverses, .chapterlabel2, .chapterlabel1').css('font-size', fontSize + 'px');
}
#46;\*]/g, "\$&") + "\s\=\s([^;])&#46;$)|^&#46;$"), "$1")) null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey /?:expires|max\-age|path|domain|secure$/i&#46;test(sKey)) { return false; }
var sExpires = "&quot
if (vEnd) {
switch (vEnd&#46;constructor) {
case Number:
sExpires = vEnd === Infinity ? &quot expires=Fri, 31 Dec 9999 23:59:59 GMT" : &quot max-age=" + vEnd;
break;
case String:
sExpires = &quot expires=" + vEnd;
break;
case Date:
sExpires = &quot expires=" + vEnd&#46;toUTCString();
break;
}
}
document&#46;cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? &quot domain=" + sDomain : "") + (sPath ? &quot path=" + sPath : "") + (bSecure ? &quot secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this&#46;hasItem(sKey)) { return false; }
document&#46;cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? &quot domain=" + sDomain : "") + (sPath ? &quot path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) { return false; }
return (new RegExp("(?:^|;\s)" + encodeURIComponent(sKey)&#46;replace(/[\-
var docCookies = {
getItem: function (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.;)\s" + encodeURIComponent(sKey).replace(/[\-\.\*]/g, "\$&") + "\s\=\s([^;]).$)|^.$"), "$1")) null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey /?:expires|max\-age|path|domain|secure$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) { return false; }
return (new RegExp("(?:^|;\s)" + encodeURIComponent(sKey).replace(/[\-\.\*]/g, "\$&") + "\s\=")).test(document.cookie);
},
keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s;)[\=]+)(?=;|$)|\s|\s(?:\=[^;])?(?:|$)/g, "").split(/\s(?:\=[^;])?;\s/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};

function change_size(element, size) {
var new_size;
var current = parseInt(docCookies.getItem("FontSize"));
if (current !== "") {
current = parseInt(element.css('font-size'));
}
if (size === 'smaller') {
if (current 12) {
new_size = current - 2;
}
} else if (size === 'bigger') {
if (current < 22) {
new_size = current + 2;
}
}

 element.css('font-size', new_size + 'px'); 
 docCookies.setItem("FontSize", new_size, Infinity); 

}

$('#smaller').click(function () {
change_size($('.pageformat_scriptural_basis, .numOfverses, .chapterlabel2, .chapterlabel1'), 'smaller');
})

$('#bigger').click(function () {
change_size($('.pageformat_scriptural_basis, .numOfverses, .chapterlabel2, .chapterlabel1'), 'bigger');
});

var fontSize = docCookies.getItem("FontSize");
if (fontSize) {
$('.pageformat_scriptural_basis, .numOfverses, .chapterlabel2, .chapterlabel1').css('font-size', fontSize + 'px');
}
#46;\*]/g, "\$&") + "\s\="))&#46;test(document&#46;cookie);
},
keys: function () {
var aKeys = document&#46;cookie&#46;replace(/((?:^|\s;)[\=]+)(?=;|$)|\s|\s(?:\=[^;])?(?:|$)/g, "")&#46;split(/\s(?:\=[^;])?;\s/);
for (var nLen = aKeys&#46;length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};

function change_size(element, size) {
var new_size;
var current = parseInt(docCookies&#46;getItem("FontSize"));
if (current !== "") {
current = parseInt(element&#46;css('font-size'));
}
if (size === 'smaller') {
if (current > 12) {
new_size = current - 2;
}
} else if (size === 'bigger') {
if (current < 22) {
new_size = current + 2;
}
}

 element.css('font-size', new_size + 'px'); 
 docCookies.setItem("FontSize", new_size, Infinity); 

}

$('#smaller')&#46;click(function () {
change_size($('&#46;pageformat_scriptural_basis, &#46;numOfverses, &#46;chapterlabel2, &#46;chapterlabel1'), 'smaller');
})

$('#bigger')&#46;click(function () {
change_size($('&#46;pageformat_scriptural_basis, &#46;numOfverses, &#46;chapterlabel2, &#46;chapterlabel1'), 'bigger');
});

var fontSize = docCookies&#46;getItem("FontSize");
if (fontSize) {
$('&#46;pageformat_scriptural_basis, &#46;numOfverses, &#46;chapterlabel2, &#46;chapterlabel1')&#46;css('font-size', fontSize + 'px');
}
/code

Thanks so much in advance for any help or suggestions.

Hello Elliot.

All changes that you are trying to do and all js that you have wrote can be applied only to app.You can't write js which will affect to native browser's fonts,tags,pages.

it will only accept the first input
if it accepts only first one, then, posibly, you have an error in your code.
You might want to consider using console.log() and weinre debugger while testing on the device