|
Senior Journeyman (L6)
| Joined: | 07 Feb 2004 | | Posts: | 574 | | Location: | Portsmouth GB |
|
|
 Posted: Mon Jul 02, 2007 1:56 am |
|
 |
 |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Change Left, Top, Width, Height, Color, Opacity (06-March-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or other 'px' style properties) of an element over a specified period of time.
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//
// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',20,260,'sin',2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//
// **** Functional Code - NO NEED to Change
var zxcOOPCnt=0;
function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcLTWHCOOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}
function zxcLTWHCOOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
}
zxcLTWHCOOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}
zxcLTWHCOOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}
zxcLTWHCOOOP.prototype.cngstyle=function(zxcltwhco){
if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=Math.max(zxcltwhco[0],0)+'px';
else this.opacity(zxcltwhco[0]);
}
zxcLTWHCOOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}
zxcLTWHCOOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}
function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol.substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
//function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
var zxcLst;
function toggleSlide(zxcid,zxch){
var zxcobj=document.getElementById(zxcid)
if ((zxcLst&&zxcobj!=zxcLst)||(zxcLst&&!zxcid)){
zxcLst.style.zIndex='0';
zxcChangeLTWHCO('height',zxcLst,parseInt(zxcLst.style.height),0,'sin',2000);
}
if (zxcobj&&zxcobj!=zxcLst){
zxcLst=zxcobj;
zxcLst.style.zIndex='1';
zxcChangeLTWHCO('height',zxcLst,0,zxch,'sin',2000);
}
}
function Swap(zxcobj,zxcid){
document.getElementById(zxcid).src=zxcobj.src;
}
//-->
</script>
</head>
<body>
<div id="masthead">
<h1 id="siteName">I Heart Design </h1>
<div id="globalNav"> <a href="javascript:;" onmousedown="toggleSlide('portfolio',500);">work</a> | <a href="javascript:;" onmousedown="toggleSlide('education',500);">education</a> | <a href="javascript:;" onmousedown="toggleSlide('services',500);">services </a> | <a href="javascript:;" onmousedown="toggleSlide('aboutme',500);">about me</a> </div>
<h3 id="pageName">Maureen Jann's Portfolio </h3>
<div id="breadCrumb"> Acquiring simplicity since 1996... </div>
</div>
<div style="position:relative;width:500px;height:500px;border:solid black 1px;" >
<div id="portfolio" style="position:absolute;left:0px;top:0px;overflow:hidden; height:0px;background-Color:white;">
<h3>Portfolio</h3>
Web Design | Print Design | Branding
<p>
<a name="webdesign" id="webdesign">Web Design</a>
<center>
<table width=360 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
</tr>
<tr>
<td colspan=4 align=center><img name="mainpic" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=360 height=240 border=0></td>
</tr>
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width=90 height=60 border=0 onclick="Swap(this,'mainpic');" ></td>
</tr>
</table>
</center>
<a name="printdesign" id="printdesign">Print Design</a>
<a href="javascript:;" onmousedown="toggleSlide();"> Put this section away</a></p>
</div>
<div id="education" style="position:absolute;left:0px;top:0px;overflow:hidden;width:360px;height:50px;background-Color:red;">
education
</div>
</div>
</body>
</html> |
|
