472,805 Members | 997 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

'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
11 2095
pbmods
5,821 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
jx2
228 100+
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
5,821 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
jx2
228 100+
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
5,821 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
5,821 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
5,821 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

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

Similar topics

1
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>
14
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...
2
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...
5
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...
1
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...
136
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...
4
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...
10
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;
5
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,,,
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.