'document[...]' is null or not an object with rotating images

27 New Member

What I have is a is two sets of images,(Weather , optical) there is about 30 images of is each set.

I have script that will rotate through the images on the main page.

The user is able to view one or the other img sets with a simple onclick

This works great in Mozilla but in IE I get the error document[...]null or not an object, line 95, char 4.

I've spent hours on this, but no luck.

javascript

Expand|Select|Wrap|Line Numbers

 
//Declare and set some variables

var type;

var interval = 5000;

var random_display = 0;

var imageArray;

var imageNum = 0;

var totalImages = 0;
 
//this function is called on page load

//it sets the divs off, looks for a cookie 

//turns divs on depending on the cookie

function noDiv() {

   //sets both divs display to off

   $('weather_pic').style.display = 'none';

   $('optical_pic').style.display = 'none';
 
   //gets the cookie 

   var ImgCookie = getCookie("pic_type");
 
   //if cookie is set calls the switchDiv to turn the div display on

   //else to defaults to the weather_pic div

   if (ImgCookie) {

      switchDiv(ImgCookie);

   } else {

      switchDiv('weather_pic');

   }

}
 
//this function turns the divs on or off and sets the cookie accordingly

function switchDiv(picType) {

   if (picType == 'weather_pic') {

      $('optical_pic').style.display = 'none';

      $('weather_pic').style.display = 'inline';

      cookies(picType);

      rotate(picType);

   }

   if (picType == 'optical_pic') {

      $('weather_pic').style.display = 'none';

      $('optical_pic').style.display = 'inline';

      cookies(picType);

      rotate(picType);

   }

}
 
//this is the set cookie function it deletes the old and sets a new for 30 days 

//get, set, and deleteCookie is found in /support/cookie.js

function cookies(picType) {

   deleteCookie("pic_type");

   setCookie("pic_type", picType, 30);

}

function rotate(picType) {

   //var type;

   //var interval = 5000;

   //var random_display = 0;

   //var imageArray = new Array();

   //var imageNum = 0;

   var i = 0;
 
   if (picType == 'weather_pic') {

      var image_dir = "img/revised/";

      type = "id_weather";

      imageNum = 0;

      imageArray = 0;

      imageArray = new Array();
 
      for (i=1; i<=26; i++) {

         imageArray[imageNum++] = new imageItem(image_dir + i + ".png");

      }

   }

   if (picType == 'optical_pic') {

      var image_dir = "img/Optics/";

      type = "id_optical";

      imageNum = 0;

      imageArray = 0;

      imageArray = new Array();
 
      for (i=1; i<=56; i++) {

         imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");

      }

   }
 
   totalImages = imageArray.length;

   switchImage(type);

}
 
function imageItem(image_location) {

   this.image_item = new Image();

   this.image_item.src = image_location;

}
 
function switchImage(place) {

   var new_image = getNextImage();

   document[place].src = new_image;

   var recur_call = "switchImage('"+place+"')";

   timerID = setTimeout(recur_call, interval);

}

function getNextImage() {

   if (random_display) {

      imageNum = randNum(0, totalImages-1);

   } else {

      imageNum = (imageNum+1) % totalImages;

   }
 
   var new_image = get_ImageItemLocation(imageArray[imageNum]);

   return(new_image);

}
 
function randNum(x, y) {

   var range = y - x + 1;

   return Math.floor(Math.random() * range) + x;

}
 
function get_ImageItemLocation(imageObj) {

   return(imageObj.image_item.src)

}

noDiv() is called from the page load and the java works from there.
This problem is in my switchDiv() function, but I haven't been able to solve it.

here is the html

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="support/cookie.js"></script>

<script type="text/javascript" src="support/main.js"></script>

</head>

