PDA

View Full Version : Problems with mouseOver on fold out menu



kasbah999
01-20-2011, 10:35 AM
1) Script Title:
fold our external menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/slideinmenu4.htm

3) Describe problem:
Really liked this script for adding extra text information (instead of a menu with links)
used it for a description for a video.
Enlarges the box and changed values in margin (within MouseOver) and the how much it reveals.
It seems it only works when a fraction of text from the separate htm menu document is visible on the main page. (which I try to avoid) Otherwise it only works when mouse hovers over the browser edge outside the window.
Heres the link: http://www.videokasbah.net/lockedgroove-v.html

Anybody knows how I can prevent that?

or, alternatively is there a code that prompts same function with a designated rollover button?

Any help GREATLY GREATLY appreciated (after 4+ hours of wasted time trying to fix this problem....)


kasbah

vwphillips
01-20-2011, 04:12 PM
<!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>
<style type="text/css">
/*<![CDATA[*/

#tst1 {
position:absolute;left:100px;top:100px;width:200px;height:100px;background-Color:#FFCC66;
}

/*]]>*/
</style>
<script type="text/javascript">
// AnimateII (08-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style 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:relative;' by the script.
//
// 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 zxcAnimateII('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) 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.

// **** Notes
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity', clip, 'color', 'background-Color'.
//
// 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: To animate colors('color' or 'background-Color') the start and finish values may be.
// HEX('#FF0000') or RGB('rgb(255,0,0)'), abbreviated HEX or named colors are not allowed.
//
// Note 4: To animate 'clip' the start and finish values may be
// arrays of the top, right, bottom and left values([0,100,20,0])
// or the standard clip format 'rect(0px,100px,20px,0px)'.
//
// Note 5: It may be required to access the current value of the effect.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively && each field is an array.
// For color each field is an array storing the R, G, B values.
// The current effect value is recorded in A.data[0].
//
// Note 6: A function may be called on completion of the effect by assigning the function
// to the animator instance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//


// **** Functional Code(2.61K) - NO NEED to Change


