X-Cart forums

[syllogism]

I was told not to write HELP in the Subject Area. So here goes HELP!
I am using Flexy Rectangles which has a photo (main_bg_1.jpg 1000 x 132). If my monitor setting is 1024 x 768 then I see only 70% (approx) of photo. If the setting is 800 x 600 then I see even less and with 1280 x 1024 then I see everything. I need a simple solution that will accomodate a customer regardless of his/her monitor setting. I suspect the solution may require that I create 3 images (which is fine) but I need to know the IF/ELSE logic that will recognize the monitor setting.

If anyone can help I would be most appreciative.

[Zaja]

Try following:

1. Head:

<script type="text/javascript">
//<![CDATA[

{literal}
var w=screen.width;
var h=screen.height;

function resolution() {
if((w==800)&&(h==600)) {
document.getElementById('point').src='skin1/images/800_600_bg.jpg';
}
else if((w==1024)&&(h==768)) {
document.getElementById('point').src='skin1/images/1024_768_bg.jpg';
}
else if((w==1152)&&(h==864)) {
document.getElementById('point').src='skin1/images/1152_864_bg.jpg';
}
else if((w==1280)&&(h==960)) {
document.getElementById('point').src='skin1/images/1280_960_bg.jpg';
}
else if((w==1280)&&(h==1024)) {
document.getElementById('point').src='skin1/images/1280_1024_bg.jpg';
}
}
onload=resolution;
{/literal}

//]]>
</script>

2. Body:

<div>[img]skin1/images/main_bg.jpg[/img]</div>

[syllogism]

Many Thanks to Zaja for supplying this code that worked for me in the Home.tpl of the Flexy Rectangles template re the picture main_bg_1.jpg. The idea was to display a diferent version (size) of the same picture depending upon the resolution of the viewing monitor.

2. header code:
Code:
<script type="text/javascript">
//<![CDATA[
{literal}

var w=screen.width;
var h=screen.height;

function resolution() {
if((w==800)&&(h==600)) {
document.getElementById('point').background='skin1 /images/custom/800_600_bg.jpg';
}
else if((w==1024)&&(h==76) {
document.getElementById('point').background='skin1 /images/custom/1024_768_bg.jpg';
}
else if((w==1152)&&(h==864)) {
document.getElementById('point').background='skin1 /images/custom/1152_864_bg.jpg';
}
else if((w==1280)&&(h==960)) {
document.getElementById('point').background='skin1 /images/custom/1280_960_bg.jpg';
}
else if((w==1280)&&(h==1024)) {
document.getElementById('point').background='skin1 /images/custom/1280_1024_bg.jpg';
}
}
onload=resolution;

{/literal}
//]]>
</script>

3. Table code:
Code:
<table id="point" width="100%" border="0" cellpadding="0" cellspacing="0" background="skin1/images/default_bg.jpg" class="MainImageBackground">