Friday, March 6, 2009

[CASE] IFrame with autoscrolling to selected or clicked link

I received a case with requirement of an Iframe which held the content of the MENU in the main page, that needs to anchor back to the selected/clicked link after the redirection had proceed.


I have 2 files:


menu.html ---- that held the menu of the mainPage.php


mainPage.php ---- display the main contents clicked/selected



The idea is simple :


  1. Define anchor points for any link in menu.html
  2. When a particular link in menu.html is clicked, send the anchor point value of that link to mainPage.php
  3. mainPage.php get the anchor point value sent by menu.html, and redefine the iframe with src=”menu.html#anchor point value”.
This is how i get an iframed menu that will automatically scroll down to clicked subject. 


Example code is at below: 

mainPage.php 

menu.html
  1: <script type="text/JavaScript" language="javascript">
  2: //Check parent URL for Act
  3: //This javascript is for the purpose of HIGHLIGHT the selected link
  4: var url=parent.location.href;
  5: var url2=url.toString();
  6: var str="";
  7: if(url2.indexOf("?")!=-1){    //url with a "?"
  8:     var ary=url2.split("?")[1].split("&");
  9:     for(var i in ary) {     
 10:     str+=ary[i].split("=")[0]+":"; //variable name
 11:     str+=ary[i].split("=")[1]+"\n"; //variable value
 12:     }
 13: }
 14: </script>
 15: <html><head> </head>
 16: <body bgcolor="transparent" topmargin="0" style="overflow-x: hidden;">
 17: <ul class="menuitem">
 18: 
 19: <!-- 
 20:  As you can see here, i change the color of the selected link to YELLOW
 21:  -->
 22: 
 23: <li><a href="mainPage.php?Act=01" name="#01" target="_parent" class="menuitem">
 24: <script>if(str==1) document.write("<font color=yellow>");
 25: </script>
 26: Link1
 27: </a></li>
 28: 
 29: <li><a href="mainPage.php?Act=02" name="#02" target="_parent" class="menuitem">
 30: <script>if(str==2) document.write("<font color=yellow>");
 31: </script>
 32: Link2
 33: </a></li>
 34: 
 35: <li><a href="mainPage.php?Act=03" name="#03" target="_parent" class="menuitem">
 36: <script>if(str==3) document.write("<font color=yellow>");
 37: </script>
 38: Link3</a></li>
 39: 
 40: <li><a href="mainPage.php?Act=04" name="#04" target="_parent" class="menuitem">
 41: <script>if(str==4) document.write("<font color=yellow>");
 42: </script>
 43: Link4</a></li>
 44: 
 45: <li><a href="mainPage.php?Act=05" name="#05" target="_parent" class="menuitem">
 46: <script>if(str==5) document.write("<font color=yellow>");
 47: </script>
 48: Link5</a></li>
 49: 
 50: <li><a href="mainPage.php?Act=06" name="#06" target="_parent" class="menuitem">
 51: <script>if(str==6) document.write("<font color=yellow>");
 52: </script>
 53: Link6</a></li>
 54: 
 55: </ul>
 56: </body>
 57: </html>

0 comments:

Post a Comment