function zxcAnimateII(mde,obj,srt){
this.obj=(typeof(obj)=='string')?document.getElementById(obj):obj;
this.mde=mde.replace(/[-#]/g,'');
this.data=[srt?this.convert(srt,this.mde):0];
this.to=null;
}

zxcAnimateII.prototype={

animate:function(srt,fin,ms,c){
this.std=!(this.mde.indexOf('olor')>0||this.mde=='clip'||this.mde=='opacity');
srt=this.convert(srt,this.mde);
fin=this.convert(fin,this.mde);
this.pos=true;
for (var z0=0;z0<srt.length;z0++){
if (srt[z0]<0||fin[z0]<0){
this.pos=false;
}
}
c=c||'';
this.c=c.charAt(0).toLowerCase();
this.mS=ms||2000;
clearTimeout(this.to);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.mS);
this.data=[[],srt,fin];
this.cng();
},

cng:function(){
var ms=new Date().getTime()-this.srttime;
for (var z0=0;z0<this.data[2].length;z0++){
this.data[0][z0]=Math.floor(this.c=='s'?(this.data[2][z0]-this.data[1][z0])*Math.sin(this.inc*ms)+this.data[1][z0]:this.c=='c'?(this.data[2][0])-(this.data[2][z0]-this.data[1][z0])*Math.cos(this.inc*ms):(this.data[2][z0]-this.data[1][z0])/this.mS*ms+this.data[1][z0]);
if (this.pos&&this.data[0][z0]<0){
this.data[0][z0]=0;
}
}
this.cngstyle();
if (ms<this.mS){
this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
}
else {
this.data[0]=this.data[2];
this.cngstyle(this.data[0]);
if (this.Complete){
this.Complete(this);
}
}
},

cngstyle:function(){
var v=this.data[0];
if (this.std){
this.obj.style[this.mde]=v[0]+'px';
}
else if (this.mde.indexOf('olor')>0){
this.obj.style[this.mde]='rgb('+v[0]+','+v[1]+','+v[2]+')';
}
else if (this.mde=='clip'){
this.obj.style[this.mde]='rect('+v[0]+'px,'+v[1]+'px,'+v[2]+'px,'+v[3]+'px)';
}
else if (this.mde=='opacity'){
zxcOpacity(this.obj,v[0]);
}
},

convert:function(col,mde){
if (typeof(col)=='object'){
return col;
}
else if (mde=='clip'){
col=col.replace(/[rect()px]/g,'').split(',');
return [col[0]*1,col[1]*1,col[2]*1,col[3]*1];
}
else if (!col.toString().match('#')){
return [parseInt(col)];
}
else {
col=parseInt(col.substring(1,3),16)+','+parseInt(col.substring(3,5),16)+','+parseInt(col.substring(5,7),16);
col=col.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(col[0]),parseInt(col[1]),parseInt(col[2])];
}
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

</head>

<body>

<input type="button" name="" value="Toggle tst1" onmouseup="R1.Animate();" />
<input type="button" name="" value="Open tst1" onmouseup="R1.Animate(true);" />
<input type="button" name="" value="Close tst1" onmouseup="R1.Animate(false);" />
<div id="tst1" >test</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcReveal(o){
var obj=document.getElementById(o.ID);w=obj.offsetWidth+5,h=obj.offsetHeight+5;
var min=[0,0,h,0];
var max=[0,w,h,0];
this.clip=new zxcAnimateII('clip',obj,min);
this.ms=o.AnimationSpeed||1000;
this.mm=[min,max];
this.toggle=false;
this.Animate();
}

zxcReveal.prototype={

Animate:function(ud){
if (typeof(ud)=='boolean'){
this.toggle=ud;
}
this.clip.animate(this.clip.data[0],this.mm[this.toggle?1:0],this.ms);
this.toggle=!this.toggle;
}

}

R1=new zxcReveal({
ID:'tst1',
AnimationSpeed:1000
});

/*]]>*/
</script>
</body>

</html>

kasbah999
01-23-2011, 11:52 AM
Hey Vic thanks a lot. That would be another solution. Good old buttons and a silder that reveals the text.

I was actually looking for a code where the whole windows slides (changes position) That why I liked the fold out menu...

My inspiration: Here's a site with an incredible brilliant dymanic action. This guy has a real party. Tons of css and .js I guess... http://fernandoorellana.com/

k
(greetings from the castle)

vwphillips
01-24-2011, 10:35 AM
<!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>
<style type="text/css">
/*<![CDATA[*/

#tst1 {
position:absolute;z-Index:2;left:0px;top:0px;width:100px;height:20px;background-Color:#FFCC66;
}

.parent {
position:relative;width:200px;height:150px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg);
}

/*]]>*/
</style>
<script type="text/javascript">
// AnimateII (08-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style 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:relative;' by the script.
//
// 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 zxcAnimateII('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) 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.

// **** Notes
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity', clip, 'color', 'background-Color'.
//
// 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: To animate colors('color' or 'background-Color') the start and finish values may be.
// HEX('#FF0000') or RGB('rgb(255,0,0)'), abbreviated HEX or named colors are not allowed.
//
// Note 4: To animate 'clip' the start and finish values may be
// arrays of the top, right, bottom and left values([0,100,20,0])
// or the standard clip format 'rect(0px,100px,20px,0px)'.
//
// Note 5: It may be required to access the current value of the effect.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively && each field is an array.
// For color each field is an array storing the R, G, B values.
// The current effect value is recorded in A.data[0].
//
// Note 6: A function may be called on completion of the effect by assigning the function
// to the animator instance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//


// **** Functional Code(2.61K) - NO NEED to Change