<body onload="noDiv()">

            <div id="navtrail2">

               <span onclick="switchDiv('weather_pic')"> Weather Pictures</span> :

               <span onclick="switchDiv('optical_pic')"> Optical Pictures</span>

            </div>

               <!-- Start right Column box -->

               <div id="righcolbox">

                  <div id="weather_pic">

                     <img height="385px" width="385px" align="right" border="3" id="id_weather" src="img/revised/1.png" alt="Weather Images" />

                  </div>

                  <div id="optical_pic">

                     <img height="385px" width="385px" align="right" border="3" id="id_optical" src="img/Optics/1.jpg" alt="Optical Images" />

                  </div>
 
               <!-- End right Column box -->

               </div>

</body>

</html>

could someone help with this?

Aug 21 '07 #1

Subscribe Reply

2153

pbmods

5,821

Recognized Expert Expert

Heya, BD.

It looks like this is the line that is causing you grief (in switchImage()):

Expand|Select|Wrap|Line Numbers

document[place].src = new_image;

Try this:

Expand|Select|Wrap|Line Numbers

 
var img = document.getElementsByName(place)[0];

if(img)

{

    img.src = new_image;

}

else

{

    // Debug

    alert(place);

}

Aug 21 '07 #2

bdbeames

New Member

I think you are on to something, but I am still having trouble

this is what I changed the function to

Expand|Select|Wrap|Line Numbers

 
function switchImage(place) {

   var new_image = getNextImage();

   var img = document.getElementByName(place)[0];

   if (img) {

      img.src = new_image;

   } else {

      //debug

      alert(place);

   }

   //document[place].src = new_image;

   var recur_call = "switchImage('"+place+"')";

   timerID = setTimeout(recur_call, interval);

}

IE error
Object doesn't support this property or method
line 95 char4

what am i doing wrong?

It no longer works in Mozilla as it did before I receive the error
document.getEle mentByName is not a function.

Aug 21 '07 #3

bdbeames

New Member

Ok fixed my one problem it is getElementsByNa me not getElementByNam e

I'm not receiving an error in IE but my images never appear. In Mozilla I just receive the error message every 5 seconds.

Does anyone know how to fix this.

Thanks

Aug 21 '07 #4

jx2

228

New Member

well im not an expert on this so i might be wrong
but this lines look weird to me

Expand|Select|Wrap|Line Numbers

 
// those quotation marks look weird to me

// iam not sure about the purpose of it... 

//wouldnt you have to use eval(recure_call) after that?

// pbmods probably knows 

   var recur_call = "switchImage('"+place+"')";
 
   timerID = setTimeout(recur_call, interval);
 
//anyway i would try to write them :
 
   var recur_call = place;

   timerID = setTimeout(switchImage(recur_call), interval);

}

i hope that helped
jx2

Aug 21 '07 #5

pbmods

5,821

Recognized Expert Expert

Heya, JX2.

In this code:

Expand|Select|Wrap|Line Numbers

var recur_call = "switchImage('"+place+"')";

recur_call might, for example, evaluate to:
switchImage('id _weather');

However, you can also do this:

Expand|Select|Wrap|Line Numbers

timerID = setTimeout(function() { switchImage(place); }, interval);

Now that I'm looking at it, you actually want to do this instead:

Expand|Select|Wrap|Line Numbers

 
var img = document.getElementById(place);

if(img)

{

    img.src = new_image;

}

else

{

    // Debug

    alert(place);

}

The document[place] syntax confused me because long-time IE programmers often get element names and IDs confused (since IE makes them more or less equivalent; this is incidentally why a lot of IE designers abuse IDs).

Aug 21 '07 #6

jx2

228

New Member

Heya, JX2.

In this code:

Expand|Select|Wrap|Line Numbers

var recur_call = "switchImage('"+place+"')";

recur_call might, for example, evaluate to:
switchImage('id _weather');

However, you can also do this:

Expand|Select|Wrap|Line Numbers

timerID = setTimeout(function() { switchImage(place); }, interval);

thx a lot pbmods - nice trick

- i learn a lot from you!!
hough!!

Aug 21 '07 #7

pbmods

5,821

Recognized Expert Expert

We aim to please.

Aug 21 '07 #8

