newbie quick ypSlideOutMenus question


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 9 of 9

Thread: newbie quick ypSlideOutMenus question

Hybrid View

  1. #1
    Join Date
    Dec 2005
    Posts
    5

    newbie quick ypSlideOutMenus question

    Hi there

    I am using the funky ypSlideOutMenus on a website I am developing but want to slow down the speed the menus drop down. At the moment they drop down really quick, but have seen it slower on other sites.

    Can any of you java gurus let me know what parameters to change?

    Thanks!

  2. #2
    Join Date
    Jan 2005
    Posts
    413
    I'm not familiar with them, but are you sure they're java and not javascript? Because a sliding website menu doesn't require Java, although it can be used for it.

  3. #3
    Join Date
    Dec 2005
    Posts
    5
    Ah sorry, just shows how much of a newbie I am - thought java was short for javascript

    Code is js

  4. #4
    Join Date
    Jan 2005
    Posts
    413
    Well without seeing the code, I would wager there's a setTimeout('functionName()', someValueInMilliseconds). someValueInMilliseconds is what you need to increase, it'll either be a number, or a variable set to a number.

  5. #5
    Join Date
    Dec 2005
    Posts
    5
    Thanks, but it didn't seem to affect it in any way. It's on line 76. Perhaps someone could check over the code for me? Can someone tell me what the aniLen value does?

    /*****************************************************
    * ypSlideOutMenu
    * Code used with permission from www.youngpup.net
    * --youngpup-- 3/04/2001
    *****************************************************/

    ypSlideOutMenu.Registry = []
    ypSlideOutMenu.aniLen = 250
    ypSlideOutMenu.hideDelay = 50
    ypSlideOutMenu.minCPUResolution = 10

    ypSlideOutMenu.styleMod = '';

    function ypSlideOutMenu(id, dir, left, top, width, height, parentid, degrade, debug)
    {
    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.degrade = degrade;
    this.debug = debug;
    this.sliding = false;
    this.id = id
    this.parentid = parentid
    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

    this.initleft = left
    this.inittop = top
    this.initwidth = width
    this.initheight = height
    this.showcount = 0;


    // The following code originally invoked "document.write" but it caused
    // a crash in IE (but not NS) when there were
    // more than 31 menus total. What crashed is that the styles that were
    // declared in the css disappeared with 31 menus, where 32 menus caused
    // the d.write call to fail entirely. When I changed
    // it so that the style changes were accumulated into one string
    // (then at the end that string was written into the document,
    // so that document.write was only called once) this solved the problem.

    ypSlideOutMenu.styleMod += '#' + this.id + 'Container { visibility:hidden; ';
    ypSlideOutMenu.styleMod += 'left:' + left + 'px; ';
    ypSlideOutMenu.styleMod += 'z-index:50; ';
    ypSlideOutMenu.styleMod += 'top:' + top + 'px; ';
    ypSlideOutMenu.styleMod += 'overflow:hidden; }';
    ypSlideOutMenu.styleMod += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; ';
    ypSlideOutMenu.styleMod += 'height:' + height + 'px; ';
    ypSlideOutMenu.styleMod += 'width:' + width + 'px; ';
    ypSlideOutMenu.styleMod += 'z-index:50; ';
    ypSlideOutMenu.styleMod += 'clip:rect(0 ' + width + ' ' + height + ' 0); ';
    ypSlideOutMenu.styleMod += '} ';
    this.load()
    }
    }

    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)
    if (!obj1 || !obj2) {
    window.setTimeout(this.gRef + ".load()", 1000);
    } else {
    this.container = obj1
    this.menu = obj2
    this.style = this.ns4 ? this.menu : this.menu.style
    // SEE NOTE ABOVE. The following function call for the 31 menus bug.
    //this.setStyle()
    this.homePos = eval("0" + this.dirType + this.dim)
    this.outPos = 0
    this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
    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 + "')")
    this.endSlide()
    }
    }

    ypSlideOutMenu.showMenu = function(id, e)
    {
    var reg = ypSlideOutMenu.Registry
    var obj = ypSlideOutMenu.Registry[id]
    if (obj.container) {
    //if (obj.ie) alert('showing: ' + id);
    obj.over = true
    if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
    obj.showcount++;
    if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
    if (obj.ns4) obj.menu.routeEvent(Event.MOUSEOVER);
    }

    ypSlideOutMenu.hideMenu = function(id, e)
    {
    var obj = ypSlideOutMenu.Registry[id]
    if (obj.container) {
    //if (obj.ie) alert('hiding: ' + id);
    if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
    obj.showcount--;
    obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
    }
    if (obj.ns4) obj.menu.routeEvent(Event.MOUSEOUT);
    }

    /*
    ypSlideOutMenu.prototype.isOverMenu = function(evnt) {
    if (evnt) {
    return ((this.initleft < evnt.pageX && evnt.pageX < (this.initleft + this.initwidth)) && (this.inittop < evnt.pageY && evnt.pageY < (this.inittop + this.initheight)))?true:false;
    } else {
    return true;
    }
    }
    */

    ypSlideOutMenu.hide = function(id) {
    var obj = ypSlideOutMenu.Registry[id]
    var reg = ypSlideOutMenu.Registry
    obj.over = false
    if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
    obj.hideTimer = 0
    var close = true;
    for (menu in reg) {
    // for each child, if either
    // 1. the child is open or
    // 2. the child is closing (but hasn't closed yet)
    // then we don't close this menu.
    var pid = ypSlideOutMenu.Registry[menu].parentid
    if (pid == id) {
    if (ypSlideOutMenu.Registry[menu].open) close = false;
    if (!ypSlideOutMenu.Registry[menu].open && ypSlideOutMenu.Registry[menu].sliding) close = false;
    }
    }
    if (obj.open && !obj.aniTimer && close && !obj.showcount) obj.startSlide(false);
    }


    ypSlideOutMenu.prototype.startSlide = function(open) {
    this.open = open
    if (open) this.setVisibility(true)
    this.startTime = (new Date()).getTime()
    this.sliding = true;
    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)
    this.sliding = false;
    if (((this.open && !this.over) || (!this.open && this.over)) && (!this.parent || this.parent.open)) {
    this.startSlide(this.over)
    } else {
    var overchild = false;
    var reg = ypSlideOutMenu.Registry
    for (menu in reg) {
    var pid = ypSlideOutMenu.Registry[menu].parentid
    if (pid == this.id) overchild = ypSlideOutMenu.Registry[menu].over ? true : overchild
    }
    //if (!overchild && this.parentid && !ypSlideOutMenu.Registry[this.parentid].over) ypSlideOutMenu.hideMenu(this.parentid);
    if (!overchild && this.parentid && !ypSlideOutMenu.Registry[this.parentid].over) ypSlideOutMenu.hide(this.parentid);
    }
    }

    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"] = p
    }

    ypSlideOutMenu.prototype.getPos = function(c) {
    return parseInt(this.style[c])
    }

  6. #6
    Join Date
    Jan 2005
    Posts
    413
    Try experimenting with these 2 values

    ypSlideOutMenu.hideDelay = 50
    ypSlideOutMenu.minCPUResolution = 10

  7. #7
    Join Date
    Dec 2005
    Posts
    5
    JPnyc

    I have tried these already. HideDelay seems to make the drop downs stay open longer when you have moved on, whilst MinCPResolution doesn't seem to do anything!

    Any other ideas

  8. #8
    Join Date
    Jan 2005
    Posts
    413
    This is a mountain of code, and I don't have time to sift through it all. Have you tried to change this value in this line?
    window.setTimeout(this.gRef + ".load()", 1000);

  9. #9
    Join Date
    Dec 2005
    Posts
    5
    Yeah, I have tried adjusting all the red values (red when viewing in Dreamweaver). I have compared the code to another website I did with the same menus and the values are identical but they slide out nicely.

    I appreciate it's a mountain of code, but thanks for your suggestions anyhow.

Similar Threads

  1. ActiveX.exe quick question
    By Akarihjabi in forum VB Classic
    Replies: 6
    Last Post: 04-12-2005, 02:51 PM
  2. Replies: 1
    Last Post: 01-18-2003, 02:09 PM
  3. newbie question
    By Tim Wilkinson in forum Java
    Replies: 0
    Last Post: 04-26-2002, 05:40 AM
  4. NewBie question
    By Boosman in forum ASP.NET
    Replies: 1
    Last Post: 01-05-2002, 05:29 AM
  5. newbie easy question
    By bbp in forum VB Classic
    Replies: 1
    Last Post: 11-02-2000, 03:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center