Solved

Having a problem with javascript for a background...dont know where to put it

Posted on 2004-09-03
7
171 Views
Last Modified: 2010-04-25
Hi.. Im new... first question.  
I have a page that has wriitng on it... I want to put a background image behind the words and keep the centering the same in any screen resolution.  (The image sort of has a break in the middle to see the words best).  I found this javascript here:

<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "http://www.marikudla.com/test.jpg";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<div id=elBGim"
+ " style='position:absolute;left:0;top:0;z-index:-1'>"
+ "<img name='imBG' border='0' src="+imSRC;
if (scaleWidth) imStr += " width="+winWid;
if (scaleHeight) imStr += " height="+winHgt;
imStr += "></div>";
document.write(imStr);}
makeIm();
</script>

but I cant figure out where to put it in my code!  Here is the code for the page...

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>vipmax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "http://www.marikudla.com/test.jpg";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<div id=elBGim"
+ " style='position:absolute;left:0;top:0;z-index:-1'>"
+ "<img name='imBG' border='0' src="+imSRC;
if (scaleWidth) imStr += " width="+winWid;
if (scaleHeight) imStr += " height="+winHgt;
imStr += "></div>";
document.write(imStr);}
makeIm();
</script><style type="text/css">
<!--
body {
      background-image:  url();
      background-color: #000000;
}
a:link {
      text-decoration: none;
      color: #FFFFFF;
}
a:visited {
      text-decoration: none;
      color: #FFFFFF;
}
a:hover {
      text-decoration: underline;
}
a:active {
      text-decoration: none;
}
-->
</style></head>

<body text="#00FFFF" alink="#00FFFF" style="margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;">
<div align="center">
  <table width="745" border="1" align="center" bordercolor="#00CCCC">
    <tr align="center" valign="top">
      <td> <div align="center"><font color="#FFFFFF" size="4" face="Dauphin"><a href="index.htm">VIP
          Home</a></font></div></td>
      <td> <div align="center"><font color="#FFFFFF" size="4" face="Dauphin"><a href="Blank%20Preview%20page.htm">Preview</a></font></div></td>
      <td> <div align="center"><a href="ScreenSavers/ScreenSavers.htm"><font color="#FFFFFF" size="4" face="Dauphin">Screen
          Savers</font></a></div></td>
      <td> <div align="center"><a href="mindlessmoments.htm"><font size="4" face="Dauphin">Mindless
          Moments</font></a></div></td>
      <td> <div align="center"><a href="Biteyourtongue.htm"><font color="#FFFFFF" size="4" face="Dauphin">Bite
          Your Tongue</font></a></div></td>
      <td> <div align="center"><a href="Wallpaper/wallpaper.htm"><font color="#FFFFFF" size="4" face="Dauphin">Wallpaper</font></a></div></td>
      <td> <div align="center"><a href="My%20Closet/mycloset.htm"><font color="#FFFFFF" size="4" face="Dauphin">My
          Closet</font></a></div></td>
      <td> <div align="center"><font size="4" face="Dauphin"><a href="http://marikudla.proboards3.com">Group
          Gab</a></font></div></td>
    </tr>
  </table>
</div>
<p align="center"><img src="images/Max-Mari-straight.jpg" width="585" height="110"></p>
<p align="center" style="margin-bottom: 0;">&nbsp;</p>
<p align="center" style="margin-top: 0; margin-bottom: 0;"><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="vipmaxglitz.htm">Glitz
  and Glam</a></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#FFFFFF" face="Dauphin"><strong><font color="#00FFFF" size="4">-Exclusive
  photos from shoots you haven't seen</font></strong></font></p>
<p>&nbsp;</p>
<p style="margin-bottom: 0;">&nbsp;</p>
<p align="center" style="margin-top: 0; margin-bottom: 0;"><strong><font color="#FFFFFF" size="5" face="Dauphin">
  </font></strong><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="Cookie%20crumbs/CookieCrumbs.htm">
  Cookie Crumbs</a></strong></font></p>
<p align="center" style="margin-top: 0;"><strong>-<font size="4" face="Dauphin">Misc.
  photos I didnt know what else to do with</font></strong></p>
<p align="center">&nbsp;</p>
<p align="center" style="margin-bottom: 0;"><font color="#FFFFFF" size="5"><strong><font face="Dauphin"><a href="Blonde%20Bloopers/BlondeBloopers.htm">Blonde
  Bloopers</a></font></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#00FFFF" size="4" face="Dauphin"><strong>-It
  can't all be Glitz and Glam!</strong></font></p>
