a clearer script for a background attached to a body tag [Archive]

Click to See Complete Forum and Search --> : a clearer script for a background attached to a body tag

James Odell

09-13-2003, 09:48 AM

Just a bit of background - I've created 3 interlinked sites and the emphasis has been to wow the viewer with panoramic views of the orange river and the kalahari by inserting full screen background images, albeit ghosted ones.

A programmer helped with some javascript to insert the right sized image for the viewers screen resolution. That is 800x600 (1) 1024x762 (2) and anything above (3). So the script looks at the viewers screen resolution and then inserts one of three images into the background.

I now want to protect my sites using the HTML Guard programme. However, it is searching for clear body tag which the above script makes up. The problem is that the background tag is attached to the body tag. The aim is to change the script so that the body tag still puts in the right background image, but should be seen just as a body tag as well for the HTML Guard programme to work.

If you are interested you can see the script in action at http://www.kalahari-adventures.co.za .

Now I have tried to modify the small scrpt without success. It just gives me a blank page in IE and N7. Below is a test page with the small script ( I hope the php code works):

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type='text/javascript'>

</script>

</head>

<body id="MyBody" background="" leftmargin="0" topmargin="0">

</html>

Netscpe javascript console tells me that in line 24 document.all has no properties. And IE6 tells me char 1 is null or not an object.

As I know very little about javascript I'm working in the dark. Is there a function missing further up?

Thanks for looking at this for me.

James

gil davis

09-13-2003, 10:16 AM

As the NS console has told you, document.all is not supported by Netscape/Mozilla. It is a Micro$oft proprietary array.

The IE error is probably because the background attribute for a backgroundImage has to be a URL.

The following code works in IE5+ and NS6+:
<head>
<script>
function test() {
document.getElementById("x").style.backgroundImage = 'url("lilguy2.gif")';
}
</script>
</head>
<body id="x" onload="test()">
</body>Note that this only sets the image file value. If you want to control the repeat or position or other attributes, use a style sheet entry in the head section.

James Odell

09-14-2003, 02:13 AM

Thanks for the new script. There's just one thing I would like to clarify with you and that is how I can resolve the image sizes for the different screen resolutions.

At the moment I have 3 different sized images - one of which is used to fit a viewer's screen resolution as a bacground image that stays still and it fits the whole screen - I use this style for that:

<style type='text/css'>
</style>

Not sure if the .bigM is necessary. Had soneone help me there.

From your script it would seem as though a style can resize one image to any of the 3 different screen resoluions. Would this not take longer to serve? Actually a background image shows pretty quicky, but if it had to be resized and it works ok I would be happy.

At the moment I have 3 different files for the 3 main resolutions. What would the style look like?

I've tried a www search on css styles on backgrounds, but they ali seem to go for the one image which doen't cater for the different screen resolutions eg

<body style="background-image : ../graphics/purple.gif;">

Can I convert my existing jscript into a style?

Thanks for your expertise

James

James Odell

09-14-2003, 02:50 AM

I forgot to mention that each page has a differnt background image so a sitewide style cannot be used unless I put a customised style on every page.

gil davis

09-14-2003, 05:02 PM

Originally posted by James Odell
From your script it would seem as though a style can resize one image to any of the 3 different screen resoluions. Would this not take longer to serve? Actually a background image shows pretty quicky, but if it had to be resized and it works ok I would be happy.
I have not tried to change the size of a background image. You don't have as much control over a background image as you do a normal image.
At the moment I have 3 different files for the 3 main resolutions. What would the style look like?
You can change any of the style settings with javascript as appropriate for the image change. For example:
document.getElementById("MyBody").style.marginTop = "2000px";or
document.getElementsByTagName("BODY")[0].style.marginTop = "2000px";
Can I convert my existing jscript into a style?Not really. The script changes the styles, and the style sets a default. Style sheets don't have any "if" capabilities.

James Odell

09-15-2003, 05:28 AM

Dear Gil

I"m coming back to you all embarrased. I should've given you more code and explained that on every page jscript looks at a viewers screen resolution and then chooses between 3 different sized files of the same image to display the right one to fill the whole screen

So that part of the js has to remain or linked into your amended script to make the body tag more of a normal one for HTML Guard to pick up.

As you can see from the original code below there's no proper body tags at the beginning and end of the pages.

In the latest code below I have tried different combinations to link my original code into your latest one without success. N7 is telling me - Error: document.getElementById("MyBody") has no properties. (Line: 34) and in IE6 it tells me nothing's wrong.

Please do not anwser this if you are angry with me. I will understand.

(Latest code)

<php>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type='text/css'>

</style>

<script type='text/javascript'>

</script>

</head>

<body id="MyBody" background="" leftmargin="0" topmargin="0">

</body>
</html>
</php>

(Original code)

<php>
<html>
<head>
<title>Kalahari Adventure Centre - river and desert adventures</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Pragma" content="no-cache">
<meta name="description" content="Near to Augrabies Falls National Park and the Kalahari we provide river trails and overland safaris catering for backpackers in a pristine wilderness">
<meta name="keywords" content="Augrabies Falls national park,river trails,canoeing,river adventures,Kalahari,backpackers,safaris">

<style type='text/css'>
</style>
<script type='text/javascript'>

</script>

<script>
window.onload = function()
{
onLoad="MM_preloadImages('various_images);"
}
</script>
<link rel="stylesheet" href="kac.css">

</head>

<script type='text/javascript'></script>

</html>
</php>

gil davis

09-15-2003, 01:16 PM

The object ("MyBody") must exist and be completely loaded before you can access it. Therefore, you cannot use javascript to change the background image until onLoad has fired. NS 7 is correctly identifying the error. I don't know why you aren't getting "object expected" from IE. Maybe you have IE set to ignore errors (do you get a "!" in a triangle in the lower left of the window?).

Put the image change code into the onLoad event you already have, and the error will be history.