Solved

Slide open layer on page.

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Flexbox in CSS3 2 39
Fixing my modal from bootstrap 18 39
Angular 2 - Issue in page Layout 2 46
Problem with a CSS in a page 2 25
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

937 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

Need Help in Real-Time?

Connect with top rated Experts

4 Experts available now in Live!

Get 1:1 Help Now