Today I worked with some buttons and menus. It's pretty different on FirefoxOS, since you cannot have objects float to the bottom for some reason. Jack, Dylan, Aki, and I all tried to modify this, but had no success. I decided to have the settings menu button at the top of the page instead.
I also worked on an interesting concept: getting text to change size based on how many characters it has. I successfully got that working with the following function in Javascript:
function checkText(newtext){
console.log("Newtext.length is " + newtext.length);
if(newtext.length >= 15){
if(newtext.length >= 30){
if(newtext.length >= 40){
$("#textId").animate({
"font-size":"5pt"
});
console.log("setsize to 5");
$("#textId").text(newtext);
}
else{
$("#textId").animate({
"font-size":"7pt"
});
console.log("setsize to 7");
$("#textId").text(newtext);
}
}
else{
$("#textId").animate({
"font-size":"10pt"
});
$("#textId").text(newtext);
console.log("setsize to 10");
}
}
else{
$("#textId").text(newtext);
}
}
Probably not the best way to get it to work, but it does the job. I just check to see how many characters the text has, and then based on how long it is, I change its size. That way, my elements won't shift down, if it's done correctly. It still needs some experimentation, but it's working well so far.
When you see yourself writing similar statements several times in the same block of code, it is a good sign that you should refactor out the repeated logic into a function. Try adding a function (named getTextSize perhaps?) whose job it is to map text length to font size. Then use this function to eliminate the duplication. You will then be following the DRY principal (see http://en.wikipedia.org/wiki/Don%27t_repeat_yourself) and your code will be easier to read.
ReplyDelete