Solved

Jump to Iframe content dynamically

Posted on 2010-11-28
14
190 Views
Last Modified: 2012-05-10
I have an iframe containing dynamic data; i.e. it has a repeater with multiple records that will scroll off the visible page.  Obviously all repeated items have same ID (assume different ordinal number).  I need to be able to scroll down, update a field, and ensure that the frame jumps down to the correct location, and not just back up to the top when it refreshes.  I've looked at anchors but they'd need to be dynamically created and I'm not sure the tool I'm using can create that.

Desperately need an answer - due to go live tomorrow! (Monday)

Needs to be in Javascript - I have a hyperlink on the Save button that can pass back the number of the repeater, I just need to be able to jump to that paragraph again
0
Comment
Question by:pambrose1
  • 9
  • 4
14 Comments
 

Author Comment

by:pambrose1
ID: 34225147
0
 
LVL 1

Expert Comment

by:Mulith
ID: 34225188
What server side language are you using?
0
 

Author Comment

by:pambrose1
ID: 34225396
PHP
0
 

Accepted Solution

by:
pambrose1 earned 0 total points
ID: 34225413
Another manifestation of the problem is that I need to be able to click on an edit button next to the text area, and enable the user to edit the content.  It could well be that you need to scroll the iframe (or browser for that matter) off the screen and it needs to scroll to that particular field again, so I need to be able to identify which field I need to scroll to so each enumeration (?) of the id needs to be identified.
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34225443

The following scrolls to a requested div (open in a small bowser window to see it working) you should be able to get the parent to call the iframe scroll function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26642378.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script language="javascript">

function scroll( hash )
{
  var position = $(hash).offset();
  window.scrollTo( position.left, position.top);
}

$(document).ready( function() {

  $("a").each( function() {
    $(this).click( function() {
      scroll( $(this).attr("href") );
      return false;
    });
  });

});
</script>
</head>

<body>

<a href="#fragment-1">1</a> <a href="#fragment-2">2</a> <a href="#fragment-3">3</a> <a href="#fragment-4">4</a> <a href="#fragment-5">5</a> <a href="#fragment-6">6</a> <a href="#fragment-7">7</a> <a href="#fragment-8">8</a> <a href="#fragment-9">9</a> 

<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae nisl enim, a tempus justo. Nam tempor eros eu metus facilisis pharetra. Phasellus id ligula libero, posuere facilisis dui. Nullam nunc metus, tristique quis blandit ut, consequat a sapien. Donec laoreet tortor ac dolor dignissim sed venenatis ante ullamcorper. Aliquam tempor vestibulum vulputate. Suspendisse egestas sem et risus malesuada sagittis. Pellentesque vel ante in sapien consequat fringilla id eget neque. Integer ultricies, augue ultrices pharetra ultricies, metus enim placerat nulla, nec ornare lectus erat ut orci. Vivamus sed velit libero, eget cursus nisl. Praesent eros mi, feugiat non eleifend ac, mollis nec odio. Proin aliquam hendrerit massa. Cras erat tortor, mattis eu scelerisque sit amet, facilisis vel ligula. Pellentesque eu libero nisi. Maecenas varius lacus et urna ultrices non ultricies nisl tincidunt. 
</div><br />

<div id="fragment-2">
Phasellus ut orci sapien, in lobortis risus. Aenean varius, urna dignissim bibendum mattis, massa leo vulputate nunc, et elementum metus ante sit amet tortor. Integer ac mi libero. Phasellus nibh lacus, porttitor ut lacinia eget, tincidunt nec dui. Phasellus et commodo erat. Morbi odio velit, tempor eget sodales vel, molestie sed dui. In nec tortor in elit lobortis scelerisque. Ut pharetra dolor ut erat cursus bibendum. Proin mattis dapibus sem at dignissim. Mauris id nisl orci, sed luctus tortor. Sed iaculis nisi nec sem vulputate scelerisque. Morbi vestibulum elit sit amet lacus aliquet consequat. Donec sed ligula nulla, sit amet varius ligula. Phasellus laoreet mauris vitae libero ullamcorper vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ultrices auctor nunc ac pretium. Suspendisse non magna nec est pharetra commodo. Aliquam erat volutpat. Fusce egestas, ante eu posuere facilisis, tortor purus cursus leo, at eleifend mauris ante eget purus. Suspendisse viverra enim sed nisl pellentesque blandit. 
</div><br />

<div id="fragment-3">
Donec leo sapien, pretium quis tempor eget, sagittis quis neque. Morbi vel tincidunt nisi. Donec elit justo, tempus vel gravida vitae, varius ut ipsum. Phasellus ac tristique nisl. Duis id dolor tempus dolor pretium sollicitudin vel nec nunc. Nullam et mi tellus. Morbi scelerisque lacinia nisi, vitae vehicula mauris dapibus vitae. Fusce volutpat eleifend massa, id ultricies erat mattis vitae. Sed vitae nisl at massa malesuada laoreet. Pellentesque auctor pretium tincidunt. Vestibulum consequat erat sit amet tellus fermentum eu vestibulum ligula dictum. Suspendisse potenti. Proin elementum ante non ligula consequat et ullamcorper libero elementum. Cras placerat, enim sit amet mattis semper, quam leo tempor neque, non rhoncus elit ligula vel neque. Fusce gravida enim vel felis porta eget congue massa rhoncus. Maecenas at purus vitae libero vulputate facilisis a eu odio. Phasellus dignissim dui in diam adipiscing sollicitudin. 
</div><br />

<div id="fragment-4">
Phasellus in lacus nisl. Fusce in neque in mauris accumsan suscipit sed at leo. Curabitur et volutpat augue. Quisque condimentum vestibulum ante, et commodo nunc tristique non. Cras porttitor velit ut justo dignissim sed euismod neque posuere. Aliquam erat volutpat. Aliquam erat volutpat. Sed porttitor, neque at lacinia interdum, dui massa sodales metus, et laoreet erat leo a nunc. Fusce nec turpis metus. Cras tristique nibh vel orci gravida vitae aliquet quam sollicitudin. In hac habitasse platea dictumst. 
</div><br />

<div id="fragment-5">
Fusce at semper sapien. Nulla ut viverra mi. Integer id odio eget velit lobortis consequat vitae at leo. Ut dolor nisi, faucibus ut tempus sit amet, iaculis nec nisi. Integer eu neque elit, sit amet varius ante. Sed molestie viverra magna, a luctus dui scelerisque at. Fusce id turpis at enim tincidunt commodo. Suspendisse tortor massa, tincidunt ac volutpat quis, tristique non metus. Nullam nisi massa, viverra rutrum sollicitudin eget, congue sit amet enim. Praesent ultricies magna ac orci egestas dictum nec nec arcu. Duis facilisis pulvinar enim eu vulputate. Nulla id quam vel nisi tristique ultricies quis vitae urna. Phasellus tincidunt odio quis nisl venenatis lacinia. Ut ultricies sagittis consequat. Nulla pulvinar felis ac felis hendrerit consequat. Maecenas sed tortor dolor, eget tristique est. Pellentesque blandit nisi at magna dapibus volutpat. Maecenas pharetra, est id lobortis semper, purus sapien luctus dolor, quis sagittis augue massa ut arcu. Nulla egestas risus vitae sapien pulvinar ac posuere sapien sollicitudin. Mauris quis massa nulla. 
</div><br />

<div id="fragment-6">
Curabitur scelerisque tellus sed velit posuere et consectetur nisi sollicitudin. Integer ullamcorper lectus in dui convallis facilisis. Nulla adipiscing elementum erat, vel ultricies tellus gravida sit amet. Donec tempor tincidunt eros, sit amet posuere arcu porta id. Pellentesque cursus, mi eu porttitor vehicula, leo eros blandit sapien, nec egestas nibh dolor eu urna. Morbi at ipsum a urna scelerisque facilisis. Nullam viverra eros ac eros consequat auctor eu et metus. Aliquam non ornare massa. Etiam eu mi eget dui accumsan iaculis. Aenean rhoncus mauris at enim faucibus vel luctus mauris aliquet. Quisque rhoncus neque vitae purus hendrerit eu aliquet felis vestibulum. Morbi consequat est sed dui volutpat gravida. Phasellus sit amet orci sit amet libero rhoncus ultricies sed id lacus. Praesent malesuada viverra lacus vitae rutrum. Nunc nibh ante, egestas sed commodo in, euismod ut est. Nam interdum feugiat ante a lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in turpis pellentesque mi porta rhoncus eget ac tortor. Nulla rutrum libero quis mi mollis condimentum. 
</div><br />

<div id="fragment-7"
Aliquam et ligula sit amet erat scelerisque fringilla eget fermentum dui. Duis vestibulum ligula dui. In ut libero et tortor pretium ultricies. Donec leo orci, suscipit ut condimentum lacinia, rhoncus sit amet odio. Donec quis felis magna, a congue lectus. Mauris consequat massa at nibh posuere volutpat. Sed varius metus ut sapien suscipit sed tempor libero tempor. Phasellus a vestibulum enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas convallis eros ac elit commodo tempus. Nullam hendrerit condimentum malesuada. Vestibulum vitae porttitor nulla. Fusce ullamcorper, libero vitae suscipit mattis, erat nibh hendrerit nibh, in varius augue nibh a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et nunc at lectus mattis molestie. Phasellus varius orci vitae mi pellentesque at sollicitudin nunc bibendum. Praesent laoreet purus non felis viverra ultricies. Praesent dignissim, lectus ac semper ullamcorper, tellus lectus convallis tellus, ac elementum sapien leo ac odio. 
</div><br />

<div id="fragment-8">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed mi velit. Integer pretium euismod eros vel vulputate. Aenean at metus mattis nulla vulputate ultricies. Phasellus dui tellus, convallis ut placerat sed, viverra in magna. Fusce lobortis, justo eget fermentum ultrices, velit erat pharetra velit, a mattis sem lectus eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae elit sit amet lectus facilisis malesuada sed non ante. Quisque interdum massa eget purus viverra vel fringilla magna ultrices. In arcu risus, fringilla non faucibus id, aliquet id dui. Curabitur mattis justo consequat nulla porta posuere. Sed imperdiet risus vitae quam lacinia tincidunt. Praesent luctus neque ut lorem porta suscipit. Nulla eu condimentum mauris. Pellentesque arcu odio, lacinia volutpat euismod sed, mattis at sem. Aenean faucibus ornare felis, non lobortis enim iaculis non. Quisque lacinia nulla ut massa tristique eu hendrerit odio aliquet. 
</div><br />

<div id="fragment-9">
Sed nisl mi, viverra at vestibulum molestie, convallis a felis. Nunc vitae blandit nisi. Nam eu arcu quis dolor feugiat vehicula sed non est. Suspendisse lectus elit, convallis ac ullamcorper et, pulvinar quis elit. Sed tempor bibendum commodo. Donec vitae ligula lectus. Pellentesque tempus mollis elit, in sollicitudin magna hendrerit non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consequat tortor aliquet nulla blandit eu euismod dolor volutpat. Pellentesque dapibus arcu a sapien rutrum vestibulum. Aenean cursus, metus nec sollicitudin vehicula, magna ipsum porttitor dui, et eleifend nisi mi id leo. Etiam sed justo vulputate est imperdiet semper. Ut interdum laoreet risus, pellentesque tincidunt nunc vehicula sed. 
</div><br />

</body>
</html>

Open in new window

0
 

Author Comment

by:pambrose1
ID: 34225628
Thanks for this - but doesn't that assume that I am able to name the DIVs with IDs beforehand?  I am using a repeater so the IDs are all the same - how do I identify the specific one.
0
 

Author Comment

by:pambrose1
ID: 34225642
<table cellspacing="0" cellpadding="0" width="100%" cols="2">
                                                                <tbody>
                                                                    <tr>
                                                                        <td width="40">
                                                                            <img id="Image5" src="img/view-button-up.gif"><img id="Image6" src="img/view-button-down.gif"></td>
                                                                        <td valign="top" width="410">
                                                                            <textarea style="PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; WIDTH: 400px; PADDING-RIGHT: 4px; HEIGHT: 120px; PADDING-TOP: 4px" id="TextArea2" class="NormalFont" rows="7" cols="28" readonly="readonly" name="TextArea2">SubPara2</textarea>
                                                                        </td>
                                                                        <td valign="top" width="30">
                                                                            <table cellspacing="0" cellpadding="0" width="100%" cols="1">
                                                                                <tbody>
                                                                                    <tr height="25">
                                                                                        <td width="30">
                                                                                            <a id="Link1" href="iwillbuilder.php?Edit=Y&ParaSubType=2&WillRef=2&ParaType=1"><img id="Image2" title="Edit paragraph" border="0" src="img/properties.gif"></a></td>
                                                                                    </tr>
                                                                                    <tr height="25">
                                                                                        <td>
                                                                                            <a id="Link2" href="iwillbuilder.php?Delete=Y&ParaSubType=2&WillRef=2&ParaType=1"><img id="Image3" title="Delete paragraph" border="0" src="img/deletefile.gif" onclick="return eg_confirmAction1(this);"></a></td>
                                                                                    </tr>
                                                                                    <tr height="25">
                                                                                        <td>
                                                                                            &nbsp;
                                                                                           
                                                                                        </td>
                                                                                    </tr>
                                                                                </tbody>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                       

                                               

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
<table class="NormalFont" cellspacing="0" cellpadding="0" width="100%" cols="1">
                                <tbody>
                                    <tr>
                                        <td>
                                           
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="410">
                                           
                                                   
                                                   
                                                           
                                                            <table cellspacing="0" cellpadding="0" width="100%" cols="2">
                                                                <tbody>
                                                                    <tr>
                                                                        <td width="40">
                                                                            <img id="Image5" src="img/view-button-up.gif"><img id="Image6" src="img/view-button-down.gif"></td>
                                                                        <td valign="top" width="410">
                                                                            <textarea style="PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; WIDTH: 400px; PADDING-RIGHT: 4px; HEIGHT: 120px; PADDING-TOP: 4px" id="TextArea2" class="NormalFont" rows="7" cols="28" readonly="readonly" name="TextArea2">SubPara3</textarea>
                                                                        </td>
                                                                        <td valign="top" width="30">
                                                                            <table cellspacing="0" cellpadding="0" width="100%" cols="1">
                                                                                <tbody>
                                                                                    <tr height="25">
                                                                                        <td width="30">
                                                                                            <a id="Link1" href="iwillbuilder.php?Edit=Y&ParaSubType=3&WillRef=2&ParaType=1"><img id="Image2" title="Edit paragraph" border="0" src="img/properties.gif"></a></td>
                                                                                    </tr>
                                                                                    <tr height="25">
                                                                                        <td>
                                                                                            <a id="Link2" href="iwillbuilder.php?Delete=Y&ParaSubType=3&WillRef=2&ParaType=1"><img id="Image3" title="Delete paragraph" border="0" src="img/deletefile.gif" onclick="return eg_confirmAction1(this);"></a></td>
                                                                                    </tr>
                                                                                    <tr height="25">
                                                                                        <td>
                                                                                            &nbsp;
                                                                                           
                                                                                        </td>
                                                                                    </tr>
                                                                                </tbody>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                       
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:pambrose1
ID: 34225649
You'll see that the textareas are all called TextArea2 because its a repeater - I have a unique code for the data but not for the IDs
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34225853

Shouldn't be a problem, JQuery can get the Nth identical element but I might not be able to get round to another example for a while.
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34225979

Try this one instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26642378.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script language="javascript">

function scroll( hash )
{
  var index = parseInt( hash.split("#")[1] );
  var position = $("div").eq(index).offset();
  window.scrollTo( position.left, position.top );
}

$(document).ready( function() {

  $("a").each( function() {
    $(this).click( function() {
      scroll( $(this).attr("href") );
      return false;
    });
  });

});
</script>
</head>

<body>

<div style="width:400px;">

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae nisl enim, a tempus justo. Nam tempor eros eu metus facilisis pharetra. Phasellus id ligula libero, posuere facilisis dui. Nullam nunc metus, tristique quis blandit ut, consequat a sapien. Donec laoreet tortor ac dolor dignissim sed venenatis ante ullamcorper. Aliquam tempor vestibulum vulputate. Suspendisse egestas sem et risus malesuada sagittis. Pellentesque vel ante in sapien consequat fringilla id eget neque. Integer ultricies, augue ultrices pharetra ultricies, metus enim placerat nulla, nec ornare lectus erat ut orci. Vivamus sed velit libero, eget cursus nisl. Praesent eros mi, feugiat non eleifend ac, mollis nec odio. Proin aliquam hendrerit massa. Cras erat tortor, mattis eu scelerisque sit amet, facilisis vel ligula. Pellentesque eu libero nisi. Maecenas varius lacus et urna ultrices non ultricies nisl tincidunt. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Phasellus ut orci sapien, in lobortis risus. Aenean varius, urna dignissim bibendum mattis, massa leo vulputate nunc, et elementum metus ante sit amet tortor. Integer ac mi libero. Phasellus nibh lacus, porttitor ut lacinia eget, tincidunt nec dui. Phasellus et commodo erat. Morbi odio velit, tempor eget sodales vel, molestie sed dui. In nec tortor in elit lobortis scelerisque. Ut pharetra dolor ut erat cursus bibendum. Proin mattis dapibus sem at dignissim. Mauris id nisl orci, sed luctus tortor. Sed iaculis nisi nec sem vulputate scelerisque. Morbi vestibulum elit sit amet lacus aliquet consequat. Donec sed ligula nulla, sit amet varius ligula. Phasellus laoreet mauris vitae libero ullamcorper vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ultrices auctor nunc ac pretium. Suspendisse non magna nec est pharetra commodo. Aliquam erat volutpat. Fusce egestas, ante eu posuere facilisis, tortor purus cursus leo, at eleifend mauris ante eget purus. Suspendisse viverra enim sed nisl pellentesque blandit. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Donec leo sapien, pretium quis tempor eget, sagittis quis neque. Morbi vel tincidunt nisi. Donec elit justo, tempus vel gravida vitae, varius ut ipsum. Phasellus ac tristique nisl. Duis id dolor tempus dolor pretium sollicitudin vel nec nunc. Nullam et mi tellus. Morbi scelerisque lacinia nisi, vitae vehicula mauris dapibus vitae. Fusce volutpat eleifend massa, id ultricies erat mattis vitae. Sed vitae nisl at massa malesuada laoreet. Pellentesque auctor pretium tincidunt. Vestibulum consequat erat sit amet tellus fermentum eu vestibulum ligula dictum. Suspendisse potenti. Proin elementum ante non ligula consequat et ullamcorper libero elementum. Cras placerat, enim sit amet mattis semper, quam leo tempor neque, non rhoncus elit ligula vel neque. Fusce gravida enim vel felis porta eget congue massa rhoncus. Maecenas at purus vitae libero vulputate facilisis a eu odio. Phasellus dignissim dui in diam adipiscing sollicitudin. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Phasellus in lacus nisl. Fusce in neque in mauris accumsan suscipit sed at leo. Curabitur et volutpat augue. Quisque condimentum vestibulum ante, et commodo nunc tristique non. Cras porttitor velit ut justo dignissim sed euismod neque posuere. Aliquam erat volutpat. Aliquam erat volutpat. Sed porttitor, neque at lacinia interdum, dui massa sodales metus, et laoreet erat leo a nunc. Fusce nec turpis metus. Cras tristique nibh vel orci gravida vitae aliquet quam sollicitudin. In hac habitasse platea dictumst. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Fusce at semper sapien. Nulla ut viverra mi. Integer id odio eget velit lobortis consequat vitae at leo. Ut dolor nisi, faucibus ut tempus sit amet, iaculis nec nisi. Integer eu neque elit, sit amet varius ante. Sed molestie viverra magna, a luctus dui scelerisque at. Fusce id turpis at enim tincidunt commodo. Suspendisse tortor massa, tincidunt ac volutpat quis, tristique non metus. Nullam nisi massa, viverra rutrum sollicitudin eget, congue sit amet enim. Praesent ultricies magna ac orci egestas dictum nec nec arcu. Duis facilisis pulvinar enim eu vulputate. Nulla id quam vel nisi tristique ultricies quis vitae urna. Phasellus tincidunt odio quis nisl venenatis lacinia. Ut ultricies sagittis consequat. Nulla pulvinar felis ac felis hendrerit consequat. Maecenas sed tortor dolor, eget tristique est. Pellentesque blandit nisi at magna dapibus volutpat. Maecenas pharetra, est id lobortis semper, purus sapien luctus dolor, quis sagittis augue massa ut arcu. Nulla egestas risus vitae sapien pulvinar ac posuere sapien sollicitudin. Mauris quis massa nulla. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Curabitur scelerisque tellus sed velit posuere et consectetur nisi sollicitudin. Integer ullamcorper lectus in dui convallis facilisis. Nulla adipiscing elementum erat, vel ultricies tellus gravida sit amet. Donec tempor tincidunt eros, sit amet posuere arcu porta id. Pellentesque cursus, mi eu porttitor vehicula, leo eros blandit sapien, nec egestas nibh dolor eu urna. Morbi at ipsum a urna scelerisque facilisis. Nullam viverra eros ac eros consequat auctor eu et metus. Aliquam non ornare massa. Etiam eu mi eget dui accumsan iaculis. Aenean rhoncus mauris at enim faucibus vel luctus mauris aliquet. Quisque rhoncus neque vitae purus hendrerit eu aliquet felis vestibulum. Morbi consequat est sed dui volutpat gravida. Phasellus sit amet orci sit amet libero rhoncus ultricies sed id lacus. Praesent malesuada viverra lacus vitae rutrum. Nunc nibh ante, egestas sed commodo in, euismod ut est. Nam interdum feugiat ante a lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in turpis pellentesque mi porta rhoncus eget ac tortor. Nulla rutrum libero quis mi mollis condimentum. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Aliquam et ligula sit amet erat scelerisque fringilla eget fermentum dui. Duis vestibulum ligula dui. In ut libero et tortor pretium ultricies. Donec leo orci, suscipit ut condimentum lacinia, rhoncus sit amet odio. Donec quis felis magna, a congue lectus. Mauris consequat massa at nibh posuere volutpat. Sed varius metus ut sapien suscipit sed tempor libero tempor. Phasellus a vestibulum enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas convallis eros ac elit commodo tempus. Nullam hendrerit condimentum malesuada. Vestibulum vitae porttitor nulla. Fusce ullamcorper, libero vitae suscipit mattis, erat nibh hendrerit nibh, in varius augue nibh a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et nunc at lectus mattis molestie. Phasellus varius orci vitae mi pellentesque at sollicitudin nunc bibendum. Praesent laoreet purus non felis viverra ultricies. Praesent dignissim, lectus ac semper ullamcorper, tellus lectus convallis tellus, ac elementum sapien leo ac odio. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed mi velit. Integer pretium euismod eros vel vulputate. Aenean at metus mattis nulla vulputate ultricies. Phasellus dui tellus, convallis ut placerat sed, viverra in magna. Fusce lobortis, justo eget fermentum ultrices, velit erat pharetra velit, a mattis sem lectus eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae elit sit amet lectus facilisis malesuada sed non ante. Quisque interdum massa eget purus viverra vel fringilla magna ultrices. In arcu risus, fringilla non faucibus id, aliquet id dui. Curabitur mattis justo consequat nulla porta posuere. Sed imperdiet risus vitae quam lacinia tincidunt. Praesent luctus neque ut lorem porta suscipit. Nulla eu condimentum mauris. Pellentesque arcu odio, lacinia volutpat euismod sed, mattis at sem. Aenean faucibus ornare felis, non lobortis enim iaculis non. Quisque lacinia nulla ut massa tristique eu hendrerit odio aliquet. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Sed nisl mi, viverra at vestibulum molestie, convallis a felis. Nunc vitae blandit nisi. Nam eu arcu quis dolor feugiat vehicula sed non est. Suspendisse lectus elit, convallis ac ullamcorper et, pulvinar quis elit. Sed tempor bibendum commodo. Donec vitae ligula lectus. Pellentesque tempus mollis elit, in sollicitudin magna hendrerit non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consequat tortor aliquet nulla blandit eu euismod dolor volutpat. Pellentesque dapibus arcu a sapien rutrum vestibulum. Aenean cursus, metus nec sollicitudin vehicula, magna ipsum porttitor dui, et eleifend nisi mi id leo. Etiam sed justo vulputate est imperdiet semper. Ut interdum laoreet risus, pellentesque tincidunt nunc vehicula sed. 
</div><br />

</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:pambrose1
ID: 34226091
Sorry - I must be missing something here - doesn't seem to do anything
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34228139

Just re-tested it and it's okay but here's another smooth-scrolling version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26642378.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script language="javascript">

function scroll( hash )
{
  var index = parseInt( hash.split("#")[1] );
  var position = $("div").eq(index).offset();
  $('html,body').animate( {scrollTop: position.top}, 876 );
}

$(document).ready( function() {

  $("a").each( function() {
    $(this).click( function() {
      scroll( $(this).attr("href") );
      return false;
    });
  });

});
</script>
</head>

<body>

<div style="width:400px;">

[1 <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae nisl enim, a tempus justo. Nam tempor eros eu metus facilisis pharetra. Phasellus id ligula libero, posuere facilisis dui. Nullam nunc metus, tristique quis blandit ut, consequat a sapien. Donec laoreet tortor ac dolor dignissim sed venenatis ante ullamcorper. Aliquam tempor vestibulum vulputate. Suspendisse egestas sem et risus malesuada sagittis. Pellentesque vel ante in sapien consequat fringilla id eget neque. Integer ultricies, augue ultrices pharetra ultricies, metus enim placerat nulla, nec ornare lectus erat ut orci. Vivamus sed velit libero, eget cursus nisl. Praesent eros mi, feugiat non eleifend ac, mollis nec odio. Proin aliquam hendrerit massa. Cras erat tortor, mattis eu scelerisque sit amet, facilisis vel ligula. Pellentesque eu libero nisi. Maecenas varius lacus et urna ultrices non ultricies nisl tincidunt. 
</div><br />

[<a href="#0">1</a> 2 <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Phasellus ut orci sapien, in lobortis risus. Aenean varius, urna dignissim bibendum mattis, massa leo vulputate nunc, et elementum metus ante sit amet tortor. Integer ac mi libero. Phasellus nibh lacus, porttitor ut lacinia eget, tincidunt nec dui. Phasellus et commodo erat. Morbi odio velit, tempor eget sodales vel, molestie sed dui. In nec tortor in elit lobortis scelerisque. Ut pharetra dolor ut erat cursus bibendum. Proin mattis dapibus sem at dignissim. Mauris id nisl orci, sed luctus tortor. Sed iaculis nisi nec sem vulputate scelerisque. Morbi vestibulum elit sit amet lacus aliquet consequat. Donec sed ligula nulla, sit amet varius ligula. Phasellus laoreet mauris vitae libero ullamcorper vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ultrices auctor nunc ac pretium. Suspendisse non magna nec est pharetra commodo. Aliquam erat volutpat. Fusce egestas, ante eu posuere facilisis, tortor purus cursus leo, at eleifend mauris ante eget purus. Suspendisse viverra enim sed nisl pellentesque blandit. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> 3 <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Donec leo sapien, pretium quis tempor eget, sagittis quis neque. Morbi vel tincidunt nisi. Donec elit justo, tempus vel gravida vitae, varius ut ipsum. Phasellus ac tristique nisl. Duis id dolor tempus dolor pretium sollicitudin vel nec nunc. Nullam et mi tellus. Morbi scelerisque lacinia nisi, vitae vehicula mauris dapibus vitae. Fusce volutpat eleifend massa, id ultricies erat mattis vitae. Sed vitae nisl at massa malesuada laoreet. Pellentesque auctor pretium tincidunt. Vestibulum consequat erat sit amet tellus fermentum eu vestibulum ligula dictum. Suspendisse potenti. Proin elementum ante non ligula consequat et ullamcorper libero elementum. Cras placerat, enim sit amet mattis semper, quam leo tempor neque, non rhoncus elit ligula vel neque. Fusce gravida enim vel felis porta eget congue massa rhoncus. Maecenas at purus vitae libero vulputate facilisis a eu odio. Phasellus dignissim dui in diam adipiscing sollicitudin. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> 4 <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Phasellus in lacus nisl. Fusce in neque in mauris accumsan suscipit sed at leo. Curabitur et volutpat augue. Quisque condimentum vestibulum ante, et commodo nunc tristique non. Cras porttitor velit ut justo dignissim sed euismod neque posuere. Aliquam erat volutpat. Aliquam erat volutpat. Sed porttitor, neque at lacinia interdum, dui massa sodales metus, et laoreet erat leo a nunc. Fusce nec turpis metus. Cras tristique nibh vel orci gravida vitae aliquet quam sollicitudin. In hac habitasse platea dictumst. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> 5 <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Fusce at semper sapien. Nulla ut viverra mi. Integer id odio eget velit lobortis consequat vitae at leo. Ut dolor nisi, faucibus ut tempus sit amet, iaculis nec nisi. Integer eu neque elit, sit amet varius ante. Sed molestie viverra magna, a luctus dui scelerisque at. Fusce id turpis at enim tincidunt commodo. Suspendisse tortor massa, tincidunt ac volutpat quis, tristique non metus. Nullam nisi massa, viverra rutrum sollicitudin eget, congue sit amet enim. Praesent ultricies magna ac orci egestas dictum nec nec arcu. Duis facilisis pulvinar enim eu vulputate. Nulla id quam vel nisi tristique ultricies quis vitae urna. Phasellus tincidunt odio quis nisl venenatis lacinia. Ut ultricies sagittis consequat. Nulla pulvinar felis ac felis hendrerit consequat. Maecenas sed tortor dolor, eget tristique est. Pellentesque blandit nisi at magna dapibus volutpat. Maecenas pharetra, est id lobortis semper, purus sapien luctus dolor, quis sagittis augue massa ut arcu. Nulla egestas risus vitae sapien pulvinar ac posuere sapien sollicitudin. Mauris quis massa nulla. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> 6 <a href="#6">7</a> <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Curabitur scelerisque tellus sed velit posuere et consectetur nisi sollicitudin. Integer ullamcorper lectus in dui convallis facilisis. Nulla adipiscing elementum erat, vel ultricies tellus gravida sit amet. Donec tempor tincidunt eros, sit amet posuere arcu porta id. Pellentesque cursus, mi eu porttitor vehicula, leo eros blandit sapien, nec egestas nibh dolor eu urna. Morbi at ipsum a urna scelerisque facilisis. Nullam viverra eros ac eros consequat auctor eu et metus. Aliquam non ornare massa. Etiam eu mi eget dui accumsan iaculis. Aenean rhoncus mauris at enim faucibus vel luctus mauris aliquet. Quisque rhoncus neque vitae purus hendrerit eu aliquet felis vestibulum. Morbi consequat est sed dui volutpat gravida. Phasellus sit amet orci sit amet libero rhoncus ultricies sed id lacus. Praesent malesuada viverra lacus vitae rutrum. Nunc nibh ante, egestas sed commodo in, euismod ut est. Nam interdum feugiat ante a lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in turpis pellentesque mi porta rhoncus eget ac tortor. Nulla rutrum libero quis mi mollis condimentum. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> 7 <a href="#7">8</a> <a href="#8">9</a>]
<div id="TextArea2">
Aliquam et ligula sit amet erat scelerisque fringilla eget fermentum dui. Duis vestibulum ligula dui. In ut libero et tortor pretium ultricies. Donec leo orci, suscipit ut condimentum lacinia, rhoncus sit amet odio. Donec quis felis magna, a congue lectus. Mauris consequat massa at nibh posuere volutpat. Sed varius metus ut sapien suscipit sed tempor libero tempor. Phasellus a vestibulum enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas convallis eros ac elit commodo tempus. Nullam hendrerit condimentum malesuada. Vestibulum vitae porttitor nulla. Fusce ullamcorper, libero vitae suscipit mattis, erat nibh hendrerit nibh, in varius augue nibh a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et nunc at lectus mattis molestie. Phasellus varius orci vitae mi pellentesque at sollicitudin nunc bibendum. Praesent laoreet purus non felis viverra ultricies. Praesent dignissim, lectus ac semper ullamcorper, tellus lectus convallis tellus, ac elementum sapien leo ac odio. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> 8 <a href="#8">9</a>]
<div id="TextArea2">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed mi velit. Integer pretium euismod eros vel vulputate. Aenean at metus mattis nulla vulputate ultricies. Phasellus dui tellus, convallis ut placerat sed, viverra in magna. Fusce lobortis, justo eget fermentum ultrices, velit erat pharetra velit, a mattis sem lectus eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae elit sit amet lectus facilisis malesuada sed non ante. Quisque interdum massa eget purus viverra vel fringilla magna ultrices. In arcu risus, fringilla non faucibus id, aliquet id dui. Curabitur mattis justo consequat nulla porta posuere. Sed imperdiet risus vitae quam lacinia tincidunt. Praesent luctus neque ut lorem porta suscipit. Nulla eu condimentum mauris. Pellentesque arcu odio, lacinia volutpat euismod sed, mattis at sem. Aenean faucibus ornare felis, non lobortis enim iaculis non. Quisque lacinia nulla ut massa tristique eu hendrerit odio aliquet. 
</div><br />

