/    Sign up×
Community /Pin to ProfileBookmark

Internal Navigate

I need help to use a javascript to navigate between the different segments of a HTML file.
What I want to do is:
1.I have a HTML frame, in the top frame, it contains two button “Next” and “Previous”;
2.In the Bottom frame, it is a normal html file like:
This is first one;
This is second one;
This is third;
This is end;
3.What I want to do is if I click the Next button in top frame, the cursor will go to first sentence (just like an internal link), click again, go to second sentence, if I click “Previous”, then it go back to first sentence again.
4.To do that, I think I need to first add some unique id for each sentence, I add something like <meta name=”a1”> <meta name=”a2”>, then add a javascritp code in top frame.

My top frame – button.html looks like:

<html>

<head>
<SCRIPT LANGUAGE=”JavaScript”>

<!– Begin
function goToSeg() { need to add real code for this function}
// End –>
</script>
</head>

<body>
<form>
<p align=”right”>
<input type=button value=”Previous” onClick=”goToSeg()”>
<input type=button value=”Next ” onClick=”goToSeg()”>

</form>

<p>&nbsp;<p>

</body>

</html>

And the bottom frame – test.html looks like

<html>

<head>

<title>Test</title>

</head>

<body>

<meta name=”a1″> 1. This is first one.</meta>
<meta name=”a2″> 2. This is second one. </meta>
<meta name=”a3″> 3. This is third one. </meta>

</body>

</html>

Now, can anybody tell me how to right a javascipt function to navigation the different sentence (let the cursor to the sentence inside meta tag) in bottom html page? Or the way I use for this solution (put the meta in the sentence I want to navigate) is not the best way.
Any help will be great appreciated!

Andrew

to post a comment
JavaScript

14 Comments(s)

Copy linkTweet thisAlerts:
@andrewlymauthorDec 30.2002 — Hi, Dave

Think you very much for your help. Your solution seems like a feasible one. but there still has a problem.

You suggest me use anchor before the sentence I want to navigate, then use three javascripts function to navigate it. But the HTML file I provide is just an example, there may be 100 or 200 sentences need be navigated (acutally I do not know the number), in other words, the javascript should be a dynamic function, it must first search whole HTML page, find the first anchor "a1" when the user click "Next button", then go to next one, etc. And when user click "previous", the cursor should go back.

Actually, I am a newer to Javascript, do you think it is feasible to do it or not?

Thanks
Copy linkTweet thisAlerts:
@VladdyDec 30.2002 — Here is the approach I would take:

1. Name the anchors in HTML page you are navigating through, as Dave suggested.

2. Have onload event for the frame to do the following:

- get all the anchor tags.

- if anchor tag has the name attribute, add it to anchors array you will use for navigation

3. Have a "global" variable that stores the current position when navigating.

4. Associate functions with "next" and "previous" events that would:

- increment/decrement the current index

- make sure it is within the range

- set frame location to the anchor which name you get from the array at the current index.

As a result you have navigation INDEPENDENT from the content you are trying to navigate through; your anchor names can have a meaning - you are not bound to do "a1", "a2", "a3", ... .

You can get fancy and use the array of names to dynamically generate the table of content.

Just curious, what exactly your application is? Will you be using these anchors to point to header elements or consecutive sentences?
Copy linkTweet thisAlerts:
@VladdyDec 31.2002 — Andrew, following are some code snippets that should get you going. Try them out, see how it works. I can not debug them without your actual pages (I mean I could, but that would be too much time).

  • 1. Function to call with IFRAME onload event:
    [CODE] [SIZE=1]
    var anchorList = new Array();
    var iframeObject = null;
    var iframeFile = '';

    function createAnchorList(iframe)
    { iframeObject = iframe;
    iframeFile = iframe.location.href;
    allAnchors = iframe.getElementsByTagName('a');
    i=0;
    for(j=0; j<allAnchors.length; j++)
    if(allAnchors[j].name.length>0)
    anchorList[i++] = allAnchors[j].name;
    return;
    }

    ....

    <iframe onload="createAnchorList(this)" ...
    [/SIZE] [/CODE]



  • 2. Function assosiated with navigation elements
    [size=1]
    var currentPosition = 0;

    function navigate(direction)
    { if(!iframeObject) return;
    currentPosition += direction;
    if(currentPosition &lt; 0)
    currentPosition = 0;
    if(currentPosition &gt;= anchorList.length)
    currentPosition = anchorList.length - 1;
    iframeObject.location.href = iframeFile + '#' + anchorList[currentPosition];
    return;
    }

    ...

    &lt;a href="javascript: navigate(-1);"&gt;Back&lt;/a&gt;
    &lt;a href="javascript: navigate(1);"&gt;Forward&lt;/a&gt;
    [/size]
  • Copy linkTweet thisAlerts:
    @andrewlymauthorDec 31.2002 — Hi, Vladdy

    Thank you very very much for your javascript code. I basically understand the logic you use for this code. (I know other program language, but I am totally a newer to javascript and web design).

    I encounter some difficult to put your code to my HTML page.I also noticed you use iframe, but actually, for my problem, I can not use iframe. I need to use a simple frameset, the top frame is link to a navigation html page and bottom one is the real content html page.

    I attched a zip file (to_vladdy.zip) for you, the zip file contains: 1. button.html which is my naviagation bar. 2. the test.html which is the content html page 3. frameset.html page, it is frameset.

    I have to ask you anohter favor, I am even not sure where should I put your two javascript code, (I should put it in button.html, frameset or test.html?). Would you very kindly please download the zip file, then put the code to the right html page?

    I am very very grateful for your help.

    Thanks a lot again!

    Andrew

    [upl-file uuid=1e681394-13f7-4100-8200-318f77adb2f9 size=2kB]to_vladdy.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @VladdyJan 01.2003 — I never used frames (in a frameset) even back when they were a fad. I do not see a reason why you can not use an ifame. Instead of having three files: frameset, navigation, content; you put your navigation, javascript and everything else in one file and the page you are navigating through in an iframe. Makes much more sense this way since it establishes parent - child relationship given by application logic.
    Copy linkTweet thisAlerts:
    @khalidali63Jan 02.2003 — Hello Andrew.

    is ur code problem fixed?
    Copy linkTweet thisAlerts:
    @andrewlymauthorJan 02.2003 — Vladyy and Khalidali63,

    Thanks very much for your time and help. Actually, my problem is, my content HTML files will come from another source, for example, I will get 300 content HTML file from somewhere else, and it is impossilbe for me put navigation, javascript code to these files once I got them. It is easy for me first create a navigation html file and frameset html file ( I will know the content html file name first, so I can create a frameset file for each html file in advance. It meams I may need to create 300 frameset file, I know there may have some function can dynamically load my content HTML file to one frameset, but I do not know how to do it).

    In this situation, seems like I can not use iframe. Any help will be grealy appreciated!

    Thanks
    Copy linkTweet thisAlerts:
    @khalidali63Jan 02.2003 — Hello Andrew,

    Below is the complete example according to the problem you mentioned ( it doesn't use IFrames)

  • 1. your main page that has frameset declarations


  • <html>

    <head>

    <title>Untitled</title>

    <!-- frames -->

    <frameset rows="24%,*">

    <frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">

    <frame name="bottom" src="bottom.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">

    </frameset>

    </head>

    <body>

    </body>

    </html>

    2.your top.html page that will go in top frame

    <html>

    <head>

    <title>Untitled</title>

    <SCRIPT LANGUAGE="JavaScript">

    var currntPos = 0;

    var anchorsList = new Array();

    var ctr=0;

    var prnt;

    function createAnchorList(){

    prnt= parent.frames[1];

    var objects = prnt.document.getElementsByTagName("a");

    for(x=0;x<objects.length;x++){

    var doc = prnt.document.all("a"+(x+1))

    anchorsList[x] = "#"+(doc.name).toString();

    }

    }

    onload = createAnchorList;

    var loc;

    function goToSeg(direction) {

    if(direction==1 && ctr>=0 && ctr<anchorsList.length){

    if(ctr==0){

    prnt.window.location.href = 'bottom.html'+anchorsList[ctr];

    ++ctr;

    }else{

    prnt.window.location.href = 'bottom.html'+anchorsList[ctr];

    ++ctr;

    }

    }else if (direction==-1 && ctr>=0 && ctr<anchorsList.length){

    if(ctr==0){

    prnt.window.location.href = 'bottom.html'+anchorsList[ctr];

    }else{

    ctr--;

    prnt.window.location.href = 'bottom.html'+anchorsList[ctr];

    }

    }else{

    //alert("End of document reached = ctr = "+ctr);

    if(ctr>=anchorsList.length){

    ctr=(anchorsList.length-1);

    }

    }

    }

    </script>

    </head>

    <body>

    <form>

    <p align="center">

    <input type=button value="Previous" onClick="goToSeg(-1)">

    <input type=button value="Next " onClick="goToSeg(1)">

    </form>

    </body>

    </html>

  • 3. your bottom.html page that will go in the "bottom" frame


  • <html>

    <head>

    <title>Bottom</title>

    </head>

    <body>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <a name="a1"> 1. This is first one.</a><br>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <a name="a2"> 2. This is second one. </a><br>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <a name="a3"> 3. This is third one. </a> <br>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

    </body>

    </html>

    Try this and let me know if you stil have n e problems

    Khalid
    Copy linkTweet thisAlerts:
    @andrewlymauthorJan 02.2003 — Hi, khalidali63

    First, thank you very much for your kindly help.

    I created 3 html page according to you code, but when I click the "Next" and "Previous" button in the top.html page, I did not see the cursor go to the corresponding segment in the bottom.html page. Actually, when I click "next" and "previous", it did not do anything.

    Would you please double check it?

    Thanks
    Copy linkTweet thisAlerts:
    @khalidali63Jan 02.2003 — Andrew, you have to make sure that the page that goes in top frame is named "top.html"

    and the page that goes in the bottom frame is named "bottom.html"

    and then save them all three pages all together

    1.the frames page

    2. the "top.html"

    3.the "bottom.html"

    I have exactly like that and it works...or if u want I can zip all three pages and email to u?

    Khalid
    Copy linkTweet thisAlerts:
    @andrewlymauthorJan 02.2003 — Hi, khalidali63

    Actually I did exactly as you said: I create three pages: main.html, top.html and bottom.html. I check it again, it seems still does not work.

    And, there are two things I want to ask you and get your suggestion:

    1.Actually, I need use some other anchor name, a1 a2 a3 is just a sample. I tried to change the anchor name from a1 to something else in bottom.html page, I saw some run time error.

  • 2. For the bottom.html page, there should be two kinds of anchor, one is the normal anchor; another is the anchor added by me, like a href name="seg1". Can the script you developped identify these two different anchor? (The next and previous button should only go to second type of anchor).


  • Sorry for trouble, although for me, it seems like mission impossible, I believe you must know how to do it.

    Thanks a lot again. My email is [email][email protected][/email], if can reach me at this email if you like.

    Andrew
    Copy linkTweet thisAlerts:
    @khalidali63Jan 02.2003 — Hello Andrew,

    I have just emailed you the solution

    Khalid
    Copy linkTweet thisAlerts:
    @andrewlymauthorJan 07.2003 — Hi, khalidali63

    Your solution works perfect. Now I make a small change:

    I added new frame to te left, listing the file names When the user clicks on the file name, load the page in the bottom frame. Now, I know I need to modify the script in top.html because the html page name in right bottom frame is dynamic. I attach a zip file for this.

    Would you please take a quick look about that?

    Thanks

    [upl-file uuid=546707d8-09cd-43e2-83f9-e153a69cd1bf size=4kB]to_ali.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @khalidali63Jan 08.2003 — I have emailed you the solution

    Khalid
    ×

    Success!

    Help @andrewlym spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...