Solved

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

Posted on 2004-09-03
7
169 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
  • 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Record Button 3 221
Webpage needs to float with gray border all around 7 259
Dreamweaver CS6 keyboard shortcut 8 1,058
Need icon art 9 118
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 …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…

856 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