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 get the error 'document[...]'is null or not an object, line:48, char:4.
Here is a copy of my javascript
[code=javascript]
3 //declares the cookie
4 var ImgCookie;
5
6 //declaressets the path
7 var image_dir = "img/revised/";
8
9 //declares array starting index
10 var imageNum = 0;
11
12 //declares an img array
13 imageArray = new Array();
14
15 //loops through all images and adds to the array
16 for (i=1; i<=26; i++) {
17 imageArray[imageNum++] = new imageItem(image _dir + i + ".png");
18 }
19
20 var time_interval = 5000;
21 var random_display = 0;//set to false so that the images are displayed in order
22
23
24 function choose_id() {
25 $('weather_pic' ).style.display = 'none';
26 $('optical_pic' ).style.display = 'none';
27
28 ImgCookie = getCookie('pic_ type');
29
30 if (ImgCookie) {
31 switchImage(Img Cookie);
32 } else {
33 cook('weather_p ic');
34 }
35 //switchImage('we ather_pic');
36 }
37
38 function switchImage(pla ce) {
39 if (place == "weather_pi c") {
40 $('weather_pic' ).style.display = 'inline';
41 }
42 if (place == 'optical_pic') {
43 $('weather_pic' ).style.display = 'inline';
44 }
45
46 var new_image = getNextImage();
47 document[place].src = new_image;
48 var recur_call = "switchImage('" +place+"')";
49 timerID = setTimeout(recu r_call, time_interval);
50 }
51
52 function cook(pictype) {
53 var type = pictype;
54 deleteCookie("p ic_type");
55 setCookie("pic_ type", type, 30);
56
57 choose_id();
58 }
60 function getNextImage() {
61 if (random_display ) {
62 imageNum = randNum(0, totalImages-1);
63 } else {
64 imageNum = (imageNum+1) % totalImages;
65 }
66
67 var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
68 return(new_imag e);
69 }
70 var totalImages = imageArray.leng th;
71
72 function imageItem(image _location) {
73 this.image_item = new Image();
74 this.image_item .src = image_location;
75 }
76
77 function get_ImageItemLo cation(imageObj ) {
78 return(imageObj .image_item.src )
79 }
80
81 function randNum(x, y) {
82 var range = y - x + 1;
83 return Math.floor(Math .random() * range) + x;
84 }
85
86
87 function getPrevImage() {
88 imageNum = (imageNum-1) % totalImages;
89 var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
90 return(new_imag e);
91 }
92
93 function prevImage(place ) {
94 var new_image = getPrevImage();
95 document[place].src = new_image;
96 }[/code]
I am calling choose _id() when the page loads and then depending on a cookie that is set or not I go from there. One id or the other should be displayed depending on the cookie. The script is not complete, but it should work if there is no cookie set from the start. The problem I believe is in my function switchImage(pla ce). I haven't used javascript that much so if someone see a better way around all of this let me know.
here is the html[code=html]
<!-- Start right Column box -->
<div id="righcolbox" >
<div>
<img height="385px" width="385px" align="right" id="weather_pic " border="3" src="img/revised/1.png" alt="Weather Images" />
<img height="385px" width="385px" align="right" id="optical_pic " border="3" src="img/Optical/1.png" alt="Optical Images" />
</div>
<!-- End right Column box -->
</div>
[/code]
If you care to look at the site it is http://beta.climate.usurf.usu.edu
thanks again
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 get the error 'document[...]'is null or not an object, line:48, char:4.
Here is a copy of my javascript
[code=javascript]
3 //declares the cookie
4 var ImgCookie;
5
6 //declaressets the path
7 var image_dir = "img/revised/";
8
9 //declares array starting index
10 var imageNum = 0;
11
12 //declares an img array
13 imageArray = new Array();
14
15 //loops through all images and adds to the array
16 for (i=1; i<=26; i++) {
17 imageArray[imageNum++] = new imageItem(image _dir + i + ".png");
18 }
19
20 var time_interval = 5000;
21 var random_display = 0;//set to false so that the images are displayed in order
22
23
24 function choose_id() {
25 $('weather_pic' ).style.display = 'none';
26 $('optical_pic' ).style.display = 'none';
27
28 ImgCookie = getCookie('pic_ type');
29
30 if (ImgCookie) {
31 switchImage(Img Cookie);
32 } else {
33 cook('weather_p ic');
34 }
35 //switchImage('we ather_pic');
36 }
37
38 function switchImage(pla ce) {
39 if (place == "weather_pi c") {
40 $('weather_pic' ).style.display = 'inline';
41 }
42 if (place == 'optical_pic') {
43 $('weather_pic' ).style.display = 'inline';
44 }
45
46 var new_image = getNextImage();
47 document[place].src = new_image;
48 var recur_call = "switchImage('" +place+"')";
49 timerID = setTimeout(recu r_call, time_interval);
50 }
51
52 function cook(pictype) {
53 var type = pictype;
54 deleteCookie("p ic_type");
55 setCookie("pic_ type", type, 30);
56
57 choose_id();
58 }
60 function getNextImage() {
61 if (random_display ) {
62 imageNum = randNum(0, totalImages-1);
63 } else {
64 imageNum = (imageNum+1) % totalImages;
65 }
66
67 var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
68 return(new_imag e);
69 }
70 var totalImages = imageArray.leng th;
71
72 function imageItem(image _location) {
73 this.image_item = new Image();
74 this.image_item .src = image_location;
75 }
76
77 function get_ImageItemLo cation(imageObj ) {
78 return(imageObj .image_item.src )
79 }
80
81 function randNum(x, y) {
82 var range = y - x + 1;
83 return Math.floor(Math .random() * range) + x;
84 }
85
86
87 function getPrevImage() {
88 imageNum = (imageNum-1) % totalImages;
89 var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
90 return(new_imag e);
91 }
92
93 function prevImage(place ) {
94 var new_image = getPrevImage();
95 document[place].src = new_image;
96 }[/code]
I am calling choose _id() when the page loads and then depending on a cookie that is set or not I go from there. One id or the other should be displayed depending on the cookie. The script is not complete, but it should work if there is no cookie set from the start. The problem I believe is in my function switchImage(pla ce). I haven't used javascript that much so if someone see a better way around all of this let me know.
here is the html[code=html]
<!-- Start right Column box -->
<div id="righcolbox" >
<div>
<img height="385px" width="385px" align="right" id="weather_pic " border="3" src="img/revised/1.png" alt="Weather Images" />
<img height="385px" width="385px" align="right" id="optical_pic " border="3" src="img/Optical/1.png" alt="Optical Images" />
</div>
<!-- End right Column box -->
</div>
[/code]
If you care to look at the site it is http://beta.climate.usurf.usu.edu
thanks again
Comment