Forum Moderators: open
My second time here - cause you guys are good :)
This is the dilemma:
I have a thumbnail which opens to a pop-up windows (using javascript), but the pop-up image does not display in its real dimensions. IE changes the image to 'best-fit'. Now I know that I can get rid of that option in IE to stop using 'best-fit', but lots of people that come to the site won't have that option.
Is there a way of modifying the code below to force IE (using javascript or anouther way) to FORCE the image to be displayed in its real dimensions?
Thank You in Advance.
Code:
This is in the <HEAD>:
<SCRIPT language="JavaScript" type="text/javascript">
<!-- ;
var newwindow = ''
function popitup(url) {
if (newwindow.location &&!newwindow.closed) {
newwindow.location.href = url;
newwindow.focus(); }
else {
newwindow=window.open(url,'htmlname','width=600,height=700,resizable=1,scrollbars=yes');}
}
function tidy() {
if (newwindow.location &&!newwindow.closed) {
newwindow.close(); }
}
// Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->
</SCRIPT>
This is in the <BODY>:
<body onUnload="tidy()">
And this is between <td> </td>:
<a href="javascript:popitup('case_1_images/HCor_3_a.JPG','resizable=yes','location=no','width=900','height=1000')">
<img border="2" src="case_1_images/HCor_3_a_small1.JPG" xthumbnail-orig-image="case_1_images/HCor_3_a.JPG" width="47" height="66"></a><div style="position: absolute; width: 482px; height: 64px; z-index: 1; left: 124px; top: 1377px" id="layer1">
Particularly, I have been trying to change the code in the <a href=> tag with out success - anyone got an idea please?
Just a couple of things.
In you code, you have:
[b]function popitup(url)[/b]Alter this to:
[b]function popitup(url,w,h)[/b]------------------
In the section that has:
[b]newwindow=window.open(url,'htmlname','width=600,height=700,resizable=1,scrollbars=yes');}[/b]Change this to:
[b]newwindow=window.open(url,'htmlname','width='"+ w +"',height='"+ h +"',resizable=no,scrollbars=no,location=no');}[/b]------------------
Then your <a> tag code which you have:
[b]<a href="javascript:popitup('case_1_images/HCor_3_a.JPG','resizable=yes','location=no','width=900','height=1000')">[/b][b]<a href="javascript:popitup('case_1_images/HCor_3_a.JPG','900','1000')">[/b]Remember that the width and height of the new window needs to be 20px larger than the image. ie: your image is 200px wide and 100px high. Your window will be 220px wide and 120px high. This is to allow for the margins in the new window.
Anyway, give it a go and see what happens. I hope this helps.
Kind regards
Pantyboy
Im gonna post the complete code in the next post.
How about putting a script in the popup window to resize based on image size?
In the link page, I have:
<a href="javascript:window.open('image.htm','window','scrollbars=no,resizeable=no,statusbar=no')">Image1</a>
And in the image.htm page I have:
function resizeToImage(){
img1=document.images[0]
height=img1.height
width=img1.width
self.resizeTo(width,height)
}
//-->
</script>
<style type="text/css">
body,html {
margin:0;
padding:0;
}
</style>
</head>
<body onload="resizeToImage()">
<img src="Image1.jpg" alt="" />
</body>
Then it's just a matter of accounting for the height of the menu bar and for the border chrome. From my tests, it looks like IE has a menubar+bottom chrome of 29px vs 25px for Mozilla Firefox. I haven't tested width, but you don't really lose much there anyway.
You could add these measurements to the height and width variables.
Hope this helps,
ajkimoto
But can you clear something up for me?
function resizeToImage(){
img1=document.images[0]
height=img1.height
width=img1.width
self.resizeTo(width,height)
}
//-->
</script>
This code of yours, doesn't have a begining opening like <script>? but it is close with </script>
can you tell me what the opening is?
Thank you
in the link page where this code resides:
<a href="javascript:window.open('image.htm','window','scrollbars=no,resizeable=no,statusbar=no')">Image1</a>
when I click the link - the page goes blank and all that is displayed is this :
[object]
<html>
<head>
<title>Picture</title>
</head>
<body>
<img src="picture.jpg" alt="">
</body>
</html>
It's a nuisance, but there you are.
Yes, it seems that I didn't cut as much I should have when copying the code from my test document to the message. The starting script tag and structure should have been:
<script type="text/javascript">
<!--
As for the [object] business, this happens because the browser doesn't know what to do with the link. Since there is no target specified in the link, the page attepts to load the window object into the page.
There are several ways around this:
If you are using an HTML4 transitional or XHTML transitional doctype, you and use the target attribute. If you set the target attribute to refer to the name of the window you want to open:
<a target="window" href="javascript:window.open('image.htm','window','scrollbars=no,resizeable=no,statusbar=no')">Image1</a>
or you can set the target attribute on the base tag in the page header if all links in the page will open in the same fashion:
<base target="window" />
With a HTML4 strict or XHTML strict doctype, this will not validate, since the target attribute has been deprecated. You can still get the same effect using javascript by rewriting the tag as:
<a href="javascript:void(0)" onclick="window.open('image.htm','window','scrollbars=no,resizeable=no,statusbar=no')">Image1</a>
The href points to a void operator (which is an operator that evalutates a function without returning a value) and the window.open function is now an onclick event handler.
Hope this clears things up,
ajkimoto
