Calling JS to change the font size according to the screen size

Thu Feb 26, 2015 6:04 pm

Not able to change the size of the label on a list item (which mapped to the response of the list service) according to the screen size by calling JS when page load.
However when I preview the app and inspect the elements of the label and change the size

I've created a new Javascript for the app:
(from https://getsatisfaction.com/apperyio/...)
//This function will be used to add some css rule to the page.
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}

When the page load, call JS:
addCSSRule(document.styleSheets[0], '.Chat_Screen_Label', "font-size: 40px;");

Thu Feb 26, 2015 6:15 pm

Is this code better?
Rather than doing something like:
codevar documentHeight = jQuery("body").height();
if(documentHeight < 350)/code and then call the JS to change the font.
(I'm not available to open my project with this computer so I can't test this code now.)
code
var documentHeight = jQuery(document).height();
alert(documentHeight);
var goalHeight = (documentHeight)*(35)/100;
var fontsize = Math.ceil(goalHeight/10);
//For example divided by 10
alert(goalHeight);
$("#Label").attr('style', 'font-size:'+fontsize+'px !important');
/code
is there anything wrong?

Thu Feb 26, 2015 10:11 pm

Mark,

Could you please clarify, do you try to use console.log in your function to check what "if" do you really use in your example and what really happens?

Fri Feb 27, 2015 6:57 am

Never mind -.- I've already fixed the problem,
what I was saying in the question was
[Why I'm not able to use the JS code to change the font size!]
and I've change the code that in the comment and become like this:
code
var documentHeight = jQuery(document).height();
var fontsize = Math.ceil(documentHeight/10);
//For example divided by 10
Apperyio('Label').attr('style', 'font-size:'+fontsize+'px !important');
//If Label is my target component name
/code
And its changing the font size according to the screen size!
Thank you for your help anyway Answered

Fri Feb 27, 2015 7:45 am

Hi Mark - Thanks for this update.