473,372 Members | 1,572 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

width and height control of image inside iframe

I need some help here. I am making an application which allows a user to
look at a series of picture files one at a time, and enter the outcome of
various visual tests to a database. The application is based on mysql and
php on a remote server, and is accessed by the user via a web browser,
primarilly IE.

The image file names are built up by the server side php scripts, and so a
URL for the image file is created, but the file itself is located on a
local drive on the client machine (DVD drive). So the server side php has
no access to the picture files.

I made version 1 of this application with the test input fields and
buttons to switch to next images, etc., on a main browser page, and used
window.open to open the image file in a pop up window. This works fine,
using the correct link, e.g. staring with 'file://localhost/D:/ etc.'.

But this is irritating because the input field and the image to inspect
are on two separate windows - I would like to integrate them into one
window.

I am now trying to do this with an iframe to hold the image. Again this
works in that I can load different images via javascript by changing the
location.href property of the iframe, and again using a link as above.
However, I do not have any control of the size of the iframe, which does
not match the size of the image.

Is there any way to get control of either the size of the image? For
example to have the image loaded into the iframe but scaled to the size of
the iframe?

Or is there a way via javascript once the page is on the browser to
control the size of the iframe?

Getting a hold of iframe properties is confusing to me. I change the
location using

window.frames['ifrm2'].location.href = link;

where ifrm2 is the name given to the iframe and link is a variable set to
the url, e.g. 'file://localhost ....'. But how do I get a hold of the
width or height? Microsoft talks about using something like
document.all. as a starter, but nothing I try lets me get access.

Thanks for any help!
steve, Denmark
Jul 23 '05 #1
3 6625
coolsti wrote:
I need some help here. I am making an application which allows a user to look at a series of picture files one at a time, and enter the outcome of various visual tests to a database. The application is based on mysql and php on a remote server, and is accessed by the user via a web browser, primarilly IE.

The image file names are built up by the server side php scripts, and so a URL for the image file is created, but the file itself is located on a local drive on the client machine (DVD drive). So the server side php has no access to the picture files.

I made version 1 of this application with the test input fields and
buttons to switch to next images, etc., on a main browser page, and used window.open to open the image file in a pop up window. This works fine, using the correct link, e.g. staring with 'file://localhost/D:/ etc.'.
But this is irritating because the input field and the image to inspect are on two separate windows - I would like to integrate them into one
window.

I am now trying to do this with an iframe to hold the image. Again this works in that I can load different images via javascript by changing the location.href property of the iframe, and again using a link as above. However, I do not have any control of the size of the iframe, which does not match the size of the image.

Is there any way to get control of either the size of the image? For
example to have the image loaded into the iframe but scaled to the size of the iframe?

Or is there a way via javascript once the page is on the browser to
control the size of the iframe?

Getting a hold of iframe properties is confusing to me. I change the
location using

window.frames['ifrm2'].location.href = link;

where ifrm2 is the name given to the iframe and link is a variable set to the url, e.g. 'file://localhost ....'. But how do I get a hold of the
width or height? Microsoft talks about using something like
document.all. as a starter, but nothing I try lets me get access.

Thanks for any help!
steve, Denmark


If you want to 'integrate them into one window' you probably don't want
to use an iframe, which *is* a window, albeit an embedded one. A more
logical approach would be to use a simple DIV element, setting its CSS
background-image and sizing it appropriately. Roughly...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

div#frame {
position: relative;
width: 600px;
height: 460px;
font: 16px "arial black";
color: purple;
text-align: center;
margin: 10px auto;
}
div#display {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}

</style>
<script type="text/javascript">

function loadBG(url)
{
if (!/\.((jpe?g)|(gif)|(png))$/.test(url))
{
alert('Not a valid image file.');
return false;
}
var filepath = 'file://localhost/D:/' + url;
var pic = new Image();
pic.onload = function()
{
var f, d, str = 'url(@) black no-repeat top left';
if ((f = document.getElementById('frame'))
&& (d = document.getElementById('display')))
{
f.style.width = d.style.width = this.width + 'px';
d.style.height = this.height + 'px';
d.style.background = str.replace(/@/, this.src);
d.style.border = 'thin black solid'; //add border
}
}
pic.onerror = function()
{
var f, d;
if ((f = document.getElementById('frame'))
&& (d = document.getElementById('display')))
{
d.innerHTML = 'Oops...image not loaded.';
f.style.width = d.offsetWidth;
}
}
pic.src = filepath;
return false;
}

</script>
</head>
<body>
<form>
<input type="file" onchange="loadBG(this.value)">
</form>
<div id="frame">
<div id="display"></div>
</div>
<p style="width:600px;margin:10px auto;font:10px arial;">
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah
</p>
</body>
</html>

Positioning the DIV absolutely keeps the layout from jumping when its
size is altered - the outer ("frame") DIV is inflow <position:
relative> to keep things centered. Earlier Mozilla builds had problems
with File.onchange but FF/NS handle it now; iirc Safari had a problem
too but, could be mistaken.

hth

Jul 23 '05 #2
If you want to 'integrate them into one window' you probably don't want
to use an iframe, which *is* a window, albeit an embedded one. A more
logical approach would be to use a simple DIV element, setting its CSS
background-image and sizing it appropriately. Roughly...


Hi hth,

thanks for your tip and code. I will look at it, and it may be a better
solution than what I came up with, as it allows anchoring of the image.

In the meantime, I sort of discovered that I could just do what I wanted
using an ordinary IMG tag. I thought for some reason that this would not
allow me to specify an image on the client DVD drive (or some other
non-server-reachable drive), and it doesn't if I use Firefox, but with IE
it works.

So what I do now is simply use an IMG tag, and use javascript to change
the width and height of the image, keeping the correct aspect ratio.

A DIV element will certainly give me more control, though.

Regards,
Steve
Jul 23 '05 #3
On Sat, 14 May 2005 10:08:48 +0200, coolsti wrote:
A DIV element will certainly give me more control, though.


Hi hth if you are still reading this thread.

I tried what you suggested, with a frame div and a display div with the
image as a background. This does almost what I want to do, but not
completely.

I am instead trying to use the frame div to anchor the image at a certain
location and with a fixed height and width, but am showing the image
within this div (or within another div if needed) as an image tag. This
lets me also let the user use some buttons to interactively change the
size of the image larger or smaller, where in this case any overlap will
be hidden.

But I am thinking of implementing a zoom-in function, where in the case of
overlap (the image is larger than the frame div), it is not necessarilly
the right and bottom of the image which is cut-off. Instead, I will give
the user a way to increase the size of the image but also move it around
within the frame. I tried doing this by changing the top and left values
of the inner div (holding the image tag) but this doesn't seem to work.

Do you know how I can implement this? Either by controlling the image's
position within the frame div, or the position of a display div within the
frame div?

Thanks for any help,
Steve
Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Emil Dotchevski | last post by:
I have a table that is at 100% width, which contains a <TD> that is 80% of that. In the <TD> I want to put pre-formatted text (the output from a C++ compiler, to be more precise) and I'd like the...
2
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...
1
by: Jeronimo Bertran | last post by:
I am creating a table and inserting an iframe inside a cell for which the width depends on the screen size. The table has 7 columns and the fourth column is resized depeding on the screen...
2
by: Robson Carvalho Machado | last post by:
Dear friends, I'm dynamically creating a Hyperlink with spacer.gif as ImageURL that is an 1px transparent image only to determine link position, but as I create this link dynamically I could not...
1
by: Mustafa Rabie | last post by:
dear all, i am writing an application where the user can upload his own picture. I wanted to get the Width and Height of the uploaded picture. So i assigned the uploaded image to an aspnet...
1
by: Nathan Sokalski | last post by:
I am using the ImageUrl property of the Hyperlink control to create a graphical Hyperlink. However, I want to change the size of the image I am using, but the generated HTML places the width/height...
3
by: Sven C. Koehler | last post by:
Hello, the html below displays a box (#container) with a #footer and an #image inside. Is there any way how I could get rid of declaring max-width and max-height for the #image? The #image...
1
epots9
by: epots9 | last post by:
I have a image inside of a div <div id="image"> <div id="loader"> <img id="loaderImage" src="assets/loader.gif" alt="loading..." /> </div> <div id="loaded"> <img id="picture" src="" alt=""...
22
Atli
by: Atli | last post by:
Hi. I'm setting up a small photo-album-type thing, where I use PHP to set up a list of images for visitors to click through. That's all simple enough. However, I'm having a weird bug in IE8. ...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.