Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding a function to a function

    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:

    Code:
    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:

    Code:
    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:
    Code:
    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
    Code:
     /*****************************************************
    * 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() { }

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sad69
    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...

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I don't know if this is what you want:
    Code:
    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.

  • #5
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Analyze the code:
    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.

  • #7
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oh

    so what's the answer?

    net result: div slides while becoming increasingly opaque.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by immedicable
    so what's the answer?
    Code:
    function RUx(object, RRD, RRT, RRL){
       if (!document.all || !object) return;
       ...

  • #9
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    i failed :(

    i feel ashamed. thanks glenn. i won't ask again.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why?

  • #11
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    heh

    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

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Actually, I wasn't answering your original problem but the "not object" problem. Sorry about that.

    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; '

  • #13
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

    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

    slideEm
    slideIntoView
    slideOutOfView

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

    or
    ypSlideOutMenu.showMenu (public from the youngpup lib)

    muchas gracias!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •