?
Solved

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

Posted on 2004-09-03
7
Medium Priority
?
173 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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 2000 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

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses
Course of the Month11 days, 1 hour left to enroll

770 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