vertical position in iframe

I want to use an iframe in a page to contain a scrollable list (in a table format).

I want to be able to position the content in the iframe to a specific point (vertically) when it loads, based upon variable / session variables that I will be providing. Both the page embedding the iframe & the iframe page will be php.

How can I do this?
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EMB01Commented:
I would like to give you some other options:

You know you don't have to use an iFrame to achieve a scrollable list?  You could just use a DIV with overflow: scroll and fill it's contents with PHP like so:

<?php
 $html = '<div style="overflow: scroll; height: 200px">
 foreach ($i = 0; $i < 10; $i++) {
  $html .= $i * 10;
 }
 $html .= '</div>';
?>

If you must positive something vertically, you could do this several ways, here's one way:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Ray PaseurCommented:
Completely agree with EMB01.  If it is possible to avoid using the iFrame tag, I would avoid it every time in favor of standards-compliant CSS!
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To all,

OK, I'll use a div.

But I still don't see how to position on a specific element. The example from EMBO1 illustrates EXACTLY my situation.

Specifically, suppose I want to have the window positioned so that element 7 (of the 10) is in the MIDDLE of the visible part. How do I do that?

Thanks
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ray PaseurCommented:
Richard: You might be able to do this with some kind of client-side animation like jQuery.  I have never seen an example of this on any web site, ever.  If you can show us a site that does this, I will bel glad to try to deconstruct it and create a teaching example that shows the principles.  It's an unusual design pattern, to be sure.  But that aside, use the Request Attention button and ask a moderator to add the question to the jQuery Zone.  Best regards, ~Ray
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
From other things I've found on the web, I've been led to believe that it can be done using a negative top margin on the div?

Either as a % or as an absolute # of pixels.

Richard
EMB01Commented:
>>  Specifically, suppose I want to have the window positioned so that element 7 (of the 10) is in the MIDDLE of the visible part. How do I do that?

I have no idea what you mean.  If you want to specifically position your div, you could use this:

<div style="position: absolute; top: 700px;">
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To EMB01

OK, what I mean is this.

I'm going to have a div (or iframe) that's about 450 pix high.

The content in the div will typically consist of about 120 - 200 rows (table concept). Each row will be maybe 40 - 50 pixels high. I want to be able to programatically position the content so that a selected row is approx at the top (or one or two rows down). I do this when the user takes some action (clicks on a readonly form field in a row).

Obviously, I am creating the content from a database using php. The content will be a  form with multiple fields, each row will have an identifier (a confirmation #) that will let know where that row is relative to the top & bottom (or I can calculate it).

Thanks.
EMB01Commented:
Yes, so I think you are trying to scroll a DIV to a certain point on page load.  To do this, see this article:

http://stackoverflow.com/questions/810492/div-auto-scroll

You can implement something like this:

<?php
// this number represents the selected number from the db
$x = 22;
?>

<script type="text/javascript">
document.getElementById('<?php echo (!empty($x)?$x:0); ?>').focus();
</script>

<?php
$html .= '<div style="height:450px; overflow:auto;">';
while ($row = mysql_fetch_assoc($query))
{
    $html .= <<<HTML
    <div id="{$row['id']}">{$row['content']}</div>
HTML;
}
$html .= '</div>';
echo $html;
?>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To EMB01

The reference link looks exactly like what I need.

I will play with a variation of that.

rkorts
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I think I have it.

Look at http://www.villageairportvan.com/div_scroll_test1.php. I will leave that there for a while.

If you view source, note that I have set a JavaScript variable nx to 60. 60 is just arbitrary, but illustrates the ability to force the top of the scrollable div to a specific position, EXACTLY what I want to do.

I can build the real app by calculating what nx should be (based on number of elements in the div & which element was selected by the user), then reload with that value.

So it does combine JavaScript with css.

FYI, I could not get negative top margin values work to achieve the desired result.

Thanks
EMB01Commented:
>>  FYI, I could not get negative top margin values work to achieve the desired result.

Post a new question up and we'll try to help you out.  Thanks.
Ray PaseurCommented:
Richard: What is the relationship of the value "60" to the positioning of the elements in the container div?  Is this a number of pixels?  Thanks, ~Ray
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Ray_Paseur

I don't know. I'm guessing it's pixels, but I will have to experiment to find out.

I just made it 120 & it shows Line 6. At 60, it showed Line 3. I just measured & 3 lines is pretty close to 60px.

Richard
Ray PaseurCommented:
Thanks!
Ray PaseurCommented:
It appears to be pixels, and the result is sensitive to the number of pixels as well as the size of the font.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="iso-8859-1" />
<script language="JavaScript">
  nx = 80;
</script>
<title>Div Scroll test</title>
</head>

<body onLoad="document.getElementById('container').scrollTop=nx";>
<span style="color:red; font-weight:bold; font-size:20px;">
<div style="height: 50px"></div>
<div id="container" style="overflow-y: scroll; height: 200px; width: 450px">

<div id="item-0">Line 0<br></div>
<div id="item-1">Line 1<br></div>
<div id="item-2">Line 2<br></div>
<div id="item-3">Line 3<br></div>
<div id="item-4">Line 4<br></div>
<div id="item-5">Line 5<br></div>
<div id="item-6">Line 6<br></div>
<div id="item-7">Line 7<br></div>
<div id="item-8">Line 8<br></div>
<div id="item-9">Line 9<br></div>
<div id="item-10">Line 10<br></div>
<div id="item-11">Line 11<br></div>
<div id="item-12">Line 12<br></div>
<div id="item-13">Line 13<br></div>
<div id="item-14">Line 14<br></div>
<div id="item-15">Line 15<br></div>
<div id="item-16">Line 16<br></div>
<div id="item-17">Line 17<br></div>
<div id="item-18">Line 18<br></div>
<div id="item-19">Line 19<br></div>
<div id="item-20">Line 20<br></div>
<div id="item-21">Line 21<br></div>
<div id="item-22">Line 22<br></div>
<div id="item-23">Line 23<br></div>
<div id="item-24">Line 24<br></div>
<div id="item-25">Line 25<br></div>
<div id="item-26">Line 26<br></div>
<div id="item-27">Line 27<br></div>
<div id="item-28">Line 28<br></div>
<div id="item-29">Line 29<br></div>

</div>
</span>
</body>
</html>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.