PDA

View Full Version : CMotion with dynamic content and swap image applied - doesn't work in Safari or IE



GillianSeeley
04-08-2008, 02:25 PM
1) Script Title:
CMotion with dynamic content and swap image applied - only works in Firefox and not in Safari or IE

2) Script URL (on DD):
The image gallery is created using code from:
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
I applied a swap image command.
I loaded dynamic content using code from:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

The code works perfectly in Firefox (swap image, the CMotion code, and the dynamic ajax content code) but the horizontal scroll (CMotion code) will not scroll in Safari or IE.

I would really really appreciate help.

Many thanks!
Gillian

The code used is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="gallerystyle.css" />

<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->

<script type="text/javascript" src="motiongallery.js">

/***********************************************
* CMotion Image Gallery- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="sellex_nonwoven.css" rel="stylesheet" type="text/css" />
<link href="gallerystyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/page_background.gif);
background-repeat: no-repeat;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

</head>

<body onload= <body text="#FFFFFF" link="#EF1821" vlink="#EF1821" alink="#EF1821" onLoad="fillup();MM_preloadImages('images/large_bag1.gif')">
<body onload="MM_preloadImages('images/large_bag2.gif')">

<div id="wrapper">
<div id="header"></div>
<div id="stats"></div>
<div id="large_image"><img name="placeholder" src="" width="420" height="460" alt="" /></div>
<div id="about">Content for id "about" Goes Here</div>

<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag1.gif',1)"/></a> <a href="javascript:ajaxpage('bag2_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag1.gif',1)"/></a> <a href="javascript:ajaxpage('bag2_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <a href="javascript:ajaxpage('bag1_stats.html', 'stats');"><img src="images/bag1.gif" border=1 onmouseup="MM_swapImage('placeholder','','images/large_bag2.gif',1)"/></a> <div id="stats"></div></nobr></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div></div>
</body>
</html>