Creating a link to a bookmark inside an iFrame from another page
[ Studied ...calculating..., 6 thanks ]
As usual, and as you've already guessed, this one is another "mind boggling" thing I wasn't able to find an answer to on any of the forums, tutorials, etc. So I had to come up with my own solution.
"You're st!@id", maybe you will say, "there are plenty of "js." modules that are doing this, one obvious example being the "slideto" ". Well it's true; but all this javascripts are heavily conflicting with the other scripts, they are using flash or any other memory variables that are impacting on your browser, or they don't have quite the expected result.
The only downside of my idea is that you have to use a "mother frame", maybe a fake one, frame that has to contain the pages you want to use - the calling page, and the one with the iFrame which will contain the bookmark you want to go to.
My idea is actually quite simple: what I'm using is a variable declared in the top frame, and of which value changes with the link I'm clicking in the calling frame; then, when loading the targeted page, I'm adding this variable to the name of the page that is loading into the iFrame, so the iFrame will be shown starting from that point.
Yeah, I know that you understood everything...
Don't worry, I will explain it better, with examples.
Ok... let's say that by clicking the "go to x" link on "Page One", I want to open the "Chapter X" chapter from an iFrame, but I want this iFrame to be inside of it's parent page, called "Page Two". So here's what I am doing:
First of all, I have a framed page with two frames: "heading" and "content"; while "heading" is always the same, "content" is changing all the time, on selection. So, for starters, in the "content" frame I have loaded the first page.
|
<html>
<frameset framespacing="0" border="0" frameborder="0"
cols="133"> </html> |
|
|
|
The next step is to set the link to work, by making it to open "Page Two" on the same frame when clicked. Remember, "Page Two" is the one that contains the "Chapters" iFrame with the bookmark we want to get to, and we will open it in the same frame ("_self"). |
||
|
The example from the right side is opening the
page with the iFrame - here I'm trying, somehow, to open it by using the bookmark
- maybe I'll get lucky....
|
||
|
<html> ....... <body> ....... <a target="_self" href="Page_Two.htm#x">go to x</a> ....... </body> ....... </html> |
||
| Example - Not quite what we want ! | ||
|
As you can see, the magic didn't happen, and the
page opened starting with the top of the iFrame, wich is "Chapter One". |
||
|
Ok...time to apply my method....
First, in the header page (the "Common_Title.htm") define a variable, let's say "bookmarkkeeper", in the "<head> section:
|
||
|
<html> ....... <head> ....... <script> var bookmarkkeeper='a' <script> ....... </head> ....... </html> |
||
|
In the page containing the link (the "Page_One.htm"), on the link add the "onclick="top.header.bookmarkkeeper='x'" code - by doing this you are giving the value "x" to the variable from the header page.
|
||
|
<html> ....... <body> ....... <a target="_self" href="Page_Two.htm#x" onclick="top.header.bookmarkkeeper='x'">go to x</a> ....... </body> ....... </html> |
||
|
And, finally, in the page containing the iFrame (the "Page_Two.htm"), before and while the iFrame is called, add the following codes:
|
||
|
<html> ....... <body> <script>
namechange='Chapters.htm#'+top.header.bokmarkkeeper
Your browser does not support inline frames or is currently configured
not to display inline frames.</iframe> ....... </body> ....... </html> |
||
|
- by
doing this, you are giving a new name to your iFrame, namely you specify
the bookmark, thus "tricking" the parent page into loading the iFrame
from the bookmark.
|
||
|
And...voila.... witchcraft happened, and, as you can clearly see from the example, the page is opening with the iFrame jumping automatically to the desired chapter ! |
Example - That's the one ! | |
For the end, I want to make a small suggestion: to avoid any of your contained pages to be opened by themselves, which will result in errors due the fact that they won't have the "header" page containing the variables, you may insert this little code in the beginning of the "body" section of your framed pages:
|
<html> ....... <body> <script> ....... </body> ....... </html> |
Don't forget to replace "index.htm" with the name of your main page !
Congratulation for sorting out the link ! If there is something you didn't understand or anything else, just leave a comment !