function zxcAnimateII(mde,obj,srt){
this.obj=(typeof(obj)=='string')?document.getElementById(obj):obj;
this.mde=mde.replace(/[-#]/g,'');
this.data=[srt?this.convert(srt,this.mde):0];
this.to=null;
}

zxcAnimateII.prototype={

animate:function(srt,fin,ms,c){
this.std=!(this.mde.indexOf('olor')>0||this.mde=='clip'||this.mde=='opacity');
srt=this.convert(srt,this.mde);
fin=this.convert(fin,this.mde);
this.pos=true;
for (var z0=0;z0<srt.length;z0++){
if (srt[z0]<0||fin[z0]<0){
this.pos=false;
}
}
c=c||'';
this.c=c.charAt(0).toLowerCase();
this.mS=ms||2000;
clearTimeout(this.to);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.mS);
this.data=[[],srt,fin];
this.cng();
},

cng:function(){
var ms=new Date().getTime()-this.srttime;
for (var z0=0;z0<this.data[2].length;z0++){
this.data[0][z0]=Math.floor(this.c=='s'?(this.data[2][z0]-this.data[1][z0])*Math.sin(this.inc*ms)+this.data[1][z0]:this.c=='c'?(this.data[2][0])-(this.data[2][z0]-this.data[1][z0])*Math.cos(this.inc*ms):(this.data[2][z0]-this.data[1][z0])/this.mS*ms+this.data[1][z0]);
if (this.pos&&this.data[0][z0]<0){
this.data[0][z0]=0;
}
}
this.cngstyle();
if (ms<this.mS){
this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
}
else {
this.data[0]=this.data[2];
this.cngstyle(this.data[0]);
if (this.Complete){
this.Complete(this);
}
}
},

cngstyle:function(){
var v=this.data[0];
if (this.std){
this.obj.style[this.mde]=v[0]+'px';
}
else if (this.mde.indexOf('olor')>0){
this.obj.style[this.mde]='rgb('+v[0]+','+v[1]+','+v[2]+')';
}
else if (this.mde=='clip'){
this.obj.style[this.mde]='rect('+v[0]+'px,'+v[1]+'px,'+v[2]+'px,'+v[3]+'px)';
}
else if (this.mde=='opacity'){
zxcOpacity(this.obj,v[0]);
}
},

convert:function(col,mde){
if (typeof(col)=='object'){
return col;
}
else if (mde=='clip'){
col=col.replace(/[rect()px]/g,'').split(',');
return [col[0]*1,col[1]*1,col[2]*1,col[3]*1];
}
else if (!col.toString().match('#')){
return [parseInt(col)];
}
else {
col=parseInt(col.substring(1,3),16)+','+parseInt(col.substring(3,5),16)+','+parseInt(col.substring(5,7),16);
col=col.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(col[0]),parseInt(col[1]),parseInt(col[2])];
}
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

</head>

<body>

<input type="button" name="" value="Toggle tst1" onmouseup="R1.Animate();" />
<input type="button" name="" value="Open tst1" onmouseup="R1.Animate(true);" />
<input type="button" name="" value="Close tst1" onmouseup="R1.Animate(false);" />
<div class="parent" >
<div id="tst1" >test</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

function zxcReveal(o){
var obj=document.getElementById(o.ID),w=obj.offsetWidth+5,h=obj.offsetHeight+5,p=obj.parentNode;
var min=[0,w,0,0];
var max=[0,w,h,0];
this.clip=new zxcAnimateII('clip',obj,min);
this.ms=o.AnimationSpeed||1000;
this.mm=[min,max];
this.toggle=false;
this.Animate();
this.addevt(p,'mouseover','Animate',true);
this.addevt(p,'mouseout','hide');
this.to=null;
}

zxcReveal.prototype={

Animate:function(ud){
clearTimeout(this.to);
if (typeof(ud)=='boolean'){
this.toggle=ud;
}
this.clip.animate(this.clip.data[0],this.mm[this.toggle?1:0],this.ms);
this.toggle=!this.toggle;
},

hide:function(){
var oop=this;
this.to=setTimeout(function(){ oop.Animate(false); },100);
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}


}

R1=new zxcReveal({
ID:'tst1',
AnimationSpeed:500
});

/*]]>*/
</script>
</body>

</html>

kasbah999
01-27-2011, 10:47 PM
Vic: I did see the embedded notes, (thanks again) but I would not even know how to modify so many parameters to make a sliding window that I described earlier.

I went back to the original code...absolutely no luck with altering margins ..so the only way I managed to makle it look right I was to manually break up the text so that no letter is in the left frame.

This is how it looks like now:
http://www.videokasbah.net/lockedgroove-v.html