?
Solved

Slide open layer on page.

Posted on 2006-07-21
2
Medium Priority
?
256 Views
Last Modified: 2008-02-01
I have a page that I am trying to slide open a layer onthe page. I have pulled some code and am very close, but need some help. The remaining isseues are:

1) when the layer becomes visible, I want the copy on the page to move below it. I think this is just chaning the z-index.
2) I would like the layer to open when the page loads. I can not put this in the BODY tag and tried to open another <script> tag, but could not get it to work.

Thanks for any help.

<html>
<head>
      <script language="javascript" src="../ypSlideOutMenus.js"></script>
      <script language="javascript">
            new ypSlideOutMenu("menu1", "down", 20, 20, 500, 200)

    ypSlideOutMenu.writeCSS();
   
      </script>

      <style type="text/css">
            /* just basic text formatting - nothing special */
            @import "/_common/demo.css";

            .menuActuator a {
                  color:#666666;
                  font-weight:bold;
                  font-size:12px;
                  font-family:arial;
            }

            .menu {
                  font-family:verdana;
                  color:#666666;
                  font-size:10px;
                  background-color:#cccccc;
                  layer-background-color:#cccccc;
            }
      </style>
</head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor="white">
      <table bgcolor="#CCCCCC" width="450" cellpadding="2" cellspacing="0" border="0">
      <tr>
            <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu1');">menu1</a></td>
            <td width="200" align="left" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll()">hide 'em all</a></td>
            <td width="100">&nbsp;</td>
      </tr>
      </table>

      <div id="menu1Container">
            <div id="menu1Content"><table border="0" width="500" cellspacing="1" cellpadding="2" align="center" bgcolor="#FFFF66">
      <tr>
            <td>We have some questions that you might be able ot help us with. <br>hi<br>hi<br>hi<a href="" onClick="ypSlideOutMenu.hideAll()">Close</a></td>
      </tr>
</table></div>
      </div>
Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy. Here is a bunch of copy.

<script type="text/javascript" language="javascript">
<!--
ypSlideOutMenu.showMenu('menu1');
//-->
</script>

INCLUDED JS FIle

/*****************************************************
 * ypSlideOutMenu
 * http://ypslideoutmenus.sourceforge.net/
 * 3/04/2001
 *
 * a nice little script to create exclusive, slide-out
 * menus for ns4, ns6, mozilla, opera, ie4, ie5 on
 * mac and win32. I've got no linux or unix to test on but
 * it should(?) work...
 *
 * Licensed under AFL 2.0
 * http://www.opensource.org/licenses/afl-2.0.php
 *
 * 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
      this.css = "";

      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

            // global reference to this object
            this.gRef = "ypSlideOutMenu_"+id
            eval(this.gRef+"=this")

            // add this menu object to an internal list of all menus
            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

            // close other menus.
            for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)

            // if this menu is scheduled to close, cancel it.
            if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }

            // if this menu is closed, open it.
            if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
      }
}

ypSlideOutMenu.hideMenu = function(id)
{
      // schedules the menu to close after <hideDelay> ms, which
      // gives the user time to cancel the action if they accidentally moused out
      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)
      
      // flag that this scheduled event has occured.
      obj.hideTimer = 0

      // if this menu is open, close it.
      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])
}

// events
ypSlideOutMenu.prototype.onactivate            = function() { }
ypSlideOutMenu.prototype.ondeactivate      = function() { }


</body>

</html>
0
Comment
Question by:td234
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 19

Accepted Solution

by:
nschafer earned 1500 total points
ID: 17155634
Hi td234,

1. Yes the z-index controls front-back layering.  When you say below do you mean behind or underneath?

2. try adding code like this:
    window.onload=function() { yourfunction();}

Hope this helps,
Neal.
0
 
LVL 2

Author Comment

by:td234
ID: 17175147
I figured this out using a different script. Thanks anyway.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question