Fixed image when scrolling in IE

**koit** · 04-04-2006, 05:13 PM

Following numerous amounts of posts on a different forum, I have now a functional page that allows my main image to be fixed with the background thumbnails and main site to scroll.

see

http://www.koit.pwp.blueyonder.co.uk/scrolltest.php

This functions very well in Firefox but not at all in Internet Explorer.

Can anyone see where I can amend the code so that my main image area appears fixed on the right hand side of my page whilst the rest scrolls around it, so that IE users can appreciate the page.

Any ideas ?

Code:

<?
  $title="Koit : home";
  $lastupdate=filectime($_SERVER["PATH_TRANSLATED"]);
  require_once("header.php");
?>

<head>
<style type="text/css">

#floating {
	z-index: 2;
}
</style>

<script language="javascript" type="text/javascript">
function setvars() {
	x = 0;
	if (document.layers) { //NS 4.x
		doc="document.";
		stl="";
		tp=".top=";
		toppos="window.pageYOffset";
	}
	else {
		if (document.all) { // IE, Opera
			doc="";
			stl=".style";
			tp=".pixelTop=";
			toppos="document.body.scrollTop";
		}
		else {
			if (document.getElementById) { //NN7, Mozilla
				doc="document.getElementById('";
				stl = "').style.position='fixed'";
				tp = "";
				toppos = "";
				x = 1;
			}
		}
	}
}
function movemenu() {
	divid="floating";
	if (document.getElementById && x == 1) {
		eval(doc+divid+stl);
	}
	else {
	currentpos=eval(toppos);
	//alert (doc+divid+stl+tp+currentpos); 
	eval(doc+divid+stl+tp+currentpos); 
	setTimeout("movemenu()",10);
	}
} 
</script>
</head>

<SCRIPT language=JavaScript>	
			//Array to store the file names of the animations. 28 in total. 4 columns of 7 in the table.
			arrFilename = new Array();

			//array to store filenames and their type, jpg or gif.
			arrImg = new Array();

			//array to store title/alts for each big picture.
			arrText = new Array();
			
			var path = '"http://www.koit.pwp.blueyonder.co.uk/"';
						
			arrFilename[0] = "bearducky";
			arrImg[0] = arrFilename[0] + ".jpg";
			arrText[0] = "Ice Queen";

			arrFilename[1] = "birdtits";
			arrImg[1] = arrFilename[1] + ".jpg";
			arrText[1] = "tits !";

			arrFilename[2] = "catacomic";
			arrImg[2] = arrFilename[2] + ".jpg";
			arrText[2] = "An Englishman, Irishman and a pupae walk into a bar";

			arrFilename[3] = "catgull";
			arrImg[3] = arrFilename[3] + ".jpg";
			arrText[3] = "";

			arrFilename[4] = "chainboot";
			arrImg[4] = arrFilename[4] + ".jpg";
			arrText[4] = "He got through a fair few horses";

			arrFilename[5] = "deergun";
			arrImg[5] = arrFilename[5] + ".jpg";
			arrText[5] = "";

			arrFilename[6] = "dogjock";
			arrImg[6] = arrFilename[6] + ".jpg";
			arrText[6] = "Giddyup !";

			arrFilename[7] = "jesusbarn";
			arrImg[7] = arrFilename[7] + ".jpg";
			arrText[7] = "";

			arrFilename[8] = "kidbelly";
			arrImg[8] = arrFilename[8] + ".jpg";
			arrText[8] = "";

			arrFilename[9] = "lasspour";
			arrImg[9] = arrFilename[9] + ".jpg";
			arrText[9] = "";

			arrFilename[10] = "motherlogo";
			arrImg[10] = arrFilename[10] + ".gif";
			arrText[10] = "";

			arrFilename[11] = "sqballroom";
			arrImg[11] = arrFilename[11] + ".jpg";
			arrText[11] = "";

			arrFilename[12] = "2legdog";
			arrImg[12] = arrFilename[12] + ".jpg";
			arrText[12] = "";

			arrFilename[13] = "treason";
			arrImg[13] = arrFilename[13] + ".jpg";
			arrText[13] = "Treason !";

			arrFilename[14] = "allenpred";
			arrImg[14] = arrFilename[14] + ".jpg";
			arrText[14] = "Allen vs Predator";

			arrFilename[15] = "bagpipe";
			arrImg[15] = arrFilename[15] + ".gif";
			arrText[15] = "Scottish are mental";

			arrFilename[16] = "birdyeye";
			arrImg[16] = arrFilename[16] + ".jpg";
			arrText[16] = "";

			arrFilename[17] = "chickeon";
			arrImg[17] = arrFilename[17] + ".jpg";
			arrText[17] = "Troy knew there was an infiltrator somewhere. Now to find it !";

			arrFilename[18] = "eyecat";
			arrImg[18] = arrFilename[18] + ".jpg";
			arrText[18] = "";

			arrFilename[19] = "eyelip";
			arrImg[19] = arrFilename[19] + ".jpg";
			arrText[19] = "";

			arrFilename[20] = "headfall";
			arrImg[20] = arrFilename[20] + ".gif";
			arrText[20] = "She looks funny";

			arrFilename[21] = "japface";
			arrImg[21] = arrFilename[21] + ".jpg";
			arrText[21] = "I bet suckling was a right *****";

			arrFilename[22] = "jjchest";
			arrImg[22] = arrFilename[22] + ".jpg";
			arrText[22] = "The truth";

			arrFilename[23] = "kidchalk";
			arrImg[23] = arrFilename[23] + ".jpg";
			arrText[23] = "";

			arrFilename[24] = "manglasses";
			arrImg[24] = arrFilename[24] + ".jpg";
			arrText[24] = "";

			arrFilename[25] = "mushtable";
			arrImg[25] = arrFilename[25] + ".jpg";
			arrText[25] = "";

			arrFilename[26] = "sharkattack";
			arrImg[26] = arrFilename[26] + ".jpg";
			arrText[26] = "";

			arrFilename[27] = "sonympics";
			arrImg[27] = arrFilename[27] + ".jpg";
			arrText[27] = "";
		
			//Function to select the right main image from the above array.....
			function imageSwap(num) {
				ext = num;
				tempName = getFilename(ext);

				//if statement to change reference of rote located files.......	
				if (tempName == "monkeybird" || tempName == "jumpcact")
					{
				document.images.mainimage.src = "http://www.koit.pwp.blueyonder.co.uk/rote/" + arrImg[ext];
				document.getElementById("floating").style.width = 280 + "px";
				if(window.innerWidth) {
    					var pos = window.innerWidth - 301;
							} else {
    					var pos = document.body.clientWidth - 301;
								}
					document.getElementById("floating").style.left = pos + "px";
				document.images.mainimage.alt = arrText[ext];
				document.images.mainimage.title = arrText[ext];
					}
				else
					{
				document.images.mainimage.src = "http://www.koit.pwp.blueyonder.co.uk/" + arrImg[ext];
				document.getElementById("floating").style.width = 280 + "px";
				if(window.innerWidth) {
    					var pos = window.innerWidth - 301;
							} else {
    					var pos = document.body.clientWidth - 301;
								}
				document.getElementById("floating").style.left = pos + "px";
				document.images.mainimage.alt = arrText[ext];
				document.images.mainimage.title = arrText[ext];
					}

			}

			//Function to return the filename, not the extension
			function getFilename(number) {
				numero = number;
				return arrFilename[numero];
				}

			//Function to create a file reference
			function crtRef(number){
				nums = number;
				temppath = '<a href=' + '"javascript:imageSwap(' + nums + ')"' + '><img 						src="http://www.koit.pwp.blueyonder.co.uk/tn_';
				Fname = getFilename(nums);
				fullpath = temppath + Fname + '.gif"></a>';
				return fullpath;
				}

			//Function to create a row for the table.....
			function createRow(image1, image2, image3, image4) {
				im1 = image1;
				im2 = image2;
				im3 = image3;
				im4 = image4;
				document.write('<TR><TD align="center" width="120">' + im1 + '</TD><TD align="center" 					width="120">' + im2 + '</TD><TD align="center" width="120">' + im3 + '</TD><TD 						align="center" width="120">' + im4 + '</TD></TR>\n');
				 }

			//Function to create the table......
			function createTable(){
				var i = 0;

				//change the value of j for partially completed galleries......
				//however, can only apply new files in multiples of 4, as in complete lines

				for (var j=0; j<=6; j++)
				{
					path1 = crtRef(i);
					path2 = crtRef(i+1);
					path3 = crtRef(i+2);
					path4 = crtRef(i+3);				
					createRow(path1, path2, path3, path4);
					i = i + 4;
				}
				}

</SCRIPT>
<body onLoad="setvars();movemenu();imageSwap(0)">

<div id="floating">
<img name="mainimage" id="mainimage" src="bearducky.jpg" class="rightpic" alt="" title=""></div>

<?
require_once("funnyStuffHeader.php");
?>

<p><strong>FUNNY STUFF 35<br>
</strong></font>

<table border="0" cellpadding="2">
		<SCRIPT language=JavaScript>
			createTable();
		</SCRIPT>
</table>

</center></div>

<div class="listline">
<div class="dateline" align="center">This page was last updated on
<?
	echo gmdate("D, d M Y H:i",$lastupdate);
	echo "</div></div></div>";
	require_once("footer.php");
?>
</body>

**koit** · 04-06-2006, 10:48 AM

Please anyone help ?

Thread: Fixed image when scrolling in IE

Thread Tools

Search Thread

Fixed image when scrolling in IE

Bookmarks

Bookmarks

Posting Permissions