CODEWITHSUNDEEP
jqueryviewportviewport-units
JacksonDavis
JacksonDavis

Reputation: 23

JQuery Vh parameter fix for older browsers

So I've been using the vh and vw units inside of CSS3 recently and loving the way that they work. Unfortunately with them only being supported with modern versions of browsers I had to find a work around to get the look that I wanted out of my site.

Upon researching, I found a fix on another thread made in JQuery which works perfectly until a change is made in the size of the view-port (i.e either the scale of the windows is resized, or a mobile device is turned the other way.) When you do this the height of the div increases hugely down the page. If you could help me to solve this issue then I would be highly grateful.

The site that I am working on is: http://phantommarketing.co.uk/rapidengineering/index.html

HTML of the effected area, with activating in-line Javascript

<div id="fullscreen_img">
    <img src="images/rapidlogo.svg" alt="Rapid Engineering Logo" id="rapidlogo">
</div><!--END OF FSIMG-->

<script type="text/javascript">
    // Init object
    var supportVhVw = new SupportVhVw();

    // Scale all texts
    supportVhVw.setVh("#fullscreen_img", 100);
</script>

Javascript

function SupportVhVw() {

    this.setVh = function(name, vh) {

        $(window).resize( function(event) {
            scaleVh(name, vh);
        });

        scaleVh(name, vh);
    }

    this.setVw = function(name, vw) {

        $(window).resize( function(event) {
            scaleVw(name, vw);
        });

        scaleVw(name, vw);
    }

    var scaleVw = function(name, vw) {

        var scrWidth = jQuery(document).width();
        var px = (scrWidth * vw) / 100;
        var Fwidth = jQuery(name).css('width', px + "px");
    }


    var scaleVh = function(name, vh) {

        var scrHeight = jQuery(document).height();
        var px = (scrHeight * vh) / 100;
        var Fheight = jQuery(name).css('height', px + "px");
    }
};

Upvotes: 0

Views: 666

Answers (1)

Sarath Babu Nuthimadugu
Sarath Babu Nuthimadugu

Reputation: 881

Instead of taking document height and width take viewport height and width

  var scaleVw = function(name, vw) {

                var scrWidth = $(window).width();
                var px = (scrWidth * vw) / 100;
                var fontSize = jQuery(name).css('width', px + "px");
            }


            var scaleVh = function(name, vh) {

                var scrHeight = $(window).height();

                var px = (scrHeight * vh) / 100;
                var fontSize = jQuery(name).css('height', px + "px");
            }

I am tested in Internet explorer 8 it is working fine

Upvotes: 1

Related Questions