Selectively toggling
in browser's viewport

Question

I'm writing an HTML5 app for iOS. After going through this article, I thought of doing some performance optimisation by keeping some HTML nodes in DOM but not keeping them in viewport.

For the demo purpose, I have been using following code (my actual work scenario is going to have a lot more <div>)

<!DOCTYPE HTML>
<html>
<head>
<script>
    function func(){
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div1.style.cssFloat = "";
        div1.style.visibility = "hidden";
        div1.style.left = "-100%";

        div2.style.left = "100%";
        div2.style.visibility = "";
        div2.style.cssFloat = "left";
    }

    function func1(){
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div2.style.cssFloat = "";
        div2.style.visibility = "hidden";
        div2.style.left = "-100%";

        div1.style.left = "100%";
        div1.style.visibility = "";
        div1.style.cssFloat = "left";
    }
</script>
</head> 
<body style="position:absolute;height: 100%;width:100%;margin:0px;padding:0px;">
   <div onclick="func();" id="div1" style="background-color:blue;height:100%;width:100%;top:0;left:100%;display: inline;float:left;margin: 0px;padding: 0px">
   </div>
   <div onclick="func1();" id="div2" style="background-color:green;height:100%;width:100%;top:0;left:-100%;visibility:hidden;display: inline;margin: 0px;padding: 0px;">
   </div>
</body>
</html>

My problem is, whenever I want to show a <div> in viewport and hide all other <div>, I have to make the former div's float:left alongwith the obvious adjustments in left(css) If I put float:left in all the <div>, the logic does not work and I'm not able to show the specific <div> which I want to show in viewport. I m also unsure how visibility:hidden helps in performance optimisation. My guess is that, the browser doesn't repaint the DOM element whose visibility(css) is set to hidden. Is it the reason for better performance ?

MKV · Accepted Answer

In a css if u give the visiblity:hidden means its hide the content only not that place which is occupied . if you use disply:none means its hide the content and place.

and repalce this in your code..

 <script type="text/javascript">
    function pageBodyLoad(){  // this function is called at the body load.. 
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.style.display = "block";  // its shows div1
            div2.style.display = "none";   // its hide div2
    }
    function func(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.style.display = "none";  // its hide div1
            div2.style.display = "block"; // its shows div2
        }

        function func1(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.style.display = "block";  // its shows div1
            div2.style.display = "none";   // its hide div2
        }
    </script>
    <body style="position:absolute;height: 100%;width:100%;margin:0px;padding:0px;" onload="pageBodyLoad()">`
        <div onclick="func();" id="div1" style="background-color:blue;height:100%;width:100%;top:0;float:left;margin: 0px;padding: 0px">
        </div>
        <div onclick="func1();" id="div2" style="background-color:green;height:100%;width:100%;top:0;margin: 0px;padding: 0px;">
        </div>
    </body>

Selectively toggling <DIV> in browser's viewport

Tags:

html

css

ios

viewport

Vidhi

1 Answers

MKV

Recent Activity

Donate For Us