Background to screen resolution and changeable?

**NickNameDrive** · 05-17-2010, 06:22 PM

Hi everyone, great portal you got here, thanks. I need a little help with JS.

I got no experience with JS, but i managed to scrumble this.

Code:

if ((screen.width<=800) && (screen.height<=600)) {
document.getElementById('bg').style.display='none';
document.write('<style type="text/css">body{background: white url(images/bg/i4.jpg);}"></style>')
}
if ((screen.width<=1024) && (screen.height>600 && screen.height<800)) {
document.getElementById('bg').style.display='none';
document.write('<style type="text/css">body{background: white url(images/bg/i3.jpg);}"></style>')
}
if (screen.width<=1280 && (screen.height>=800 && screen.height<900)) {
document.getElementById('bg').style.display='none';
document.write('<style type="text/css">body{background: white url(images/bg/i2.jpg);}"></style>')
}
if (screen.width<=1280 && (screen.height>=900 && screen.height<=1100)) {
document.getElementById('bg').style.display='none';
document.write('<style type="text/css">body{background: white url(images/bg/i1.jpg);}"></style>')
}
document.write('<style type="text/css">body{background-attachment: fixed; background-position:center;}"></style>');

I do know it is bulky, but I can't do any better, if anyone can advice shorter vesrion, that be great!

Oh, and for those who has JS disabled or fall out of this script reach, get 100% streched <img> with id "bg"!

I also want JS to able to change the background image (user end), play the above script again and run function that will recognize image's name and place description text (in div for example) accordingly. How difficult is that and can anyone drop some lines of code here? Thanks in advance!

**djr33** · 05-17-2010, 07:09 PM

Oh, and for those who has JS disabled or fall out of this script reach, get 100% streched <img> with id "bg"!

Note that you didn't include this in your code, but it is easy enough to imagine.

**NickNameDrive** · 05-17-2010, 07:21 PM

Yeah, it's in the <body>, right after!

**vwphillips** · 05-18-2010, 10:00 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div id="bg" >Test</div>
<script type="text/javascript">
var bg='';
if (screen.width<=800 && screen.height<=600) {
 bg=' white url(images/bg/i4.jpg)';
}
else if (screen.width<=1024 && screen.height>600 && screen.height<800) {
 bg='red url(images/bg/i3.jpg)';
}
else if (screen.width<=1280 && screen.height>=800 && screen.height<900) {
 bg=' white url(images/bg/i2.jpg)';
}
else if (screen.width<=1280 && screen.height>=900 && screen.height<=1100) {
 bg=' white url(images/bg/i1.jpg)';
}
 if (bg!=''){
  document.getElementById('bg').style.display='none';
 }
document.write('<style type="text/css">body{background:'+bg+';background-attachment: fixed; background-position:center;}"></style>');
</script>
</body>

</html>

**NickNameDrive** · 05-18-2010, 07:21 PM

Thanks Vic for simplified version!

What about image-name-recognition and assignement of appropriate discription to inside div tag? I was thinking to create up to three divs with different descriptions, where two are display:none. But when user changes backgournd script recognizes the name of the image and activate appropriate description div. Can anyone help with that?

**vwphillips** · 05-19-2010, 11:39 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div id="bg1" >Test 1</div>
<div id="bg2" >Test 2</div>
<div id="bg3" >Test 3</div>

<script type="text/javascript">
var bg='';
var IDAry=['bg1','bg2','bg3'];
var IDNu=-1;
if (screen.width<=800 && screen.height<=600) {
 bg=' white url(images/bg/i4.jpg)';
 IDNu=0;
}
else if (screen.width<=1024 && screen.height>600 && screen.height<800) {
 bg='red url(images/bg/i3.jpg)';
 IDNu=1;
}
else if (screen.width<=1280 && screen.height>=800 && screen.height<900) {
 bg=' white url(images/bg/i2.jpg)';
}
else if (screen.width<=1280 && screen.height>=900 && screen.height<=1100) {
 bg=' white url(images/bg/i1.jpg)';
 IDNu=2;
}
 for (var z0=0;z0<IDAry.length;z0++){
  document.getElementById(IDAry[z0]).style.display=z0!=IDNu?'none':'block';
 }

document.write('<style type="text/css">body{background:'+bg+';background-attachment: fixed; background-position:center;}"></style>');
</script>
</body>

</html>

**NickNameDrive** · 05-19-2010, 07:42 PM

Vic, Thank again. But I don't think that's what i'm after.

The above script that you sent me (first one) will play on every page. But i also want users to be able to change the backgound picture, those images i1,i2,i3... are just resized version of the same picture. Others will have different first letter, such as a1, a2, a3. Once user click to change backround the script loads with different set of resized images (a1,a2...), checks resolution as before and applies one that matchs, after that it checks the files name or a first letter of the file and triggers an appropriate <div> text inside description box, maybe by using innerHTML. Should user click again the same thing happens with different set of resized pictures (b1, b1, b3...). So it has to be a funstion that will play itlself everytime user click to change BG. Using predesigned sequense of images is fine too. I was thinking to give them up to 3-4 background choices.

Do you think, you can still help with that?

**NickNameDrive** · 05-19-2010, 07:51 PM

So i gues there're have to be a function that will call Onmousedown/click. Vars, one is 'bg' (Vic gave me that one already) second one is 'bg-name' or first letter of it..., and third probably is 'description' which replaces div.innerHTML according to new bgname. I think I can see the structure but got no skils to implement it. Any help? Thanks!

P.S. However I don't know how the whole engine will work for it, I want the order to be predesigned for 3-4 pictures with a loop.

**vwphillips** · 05-20-2010, 03:53 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div id="bg1" >Test 1</div>
<div id="bg2" >Test 2</div>
<div id="bg3" >Test 3</div>
<input type="button" name="" value="Test" onclick="BG(0);" />
<script type="text/javascript">
var bg='';
var IDAry=['bg1','bg2','bg3'];
var BGAry=[
'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
];
var IDNu=-1;
if (screen.width<=800 && screen.height<=600) {
 bg=' white url('+BGAry[3]+')';
 IDNu=0;
}
else if (screen.width<=1024 && screen.height>600 && screen.height<800) {
 bg=' white url('+BGAry[2]+')';
 IDNu=1;
}
else if (screen.width<=1280 && screen.height>=800 && screen.height<900) {
 bg=' white url('+BGAry[1]+')';
}
else if (screen.width<=1280 && screen.height>=900 && screen.height<=1100) {
 bg=' white url('+BGAry[0]+')';
 IDNu=2;
}
 for (var z0=0;z0<IDAry.length;z0++){
  document.getElementById(IDAry[z0]).style.display=z0!=IDNu?'none':'block';
 }

document.write('<style type="text/css">body{background:'+bg+';background-attachment: fixed; background-position:center;}"></style>');

function BG(nu){
 document.body.style.backgroundImage='url('+BGAry[nu]+')';
 for (var z0=0;z0<IDAry.length;z0++){
  document.getElementById(IDAry[z0]).style.display=z0!=nu?'none':'block';
 }
}

</script>
</body>

</html>

**NickNameDrive** · 05-20-2010, 06:51 PM

Thanks Vic, just ran it. It seem to go fine for the first click and then stops, goes from 2 to 1 and no action afterwards. I cannot disassemble it myslef, so could you please take a look again. Have you tested it?