PDA

View Full Version : 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.


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
<!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
<!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
<!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?

vwphillips
05-25-2010, 08:18 AM
I missed this one but is this what you want


<!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>');

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

</script>
</body>

</html>

NickNameDrive
05-25-2010, 07:53 PM
Perfect, got loop and everything! You missed <div>#4 in sequence but i can handle it!
Will post site link here when all the testing is done!

Thanks again!

NickNameDrive
05-28-2010, 09:13 PM
Ok, run some tests. It seems that this part doesn't do what it suppose to do!


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';
}

Ideas: I think each set of image set (a1,a2...) need separate var, as for now the var 'bg' only comes with 4 pre-set images and rotates around them. But resolution plugin doesn't realy play any part in image selection.

var bg1 has 4 set pictures each for different resolution (would be determined by the plugin above) and so for bg2, bg3, bg4. The rest is the same, onlick change one of picture sets, resolution plugin will select wich picture comes.

Also div 1 doesn't display text untill it loops.

Still need help??

vwphillips
05-29-2010, 08:56 AM
I tested the code(1024*768 ) and it works for me IE and FF.

Please post a link to your page

NickNameDrive
05-31-2010, 04:27 PM
Got it working with the following code:



function BG(bgabc) {

var bg1=('../img/bg/'+bgabc+'1.jpg');
var bg2=('../img/bg/'+bgabc+'2.jpg');
var bg3=('../img/bg/'+bgabc+'3.jpg');
var bg4=('../img/bg/'+bgabc+'4.jpg');
var bg5=('../img/bg/'+bgabc+'5.jpg');

var bg=document.body;

nobg.setAttribute('src',bg1);

if (screen.width<=800 && screen.height<=600) {
bg.style.backgroundImage='url('+bg5+')';
nobg.style.display='none';}

if (screen.width<=1024 && (screen.height>600 && screen.height<800)) {
bg.style.backgroundImage='url('+bg4+')';
nobg.style.display='none';}

if (screen.width<=1280 && (screen.height>=800 && screen.height<900)) {
bg.style.backgroundImage='url('+bg3+')';
nobg.style.display='none';}

if (screen.width<=1280 && (screen.height>=900 && screen.height<=1100)) {
bg.style.backgroundImage='url('+bg2+')';
nobg.style.display='none';}

bg.style.backgroundAttachment='fixed';

} :)

onclick passes the value of "bgabc", and divs are rotated in order, one appears on disapears.

Thanks!

MLA
07-16-2010, 02:34 PM
Apologies in advance for bumping up a thread that has had no activity for over a month, but this was the closest topic to the problem I am currently experiencing...

I have created a vertical scroll website...consisting of five sections on one page. Each section has its own background image. Is it possible to specify either in css or through js to automatically resize the image for each section of the page to the corresponding resolution of the user(s) screen size?

This is a prime example of working on something for too many hours and not getting the desired results...my brain is overly cluttered now.

NickNameDrive
07-23-2010, 08:28 PM
to MLA, if you still looking.

Yes it is possible with JS, not quite sure how CSS will do, but read this http://css-tricks.com/resolution-specific-stylesheets/, hope that helps!

jscheuer1
07-24-2010, 03:23 AM
This may or may not be what you are looking for:

http://home.comcast.net/~ansiguy/alpha_image_test_2.htm

Once you load the page, try out resizing the window.

As presented in this thread:

http://www.dynamicdrive.com/forums/showthread.php?p=30671#post30671

Read the whole thread, things develop.

MLA
07-31-2010, 03:56 PM
NickNameDrive & jscheuer1, thank you very much for your help and info. both sets of info you posted is what I was looking for.

:cool: