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

iFrame: how to display specific anchor area of external website

P: 1
Would like to display a specific area of an external website using iFrames.

1) Auto scrolling to target area. Display specific name position.
2) By clicking the name (link). scrolling to target area.

Googling for any solutions did not help me so far.

Any one may help to complete this on how to auto scrolling?

Example: http://www.iwdn.net/showthread.php?t=6376

Modified the code but still not working well.
i.e. Question
On start - Auto scroll to "WEATHER AROUND THE WORLD"
On Click - Scroll to "WEATHER MAPS"
or manually scroll use mouse/keyboard

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.  
  4.  
  5. <head>
  6.    <title>iframe scroll test</title>
  7.  
  8.  
  9. <style type="text/css">
  10. <!--
  11. #theiframe{
  12.     width:800px;
  13.     height:330px;
  14.     border:0px solid #000; 
  15.     overflow:hidden;
  16.     margin-left:0px;
  17.     margin-top:0px;   
  18. }
  19. #theiframe iframe {
  20.     width:1280px;
  21.     height:1280px;
  22.     margin-left:-253px;
  23.     margin-top:-200px;   
  24.     border:0 solid;
  25. }
  26.  
  27. -->
  28.  
  29.  
  30. </style>
  31.  
  32.  
  33.  
  34. </head>
  35. <body>
  36.    <p>Sample<br>text<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br></p>
  37.  
  38.    <p>Sample<br>text<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br></p>
  39.    <p>Sample<br>text<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br></p>
  40.  
  41.    <p><a href="javascript:void(0)" onclick="iframescroll()">iframescroll(World)</a></p>
  42.    <p><a href="javascript:void(0)" onclick="iframescroll(Map)">iframescroll(Map)</a></p>
  43.  
  44. <div id="container">
  45.    <iframe name="theiframe" id="theiframe" src="http://weather.yahoo.com/?w=2459115" scrolling="yes"></iframe>
  46. </div>
  47.  
  48.    <script>
  49.       function getScrollPos() {
  50.          var r={x: 0, y: 0};
  51.          if(typeof(window.pageYOffset)=='number'){r.y=window.pageYOffset;r.x=window.pageXOffset}
  52.          else if(document.body.scrollLeft || document.body.scrollTop){r.y=document.body.scrollTop;r.x=document.body.scrollLeft}
  53.          else if(document.documentElement&&document.documentElement.scrollLeft!==undefined){r.y=document.documentElement.scrollTop;r.x=document.documentElement.scrollLeft}
  54.          return r;
  55.       }
  56.       function iframescroll(){
  57.          var sp=getScrollPos();
  58.          var i=document.getElementById('theiframe');
  59.          i.contentWindow.location.hash='Weather around the world';
  60.          scrollTo(sp.x,sp.y);
  61.       }
  62.    </script>
  63.    <p>Sample<br>text<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br></p>
  64.  
  65.    <p>Sample<br>text<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br></p>
  66.    <p>Sample<br>text<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br></p>
  67.  
  68. </body>
  69. </html>
  70.  
  71.  
Jun 8 '12 #1
Share this question for a faster answer!
Share on Google+

Post your reply

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