<p>&nbsp;</p>
<p align="center" style="margin-bottom: 0;"><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="In%20between%20and%20after/vipmaxinbtween.htm">The-in-Between
  and After That</a></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#FFFFFF" face="Dauphin"><strong><font color="#00FFFF" size="4">-Back
  stage, hotel, on the road, at the after party...recovery.</font></strong></font></p>
<p align="center">&nbsp;</p>
<p align="center" style="margin-bottom: 0;"><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="vipmaxfriends.htm">Friends
  and Fam</a></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#FFFFFF" face="Dauphin"><strong><font color="#00FFFF" size="4">-A
  bit of Mari's world outside of the fitness industry. Day to day, and with family.</font></strong></font></p>
<p align="center">&nbsp;</p>
<p>&nbsp;</p>

</body>
</html>


Can anyone tell me where to put it so it appears behind the words?  This has been driving me crazy for awhile.  

Im really new at this, so please explain as much as possible.

Thanks,
Cinnacracker
0
Comment
Question by:cinnacracker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 

Author Comment

by:cinnacracker
ID: 11981906
Ok... maybe i need to clarify.... I have the javascript code for making a background image "fit" into different screen resolutons.  But, I do not know where to put it in the page... header?  body?  how do i work it in with what code is already there?  

heres one of my pages.  http://www.marikudla.com/JoinLounge/JoinLounge.htm
I dont want the spacing to chage between resolutions.  

Thx
0
 
LVL 9

Expert Comment

by:prifre
ID: 11983363
Hi,

generally you put JavaScript-functions in the header. If you wanna run some JavaScript as soon as the page loads, you add that to the body-tag:
<body text="#00FFFF" alink="#00FFFF" style="margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;" onLoad="makeIm()">

should work in your case.

Check out http://www.w3schools.com/js/js_whereto.asp on where to put JavaScript.

with a smile
/prifre
0
 

Author Comment

by:cinnacracker
ID: 11990937
Hi.  i just wanted to let you know that I did read your answer.  I have had to help my sister with a computer issue that took 2 solid days, so i couldnt get back to this.  I do want to try your suggestion though and make sure points are awareded.  Unfortunately  i cant work on this now either, but i just wanted to let you know i am still here and i will be back!
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:cinnacracker
ID: 12012974
ok, im back and still havent figured this one out.  

here, i made a simpler test page.

www.marikudla.com\Happy Memorial Day.htm

as you can see, it had horizontal type centered.

The background image I am trying to put behind it is:
http://www.marikudla.com/test2.gif

when this works, Test should be centerd horizontally and vertically in all resolutions.  

something strange is happening.  If you go to the first link above, you might see just the start of the background at the very top of your window... if I go to a lager resolution, I can see more of it there.  but if i refresh that resolution, it almost dissapears... must have something to do with the script...

it seems to stay centered horizontaly, but whats going on with the vertical?

anyone?


Here is the code if you need:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
      font-size: xx-large;
      font-weight: bold;
}
body {
      background-image: ;
      background-color: #0033CC;
}
-->
</style>
</head>
<body>
<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "http://www.marikudla.com/test2.gif";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<div id=elBGim"
+ " style='position:absolute;center:0;top:0;z-index:-1'>"
+ "<img name='imBG' border='0' src="+imSRC;
if (scaleWidth) imStr += " width="+winWid;
if (scaleHeight) imStr += " height="+winHgt;
imStr += "></div>";
document.write(imStr);}
makeIm();
</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div align="center" class="style1">
  <div align="center">Happy Memorial Day!
  </div>
</div>
</body>
</html>
0
 
LVL 9

Accepted Solution

by:
prifre earned 500 total points
ID: 12035381
Hi,

I have also been busy.
I have not been able to solve the problem. As I understand, the problem originates from
http://www.webreference.com/dhtml/diner/bgresize/

Now, I tried in various ways to get things working/not-working. And I have found out, that if you do use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

nothing works...

I think the whole problem is that you are trying to use DHTML for resizing, yet start by instructing the browser that DHTML is not possible...

So - if you just remove the first line from your code, things behave better.

Regarding structuring the code, etc I think I cannot add much to the programming behind the sample page that acompanies the webreference site stuff. If necessary, check out that stuff again...

with a smile
/prifre
0
 
LVL 9

Expert Comment

by:prifre
ID: 12035395
For sample code, of course check out:
http://www.webreference.com/dhtml/diner/bgresize/example.html


/prifre
0
 

Author Comment

by:cinnacracker
ID: 12040952
http://www.marikudla.com/Happy%20Memorial%20Day.htm

You my dear are a genius!  Worked like a charm.  Thx!  This is really going to allow me to spruce up my website.   This has been bugging me for a long time!

0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question