CODEWITHSUNDEEP
javascriptjquery
Praveen
Praveen

Reputation: 1802

convert jquery code to javascript

I have a jquery script that i want to convert in javascript.

Jquery:

<script type="text/javascript">
    $(document).ready( function() {

        addCssTransform();

        $( window ).resize(function() {
            addCssTransform();
        });

        function addCssTransform() {
            var docWid = $(document).width();
            var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
            var actualWidth = w - (w - docWid);

            var zoom = actualWidth / 1280;
            var zoomRatio = zoom *100;
            console.log(zoomRatio);
            if(actualWidth > 1280) {
                $('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

            }
        }
    });
</script>

I have tried and here is the output. But it is not working and giving error in console.

javascript:

<script type="text/javascript">
 addCssTransform();

      window.addEventListener('resize', function(event){
            addCssTransform();
        });

        function addCssTransform() {
            var docWid = document.body.clientWidth;
            var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
            var actualWidth = w - (w - docWid);

            var zoom = actualWidth / 1280;
            var zoomRatio = zoom *100;
            console.log(zoomRatio);
            if(actualWidth > 1280) {
                document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
                //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

            }
        };
    </script>

It seems there is an error in line:

document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';

Upvotes: 0

Views: 102

Answers (4)

Andy
Andy

Reputation: 63524

getElementsByTagName returns an nodeList over which you would need to loop.

An alternative would be to use querySelector which returns a single element instead:

document.querySelector('html');

Upvotes: 1

Vigneswaran Marimuthu
Vigneswaran Marimuthu

Reputation: 2532

<script type="text/javascript">
    // Add 'DOMContentLoaded' event
    document.addEventListener('DOMContentLoaded', function () {

        addCssTransform();

        // NOTE: Just reference the function. Don't create new one unless needed
        window.addEventListener('resize', addCssTransform, false);

        function addCssTransform() {
            var docWid = document.body.clientWidth;
            var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
            var actualWidth = w - (w - docWid);

            var zoom = actualWidth / 1280;
            var zoomRatio = zoom *100;
            console.log(zoomRatio);
            if(actualWidth > 1280) {

                // If you are adding styles to 'html' element, use available 'document.documentElement' property
                document.documentElement.style.fontSize = zoomRatio + '%';
                //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

            }
        }
    }, false);
    </script>
  • Add DOMContentLoaded event and place your JavaScript inside it.
  • Reference the function.

You can write the below code 

window.addEventListener('resize', function (event) {
    addCssTransform();
}, false);

as

window.addEventListener('resize', addCssTransform, false);
  • Use document.documentElement to access 'html' element

Upvotes: 2

Tom Jardine-McNamara
Tom Jardine-McNamara

Reputation: 2608

You are calling the addCSSTransform function before it is defined. Move the call to after the function declaration, i.e:

    window.addEventListener('resize', function(event){
        addCssTransform();
    });

    function addCssTransform() {
        var docWid = document.body.clientWidth;
        var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
        var actualWidth = w - (w - docWid);

        var zoom = actualWidth / 1280;
        var zoomRatio = zoom *100;
        console.log(zoomRatio);
        if(actualWidth > 1280) {
            document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
            //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

        }
    };

    addCssTransform();

as suggested by Vigneswaran, you may wish to bind the call to a DOMContentLoaded event (equivalent to $(document).ready) as follows:

document.addEventListener('DOMContentLoaded', addCssTransform);

The suggestions above regarding nodeLists returned from getElementsByTagName are also correct (the clue's in the name - getElementsByTagName). There will (or should!) only ever be one html element, so you can safely replace document.getElementsByTagName("html").style with document.getElementsByTagName("html")[0].style

Upvotes: 1

Quentin
Quentin

Reputation: 943157

getElementsByTagName returns an array-like NodeList object, not an element. You can't set style on it. You have to loop over it and set the style on each member (which will be elements) of it in turn.

Upvotes: 2

Related Questions