Solved

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

Posted on 2004-09-03
7
167 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create login page using dreamweaver cs6 and mysql (phpMyAdmin) 6 11,767
Why does this script not work in this site 2 301
Replace Dreamweaver with what? 8 162
Adobe Products Forum? 3 148
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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…
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

864 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now