467,925 Members | 1,859 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > 'document[...]' is null or not an object with rotating images

Post your question to a community of 467,925 developers. It's quick & easy.

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

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
  1. //Declare and set some variables
  2. var type;
  3. var interval = 5000;
  4. var random_display = 0;
  5. var imageArray;
  6. var imageNum = 0;
  7. var totalImages = 0;
  8.  
  9. //this function is called on page load
  10. //it sets the divs off, looks for a cookie 
  11. //turns divs on depending on the cookie
  12. function noDiv() {
  13.    //sets both divs display to off
  14.    $('weather_pic').style.display = 'none';
  15.    $('optical_pic').style.display = 'none';
  16.  
  17.    //gets the cookie 
  18.    var ImgCookie = getCookie("pic_type");
  19.  
  20.    //if cookie is set calls the switchDiv to turn the div display on
  21.    //else to defaults to the weather_pic div
  22.    if (ImgCookie) {
  23.       switchDiv(ImgCookie);
  24.    } else {
  25.       switchDiv('weather_pic');
  26.    }
  27. }
  28.  
  29. //this function turns the divs on or off and sets the cookie accordingly
  30. function switchDiv(picType) {
  31.    if (picType == 'weather_pic') {
  32.       $('optical_pic').style.display = 'none';
  33.       $('weather_pic').style.display = 'inline';
  34.       cookies(picType);
  35.       rotate(picType);
  36.    }
  37.    if (picType == 'optical_pic') {
  38.       $('weather_pic').style.display = 'none';
  39.       $('optical_pic').style.display = 'inline';
  40.       cookies(picType);
  41.       rotate(picType);
  42.    }
  43. }
  44.  
  45. //this is the set cookie function it deletes the old and sets a new for 30 days 
  46. //get, set, and deleteCookie is found in /support/cookie.js
  47. function cookies(picType) {
  48.    deleteCookie("pic_type");
  49.    setCookie("pic_type", picType, 30);
  50. }
  51. function rotate(picType) {
  52.    //var type;
  53.    //var interval = 5000;
  54.    //var random_display = 0;
  55.    //var imageArray = new Array();
  56.    //var imageNum = 0;
  57.    var i = 0;
  58.  
  59.    if (picType == 'weather_pic') {
  60.       var image_dir = "img/revised/";
  61.       type = "id_weather";
  62.       imageNum = 0;
  63.       imageArray = 0;
  64.       imageArray = new Array();
  65.  
  66.       for (i=1; i<=26; i++) {
  67.          imageArray[imageNum++] = new imageItem(image_dir + i + ".png");
  68.       }
  69.    }
  70.    if (picType == 'optical_pic') {
  71.       var image_dir = "img/Optics/";
  72.       type = "id_optical";
  73.       imageNum = 0;
  74.       imageArray = 0;
  75.       imageArray = new Array();
  76.  
  77.       for (i=1; i<=56; i++) {
  78.          imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");
  79.       }
  80.    }
  81.  
  82.    totalImages = imageArray.length;
  83.    switchImage(type);
  84. }
  85.  
  86. function imageItem(image_location) {
  87.    this.image_item = new Image();
  88.    this.image_item.src = image_location;
  89. }
  90.  
  91. function switchImage(place) {
  92.    var new_image = getNextImage();
  93.    document[place].src = new_image;
  94.    var recur_call = "switchImage('"+place+"')";
  95.    timerID = setTimeout(recur_call, interval);
  96. }
  97. function getNextImage() {
  98.    if (random_display) {
  99.       imageNum = randNum(0, totalImages-1);
  100.    } else {
  101.       imageNum = (imageNum+1) % totalImages;
  102.    }
  103.  
  104.    var new_image = get_ImageItemLocation(imageArray[imageNum]);
  105.    return(new_image);
  106. }
  107.  
  108. function randNum(x, y) {
  109.    var range = y - x + 1;
  110.    return Math.floor(Math.random() * range) + x;
  111. }
  112.  
  113. function get_ImageItemLocation(imageObj) {
  114.    return(imageObj.image_item.src)
  115. }
  116.  
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <script type="text/javascript" src="support/cookie.js"></script>
  5. <script type="text/javascript" src="support/main.js"></script>
  6. </head>
  7. <body onload="noDiv()">
  8.             <div id="navtrail2">
  9.                <span onclick="switchDiv('weather_pic')"> Weather Pictures</span> :
  10.                <span onclick="switchDiv('optical_pic')"> Optical Pictures</span>
  11.             </div>
  12.                <!-- Start right Column box -->
  13.                <div id="righcolbox">
  14.                   <div id="weather_pic">
  15.                      <img height="385px" width="385px" align="right" border="3" id="id_weather" src="img/revised/1.png" alt="Weather Images" />
  16.                   </div>
  17.                   <div id="optical_pic">
  18.                      <img height="385px" width="385px" align="right" border="3" id="id_optical" src="img/Optics/1.jpg" alt="Optical Images" />
  19.                   </div>
  20.  
  21.                <!-- End right Column box -->
  22.                </div>
  23. </body>
  24. </html>
  25.  
could someone help with this?
Aug 21 '07 #1
  • viewed: 1895
Share:
11 Replies
pbmods
Expert 4TB
Heya, BD.

It looks like this is the line that is causing you grief (in switchImage()):
Expand|Select|Wrap|Line Numbers
  1. document[place].src = new_image;
  2.  
Try this:
Expand|Select|Wrap|Line Numbers
  1. var img = document.getElementsByName(place)[0];
  2. if(img)
  3. {
  4.     img.src = new_image;
  5. }
  6. else
  7. {
  8.     // Debug
  9.     alert(place);
  10. }
  11.  
Aug 21 '07 #2
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
  1. function switchImage(place) {
  2.    var new_image = getNextImage();
  3.    var img = document.getElementByName(place)[0];
  4.    if (img) {
  5.       img.src = new_image;
  6.    } else {
  7.       //debug
  8.       alert(place);
  9.    }
  10.    //document[place].src = new_image;
  11.    var recur_call = "switchImage('"+place+"')";
  12.    timerID = setTimeout(recur_call, interval);
  13. }
  14.  
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.getElementByName is not a function.
Aug 21 '07 #3
Ok fixed my one problem it is getElementsByName not getElementByName

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
100+
jx2
well im not an expert on this so i might be wrong
but this lines look weird to me

Expand|Select|Wrap|Line Numbers
  1. // those quotation marks look weird to me
  2. // iam not sure about the purpose of it... 
  3. //wouldnt you have to use eval(recure_call) after that?
  4. // pbmods probably knows 
  5.    var recur_call = "switchImage('"+place+"')";
  6.  
  7.    timerID = setTimeout(recur_call, interval);
  8.  
  9. //anyway i would try to write them :
  10.  
  11.    var recur_call = place;
  12.    timerID = setTimeout(switchImage(recur_call), interval);
  13. }
  14.  
i hope that helped
jx2
Aug 21 '07 #5
pbmods
Expert 4TB
Heya, JX2.

In this code:
Expand|Select|Wrap|Line Numbers
  1.  var recur_call = "switchImage('"+place+"')";
  2.  
recur_call might, for example, evaluate to:
switchImage('id_weather');

However, you can also do this:
Expand|Select|Wrap|Line Numbers
  1. timerID = setTimeout(function() { switchImage(place); }, interval);
  2.  
Now that I'm looking at it, you actually want to do this instead:
Expand|Select|Wrap|Line Numbers
  1. var img = document.getElementById(place);
  2. if(img)
  3. {
  4.     img.src = new_image;
  5. }
  6. else
  7. {
  8.     // Debug
  9.     alert(place);
  10. }
  11.  
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
100+
jx2
Heya, JX2.

In this code:
Expand|Select|Wrap|Line Numbers
  1.  var recur_call = "switchImage('"+place+"')";
  2.  
recur_call might, for example, evaluate to:
switchImage('id_weather');

However, you can also do this:
Expand|Select|Wrap|Line Numbers
  1. timerID = setTimeout(function() { switchImage(place); }, interval);
  2.  
thx a lot pbmods - nice trick

- i learn a lot from you!!
hough!!
Aug 21 '07 #7
pbmods
Expert 4TB
We aim to please.
Aug 21 '07 #8
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.usurf.usu.usu.edu

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.    <script type="text/javascript" src="support/cookie.js"></script>
  5.    <script type="text/javascript" src="support/main.js"></script>
  6. </head>
  7.  
  8. <body onload="noDiv()">
  9. <div id="navtrail2">
  10.    <span onclick="switchDiv('weather_pic')"> Weather Pictures</span> :
  11.    <span onclick="switchDiv('optical_pic')"> Optical Pictures</span>
  12. </div>
  13. <!-- Start right Column box -->
  14. <div id="righcolbox">
  15.    <div id="weather_pic">
  16.       <img height="385px" width="385px" align="right" border="3" 
  17. id="id_weather" src="img/revised/1.png" alt="Weather Images" />
  18.    </div>
  19.    <div id="optical_pic">
  20.       <img height="385px" width="385px" align="right" border="3" id="id_optical" src="img/Optics/1.jpg" alt="Optical Images" />
  21.    </div>
  22. <!-- End right Column box -->
  23. </div>
  24.  
  25. </body>
  26. </html>
  27.  
