Solved

vertical position in iframe

Posted on 2012-04-06
15
428 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
  • 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 108

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
 
LVL 108

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

 
LVL 14

Accepted Solution

by:
EMB01 earned 500 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 108

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 108

Expert Comment

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

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

Highfive Gives IT Their Time Back

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses four methods for overlaying images in a container on a web page
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 a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

706 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

18 Experts available now in Live!

Get 1:1 Help Now