Hello, The goal of this script i

[hablablow]

Hello,

The goal of this script is to display a 800x600 image in full screen depending on the users resolution.
This background image must fit the navigator window, no white space on the right or at bottom.
I could use a 100 % width and height in a 100 % Width and Height table, but
it is buggy on all navigators except IE.
So i am using this script below.

---------------------------------------------

It stretches a div containing the image on all the available screen width.

----------------------------------------------

<div id=&quot;backgroundLayer&quot; style=&quot;position:absolute; width:694px;
height:331px; z-index:1; left: 0px; top: 0; visibility: visible&quot;>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>

if(is.ns4 || is.ns6) {
available_width = innerWidth;
available_height = innerHeight;
}

else if(is.ie4 || is.ie5 || is.ie55 || is.ie6) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
}

if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) {
image1_width = (available_width * 1.00);
image1_height = (image1_height * (available_width / image1_width));
var image1 = '<img src=&quot;1.jpg&quot; width=&quot;' + image1_width
+ '&quot; height=&quot;' + image1_height + '&quot;>';

document.write(image1);
}
</script>
</div>

-----------------------------------------------------

Of course I have to maintain the img proportions
when stretched: that is why i am using a ratio to calculate
the img height : image1_height = (image1_height * (available_width / image1_width))


Doesn't work in
MSIE
OPERA
none of the two are displaying the background image

Gives acceptable result ( displays and stretches the image )
NETSCAPE 7
MOZILLA
PHOENIX

very buggy in
NETSCAPE 4

Can somebody out there help me to debug this ?
Why is msie not displaying the image ?

---------------------------------------------

I also use this navigator detection script

----------------------------------------------

agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer')
== -1)
&& (agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf(&quot;msie&quot != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf(&quot;msie 5.0&quot
== -1));
this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf(&quot;msie 5.0&quot
!= -1));
this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf(&quot;msie 5.5&quot
!= -1));
this.ie6 = (this.ie && (agent.indexOf(&quot;msie 6.0&quot!=-1) );
this.aol = (agent.indexOf(&quot;aol&quot != -1);
this.aol3 = (this.aol && this.ie3);
this.aol4 = (this.aol && this.ie4);
this.aol5 = (this.aol && this.ie5);
}
var is = new Is();

function winResize() {
if(is.ns4 ||is.ns6||is.ie4||is.ie5||is.ie55||is.ie6) {
history.go(0);
}
}

Maybie the bug is in this part of the script ?

thanks for your incomming messages.
Hab.

 

[EdwardMartinIII]

Okay. You have an image, 800 x 600 pixels. And no matter what size the user makes their browser, you want that image to tile exactly the rectangle created? So, if they made their browser short and fat, then your image would be short and fat. If they made it tall and skinny, your image would squash appropriately? Do I understand this?

curious,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[hablablow]

Hello Edward,

What i want is a background image, no matter the original size is, to fit the users broswer window.
So first the image has to stretch to fit the entire width of the browser window.
To maintain image proportions, avoid distorsions, you stretch the image on the height maintaining the factor:
image height = image height x ( available width / image width ).
The trouble comes from IE that doesn't display the image: sends an error message:
> 'image1_height' is undefined

Does it make sense for you ?

Hab

 

[EdwardMartinIII]

Hi Hab,

I think I understand. You want the image to maintain its ratio -- regardless of the image (thus, it must be determined on-the-fly), and you want it to expand to fill whichever dimension is the limiter.

If I understand, you do not want the image to be distorted to fit the viewer's screen in both dimensions.

Is that correct?

Cheers,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[hablablow]

yes exactly.
I am using this script:

<SCRIPT LANGUAGE=&quot;JavaScript1.2&quot;>
<!--

NS4 = (document.layers);
IE4 = (document.all);

scaleWidth = true;
scaleHeight = false;
imSRC = &quot;1.jpg&quot;;

if (NS4) window.onload = setResize;

function setResize(){
setTimeout(&quot;window.onresize=reDo;&quot;,500);
}

function reDo(){
window.location.reload()
}



function makeIm() {

winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;

imStr = &quot;<DIV ID=elBGim&quot;
+ &quot; STYLE='position:absolute;left:0;top:0;z-index:-1'>&quot;
+ &quot;<IMG NAME='imBG' BORDER=0 SRC=&quot; + imSRC;
if (scaleWidth) imStr += &quot; WIDTH=&quot; + winWid;
if (scaleHeight) imStr += &quot; HEIGHT=&quot; + winHgt;
imStr += &quot;></DIV>&quot;;

document.write(imStr);

}
//-->
</SCRIPT>

Works properly in IE and NS4
Not Working in Mozilla 5 and above
Something is missing for: NS6 = ( ???????? )
I know i have to specify it in:

NS4 = (document.layers);
IE4 = (document.all);

for it to work.

Any idea how ?

Hab.