Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    iFrame Scroll Position Problem

    Hello JS guru's I am badly in need of your help.

    I have a webpage (xyz.php) on that page I have an iFrame displaying page (123.php).

    123.php is a table grid, each cell in the table is updatable by the user, when a user changes a value it is immediately passed to a script which saves the new value to a database and refreshes the page.

    Here's my problem; 123.php is approx 2000px wide, the iframe on xyz.php is 595px wide. When 123.php is refreshed the frame scroll position automatically goes back to 0 (The far left start point).

    I need to refresh 123.php as is presently happening and in addition to that I need to save and restore the iFrame horizontal scroll position so that the user is not having to rescroll everytime he changes a value on 123.php

    So first, I need to know how to save the scroll value of the iframe (Probably in the head of xyz.php) and then I need to know how to restore that value after 123.php has been refreshed.

    JS novice at best - Any help would be appreciated.

    <iframe width='595' frameborder='0' name='tasks' style='border-style:solid' style='border-width:thin' style='border-color:#EBEBEB' scrolling='auto' src='/HR/staff/indivemp_taskgrid.php?employee=$employee&onloan=N' height='220'></iframe>

  • #2
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Voluntarily deleted.
    Last edited by Johnny Lang; 07-21-2005 at 10:12 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't work, the page is compiled with errors, error code 0 (If that means anything to you).

    Also what are we trying to accomplish with this line?
    window.tasks.document.write("<Table width='115%'><TD>Lakewood was originally known as Township 7, Range 14, of Rockport Township. The settlement became known as East Rockport, and, in 1889 it became the hamlet known as Lakewood. Lakewood in the early 1800's was a great forest ringing Lake Erie. At the beginning of the 1800's there was no way to go west except over the Indian trail or by lake, so a road was cut through the forest from Cleveland to the mouth of the Huron River. By 1812 Cleveland was on its way to becoming a town at the mouth of the Cuyahoga River and a considerable settlement was stablished at the mouth of Rocky River. Until that date no settler was attracted to the land between. At the age of 20, James Nicholson, Lakewood's first permanent settler, came west from Connecticut on foot.</TD></Table>")

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    Utah, US
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats where you put the table... .... ... if you ask for coding they won't do it for you fully, you will probaly have to change it a little to fit your needs

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not trying to accomplish ANYTHING. The code works in Win IE6. But, I'm not going to argue with you. I deleted it.

  • #6
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jon.php
    thats where you put the table... .... ... if you ask for coding they won't do it for you fully, you will probaly have to change it a little to fit your needs
    Understood, just wasn't sure we wee needed to 'put the table', Johnny Lang I didn't mean to offend and was using your code as a reference to keep working on this.

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apology accepted:

    Here's the code in the version you need it:

    Main document:

    Code:
    <HTML>
    <Head>
    <Script Language=JavaScript>
    
    	function getCookie(isName){
    
    		cookieStr = document.cookie;
    		startSlice = cookieStr.indexOf(isName+"=");
    		if (startSlice == -1){return false}
    		endSlice = cookieStr.indexOf(";",startSlice+1)
    		if (endSlice == -1){endSlice = cookieStr.length}
    		isData = cookieStr.substring(startSlice,endSlice)
    		isValue = isData.substring(isData.indexOf("=")+1,isData.length);
    		return isValue;
    	}
    
    	function getPrevScroll(){
    
    		isData = getCookie('scrollPos');
    		if (isData)
    			{
    			 //alert(isData);
    			 lastPos = isData.split(":");
    			 window.frames.t1Frame.scrollTo(lastPos[0],lastPos[1]);
    			}
    			
    	}
    	
    	function saveScroll(){
    
    		xSave = window.frames.t1Frame.document.body.scrollLeft;
    		ySave = window.frames.t1Frame.document.body.scrollTop;
    		document.cookie = "scrollPos"+"="+xSave+":"+ySave;
    	}
    
    	function swapIFrame(isPage){
    
    		document.frames.t1Frame.location.replace('1/content'+isPage+'.html');
    	}
    
    </Script>
    </Head>
    <Body>
    <Div>
    <IFrame Name = 't1Frame'
    Height = 200
    Src = '1/content1.html'
    Scrolling = 'yes'>
    </IFrame>
    </Div>
    <br>
    <input type=button value="Get 2nd Page" onclick="swapIFrame(2)">&nbsp;
    <input type=button value="Get 1st Page" onclick="swapIFrame(1)">
    <!-- IFrame scroll is restored on for each new IFrame document -->
    </Body>
    </HTML>
    content1.html:

    Code:
    <HTML>
    <Head>
    <Script Language=JavaScript>
    
    	window.onbeforeunload=parent.frames.saveScroll;
    	window.onload=parent.frames.getPrevScroll;
    
    </Script>
    </Head>
    <Body>
    <Table width='115%'><TD>Lakewood was originally known as Township 7, Range 14, of Rockport Township. The settlement became known as East Rockport, and, in 1889 it became the hamlet known as Lakewood. Lakewood in the early 1800's was a great forest ringing Lake Erie. At the beginning of the 1800's there was no way to go west except over the Indian trail or by lake, so a road was cut through the forest from Cleveland to the mouth of the Huron River. By 1812 Cleveland was on its way to becoming a town at the mouth of the Cuyahoga River and a considerable settlement was stablished at the mouth of Rocky River. Until that date no settler was attracted to the land between. At the age of 20, James Nicholson, Lakewood's first permanent settler, came west from Connecticut on foot.</TD></Table>")
    
    </Body>
    </HTML>
    content2.html:

    Code:
    <HTML>
    <Head>
    <Script Language=JavaScript>
    
    	window.onbeforeunload=parent.frames.saveScroll;
    	window.onload=parent.frames.getPrevScroll;
    
    
    </Script>
    </Head>
    <Body>
    <Table width='115%'><TD>U.S. Census 2000 pegged Lakewood's population at 56,646. This tally represents a 5.1% DECREASE from 1990. Lakewood is the 14th largest city in Ohio and second largest suburb in Cuyahoga County. 21% of Lakewood's population is under age 18. In racial/ethnic categories census figures show: 52,723 White (93%); 1,116 Black (1.9%); 139 American Indian; 815 Asian; 349 other; 1,504 multi-racial; 1,269 Hispanic. The 1999 effective residential property tax is $77.67 per $1,000 of tax valuation. Cuyahoga County assesses residential property at 35% of the current market value. The average sale price for a home in Lakewood for 1999, the latest year for which data is available, was $121,200. The income tax rate is 1.5%.</TD></Table>")
    
    </Body>
    </HTML>
    Note that the 2 content documents are in folder named 1

    There are two buttons in the main document, to switch back and forth between content1 and content2.

    Also notice the alert, commented out in the getPrevScroll function. To view the actual numerical positions that are saved and restored, just remove the the // preceding the alert()
    Last edited by Johnny Lang; 07-21-2005 at 11:39 PM.

  • #8
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Johnny, Thanks again for your help.

    I've managed to get half way using your code, the cookie wouldn't write until I specified an expiry date...C'est la vie.

    So now I can verify that the cookie is written and it contains the correct XY coordinates for the iframe to scroll back to BUT the getPrevScroll function isn't running or if it is isn't working for me. The head of 123.php has window.onload=parent.frames.getPrevScroll; and xyz.php has the getPrevScroll function as you posted with my frame name instead of yours.

    Does it matter that in 123.php I'm using window.location.href to regenerate the page?

  • #9
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Done some more testing, everything seems great up until here:

    lastPos = isData.split(":");
    window.frames.tasks.scrollTo(lastPos[0],lastPos[1]);

    Any alternate ideas I can try?

  • #10
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aquanode:

    The cookie was intentionally meant to be "session only."

    Is the script in the Head surrounded by <script> tags?

    You know, it's always best, to just take the code that's provided, and get it working LOCALLY AS IS, before you start changing things.

    Unless and until you get the example working AS IS, how can you expect to adapt it to existing code?

    It wouldn't matter to JavaScript how you refresh or replace the page. window.location.href works too, but allows the user to use the BACK button. window.location.replace, doesn't.

    Please test the code AS IS, then you should be able to see how to adapt it to your pages.

  • #11
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aquanode:

    Not unless the name='tasks' of your IFrame isn't EXACTLY that. If it's Tasks then there's your problem.

    Please, test the example code AS IS.

  • #12
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Johnny, Working great, here's the code I used in case you are interested:

    XYZ.php:

    <Script Language=JavaScript>
    function getCookie(isName){

    cookieStr = document.cookie;
    startSlice = cookieStr.indexOf(isName+"=");
    if (startSlice == -1){return false}
    endSlice = cookieStr.indexOf(";",startSlice+1)
    if (endSlice == -1){endSlice = cookieStr.length}
    isData = cookieStr.substring(startSlice,endSlice)
    isValue = isData.substring(isData.indexOf("=")+1,isData.length);
    return isValue;
    }

    function getPrevScroll(){
    if(document.cookie)
    {
    index = document.cookie.indexOf('scrollPos');
    if (index != -1)
    {
    isData = getCookie('scrollPos');
    window.frames.tasks.scrollTo(isData,0);
    }
    }

    }

    function saveScroll(){

    xSave = window.tasks.document.body.scrollLeft;
    ySave = window.tasks.document.body.scrollTop;
    document.cookie = "scrollPos"+"="+xSave+"; expires=Monday, 04-Apr-2010 05:00:00 GMT";
    }

    </Script>

  • #13
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot Johnny btw - You helped me big time!!

  • #14
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're welcome. Glad you got it working. You must not be saving both the X and Y. I see that one of them is 0. That's what the split did. They were stored like this 45:87, as X and Y;

  • #15
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are correct, the height is fixed so all I needed was the X coordinate.

    Thanks again!!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •