asked on

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?

EMB01

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 Paseur

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 Korts

ASKER

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

Ray Paseur

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 Korts

ASKER

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

EMB01

>> 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 Korts

ASKER

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.

ASKER CERTIFIED SOLUTION

EMB01

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

To EMB01

The reference link looks exactly like what I need.

I will play with a variation of that.

rkorts

Richard Korts

ASKER

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

EMB01

>> 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 Paseur

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 Korts

ASKER

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 Paseur

Thanks!

Ray Paseur

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