Weird Thoughts From Eric's Head

Tags - Categories : All | AJAX | BUSINESS | PERSONAL | PROGRAMMING | BOOK REVIEW

The Proxy Father
The Smiths had no children and decided to use a proxy father to start their family. On the day the proxy father was to arrive, Mr. Smith kissed his wife and said, "I'm off. The man should be here soon." Half an hour later, just by chance, a door-to-door baby photographer rang the doorbell, hoping to make a sale. "Good morning, madam. You don't know me but I've come to...."

"Oh, no need to explain. I've been expecting you," Mrs. Smith cut in.

"Really ?" the photographer asked. "Well, good! I've made a specialty of babies."

"That's what my husband and I had hoped. Please come in and have a seat. Just where do we start?" asked Mrs. Smith, blushing.

"Leave everything to me. I usually try two in the bathtub, one on the couch and perhaps a couple on the bed. Sometimes the living room floor is fun too; you can really spread out."

"Bathtub, living room floor? No wonder it didn't work for Harry and me."

"Well, madam, none of us can guarantee a good one every time. But if we try several different positions and I shoot from six or seven angles, I'm sure you'll be pleased with the results."

"I hope we can get this over with quickly," gasped Mrs. Smith.

"Madam, in my line of work, a man must take his time. I'd love to be in and out in five minutes, but you'd be disappointed with that, I'm sure."

"Don't I know!" Mrs. Smith exclaimed. The photographer opened his briefcase and pulled out a portfolio of his baby pictures. "This was done on the top of a bus in downtown London."

"Oh my god!!", Mrs. Smith exclaimed, tugging at her handkerchief.

"And these twins turned out exceptionally well when you consider their mother was so difficult to work with." The photographer handed Mrs. Smith the picture. "She was difficult ?" asked Mrs. Smith. "Yes, I'm afraid so. I finally had to take her to Hyde Park to get the job done right. People were crowding around four and five deep, pushing to get a good look."

"Four and five deep?" asked Mrs. Smith, eyes widened in amazement.

"Yes," the photographer said.

"And for more than three hours too. The mother was constantly squealing and yelling. I could hardly concentrate. Then darkness approached and I began to rush my shots. Finally, when the squirrels began nibbling on my equipment, I just packed it all in." Mrs. Smith leaned forward.

"You mean they actually chewed on your, eh......equipment ?"

"That's right. Well madam, if you're ready, I'll set up my tripod so that we can get to work."

"Tripod??", Mrs. Smith looked extremely worried now.

"Oh yes, I have to use a tripod to rest my Canon on. It's much too big for me to hold while I'm getting ready for action. Madam ? Madam?..... Good Lord, she's fainted!"

Force Window Min Size
Well I normally do not like to talk about things that I can not stand to find on a webpage, but I guess there are times when this can be useful. A post here on the JavaRanch forums asked to not allow the window to go under a certain size. Well at first it looks rather easy. Detect the window size and resize it. You will fire it onload and onresize. Well lets start out basic. Lets force a window to always be a certain size. For instance make the window 400px X 400px. This is just like opening up a pop up window with the resize ability set to false.

function SetSize(){
  window.resizeTo(400,400);
}
Now you can call the function with the body tag
<body onload="SetSize()" onresize="SetSize()">
So now you have the window set to a size, but we want to force it to only resize if the window is smaller then a minimum size. First thing we need to do is set some minimum sizes
var minW = 400;
var minH = 400;
Now we need to create a function to grab the width and height of the current browser. Now there are if statements in this, if you want to know why you need them, look on page 262 of my book since it explains it and I am too lazy right now! The only difference between this code and the one in the book is I am returning the width and height values separately.
function getPageWH(xPart){  
  if( typeof window.innerWidth  == 'number' ) {
    pageW = window.innerWidth;
    pageH = window.innerHeight;
  } 
  else if(document.documentElement && 
    document.documentElement.clientWidth ) {
    pageW = document.documentElement.clientWidth;
    pageH = document.documentElement.clientHeight;
  } 
  else{
    pageW = document.body.clientWidth;
    pageH = document.body.clientHeight;
  }
  if(xPart=="w")return pageW;
  else return pageH
}
Now we need to create a function that resizes the window. The first part we are looking at determines with the window is smaller then out defined values. If they are, it triggers a flag that says the window needs to be resized.
function VerifySize(){
  var resizeMe = false;
  var winW = parseInt(getPageWH("w"));
  var winH = parseInt(getPageWH("h"));
  if(minW>winW){winW=minW;resizeMe=true;}
  if(minH>winH){winH=minH;resizeMe=true;}
The next part of the code resizes the window if the flag has been flipped.
  if(resizeMe){
    window.resizeTo(winW,winH);
Now most people would think that the line above is fine, but that is not the case. If we left it like this, the window would continually resize. until it hit our minimum dimension of 400X400. The reason is because when you resize the window, it includes the chrome (part of the window that contains the statusbar,titlebar, etc.) On the other hand, the getPageWH function returns the space available to your web page to use. In does not account of the toolbars. So now we need to account for it.

It is rather easy to do this. We just need to grab the new width and height of the window and find the difference from the values we are looking at. Apply the difference and you have the set size you were after.
    var winW2 = winW - parseInt(getPageWH("w"));
    var winH2 = winH - parseInt(getPageWH("h"));
    window.resizeTo(winW + winW2,winH + winH2);
  }
}
Below is a basic example all put together:
<html>
  <head>
    <script type="text/javascript">
      var minW = 400;
      var minH = 400;
 
      function getPageWH(xPart){  
          if( typeof window.innerWidth  == 'number' ) {
            pageW = window.innerWidth;
            pageH = window.innerHeight;
          } 
          else if(document.documentElement && 
                     document.documentElement.clientWidth ) {
            pageW = document.documentElement.clientWidth;
            pageH = document.documentElement.clientHeight;
          } 
          else{
            pageW = document.body.clientWidth;
            pageH = document.body.clientHeight;
          }
          if(xPart=="w")return pageW;
          else return pageH
        }
 
 
        function VerifySize(){
          var resizeMe = false;
          var winW = parseInt(getPageWH("w"));
          var winH = parseInt(getPageWH("h"));
          if(minW>winW){winW=minW;resizeMe=true;}
          if(minH>winH){winH=minH;resizeMe=true;}
 
          if(resizeMe){
            window.resizeTo(winW,winH);
            var winW2 = winW - parseInt(getPageWH("w"));
            var winH2 = winH - parseInt(getPageWH("h"));
            window.resizeTo(winW + winW2,winH + winH2);
          }
          document.getElementById("blah").innerHTML = "(" + parseInt(getPageWH("w")) + "," + parseInt(getPageWH("h")) + ")";
 
        }
      </script>
  </head>
  <body onload="VerifySize()" onresize="VerifySize()">
    <div id="blah"></div>
  </body>
</html>  
Now for the part I always love to say. Browser's do have the ability to block the auto-resizing of web pages. Do not force this on a user, a lot of people will not go back to a site that controls there browser. Also JavaScript can be disabled!

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages


OMG This article saved my freaking life! I was detecting the window resizing below my minimum just fine (for my purposes I'm only limiting the x direction). But I could NOT for the life of me figure out how to reliably resize the window to compensate for the toolbars and all that other stuff. Resizing it twice was the answer! Thank you thank you thank you!! I spent half a day googling for this and you are the only one who solved the problem for me. Woohoo for you.
Thanks so much for this script. I've spent a lot of time researching how it was suppose to be done. I suspected it was Javascript but I couldn't find a damn book that even featured this lesson! This has been a life saver!


Add a comment

Title
Body
HTML : b, i, blockquote, br, p, pre, a href="", ul, ol, li
Math Quiz 7 + 4 = (Helps stop blog spam)
Name
E-mail address
Website
Remember me Yes  No 

E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).

TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1108571848000