bdbeames

New Member

Ok I believe I got it. Thanks again for all the help.

I had one div/id working and couldn't get the other one to work.

After a long step by step walk through the problem was that one of img sets couldn't be displayed for some reason. They were .png images. I made them .jpg images and it worked. I don't understand why .png doesn't work but that was the problem.

Do either of you know why?

Anyways here is all my code if you ever have to do the same thing.

check out the site:
http://beta.climate.us urf.usu.usu.edu

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

   <script type="text/javascript" src="support/cookie.js"></script>

   <script type="text/javascript" src="support/main.js"></script>

</head>
 
<body onload="noDiv()">

<div id="navtrail2">

   <span onclick="switchDiv('weather_pic')"> Weather Pictures</span> :

   <span onclick="switchDiv('optical_pic')"> Optical Pictures</span>

</div>

<!-- Start right Column box -->

<div id="righcolbox">

   <div id="weather_pic">

      <img height="385px" width="385px" align="right" border="3" 

id="id_weather" src="img/revised/1.png" alt="Weather Images" />

   </div>

   <div id="optical_pic">

      <img height="385px" width="385px" align="right" border="3" id="id_optical" src="img/Optics/1.jpg" alt="Optical Images" />

   </div>

<!-- End right Column box -->

</div>
 
</body>

</html>

Expand|Select|Wrap|Line Numbers

 
//Declare and set some variables

var type;

var interval = 5000;

var random_display = 0;

var imageArray;

var imageNum = 0;

var totalImages = 0;

var image_dir;
 
//this function is called on page load

//it sets the divs off, looks for a cookie 

//turns divs on depending on the cookie

function noDiv() {

   //sets both divs display to off

   $('weather_pic').style.display = 'none';

   $('optical_pic').style.display = 'none';

   //document.getElementById('weather_pic').style.display = 'none';

   //document.getElementById('optical_pic').style.display = 'none';
 
   //gets the cookie 

   var ImgCookie = getCookie("pic_type");
 
   //if cookie is set calls the switchDiv to turn the div display on

   //else to defaults to the weather_pic div

   if (ImgCookie) {

      switchDiv(ImgCookie);

   } else {

      switchDiv('weather_pic');

   }

}
 
//this function turns the divs on or off and sets the cookie accordingly

function switchDiv(picType) {

   if (picType == 'weather_pic') {

      $('weather_pic').style.display = 'inline';

      $('optical_pic').style.display = 'none';

      //alert(picType);

      cookies(picType);

      rotate(picType);

   }

   if (picType == 'optical_pic') {

      $('optical_pic').style.display = 'inline';

      $('weather_pic').style.display = 'none';

      //alert(picType);

      cookies(picType);

      rotate(picType);

   }

}
 
//this is the set cookie function it deletes the old and sets a new for 30 days 

//get, set, and deleteCookie is found in /support/cookie.js

function cookies(picType) {

   deleteCookie("pic_type");

   setCookie("pic_type", picType, 30);

}

function rotate(picType) {

   var i = 0;
 
   if (picType == 'weather_pic') {

      image_dir = "img/Optic/";

      type = "id_weather";

      imageNum = 0;

      imageArray = 0;

      imageArray = new Array();
 
      for (i=11; i<=20; i++) {

         imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");

      }

   }

   if (picType == 'optical_pic') {

      image_dir = "img/Optics/";

      type = "id_optical";

      imageNum = 0;

      imageArray = 0;

      imageArray = new Array();
 
      for (i=1; i<=10; i++) {

         imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");

      }

   }
 
   totalImages = imageArray.length;

   switchImage(type);

}
 
function imageItem(image_location) {

   this.image_item = new Image();

   this.image_item.src = image_location;

}
 
function switchImage(place) {

   var new_image = getNextImage();

   var img = document.getElementById(place);

   if (img) {

      img.src = new_image;

   } else {

      //debug

      alert(place);

   }

   //document[place].src = new_image;

   var recur_call = "switchImage('"+place+"')";

   timerID = setTimeout(recur_call, interval);

}

