Ragnarok
Ragnarok

Reputation: 170

jQuery auto-run when screen rotating

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

Answers (2)

Hell Lord
Hell Lord

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

Teena Thomas
Teena Thomas

Reputation: 5239

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

Upvotes: 1

Related Questions