Hi there,
I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code:
If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere.
Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this.
I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// The functional code size is 1.39K
// **** 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;'
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the initial value. (digits, default = 0)
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
d=Math.max(d,s<0||f<0?d:0);
this.data[0]=d;
this.apply();
if (ms<this.mS){
this.to=setTimeout(function(){oop.cng(); },10);
}
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body>
<div id="tst" style="position:relative;overflow:hidden;width:1020px;height:436px;" >
<img src="http://smalltowngossipmusic.com/wp-content/themes/glossy-stylo/images/bkgfield.jpg" style="width:1020px;height:436px;margin-Top:0px;" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcExpand(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],height=[o.Height,obj.offsetHeight],margin=[0,o.MarginTop],ms=o.AnimationDuration;
obj.style.height=height[0]+'px';
img.style.marginTop=-margin[1]+'px';
this.ooph=new zxcAnimate('height',obj,height[0])
this.oopm=new zxcAnimate('marginTop',img,-margin[1])
this.height=height;
this.margin=margin;
this.ms=typeof(ms)=='number'&&ms>0?ms:1000;
img.onmouseover=function(){ oop.expand(true); }
img.onmouseout=function(){ oop.expand(false); }
}
zxcExpand.prototype.expand=function(ud){
this.ooph.animate(this.ooph.data[0],this.height[ud?1:0],this.ms,this.height);
this.oopm.animate(this.oopm.data[0],-this.margin[ud?0:1],this.ms,this.margin);
}
new zxcExpand({
ID:'tst',
Height:150,
MarginTop:200,
AnimationDuration:1000
});
/*]]>*/
</script>
</body>
</html>
Thanks so much for your detailed post. I have attempted to put this code into effect, but I'm running into an issue in the fact that this code would need to be applied to the header template, and each page would need to load a separate image.
It works fine as a static html page (I attempted it on my own server with several different pages), but I can't seem to make it work in the template. Could you explain to me how that would work in the header template? Here is what the header template looks like:
As you can see, there are several arguments for changing the header image based on what page the viewer is on. As well as, and I haven't figured this part out yet, it seems the original coder had managed to get each picture to animate in a specific way, so that when it was much smaller, they were able to specify which parts were visible.
I took the original source code for the home page and threw it up on another site and uploaded a different picture, and it worked perfectly fine as well, which makes me think wordpress itself is the problem, but I simply don't know enough about it.
I replaced various parts of your code (in fact, all of your code is there) into the header.php. This is what I came up with for the page, including your code, but using what i know of the wordpress template:
Code:
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico">
<script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// The functional code size is 1.39K
// **** 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;'
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the initial value. (digits, default = 0)
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
d=Math.max(d,s<0||f<0?d:0);
this.data[0]=d;
this.apply();
if (ms<this.mS){
this.to=setTimeout(function(){oop.cng(); },10);
}
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body <?php body_class(); ?>>
<div id="page">
<a href="/"><img src="wp-content/themes/glossy-stylo/images/headername.png"></a><br>
<!-- <img src="wp-content/themes/glossy-stylo/images/bkgroad.jpg"> -->
<div class="wrapHeaderImage">
<div class="headerImage"
<?php
if (is_page('Home')) {
echo 'id="road2"><img src="wp-content/themes/glossy-stylo/images/bkgroad2.jpg">';
} elseif (is_page('news')) {
echo 'id="barn"><img src="wp-content/themes/glossy-stylo/images/bkgbarn.jpg">';
} elseif (is_page('Sounds')) {
echo 'id="field"><img src="wp-content/themes/glossy-stylo/images/bkgfield.jpg">';
} elseif (is_page('Our Story')) {
echo 'id="guys"><img src="wp-content/themes/glossy-stylo/images/bkgguys.jpg">';
} elseif (is_page('Travel')) {
echo 'id="fence"><img src="wp-content/themes/glossy-stylo/images/bkgfence.jpg">';
} elseif (is_page('Video')) {
echo 'id="road"><img src="wp-content/themes/glossy-stylo/images/bkgroad.jpg">';
} elseif (is_page('pictures')) {
echo 'id="silo"><img src="wp-content/themes/glossy-stylo/images/bkgsilo.jpg">';
} elseif (is_page('links')) {
echo 'id="road3"><img src="wp-content/themes/glossy-stylo/images/bkgroad3.jpg">';
} else {
echo 'id="barn"><img src="wp-content/themes/glossy-stylo/images/bkgbarn.jpg">';
}
?>
</div></div>
<img src="wp-content/themes/glossy-stylo/images/shadow.jpg"><br>
<script type="text/javascript">
/*<![CDATA[*/
function zxcExpand(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],height=[o.Height,obj.offsetHeight],margin=[0,o.MarginTop],ms=o.AnimationDuration;
obj.style.height=height[0]+'px';
img.style.marginTop=-margin[1]+'px';
this.ooph=new zxcAnimate('height',obj,height[0])
this.oopm=new zxcAnimate('marginTop',img,-margin[1])
this.height=height;
this.margin=margin;
this.ms=typeof(ms)=='number'&&ms>0?ms:1000;
img.onmouseover=function(){ oop.expand(true); }
img.onmouseout=function(){ oop.expand(false); }
}
zxcExpand.prototype.expand=function(ud){
this.ooph.animate(this.ooph.data[0],this.height[ud?1:0],this.ms,this.height);
this.oopm.animate(this.oopm.data[0],-this.margin[ud?0:1],this.ms,this.margin);
}
new zxcExpand({
ID:'tst',
Height:150,
MarginTop:200,
AnimationDuration:1000
});
/*]]>*/
</script>
<div id="stgmenudiv">
<a id="menu-home" href="<?php bloginfo("wpurl") ?>" title="Home"><span>Home</span></a>
<a id="menu-gossip" href="<?php bloginfo("wpurl") ?>/?page_id=6" title="Gossip"><span>Gossip</span></a>
<a id="menu-ourstory" href="<?php bloginfo("wpurl") ?>/?page_id=30" title="OurStory"><span>Our Story</span></a>
<a id="menu-sounds" href="<?php bloginfo("wpurl") ?>/?page_id=11" title="Sounds"><span>Sounds</span></a>
<a id="menu-travel" href="<?php bloginfo("wpurl") ?>/?page_id=13" title="Travel"><span>Travel</span></a>
<a id="menu-video" href="<?php bloginfo("wpurl") ?>/?page_id=18" title="Video"><span>Video</span></a>
<a id="menu-pictures" href="<?php bloginfo("wpurl") ?>/?page_id=20" title="Pictures"><span>Pictures</span></a>
<a id="menu-links" href="<?php bloginfo("wpurl") ?>/?page_id=22" title="Links"><span>Links</span></a>
<a id="menu-store" href="http://smalltowngossip.bandcamp.com/" title="Store" target="_blank"><span>Store</span></a>
</div>
<div id="header" role="banner">
<!--
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
-->
</div>
<div id="wrap-content">
It's not working on the site, but what I find interesting, is that if you go to the various pages, all the images are resized completely diferently. The Home and Gossip page do not resize at all, "Our Story" resizes at about half the size it should, and "Sounds," "Travel," "Pictures," and "Links" all resize to the exact size and position they should! But no animation. So I'm a bit weirded out that the various images that don't do any resizing just completely seem to ignore the code in the site.
Anyway, I appreciate your help, hopefully something will come of this!
Before you post, read our: 