Expand|Select|Wrap|Line Numbers
  1. //Declare and set some variables
  2. var type;
  3. var interval = 5000;
  4. var random_display = 0;
  5. var imageArray;
  6. var imageNum = 0;
  7. var totalImages = 0;
  8. var image_dir;
  9.  
  10. //this function is called on page load
  11. //it sets the divs off, looks for a cookie 
  12. //turns divs on depending on the cookie
  13. function noDiv() {
  14.    //sets both divs display to off
  15.    $('weather_pic').style.display = 'none';
  16.    $('optical_pic').style.display = 'none';
  17.    //document.getElementById('weather_pic').style.display = 'none';
  18.    //document.getElementById('optical_pic').style.display = 'none';
  19.  
  20.  
  21.    //gets the cookie 
  22.    var ImgCookie = getCookie("pic_type");
  23.  
  24.    //if cookie is set calls the switchDiv to turn the div display on
  25.    //else to defaults to the weather_pic div
  26.    if (ImgCookie) {
  27.       switchDiv(ImgCookie);
  28.    } else {
  29.       switchDiv('weather_pic');
  30.    }
  31. }
  32.  
  33. //this function turns the divs on or off and sets the cookie accordingly
  34. function switchDiv(picType) {
  35.    if (picType == 'weather_pic') {
  36.       $('weather_pic').style.display = 'inline';
  37.       $('optical_pic').style.display = 'none';
  38.       //alert(picType);
  39.       cookies(picType);
  40.       rotate(picType);
  41.    }
  42.    if (picType == 'optical_pic') {
  43.       $('optical_pic').style.display = 'inline';
  44.       $('weather_pic').style.display = 'none';
  45.       //alert(picType);
  46.       cookies(picType);
  47.       rotate(picType);
  48.    }
  49. }
  50.  
  51. //this is the set cookie function it deletes the old and sets a new for 30 days 
  52. //get, set, and deleteCookie is found in /support/cookie.js
  53. function cookies(picType) {
  54.    deleteCookie("pic_type");
  55.    setCookie("pic_type", picType, 30);
  56. }
  57. function rotate(picType) {
  58.    var i = 0;
  59.  
  60.    if (picType == 'weather_pic') {
  61.       image_dir = "img/Optic/";
  62.       type = "id_weather";
  63.       imageNum = 0;
  64.       imageArray = 0;
  65.       imageArray = new Array();
  66.  
  67.       for (i=11; i<=20; i++) {
  68.          imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");
  69.       }
  70.    }
  71.    if (picType == 'optical_pic') {
  72.       image_dir = "img/Optics/";
  73.       type = "id_optical";
  74.       imageNum = 0;
  75.       imageArray = 0;
  76.       imageArray = new Array();
  77.  
  78.       for (i=1; i<=10; i++) {
  79.          imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");
  80.       }
  81.    }
  82.  
  83.    totalImages = imageArray.length;
  84.    switchImage(type);
  85. }
  86.  
  87. function imageItem(image_location) {
  88.    this.image_item = new Image();
  89.    this.image_item.src = image_location;
  90. }
  91.  
  92. function switchImage(place) {
  93.    var new_image = getNextImage();
  94.    var img = document.getElementById(place);
  95.    if (img) {
  96.       img.src = new_image;
  97.    } else {
  98.       //debug
  99.       alert(place);
  100.    }
  101.    //document[place].src = new_image;
  102.    var recur_call = "switchImage('"+place+"')";
  103.    timerID = setTimeout(recur_call, interval);
  104. }
  105. function getNextImage() {
  106.    if (random_display) {
  107.       imageNum = randNum(0, totalImages-1);
  108.    } else {
  109.       imageNum = (imageNum+1) % totalImages;
  110.    }
  111.  
  112.    var new_image = get_ImageItemLocation(imageArray[imageNum]);
  113.    return(new_image);
  114. }
  115.  
  116. function randNum(x, y) {
  117.    var range = y - x + 1;
  118.    return Math.floor(Math.random() * range) + x;
  119. }
  120.  
  121. function get_ImageItemLocation(imageObj) {
  122.    return(imageObj.image_item.src)
  123. }
  124.  
thanks again
Aug 21 '07 #9
pbmods
Expert 4TB
Heya, BD.

Just a guess, but maybe this had something to do with it...
Expand|Select|Wrap|Line Numbers
  1.  imageArray[imageNum++] = new imageItem(image_dir + i + "-->.jpg<--");
  2.  
: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
Ok, give me some credit. I had it at .png, I changed it because that wouldn't work. I want to use .png images so I'll play with it until I figure it out.

thanks for the help
Aug 21 '07 #11
pbmods
Expert 4TB
Heya, BD.

lol I figured. I had to point it out, though, because in your OP, one set was .jpg, while the other was .png.
Aug 21 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
IE window.parent.document.images problem
1 post views Thread by Winfried Koenig | last post: by
document.form.submit()
14 posts views Thread by Chris | last post: by
document property of object?
2 posts views Thread by Aaron | last post: by
Rotating random images from a directory.
1 post views Thread by Sandy Bremmer | last post: by
Javascript Best Practices Document v1.0
136 posts views Thread by Matt Kruse | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.