Reputation: 170
I'm kinda new to jQuery and JS and i'm trying to make a text-size adjustable to the screen width on a mobile site
I search the web for an answer and came up with this solution
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier-0.1)),
textHeight = ourText.height();
if(newSize > 35){
ourText.css("fontSize",35);
}
else{
ourText.css(
"fontSize",
(maxFontSize > 0 && newSize > maxFontSize) ?
maxFontSize :
newSize
);
}
});
};
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
but then it was only when the page first reloads and not on windows resizes, so I entered it all into a function and added
$(document).ready(function () {
resizeTextHeb();
$(window).resize(function() {
resizeTextHeb();
});
});
but now on the iPhone/iPad/Android etc. it doesnt reload the function when the screen rotates. doesnt the screen rotation acts as a window resize? what can I do to make it work? thanks. thanks
Upvotes: 0
Views: 279
Reputation: 37
your function name was "resizeTextHeb()" on the main question, any function name issues!? i suggest u to use google chrome js console for error reports or the error console on the FF browser. , anyway, if it does alert u, so the main issue is with ur function, not the orientation method.
Upvotes: 0