Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 470
  • Last Modified:

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?
0
Richard Korts
Asked:
Richard Korts
  • 6
  • 5
  • 4
1 Solution
 
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
0
 
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!
0
 
Richard KortsAuthor 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
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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
0
 
Richard KortsAuthor 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
0
 
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;">
0
 
Richard KortsAuthor 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.
0
 
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;
?>
0
 
Richard KortsAuthor Commented:
To EMB01

The reference link looks exactly like what I need.

I will play with a variation of that.

rkorts
0
 
Richard KortsAuthor 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
0
 
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.
0
 
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
0
 
Richard KortsAuthor 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
0
 
Ray PaseurCommented:
Thanks!
0
 
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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 6
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now