How to zoom container div and all its contents to a specific size?

css, html, javascript, jquery

Solution

you can use css transform property

     transform: scale(0.1);
     transform-origin: 0% 0% 0px;

have a look at the zooming functionality i have created

function setZoom(zoom,el) {
      
      transformOrigin = [0,0];
     el = el || instance.getContainer();
     var p = ["webkit", "moz", "ms", "o"],
            s = "scale(" + zoom + ")",
            oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

     for (var i = 0; i < p.length; i++) {
         el.style[p[i] + "Transform"] = s;
         el.style[p[i] + "TransformOrigin"] = oString;
     }

     el.style["transform"] = s;
     el.style["transformOrigin"] = oString;
      
}

//setZoom(5,document.getElementsByClassName('container')[0]);

function showVal(a){
   var zoomScale = Number(a)/10;
   setZoom(zoomScale,document.getElementsByClassName('container')[0])
}

.container{
  width:500px;
  height:500px;
  background:blue;
}

<input id="test" min="1" max="10" value='10' step="1" onchange="showVal(this.value)" type="range"/>
<div class="container">

</div>

Problem

I created an HTML page with 100% (browser) width which have lot of contents. Contents are fixed in page and their sizes are both in pixels & percentages. Now I need to add advertisement panel of 20% browser width. And want to zoom the page container and all its contents INCLUDING TEXT to 80% (like the zooming available in all web browsers but it should be an internal zooming). Unfortunately my page is not responsive and I do not want to redevelop it or resize all its contents from scratch. Is there any zooming facility available in HTML?

Original source