473,240 Members | 1,436 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,240 software developers and data experts.

iframe gradual zoom

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
1 8094
acoder
16,027 Expert Mod 8TB
resizeIframe should be "resizeiframe" (lower-case i).
Nov 6 '07 #2

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

Similar topics

2
by: apk | last post by:
Hi All, I am currently working on a project that displays preview of a jpeg in an iframe. we can edit this preview - like increasing its zoom level and changing pages , images etc. This works...
0
by: davide rocchelli | last post by:
I have found a probable bug when you draw with GDI. Look this simple code Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint ...
2
by: Mo Ade via .NET 247 | last post by:
How do I write code to include a zoom feature in my project so that when my Vb Form loads an image I can click in my main menu zoom in or zoom out? -------------------------------- From: Mo Ade ...
1
by: adobefriedman | last post by:
I have an interactive flash map application that use javascript Flash gateway and asp to identify sales reps worldwide. Upon zooming into a particular country, an iframe panel slides out and displays...
3
by: jnag | last post by:
I am trying to implement font changer, where I have links on the banner of the site and when the user clicks on the links, the font size of the page has to change. I tried...
3
polymorphic
by: polymorphic | last post by:
I have succeeded in embedding PDF files in a dynamic iframe. The problem is that I need the PDF to cache. If the PDF remains the same from page load to page load then the pdf is somehow cached with...
0
by: murry19830507 | last post by:
i want creat an web application(c#.net),which contains an image and one radiobutton list with 3 radiobuttons(zoom in ,zoom out ,zoom window) when user checked on zoom in imge has to be zoom inthe...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.