In my previous post in this thread I explained the way to deal with this sort of situation. It is still probably the best way but, from what you say, would probably require you to redesign your page. After I posted, I remembered that I had tried my hand at writing a version of cmotion that would expand to a percentage width of its container (the page itself or another element). I wasn't all that satisfied with the result but, have looked it over and made several changes and I now like it. It has been tested in IE 6, FF 1.5.0.6, and Opera 9.01. I put it through some paces and have documented it well in the source code but, there is no way I could anticipate all contingencies:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Gallery Styles */
#motioncontainer {
margin:0 auto; /* Remove if centering gallery on page is not desired */
width:50%; /* Set to gallery width */
height:227px; /* Set to gallery height */
}
#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}
#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}
#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}
#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */
</style>
<!-- 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">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicDrive.com/forums by jschuer1 8/5/06
***********************************************/
//1) Set width of the "neutral" area in the center of the gallery.
var restarea=6;
//2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=7;
//3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=1000;
//4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=2;
//5) Set message to show at end of gallery. Enter "" to disable message.
var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';
function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}
////NO NEED TO EDIT BELOW THIS LINE////////////
var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}
function positiondiv(){
var mainobjoffset=getposOffset(crossmain, "left"),
menuheight=parseInt(crossmain.offsetHeight),
mainobjoffsetH=getposOffset(crossmain, "top");
statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
statusdiv.style.top=menuheight+mainobjoffsetH+"px";
}
function showhidediv(what){
if (endofgallerymsg!="") {
positiondiv();
statusdiv.style.visibility=what;
}
}
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function moveleft(){
if (loadedyes){
movestate="left";
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
lefttime=setTimeout("moveleft()",10);
}
function moveright(){
if (loadedyes){
movestate="right";
if (iedom&&parseInt(cross_scroll.style.left)<0){
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}
function motionengine(e){
var mainobjoffset=getposOffset(crossmain, "left"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientX : e.clientX? e.clientX: "";
curposy-=mainobjoffset-dsocx;
var leftbound=(menuwidth-restarea)/2;
var rightbound=(menuwidth+restarea)/2;
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(righttime);
if (movestate!="left") moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(lefttime);
if (movestate!="right") moveright();
}
else
scrollspeed=0;
}
function contains_ns6(a, b) {
if (b!==null)
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function stopmotion(e){
if (!window.opera||(window.opera&&e.relatedTarget!==null))
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
clearTimeout(lefttime);
clearTimeout(righttime);
movestate="";
}
}
function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}
crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
}
window.onload=fillup;
onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
}
</script>
</head>
<body>
<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:enlargeimage('dynamicbook1.gif')"><img src="photo1.jpg" border="1"></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="photo2.jpg" border="1"></a> <a href="http://www.dynamicdrive.com"><img src="photo3.jpg" border="1"></a> <a href="#"><img src="photo4.jpg" border="1"></a> <a href="#"><img src="photo5.jpg" border="1"></a> <a href="#"><img src="photo6.jpg" border="1"></a> <a href="#"><img src="photo7.jpg" border="1"></a> <a href="#"><img src="photo8.jpg" border="1"></a> <a href="#"><img src="photo9.jpg" border="1"></a></nobr>
</div>
</div>
</body>
</html>
CMotion Image Gallery - Set Width to 100%
Reply With Quote
Bookmarks