...

View Full Version : adding a function to a function



immedicable
04-27-2004, 08:45 PM
how are functions added to existing functions? it seems pretty common, but i can't figure out the specifics except when dealing with very simple functions with no arguements. i'd like to add the following function:



RRX = new Object();
RRY= new Object();
function RUx(object, RRD, RRT, RRL){
if (!document.all)
return
if (object != "[object]"){
setTimeout("RUx("+object+", "+RRD+", "+RRT+", "+RRL+")", 1000);
return;
}
clearTimeout(RRY[object.sourceIndex]);
diff = RRD-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > RRD){
direction = -1;
}
RRL=Math.min(direction*diff, RRL);
object.filters.alpha.opacity+=direction*RRL;
if (object.filters.alpha.opacity != RRD){
RRX[object.sourceIndex]=object;
RRY[object.sourceIndex]=setTimeout("RUx(RRX["+object.sourceIndex+"], "+RRD+", "+RRT+", "+RRL+")", RRT);
}
}


to youngpup's slider script. the ypSlideOutMenu.showMenu function exactly (which has only a single arguement - the id of the element being slid). or, if that proves too difficult or problematic, a transfilter player would be OK - like:



function transin() {
for (var i = 0; i < arguments.length; i++)
{
var divObj = document.getElementById(arguments[i])
divObj.filters(0).Apply();
divObj.style.visibility = "visible";
divObj.filters(0).Play();
}
}

and for the hideMenu(), logically follows:


function transout() {
for (var i = 0; i < arguments.length; i++)
{
var divObj = document.getElementById(arguments[i])
divObj.filters(0).Apply();
divObj.style.visibility = "hidden";
divObj.filters(0).Play();
}
}


if anyone can either help me out or tell me how to go about it, i'd appreciate it. tyia, and the slider script is below


/*****************************************************
* ypSlideOutMenu
* 3/04/2001
*
* Revised:
* - 08/29/2002 : added .hideAll()
* - 04/15/2004 : added .writeCSS() to support more
* than 30 menus.
*
* --youngpup--
*****************************************************/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 1000
ypSlideOutMenu.minCPUResolution = 10
// constructor
function ypSlideOutMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = "";
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
this.css = strCSS;
this.load()
}
}
ypSlideOutMenu.writeCSS = function() {
document.writeln('<style type="text/css">');
for (var id in ypSlideOutMenu.Registry) {
document.writeln(ypSlideOutMenu.Registry[id].css);
}
document.writeln('</style>');
}
ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}
ypSlideOutMenu.hideAll = function()
{
var reg = ypSlideOutMenu.Registry
for (menu in reg) {
ypSlideOutMenu.hide(menu);
if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
}
}
ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
ypSlideOutMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}
ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }

sad69
04-27-2004, 10:59 PM
I don't know that I understand what you mean by add a function to a function.

Maybe the answer to the following question will help us better understand: why do you think you want to "add" RUx to the slider script?

For some reason I'm wondering if you mean that you want your RUx() function to be called whenever the transin() and transout() functions are being called. I'd show you how to do that only I don't know what parameters your RUx function is expecting..

Help us help you..
Sadiq.

immedicable
04-28-2004, 12:26 AM
Help us help you..
Sadiq.
lol!

ok the RUx is an opacity fade - both in (to fully opaque) and out (to fully transparent) or anything in between, the opacity % you want (as well as the numbers of steps, and the size of each step in percentile points) and the id of the element to target are specified in the arguement of each call. i use the sliders timed and coordinated with each other so that a single onmouseoever event triggers many of the slider menus. right now i just time everything manually which is hugely time consuming and probably very inefficient. so, i just want to call one function that does both things to the same element, and with fixed/unalterable arguements is fine.

i hope that clarifies... :confused:

glenngv
04-28-2004, 03:12 AM
I don't know if this is what you want:


var RRX = new Object();
var RRY= new Object();
function RUx(object, RRD, RRT, RRL){
if (!document.all) return;
if (!object){
//I don't know why you're doing this when object variable is not an object
setTimeout(function(){RUx(object,RRD,RRT,RRL)}, 1000);
return;
}
clearTimeout(RRY[object.sourceIndex]);
diff = RRD-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > RRD){
direction = -1;
}
RRL=Math.min(direction*diff, RRL);
object.filters.alpha.opacity+=direction*RRL;
if (object.filters.alpha.opacity != RRD){
RRX[object.sourceIndex]=object;
RRY[object.sourceIndex]=setTimeout(function(){RUx(RRX[object.sourceIndex], RRD, RRT, RRL)}, RRT);
}
}
...
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
...
RUx(obj, 10, 100, 10); //dummy numbers
...
}

I modified the setTimeout statement in the RUx() function.

immedicable
04-28-2004, 05:41 AM
how would the function be written? i stuck it after the first condition (example hilited) and it didn't work - i return an error to the effect that the alpha property isn't sticking, despite declaring it in the class (within the head and externally), inline with style="filter:alpha(opacity=50);" and even made a fumbling attempt to build it into the script (example also hilited)... and i don't know what you mean about the ojbect in RUx - it's worked fine for over a year - is there something screwy?

here's what i tried (changed ypSlideOutMenu to just "q" for convenience's sake for the time being)... all changes are red.



var RRX = new Object();
var RRY= new Object();
function RUx(object, RRD, RRT, RRL){
if (!document.all) return;
if (!object){
//I don't know why you're doing this when object variable is not an object // <!-eh?->
setTimeout(function(){RUx(object,RRD,RRT,RRL)}, 1000);
return;
}
clearTimeout(RRY[object.sourceIndex]);
diff = RRD-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > RRD){
direction = -1;
}
RRL=Math.min(direction*diff, RRL);
object.filters.alpha.opacity+=direction*RRL;
if (object.filters.alpha.opacity != RRD){
RRX[object.sourceIndex]=object;
RRY[object.sourceIndex]=setTimeout(function(){RUx(RRX[object.sourceIndex], RRD, RRT, RRL)}, RRT);
}
}
q.Registry = []
q.aniLen = 250
q.hideDelay = 1000
q.minCPUResolution = 10
function q(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "q_"+id
eval(this.gRef+"=this")
q.Registry[id] = this
var d = document
var strCSS = "";
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'filter:alpha(opacity=50)'strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
this.css = strCSS;
this.load()
}
}
q.writeCSS = function() {
document.writeln('<style type="text/css">');
for (var id in q.Registry) {
document.writeln(q.Registry[id].css);
}
document.writeln('</style>');
}
q.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / q.aniLen / q.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("q.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("q.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
q.showMenu = function(id)
{
var reg = q.Registry
var obj = q.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) q.hide(menu)
RUx(obj, 10, 100, 10);if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
q.hideMenu = function(id)
{
var obj = q.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("q.hide('" + id + "')", q.hideDelay);
}
}
q.hideAll = function()
{
var reg = q.Registry
for (menu in reg) {
q.hide(menu);
if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
}
}
q.hide = function(id)
{
var obj = q.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
q.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", q.minCPUResolution)
}
q.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > q.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(q.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
q.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
q.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
q.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
q.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
q.prototype.onactivate = function() { }
q.prototype.ondeactivate = function() { }


many thanks again, glen

glenngv
04-28-2004, 05:58 AM
Analyze the code:


function RUx(object, RRD, RRT, RRL){
if (!document.all) return;
if (!object){
//I don't know why you're doing this when object variable is not an object
setTimeout(function(){RUx(object,RRD,RRT,RRL)}, 1000);
...

If the first call to RUx, the parameter "object" is not really an object (either null or undefined), the setTimeout which call the same function, is executed passing the same "object" parameter again. So when the RUx is executed again, the code goes to that setTimeout again. The cycle continues endlessly without accomplishing something. You don't experience this because you are always passing a valid object in the "object" parameter.

immedicable
04-28-2004, 06:19 AM
so what's the answer?

net result: div slides while becoming increasingly opaque.

glenngv
04-28-2004, 07:29 AM
so what's the answer?


function RUx(object, RRD, RRT, RRL){
if (!document.all || !object) return;
...

immedicable
04-28-2004, 08:16 AM
i feel ashamed. thanks glenn. i won't ask again.

glenngv
04-28-2004, 08:56 AM
Why? :confused:

immedicable
04-28-2004, 10:56 AM
just kiddin glenn ;) it's just taking so long to learn this, i feel like a dumbass... you're like "analyze the code" trying to help me learn, and i haven't got a freakin clue what any of it really means... anyhow.... it still doesn't work!! i'm still not sure about the original question - all the functions worked fine before, that wasnt' the problem, i just don't know how to make the callout for show.Menu also simultaneously call the RUx fade - i thought you were answering it but after trying it twice without positive results, i'm wondering if my question was understandable...

cheers :D

glenngv
04-28-2004, 11:18 AM
Actually, I wasn't answering your original problem but the "not object" problem. Sorry about that. :p

So now here's my suggested solution on your original problem.

This is the snippet of the code that's buggy: (from your actual post)

strCSS += 'filter:alpha(opacity=50)'strCSS += 'top:' + top + 'px; '

It should be:

strCSS += 'filter:alpha(opacity=50);';
strCSS += 'top:' + top + 'px; '

immedicable
04-28-2004, 11:33 AM
still no good :|

basically, i just want to have the slider start out at 0 opacity and start gaining as soon as it starts moving, so that it reaches 100% (or whatever destination opacity happens to be) at the conclusion of the slide... actually, the sliders from dyn_web would be even more ideal since they include an easing arguement built in - and i'd rather use the opacity script i included (or one similiar) in lieu of a transition just for cross-browser issues - butttt if that's not going to happen, i'll take what i can get :D

the links to the dyn_web slider libs are:
http://www.dyn-web.com/dhtml/slide/src/dw_glide.js
http://www.dyn-web.com/dhtml/slide/src/dw_lib.js

or the youngpup script i first posted would work - so if you can tell me what i need to do to make any of these functions include a fading routine i'd appreciate it :D

slideEm
slideIntoView
slideOutOfView

(those are the public functions from the dyn_web links above)

or
ypSlideOutMenu.showMenu (public from the youngpup lib)

muchas gracias! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum