?
Solved

Enlarge Frame in corrrect scroll position

Posted on 2003-03-28
12
Medium Priority
?
398 Views
Last Modified: 2012-06-21
I have a page, which is three frames: a title page, a table of contents page, and a text page. In the table of contents page I have a button that enlarges the text page to a full page.

This is the code:

<script language=javascript>

function enlarge()
{
    top.window.location.href=top.frames['right'].location.href
}

</SCRIPT>

<form>
  <p align="center"><input type="Button" value="Full Page" name="Bt1" onClick=enlarge();></p>
</form>

This works fine, but it opens the text page at the beginning of the page. If the reader has, for instnace, scrolled down in the page, the scroll position is lost. What I want is to have the page open to scoll position it is presently at.

I know that window.document.body.scrollTop gets the scroll position, but how to fit that into the code so that it gets the scroll position of the text (called 'right') frame page, instead of the TOC page, where the code is, and how can I feed that information to the enlarge function?

WillP

I've done some work on this myself and so I have a better idea where the problem is. Here's the revised code and the new problem:

<script language=javascript>

var position

function getScPos()
{
     position = parent.frames['right'].document.body.scrollTop;
     enlarge(position);
}

function enlarge(position)
{
         
     top.window.location.href=top.frames['right'].location.href;

     ???????.scrollTo( 0, position);
         
}


</SCRIPT>


<form>
  <p align="center"><input type="Button" value="Full Page" name="Bt1" onClick=getScPos();></p>
</form>

The problem is that as soon as the line top.window.location.href=top.frames['right'].location.href; is executed I'm no longer I'm on a new page, and so the code after this commmand, which would scroll the page, is not executed.

So the question is: is it somehow possible to pass the sroll imfromation and scroll the page when the page is opened?

WillP

I will increase the point value to 400.

WillP

0
Comment
Question by:WillP
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8235537
WillP,
A little advice. It will be much easier to simply 'appear' to reload the page. That is to say, make the other two frames 0% and that frame 100%, in effect doing what you want but not reloading the frame. To do this add this:

<a href="#" onClick="javascript:parent.fset.cols='0%,100%,0%'">Hide other frames</a>

Keep in mind you'll have to name the frameset, like so:

<Frameset name='fset' cols="20%,50%,30%">
<Frame src="a.htm">
<Frame src="b.htm">
<Frame src="c.htm">
</frameset>

Let me know if this works for you.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8235550
Sorry, in my haste I didn't realize the fact that you use a button. So basically do this:

<form>
 <p align="center"><input type="Button" value="Full Page" name="Bt1" onClick=="parent.fset.cols='0%,100%,0%';"></p>
</form>


Also, if you need to do rows instead of columns just use this:

parent.fset.rows="0%,100%,0%"

Or if you have both rows AND columns, say:

-----------------------
|______________________|
|    |                 |
|    |                 |
|    |  TABLE OF       |
|    |    CONTENTS     |
|    |                 |
|____|_________________|


use this:

onClick="parent.fset.rows='0%,100%';parent.cols='0%,100%';"

(THat last code has not been tested but I don't see any reason why it shouldn't work.)
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8235554
YIKES! That table was perfect when I made it but came out looking awful! Anyways it basically showed a top row with two columns beneath it...
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:WillP
ID: 8237423
Okay, I thought of this idea myself, but didn't know how to execute it. Anyway, I'm having trouble making it work. As I described, I have one row and two columns: this is the frame code:

<html>

<head>
<title>index</title>

</head>

<frameset name="fset">
<frameset rows="89,*">
  <frame name="banner" scrolling="no" noresize target="contents" src="Titles.htm">
  <frameset cols="150,*">
    <frame name="contents" target="main" src="TOC.htm">
    <frame name="main" src="Picture.htm">
  </frameset>
  <noframes>
  <body>

  <p>This page uses frames, but your browser doesn't support them.</p>

  </body>
  </noframes>
</frameset>

