Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Js document.images wont work in ie 7&8

    Hi, any help with this would be very much appreciated.

    Apologies for cross-posting. I think I ut this in the wrong place to begin with.

    I have a script containing functions to change an image from clicking a button or changing the selection in a combobox.
    The buttons either request that the next image in the array is called or the previous, depending on the button. The combo box changes to the chosen
    image.

    The script works fine for me in firefox and safari but I can't get it to work in ie and aftermany hours I can't see any reason why.

    As far as I can work out the problem with the script is in the changeImage
    function while trying to set the new image.
    Code:
     
    document.images['priceImg'] = followingImg;
    document.images['priceImg'].src = followingSrc;

    Thanks in advance.


    The following is the script:

    Code:
    var followingImg;
    var followingSrc;
    var presentImg;
    var presentSrc;
    var count = 0;
    
    // Create an array of price list page images and locations
    var numImages = 8;
    var pimages=new Array();
    pimages[0]=new Image();
    pimages[0].src="../images/priceList/price_walls.jpg";
    pimages[1]=new Image();
    pimages[1].src="../images/priceList/price_nestle.jpg";
    pimages[2]=new Image();
    pimages[2].src="../images/priceList/price_franco.jpg";
    pimages[3]=new Image();
    pimages[3].src="../images/priceList/price_ben1.jpg";
    pimages[4]=new Image();
    pimages[4].src="../images/priceList/price_ben2.jpg";
    pimages[5]=new Image();
    pimages[5].src="../images/priceList/price_ron.jpg";
    pimages[6]=new Image();
    pimages[6].src="../images/priceList/price_cartridge_9654.jpg";
    pimages[7]=new Image();
    pimages[7].src="../images/priceList/price_sun1.jpg";
    pimages[8]=new Image();
    pimages[8].src="../images/priceList/price_sun2.jpg";
    
    
    // Retrieves the current image from the image element
    function getCurImage() {
    
    	if (document.images) {
    
    		presentImg = document.images['priceImg'];
    		presentSrc = document.images['priceImg'].src;
    
    		var curId = 0;
    
    		// Loops through pimages array to find which image is currently being displayed
    		for (i=0;i<pimages.length;i++) {
    			if (pimages[i].src == presentSrc) {
    				curId = i;
    			}
    		}
    
    		return curId;
    
    	}
    
    }
    
    //**************************//
    // I think this is where it has trouble //
    //**************************//
    
    // Sets the new image
    function changeImg() {
    
    	document.images['priceImg'] = followingImg;
    	document.images['priceImg'].src = followingSrc;
    
    }
    
    // Called by 'next' button.
    // Calls getCurrentImg then chooses the next image then calls changeImg.
    function slideItForward() {
    
    	var curID = getCurImage();
    
    	if (count == 0) {
    		followingImg = pimages[0];
    		followingSrc = pimages[0].src;
    		count++;
    	} else {
    		// Add one to current image id for next image
    		var nextId = (curID + 1);
    		if (nextId <= numImages) {
    			followingImg = pimages[nextId];
    			followingSrc = pimages[nextId].src;
    		// If at end of images stay on same page
    		} else {
    			followingImg = document.images['priceImg'];
    			followingSrc = document.images['priceImg'].src;
    		}
    	}
    	// display new image
    	changeImg();
    	setText(nextId);
    }
    
    // Called by 'previous' button.
    // Calls getCurrentImg then chooses the next image then calls changeImg.
    function slideItBackward() {
    	var curID = getCurImage();
    
    	// take one from current image id for next image
    	var nextId = (curID - 1);
    	if (nextId >= 0) {
    		followingImg = pimages[nextId];
    		followingSrc = pimages[nextId].src;
    	// If at start of images stay on same page
    	} else {
    		followingImg = document.images['priceImg'];
    		followingSrc = document.images['priceImg'].src;
    	}
    	// display new image
    	changeImg();
    	setText(nextId);
    }
    
    // Called by optionbox "newPage".
    // Takes users choice and displays it.
    function choosePage(page) {
    
    	if (page == 1) {
    		// Retrieve combobox option and its value
    		var index = document.getElementById('newPageOne').selectedIndex;
    		var newId = document.getElementById('newPageOne').options[index].value;
    	} else {
    		// Retrieve combobox option and its value
    		var index = document.getElementById('newPageTwo').selectedIndex;
    		var newId = document.getElementById('newPageTwo').options[index].value;
    	}
    
    	// Convert string to int
    	newId = parseInt(newId);
    
    	// If new id is default setting do nothing
    	if (newId == 0) {
    		return;
    	// Else choose the image from the pimages array and call changeImg
    	} else {
    
    		// Changes value to accomodate for value vs array position
    		newId = (newId - 1);
    
    		followingImg = pimages[newId];
    		followingSrc = pimages[newId].src;
    
    		// display new image
    		changeImg();
    		document.getElementById("newPageOne").value = (newId+1);
    		document.getElementById("newPageTwo").value = (newId+1);
    	}
    
    }
    
    // Changes the text in the combobox
    function setText(id) {
    
    	id = id + 1;
    	document.getElementById("newPageOne").value = id;
    	document.getElementById("newPageTwo").value = id;
    	//document.getElementsByName('newPage').value = id;
    }



    The following is the relevent section of the html:

    Code:
    <input style="margin-bottom:10px; margin-top: 20px" type="button" name="PreBut" value="Previous" onclick="slideItBackward();" />
    			&nbsp;&nbsp;&nbsp;<input style="margin-bottom:10px" type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
    			&nbsp;&nbsp;&nbsp;<select style="margin-bottom:10px" name="newPage" id="newPageOne" onchange="choosePage(page = 1);">
    
    			<option value="1"> Walls </option>
    			<option value="2"> Nestle, Treats and Cadburies Impulse </option>
    			<option value="3"> Franco, Mars and Ijsboerke Impulse </option>
    			<option value="4"> Bennets Scooping </option>
    			<option value="5"> Bennets Scooping Cont.. </option>
    			<option value="6"> Individual tubs and Ice cream cartridges </option>
    			<option value="7"> Ronaldo Ice creams and Sorbets </option>
    			<option value="8"> Sundries, Cones, etc </option>
    			<option value="9"> Sundries, Cones, etc Cont.. </option>
    			</select>
    
    			<center>
    			<div id="price-display">
    				<img src="../images/priceList/price_img1.jpg" id="priceImg" name="priceImg" alt="Robertos Ice cream wholesale pricelist" ></img>
    			</div>
    			</center>
    
    			<input style="margin-top: 10px" type="button" name="preBut" value="Previous" onclick="slideItBackward();" />
    			&nbsp;&nbsp;&nbsp;<input type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
    			&nbsp;&nbsp;&nbsp;<select name="newPage" id="newPageTwo" onchange="choosePage(page = 2);">
    
    			<option value="1"> Walls </option>
    			<option value="2"> Nestle, Treats, Cadburies Impulse </option>
    			<option value="3"> Franco, Mars Ijsboerke Impulse </option>
    			<option value="4"> Bennets Scooping </option>
    			<option value="5"> Bennets Scooping Cont.. </option>
    			<option value="6"> Individual tubs and Ice cream cartridges </option>
    			<option value="7"> Ronaldo Ice creams and Sorbets </option>
    			<option value="8"> Sundries, Cones, etc </option>
    			<option value="9"> Sundries, Cones, etc Cont.. </option>
    			</select>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Cadburies should be Cadbury's.

    Have you tried placing alerts here to see what happens?

    document.images['priceImg'] = followingImg;
    document.images['priceImg'].src = followingSrc;

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Philip_M,

    Yep I put alerts everywhere throughout it. They pop-up fine in ff and safari but stop after the script enters that function in ie. The alert will show the path of the image if the image.src placed in it.

    IE shows an error stating that "Object doesn't support this property or method"
    for that line a well. Unfortunately I've checked just about every single reason that it could happen from what I've found on google about the error.

    I also tried changing it so that I used document.getElementById but that seemed to stop the script in ff aswell.

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    palendrome:

    Adapt this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	var imgPath = "./images/";
    
    	var imgSet = [];
    	imgSet[1]  = ["st_lawrence.jpg", "norfolk_rebel.jpg", "pathfinder.jpg", 
    		      "playfair.jpg", "pride_of_baltimore.jpg", "red_witch.jpg",
    		      "tecumseth.jpg", "true_north.jpg"];
    	imgSet[2]  = ["st_lawrence.jpg", "norfolk_rebel.jpg", "pathfinder.jpg", 
    		      "playfair.jpg", "pride_of_baltimore.jpg", "red_witch.jpg",
    		      "tecumseth.jpg", "true_north.jpg"];
    	
    	var imgIndex = [];
    	
    	function turnPage(direction,nForm,nSets){		
    		
    		var nIdx = "";
    		for (i=0; i<nSets.length; i++)
    			{
    			 if (nSets[i] == nForm)
    				{
    				 nIdx = i+1;
    				}
    			}
    		var nPages = imgSet[nIdx].length - 1;		
    		if (direction == 'next')
    			{
    			 if (imgIndex[nIdx] < nPages)
    				{
    				 imgIndex[nIdx]++;				 
    				} 
    			 else	{
    				 imgIndex[nIdx] = 0;
    				}			 
    			}	
    		if (direction == 'prev')
    			{
    			 if (imgIndex[nIdx] > 0)
    				{
    				 imgIndex[nIdx]--;	
    				} 
    			 else	{
    				 imgIndex[nIdx] = nPages;
    				}			
    			}
    		if (direction == 'first')
    			{
    			 imgIndex[nIdx] = 0;
    			}
    		if (direction == 'last')
    			{
    			 imgIndex[nIdx] = nPages;
    			}	
    		document.getElementById('pagingImg'+nIdx).src = imgPath + imgSet[nIdx][imgIndex[nIdx]];
    	}
    
    	function shuffle(nSet){
    
    		for (r=0; r<nSet.length; r++)
    			{
    			 var tmp1 = parseInt(Math.random()*nSet.length);
    			 var tmp2 = parseInt(Math.random()*nSet.length);
    			 var tmp3 = nSet[tmp1];
    			 nSet[tmp1] = nSet[tmp2];
    			 nSet[tmp2] = tmp3;
    			}		
    	}
    
    	function init(){
    
    		for (i=1; i<imgSet.length; i++)
    			{
    			 shuffle(imgSet[i]);	
    			 imgIndex[i] = 0;
    			 document.getElementById('pagingImg'+i).src = imgPath + imgSet[i][0];			
    			}	
    		var nImgSet = document.forms;	
    		for (i=0; i<nImgSet.length; i++)
    			{
    			 nBtn = nImgSet[i].getElementsByTagName('input');
    			 nBtn[0].onclick = function()
    				{				
    				 turnPage('first',this.form,nImgSet);
    				}
    			 nBtn[1].onclick = function()
    				{				
    				 turnPage('prev',this.form,nImgSet);
    				}
    			 nBtn[2].onclick = function()
    				{
    				 turnPage('next',this.form,nImgSet);
    				}
    			 nBtn[3].onclick = function()
    				{
    				 turnPage('last',this.form,nImgSet);
    				}			
    			}		
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #f5f5f5; margin-top: 60px;}
    	.pagingBtn {font-size: 10pt; font-family: arial; font-weight: bold; padding-left: 3px; padding-right: 3px; border: 1px solid black; margin-right: 20px;}
    	
    </style>
    </head>
    	<body>
    		<div>
    			<img src="null" id="pagingImg1">
    		</div>
    
    		<form action="">						
    					                        
    			<input type='button' value="<<" class="pagingBtn">
    			<input type='button' value="<" class="pagingBtn">
    			<input type='button' value=">" class="pagingBtn">
    			<input type='button' value=">>" class="pagingBtn">
    
    		</form>
    
    		<div>
    			<img src="null" id="pagingImg2">
    		</div>
    
    		<form action="">						
    					                        
    			<input type='button' value="<<" class="pagingBtn">
    			<input type='button' value="<" class="pagingBtn">
    			<input type='button' value=">" class="pagingBtn">
    			<input type='button' value=">>" class="pagingBtn">
    
    		</form>
    
    	</body>
    </html>
    Last edited by Sciliano; 12-14-2010 at 03:39 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •