Solved

Slide open layer on page.

Posted on 2006-07-21
2
248 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 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
href return to normal window 5 43
Hit counters in SharePoint 2013 2 57
Boolean 13 46
Can't find an open element in HTML 5 50
This article discusses how to create an extensible mechanism for linked drop downs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

739 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