?
Solved

vertical position in iframe

Posted on 2012-04-06
15
Medium Priority
?
443 Views
Last Modified: 2012-04-08
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
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
15 Comments
 
LVL 14

Expert Comment

by:EMB01
ID: 37819088
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37819279
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
 

Author Comment

by:Richard Korts
ID: 37819623
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37819642
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
 

Author Comment

by:Richard Korts
ID: 37819697
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
 
LVL 14

Expert Comment

by:EMB01
ID: 37819797
>>  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
 

Author Comment

by:Richard Korts
ID: 37819943
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
 
LVL 14

Accepted Solution

by:
EMB01 earned 2000 total points
ID: 37819977
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
 

Author Comment

by:Richard Korts
ID: 37820138
To EMB01

The reference link looks exactly like what I need.

I will play with a variation of that.

rkorts
0
 

Author Closing Comment

by:Richard Korts
ID: 37820317
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
 
LVL 14

Expert Comment

by:EMB01
ID: 37820327
>>  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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37821204
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
 

Author Comment

by:Richard Korts
ID: 37821249
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37821370
Thanks!
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37821380
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

765 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