Solved

Slide open layer on page.

Posted on 2006-07-21
2
245 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
2 Comments
 
LVL 19

Accepted Solution

by:
nschafer earned 500 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html border input line 7 26
How do I update select listbox after search 2 23
Regular Expression needed 4 15
Table header must be on top 2 27
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

756 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