[<a href="#0">1</a> <a href="#1">2</a> <a href="#2">3</a> <a href="#3">4</a> <a href="#4">5</a> <a href="#5">6</a> <a href="#6">7</a> <a href="#7">8</a> 9]
<div id="TextArea2">
Sed nisl mi, viverra at vestibulum molestie, convallis a felis. Nunc vitae blandit nisi. Nam eu arcu quis dolor feugiat vehicula sed non est. Suspendisse lectus elit, convallis ac ullamcorper et, pulvinar quis elit. Sed tempor bibendum commodo. Donec vitae ligula lectus. Pellentesque tempus mollis elit, in sollicitudin magna hendrerit non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consequat tortor aliquet nulla blandit eu euismod dolor volutpat. Pellentesque dapibus arcu a sapien rutrum vestibulum. Aenean cursus, metus nec sollicitudin vehicula, magna ipsum porttitor dui, et eleifend nisi mi id leo. Etiam sed justo vulputate est imperdiet semper. Ut interdum laoreet risus, pellentesque tincidunt nunc vehicula sed. 
</div><br />

</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:pambrose1
ID: 34659750
I want to revisit this problem, because its come up again.  

I have a dynamically generated list as before, ie a list of transactions, sitting in an iframe.  I want to be able to scroll down, click on an item, which will then be "selected".  To do this, I hyperlink to the existing script, pass the unique ID and save a set flag.  I will then need to reload the screen to show that it's been selected, but the selected item could be scrolled off the bottom of the screen by now, so I now need to scroll down automatically to it.

How can I adapt this script so that on the onload function, it will scroll down to a specific instance (I can probably grab the record no)
0
 

Author Closing Comment

by:pambrose1
ID: 37713756
Although it doesn't solve problem, it gave me an insight
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now