</html>

And this is my button code:

<form>
  <p align="center"><input type="Button" onClick="parent.fset.rows='0%';parent.cols='0%,100%';" value="Full Page" name="Bt1"></p>
</form>

As you can see, I listed them in the button code in the same way they appear in the frame page. I'm assuming the frame array is: banner 0, contents 1, main 2.
 
At this point nothing happens. Any ideas?

Also, another question. If I go this way, will the user be able to hit the back button to go back to frames page?

WillP
Very tired right now. Going to bed.


0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8242323
Well, the user won't be able to go back but you can provide a link that reshows the frames. I have an example here:
http://www.geocities.com/kfan1883/index.htm
On that page it gradually hides but you can do it immediately too. Let me know if you like it.
0
 

Author Comment

by:WillP
ID: 8243733
The example is pretty cool...

I set it up on my computer to have a look at it.

Only it doesn't help with my main problem. I want to have the button (or link) on the "contents" frame. There's a pratical reason for this. On each book I'm setting up, I have only one "contents" page and sometimes as many as fifty "text" pages, so you can see that if can set up the script on the "contents" page, I'll have lot less trouble and maintance.

Interesting script through...



Thanks

WillP
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 1200 total points
ID: 8250555
Well, this will be pretty difficult. The easy part is the hide. However, after it's hidden, the problem is how to bring the frames back. I've updated it on the web, you can go view it. Now, if you hide it, you can bring it back by refreshing the page. You can also press back, however this isn't perfect yet. For example, open up IE. After your default page loads type in the address in the address bar. Click hide, then back. At this point there is no page before it. So if the user clicks Hide again, they can't click back.
This problem could be easily solved if you added a little line of HTML in every one of your content pages, of course this will get tedious as you pointed out.
I am exploring some other possibilites such as generating the div dynamically. THis can actually be quite easy on IE but the problem is on Netscape it probably won't work. Of course, if your site is just for IE users then this will work fine for you. Let me know...in the meantime I'll do a little research...
0
 

Author Comment

by:WillP
ID: 8275776
Sorry about the interval...

I got busy with some other things and haven't had time for this project.

I looked at the page again. I does work, sort of. Of corse there are errors loading the page, and as you say it only goes back once, after that the back button is disabled.

If I use this page, I would simpify it. That is, take away the complication of having the window close gradually. One of my aims in this project is to keep everything simple.

Clearly what I wanted in the first place isn't possible--that is, to simply open the window and then scroll it. I actually saw an example in a javascript book to do exacly this, they use a timeout(JavaScript for the World Wide Web, edition 3, Chap 5, p 100; Peachpit Press) but when I went to their site and tried the example, it didn't work!!

It's up to you if you want to continue to work on this. If you do, let me know.  If the script works without errors and could be simplied, I'd probably still use it. But now I'm thinking of dropping the whole idea.

Anyway, I tranfer the 400 points over to you now.

Thanks,

WillP
0
 

Author Comment

by:WillP
ID: 8275787
Good effort.

WillP

PS, I forgot. Whatever I use does have to work with Netscape.
0
 

Author Comment

by:WillP
ID: 8275923
Just had an idea. I guess it's possible to force the text frame to open in a second window...

Would that help? Since the frames page wouldn't actually be closed, would the code to scroll the new window work?

Will investagte it.  

Of course the back button wouldn't work, but clossing the second window would return the user to the frames page.

Any ideas about this?

WillP
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8276515
WillP,

I just realized it is possible to add a div (Hey, we learn new things everyday!).

Also, opening the page in a new window would do the job as well.

Let me know which type you'd prefer, and I'll simplify the thing. I'm sorta busy this weekend but I'll work on it!
0
 

Author Comment

by:WillP
ID: 8285841
lil puffball.
I set up a new question based on the code I worked on yesterday using the new window idea. It works but there are some issues.

Check it out.

Under title:
opening new window from frame (400pts)

WillP
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question