title: Is there a way to combine $(document).ready and $(window).resize together so they call only 1 function?
body: <p>i have the following code below and somehow everytime i run the file, the $(document).ready will call the    showViewportSize(); and will print 1 set of 10 video. Next,  when the window resize although my video are printed out with the new resize size, it print another set of 10 videos after the first set. It is  not overwriting the videos produce from the$(document).ready!!  Could anyone please help me on how should i re-edit this so that when the document load, the video will print and when is resize, the video will resize dynamically but not print another time when is resize.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script type="text/javascript" src="http://code.jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="mediaelement-and-player.min.js"&gt;&lt;/script&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;div id="videoHolder"&gt;&lt;/div&gt;
  &lt;script  type="text/javascript"&gt;
  
   window.oncontextmenu = function() {
      return false;
    };
  
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  
      }
    else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
  
  
      xmlhttp.open("GET","amk6.xml",false);
      xmlhttp.send();
      xmlDoc=xmlhttp.responseXML;
  
  
  var videoheight = xmlDoc.getElementsByTagName("height");
  var videowidth = xmlDoc.getElementsByTagName("width");
  var numcameras=xmlDoc.getElementsByTagName("CameraCount");
  var vidht =  videoheight[0].childNodes[0].nodeValue ;
  var vidwh =  videowidth[0].childNodes[0].nodeValue ;
  var numCam = numcameras[0].childNodes[0].nodeValue;
  var cameraID = xmlDoc.getElementsByTagName("CameraID");
  var title = xmlDoc.getElementsByTagName("title");
  var type = xmlDoc.getElementsByTagName("type");
  var vidtype = type[0].childNodes[0].nodeValue;
  &lt;!-- document.write('&lt;h2&gt;vidheight:&lt;/h2&gt;'+ vidht);
  &lt;!-- document.write('&lt;h2&gt;vidwidth:&lt;/h2&gt;'+ vidwh); --&gt;
  &lt;!-- document.write('&lt;h2&gt;numCam:&lt;/h2&gt;'+ numCam); --&gt;
   --&gt;
  var scrht;
  var scrwh;
  var rscale;
  var numCols;
  var numRows;
  var numCells;
  var boxht;
  var boxwh;
  
  
  $(document).ready(function(e) {
     showViewportSize();
  });
  $(window).resize(function(e) {
     showViewportSize();
  });
  function showViewportSize() {
     scrwh = $(window).width();
     scrht = $(window).height();
       rscale = 1.0;
       numCols = Math.floor(scrwh/(rscale*vidwh));
       numRows = Math.floor(scrht/(rscale*vidht));
       numCells = numRows * numCols;
       while((numCells &lt; numCam)&amp;(rscale &gt; 0.1)){
         rscale -= 0.02;
           numCols = Math.floor(scrwh/(rscale*vidwh));
           numRows = Math.floor(scrht/(rscale*vidht));
           numCells = numRows * numCols;
       }
       if (numCells &gt;= numCam)
       {
              boxwh = Math.floor(rscale*vidwh);
              boxht = Math.floor(rscale*vidht);
          }
          else
          {
              boxwh = vidwh;
              boxht = vidht;
          }
  for(i=0;i&lt;=cameraID.length;i++) {
  
      var CamID =  cameraID[i].childNodes[0].nodeValue ;
  
      $('#videoHolder').append('&lt;video height="' + boxht + '"' + 'width="' + boxwh + '"'  
      + 'title="' + CamID + '"' + 'autoplay loop &gt;&lt;source src="' + CamID + '.'
       + vidtype + '"' + 'type="video/' + vidtype + '"&gt;&lt;/source&gt;&lt;/video&gt;');
  }
  
  
     $('#width').text(scrwh);
     $('#height').text(scrht);
       $('#scale').text(rscale);
       $('#rows').text(numRows);
       $('#cols').text(numCols);
       $('#boxwidth').text(boxwh);
       $('#boxheight').text(boxht);
  
  
  
  }
  
  
  &lt;/script&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p></p>