function getNextImage() {

   if (random_display) {

      imageNum = randNum(0, totalImages-1);

   } else {

      imageNum = (imageNum+1) % totalImages;

   }
 
   var new_image = get_ImageItemLocation(imageArray[imageNum]);

   return(new_image);

}
 
function randNum(x, y) {

   var range = y - x + 1;

   return Math.floor(Math.random() * range) + x;

}
 
function get_ImageItemLocation(imageObj) {

   return(imageObj.image_item.src)

}

thanks again

Aug 21 '07 #9

pbmods

5,821

Recognized Expert Expert

Heya, BD.

Just a guess, but maybe this had something to do with it...

Expand|Select|Wrap|Line Numbers

imageArray[imageNum++] = new imageItem(image_dir + i + "-->.jpg<--");

:P

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)

Aug 21 '07 #10

Similar topics

10113

IE window.parent.document.images problem

by: Winfried Koenig | last post by:

Hi everyone, I have a main page: -------------------------------------------------- <html><head><title>Test</title> </head><body> <img id="img_a" name="img_a" src="image_1.png" alt=""><br>

Javascript

14185

document.form.submit()

by: Chris | last post by:

Heres my problem: <a href="javascript:void(document.buysell.submit())" target="_parent" onMouseOver="MM_swapImage('members','','images/membersf2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/members.gif" alt="Back to members page" name="members" width="270" height="25" border="0"></a> I get the error "document.buysell" is null or not an object, but my form name is buysell and when using the submit button, which is not

Javascript

1952

document property of object?

by: Aaron | last post by:

Hi, I've seen javascript code where a constructor function is passed an argument "document", and inside the function itself the assignment "this.document = document;" is made. This is the code (or the part necessary for the example): function ToggleButton(document) { ToggleButton.images = new Array(4); for(i=0;i<4;i++) { ToggleButton.images = new

Javascript

2102

Rotating images and different image dimensions

by: John | last post by:

I am rotating images at one location of my web site. My problem is if I set the width and height of the new image before I show the new image, the old image is stretched first to the new image dimensions, and if I show the new image before setting its dimensions, the new image is stretched first to the old image dimension before it is adjusted to its own dimension. I would like to load a new image with its own dimension at the same time....

Javascript

3230

Rotating random images from a directory.

by: Sandy Bremmer | last post by:

I have seen many Javascripts that rotate images with each load or refresh of the page but so far all I've found require hard coding the image filename into the script. Does anyone know of a script that pulls images randomly from a directory? Thus I would need only add (or delete) images from that directory and they would display on the web page respectively. All the images are the same size (90x90) but there are hundreds so hard coding...

Javascript

136

9447

Javascript Best Practices Document v1.0

by: Matt Kruse | last post by:

http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their code was littered with document.all and eval, for example, and I wanted to create a practical list of best practices that they could easily put to use. The above URL is version 1.0 (draft) that resulted. IMO, it is not a replacement for the FAQ,...

Javascript

1975

'document[...]' is null or not an object

by: bdbeames | last post by:

Could someone help with this? I currently have a rotating picture that I have on our website's main page. This week we decided to add another set of pictures for users to view. The users can switch between the two different picture sets by a simple onclick where I change the picture sets. I started to modify my existing code and ran into the problem where the img within a div is not loading in IE, it works fine in Mozilla but in IE I...

Javascript

3769

document.getElementById stopped working after adding an iframe

by: AC | last post by:

I had a page that does some event setup on window.onload: function prepEvents() { document.getElementById("menumap_sales").onmouseover = swapMenuSales; // etc } window.onload = prepEvents;

Javascript

4013

document.forms[0].radtripType is undefined

by: ankit1999 | last post by:

I have a problem, everytime i'm run this page http://click2travel.in/index.php i get the this error,,,

Javascript

9583

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9423

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9990

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8869

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7406

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5297

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5445

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3955

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3560

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP