By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,454 Members | 1,795 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,454 IT Pros & Developers. It's quick & easy.

iframe gradual zoom

P: 23
I would like to gradually resize an iframe in an onmouseover event.
I can easily do it with an image, but when I try to do it with an iframe, it doesn't do anything. So first of all, is it possible to gradually zoom an iframe, and if so, what am I missing?


Here is the script I am trying to manipulate, between the head tags:

Expand|Select|Wrap|Line Numbers
  1. <script language=JavaScript>
  2.  
  3. /**** adjust these two parameters to control how fast or slow
  4. **** the iframes grow/shrink ****/
  5.  
  6. // how many milliseconds we should wait between resizing events
  7.  
  8. var resizeDelay = 10;
  9.  
  10. // how many pixels we should grow or shrink by each time we resize
  11.  
  12. var resizeIncrement = 5;
  13.  
  14. // this will hold information about the iframes we're dealing with
  15.  
  16. var iframeCache = new Object();
  17.  
  18.  
  19. /**
  20. The getCacheTag function just creates a (hopefully) unique identifier for
  21. each <iframe> that we resize.
  22. */
  23.  
  24. function getCacheTag (iframeElement) {
  25. return iframeElement.src + "~" + iframeElement.offsetLeft + "~" + iframeElement.offsetTop;
  26. }
  27.  
  28.  
  29. /**
  30. We're using this as a class to hold information about the <iframe> elements
  31. that we're manipulating.
  32. */
  33.  
  34. function cachediframe (iframeElement, increment) {
  35. this.iframe = iframeElement;
  36. this.cacheTag = getCacheTag(iframeElement);
  37. this.originalSrc = iframeElement.src;
  38.  
  39. var h = iframeElement.height;
  40. var w = iframeElement.width;
  41. this.originalHeight = h;
  42. this.originalWidth = w;
  43.  
  44. increment = (!increment) ? resizeIncrement : increment;
  45. this.heightIncrement = Math.ceil(Math.min(1, (h / w)) * increment);
  46. this.widthIncrement = Math.ceil(Math.min(1, (w / h)) * increment);
  47. }
  48.  
  49.  
  50. /**
  51. This is the function that should be called in the onMouseOver and onMouseOut
  52. events of an <iframe> element. For example:
  53.  
  54. <iframe src='onesmaller.gif' onMouseOver='resizeiframe(this, 150, "onebigger.gif")' onMouseOut='resizeiframe(this)'>
  55.  
  56. The only required parameter is the first one (iframeElement), which is a
  57. reference to the <iframe> element itself. If you're calling from onMousexxx, 
  58. you can just use "this" as the value.
  59.  
  60. The second parameter specifies how much larger or smaller we should resize
  61. the iframe to, as a percentage of the original size. In the example above,
  62. we want to resize it to be 150% larger. If this parameter is omitted, we'll
  63. assume you want to resize the iframe to its original size (100%).
  64.  
  65. The third parameter can specify another iframe that should be used as the
  66. iframe is being resized (it's common for "rollover iframes" to be similar but
  67. slightly different or more colorful than the base iframes). If this parameter
  68. is omitted, we'll just resize the existing iframe.
  69. */
  70.  
  71. function resizeiframe (iframeElement, percentChange, newIframeURL) {
  72. // convert the percentage (like 150) to an percentage value we can use
  73. // for calculations (like 1.5)
  74. var pct = (percentChange) ? percentChange / 100 : 1;
  75.  
  76. // if we've already resized this iframe, it will have a "cacheTag" attribute
  77. // that should uniquely identify it. If the attribute is missing, create a
  78. // cacheTag and add the attribute
  79. var cacheTag = iframeElement.getAttribute("cacheTag");
  80. if (!cacheTag) {
  81. cacheTag = getCacheTag(iframeElement);
  82. iframeElement.setAttribute("cacheTag", cacheTag);
  83. }
  84.  
  85. // look for this iframe in our iframe cache. If it's not there, create it.
  86. // If it is there, update the percentage value.
  87. var cacheVal = iframeCache[cacheTag];
  88. if (!cacheVal) {
  89. iframeCache[cacheTag] = new Array(new cachediframe(iframeElement), pct);
  90. } else {
  91. cacheVal[1] = pct;
  92. }
  93.  
  94. // if we're supposed to be using a rollover iframe, use it
  95. if (newIframeURL)
  96. iframeElement.src = newiframeURL;
  97.  
  98. // start the resizing loop. It will continue to call itself over and over
  99. // until the iframe has been resized to the proper value.
  100. resizeiframeLoop(cacheTag);
  101. return true;
  102. }
  103.  
  104.  
  105. /**
  106. This is the function that actually does all the resizing. It calls itself
  107. repeatedly with setTimeout until the iframe is the right size.
  108. */
  109. function resizeiframeLoop (cacheTag) {
  110. // get information about the iframe element from the iframe cache
  111. var cacheVal = iframeCache[cacheTag];
  112. if (!cacheVal)
  113. return false;
  114.  
  115. var cachediframeObj = cacheVal[0];
  116. var iframeElement = cachediframeObj.iframe;
  117. var pct = cacheVal[1];
  118. var plusMinus = (pct > 1) ? 1 : -1;
  119. var hinc = plusMinus * cachediframeObj.heightIncrement;
  120. var vinc = plusMinus * cachediframeObj.widthIncrement;
  121. var startHeight = cachediframeObj.originalHeight;
  122. var startWidth = cachediframeObj.originalWidth;
  123.  
  124. var currentHeight = iframeElement.height;
  125. var currentWidth = iframeElement.width;
  126. var endHeight = Math.round(startHeight * pct);
  127. var endWidth = Math.round(startWidth * pct);
  128.  
  129. // if the iframe is already the right size, we can exit
  130. if ( (currentHeight == endHeight) || (currentWidth == endWidth) )
  131. return true;
  132.  
  133. // increase or decrease the height and width, making sure we don't get
  134. // larger or smaller than the final size we're supposed to be
  135. var newHeight = currentHeight + hinc;
  136. var newWidth = currentWidth + vinc;
  137. if (pct > 1) {
  138. if ((newHeight >= endHeight) || (newWidth >= endWidth)) {
  139. newHeight = endHeight;
  140. newWidth = endWidth;
  141. }
  142. } else {
  143. if ((newHeight <= endHeight) || (newWidth <= endWidth)) {
  144. newHeight = endHeight;
  145. newWidth = endWidth;
  146. }
  147. }
  148.  
  149. // set the iframe element to the new height and width
  150. iframeElement.height = newHeight;
  151. iframeElement.width = newWidth;
  152.  
  153. // if we've returned to the original iframe size, we can restore the
  154. // original iframe as well (because we may have been using a rollover
  155. // iframe in the original call to resizeiframe)
  156. if ((newHeight == cachediframeObj.originalHeight) || (newWidth == cachediframeObj.originalwidth)) {
  157. iframeElement.src = cachediframeObj.originalSrc;
  158. }
  159.  
  160. // shrink or grow again in a few milliseconds
  161. setTimeout("resizeiframeLoop('" + cacheTag + "')", resizeDelay);
  162. }
  163.  
  164. </script>
  165.  


and in the iframe tag:

Expand|Select|Wrap|Line Numbers
  1.  onmouseover="resizeIframe(this, 350)" onmouseout="resizeIframe(this)"
I've also tried:

Expand|Select|Wrap|Line Numbers
  1.  onmouseover='resizeIframe(this, 350, "player.htm")' onmouseout='resizeIframe(this)'
and neither works.
Oct 9 '07 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
resizeIframe should be "resizeiframe" (lower-case i).
Nov 6 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.