0

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

Ragnarok
  • 170
  • 14
  • 1
    http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript – Hell Lord Aug 22 '12 at 14:35
  • I checked the link you gave me, and got the window.orientation and so some reason it doesnt work... the code i have is: window.addEventListener(orientationEvent, function() { resizeText(); alert(window.orientation); }, false); and on the mobile device it alerts with the correct orientation, but it just doesn't run the resizeText() function... any ideas? @HellLord – Ragnarok Aug 22 '12 at 17:14

2 Answers2

1

You may use media queries for that, without using js.

Teena Thomas
  • 5,139
  • 1
  • 13
  • 17
  • Some helpful sites: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ @user1617182 – Teena Thomas Sep 04 '12 at 18:53
  • you could adjust the css width for different devices (fonts adjust accordingly), or specify the font-size as per the orientation. also, apple products like % whereas Androids work with px. so, use a mix of both. eg. `` Mobile devices should have a max width of 600px, 100% is for desktops and Apple products. @user1617182 – Teena Thomas Sep 04 '12 at 19:20
0

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.

Hell Lord
  • 37
  • 8