SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SSI - including a javascript menu

    i'm trying to get a javascript menu (the ypSlideOutMenu from www.youngpup.net) to work using a SSI. i've been trying to get it to display properly but so far the best i get is the the menu bar with the menu drop downs displayed underneath static on the page (as apposed to rolling down when you hover over the menu bar)

    is it possible to display DIV's and JavaScript correctly via SSI?

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. Perfectly possible. It should just appear in the code where you placed the SSI exactly as if it were in the HTML itself... don't know why you're having trouble without more info...


  3. #3
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML file with Javascript menu : http://www.gifford-consulting.co.uk/...menu/menu.html (displaying correctly)

    HTML file with menu added via SSI : http://www.gifford-consulting.co.uk/...st/index.shtml (displaying incorrectly)

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using IE 6. did not test in other browsers as menu will be used for a company intranet (all PC equiped with IE6)

  5. #5
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I assume you've taken those pages down now? I've only just gotten around to taking a look. Sorry.

    G

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    link still work (at least they should do!)


    what it should look like : http://www.gifford-consulting.co.uk/ssi_test/1.jpg

    what it actually looks like : http://www.gifford-consulting.co.uk/ssi_test/2.jpg

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any ideas anyone?

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason, I couldn't get your core .js file ('http://www.gifford-consulting.co.uk/ssi_test/ypSlideOutMenusC.js') to download. And: did you put a DOCTYPE tag in there? No HTML allowed (except as quoted strings) in JS. Hard to say more without seeing that file.
    ::: certified wild guess :::

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here it is - http://www.gifford-consulting.co.uk/...deOutMenusC.js

    i don't think the problem is specific to this javascript menu as i've tried others and get similar results.

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the error I'm getting (Firebird 0.7):

    Error: syntax error
    Source File: http://www.gifford-consulting.co.uk/...deOutMenusC.js
    Line: 1
    Source Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    Again...I can't download that file (from the 'displaying incorrectly' url you posted earlier); the above suggests that you've got a DOCTYPE declaration in there.

    Here's the (script) url you posted:

    http://www.gifford-consulting.co.uk/ssi_test/menu/ypSlideOutMenusC.js

    And here's the one being downloaded for your SSI:

    http://www.gifford-consulting.co.uk/ssi_test/ypSlideOutMenusC.js

    The valid script is from your /menu directory. Is the other one identical?
    ::: certified wild guess :::

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, here's all the file content and their locations:


    index.shtml - /ssi_test/

    Code:
     
    
    <html>
    <head>
     <title>SSI test</title>
    </head>
     
    <!--#include virtual="/ssi_test/menu/menu.html" -->
     
    </body>
    </html>

    menu.html - /ssi_test/menu/

    Code:
    <script language="javascript" src="ypSlideOutMenusC.js"></script>
    <script language="javascript">
     var menus = [
      new ypSlideOutMenu("menu1", "down", 5, 80, 170, 59),
      new ypSlideOutMenu("menu2", "down", 57, 80, 170, 40),
      new ypSlideOutMenu("menu3", "down", 147, 80, 170, 97),
      new ypSlideOutMenu("menu4", "down", 237, 80, 170, 21)
     ]
     for (var i = 0; i < menus.length; i++) {
      menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
      menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
     }
    </script>
    <style type="text/css">
     /* just basic text formatting - nothing special */
     @import "/_common/demo.css";
      
     body {
      font-size:11px;
      font-family:arial, sans-serif;
      color:#444444;
     }
     #menubar {
      position:absolute;
      width:450px;
      left:5px;
      top:55px;
      background-color:#F9F1C8;
      border:1px solid #AD5800;
      padding:2px;
     }
     #menubar a {
      color:#AD5800;
      letter-spacing:1px;
      border:1px solid #F9F1C8;
      padding-left:5px;
      padding-right:5px;
      text-decoration:none;
     }
     #menubar a.active {
      border-bottom-color:#CCC599;
      border-right-color:#CCC599;
      border-left-color:#FFFFFF;
      border-top-color:#FFFFFF;
     }
     .menu .options {
      margin-right:1px;
      margin-bottom:1px;
      border:1px solid #AD5800;
      background-color:#F9F1C8;
     }
     .menu a {
      color:#AD5800;
      display:block;
      padding:2px 10px;
      text-decoration:none;
      background-color:transparent;
     }
     .menu a:hover {
      background-color:#AD5800;
      color:#FAF7E1;
     }
     #about {
      position:absolute;
      left:5px;
      top:200px;
     }
    </style>
    <div id="menubar">
     <a id="act0" href="/ideas/" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')">ideas</a>&nbsp;
     <a id="act1" href="/experiments/" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')" title="onmouseover=ypSlideOutMenu.showMenu('menu2'); onmouseout=ypSlideOutMenu.hideMenu('menu2')">experiments</a>&nbsp;
     <a id="act2" href="/components/" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')" title="onmouseover=ypSlideOutMenu.showMenu('menu3'); onmouseout=ypSlideOutMenu.hideMenu('menu3')">components</a>&nbsp;
     <a id="act3" href="/writings/" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')" title="onmouseover=ypSlideOutMenu.showMenu('menu4'); onmouseout=ypSlideOutMenu.hideMenu('menu4')">writings</a>
    </div>
    
    <div id="menu1Container">
     <div id="menu1Content" class="menu">
      <div class="options">
       <a href="/ideas/javascript_debugger/">javascript debugger</a>
       <a href="/ideas/onRollMouseWheel/">monitoring the mouse-wheel</a>
       <a href="/ideas/resizeable_flash_textfield/">resizable text fields in flash</a>
      </div>
     </div>
    </div>
    <div id="menu2Container">
     <div id="menu2Content" class="menu">
      <div class="options">
       <a href="/experiments/email_wiretap/">email wiretap</a>
       <a href="/experiments/beatnik_piano/">beatnik piano</a>
      </div>
     </div>
    </div>
    <div id="menu3Container">
     <div id="menu3Content" class="menu">
      <div class="options">
       <a href="/components/ypXmlTree/">ypXmlTree</a>
       <a href="/components/ypRing/">ypRing</a>
       <a href="/components/ypBranch/">ypBranch</a>
       <a href="/components/ypSlideOutMenu/">ypSlideOutMenu</a>
       <a href="/components/ypSimpleScroll/">ypSimpleScroll</a>
      </div>
     </div>
    </div>
    <div id="menu4Container">
     <div id="menu4Content" class="menu">
      <div class="options">
       <a href="/writings/i_want_my_DOM/">i want my DOM, dammit</a>
      </div>
     </div>
    </div>
    <div id="about">
     <code>Note that this sample doesn't look good in older browsers (even ie5!) that don't support all of CSS. This has nothing to do with the component, I've just implemented some extra CSS here to make it look cool. The same could be achieved with TABLE elements, but I just didn't feel like making them.</code>
    </div>

    ypSlideOutMenusC.js - /ssi_test/menu/

    Code:
    /*****************************************************
    * ypSlideOutMenu
    * 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... 
    *
    * Revised:
    * - 08/29/2002 : added .hideAll()
    *
    * --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
    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
    this.gRef = "ypSlideOutMenu_"+id
    eval(this.gRef+"=this")
    ypSlideOutMenu.Registry[id] = this
    var d = document
    var strCSS = '<style type="text/css">';
    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 += '}'
    strCSS += '</style>'
    d.write(strCSS)
    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)
    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
    for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
    if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
    if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
    }
    ypSlideOutMenu.hideMenu = function(id)
    {
    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)
    obj.hideTimer = 0
    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])
    }
    ypSlideOutMenu.prototype.onactivate = function() { }
    ypSlideOutMenu.prototype.ondeactivate = function() { }

  12. #12
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A few errors - no <body> tag, style sheet outside the <head>, but works fine
    when loaded. Again...you're loading a different JavaScript file in the earlier example you posted -
    the one at http://www.gifford-consulting.co.uk/...st/index.shtml.
    The .js file for that (defective) one is located at http://www.gifford-consulting.co.uk/...deOutMenusC.js -
    no '/menu' directory - and your server won't serve it, at least not for me.
    Check all file paths carefully.
    ::: certified wild guess :::

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "you're loading a different JavaScript file in the earlier example you posted "

    ummm ... no i'm not! hover over the links and check!


    what i don't understand it that everything looks fine when i access it direct, but not through SSI

  14. #14
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it be that the links in the included files to other included files are relative to the SSI? They must be relative to the parent document, if you know what I mean... Just a thought.


  15. #15
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, now i've everything in the same folder
    http://www.gifford-consulting.co.uk/...st/index.shtml
    and it works perfectly

    but as soon as i go down/up a level with the folders:
    http://www.gifford-consulting.co.uk/...er/index.shtml
    it mucks up again!

  16. #16
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried tried changing between <!--#include file="filename" --> and <!--#include virtual="/ssi_test/menu.html" --> but that doesnt make a difference

  17. #17
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... can you give us an idea of the folders you have and where files reside within them? I'm suspecting even more now that it's simply that your paths to documents are not working... Supply something like this:

    Code:
    /mypage.html
    /ssi_test/ssi1.ssi
    etc.
    For all affected files.

  18. #18
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /ssi_test/index.shtml
    http://www.gifford-consulting.co.uk/...st/index.shtml

    Code:
     
    <html>
    <head>
    <title>SSI test</title>
    </head>
     
    <!--#include virtual="/ssi_test/menu.html" -->
     
    </body>
    </html>

    ssi_test/menu.html
    http://www.gifford-consulting.co.uk/ssi_test/menu.html

    Code:
    <script language="javascript" src="ypSlideOutMenusC.js"></script>
    <script language="javascript">
    var menus = [
    new ypSlideOutMenu("menu1", "down", 5, 80, 170, 59),
    new ypSlideOutMenu("menu2", "down", 57, 80, 170, 40),
    new ypSlideOutMenu("menu3", "down", 147, 80, 170, 97),
    new ypSlideOutMenu("menu4", "down", 237, 80, 170, 21)
    ]
    for (var i = 0; i < menus.length; i++) {
    menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
    menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
    }
    </script>
    <style type="text/css">
    /* just basic text formatting - nothing special */
     
    body {
    font-size:11px;
    font-family:arial, sans-serif;
    color:#444444;
    }
    #menubar {
    position:absolute;
    width:450px;
    left:5px;
    top:55px;
    background-color:#F9F1C8;
    border:1px solid #AD5800;
    padding:2px;
    }
    #menubar a {
    color:#AD5800;
    letter-spacing:1px;
    border:1px solid #F9F1C8;
    padding-left:5px;
    padding-right:5px;
    text-decoration:none;
    }
    #menubar a.active {
    border-bottom-color:#CCC599;
    border-right-color:#CCC599;
    border-left-color:#FFFFFF;
    border-top-color:#FFFFFF;
    }
    .menu .options {
    margin-right:1px;
    margin-bottom:1px;
    border:1px solid #AD5800;
    background-color:#F9F1C8;
    }
    .menu a {
    color:#AD5800;
    display:block;
    padding:2px 10px;
    text-decoration:none;
    background-color:transparent;
    }
    .menu a:hover {
    background-color:#AD5800;
    color:#FAF7E1;
    }
    #about {
    position:absolute;
    left:5px;
    top:200px;
    }
    </style>
    <div id="menubar">
    <a id="act0" href="/ideas/" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')">ideas</a>&nbsp;
    <a id="act1" href="/experiments/" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')" title="onmouseover=ypSlideOutMenu.showMenu('menu2'); onmouseout=ypSlideOutMenu.hideMenu('menu2')">experiments</a>&nbsp;
    <a id="act2" href="/components/" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')" title="onmouseover=ypSlideOutMenu.showMenu('menu3'); onmouseout=ypSlideOutMenu.hideMenu('menu3')">components</a>&nbsp;
    <a id="act3" href="/writings/" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')" title="onmouseover=ypSlideOutMenu.showMenu('menu4'); onmouseout=ypSlideOutMenu.hideMenu('menu4')">writings</a>
    </div>
     
    <div id="menu1Container">
    <div id="menu1Content" class="menu">
    <div class="options">
    <a href="/ideas/javascript_debugger/">javascript debugger</a>
    <a href="/ideas/onRollMouseWheel/">monitoring the mouse-wheel</a>
    <a href="/ideas/resizeable_flash_textfield/">resizable text fields in flash</a>
    </div>
    </div>
    </div>
    <div id="menu2Container">
    <div id="menu2Content" class="menu">
    <div class="options">
    <a href="/experiments/email_wiretap/">email wiretap</a>
    <a href="/experiments/beatnik_piano/">beatnik piano</a>
    </div>
    </div>
    </div>
    <div id="menu3Container">
    <div id="menu3Content" class="menu">
    <div class="options">
    <a href="/components/ypXmlTree/">ypXmlTree</a>
    <a href="/components/ypRing/">ypRing</a>
    <a href="/components/ypBranch/">ypBranch</a>
    <a href="/components/ypSlideOutMenu/">ypSlideOutMenu</a>
    <a href="/components/ypSimpleScroll/">ypSimpleScroll</a>
    </div>
    </div>
    </div>
    <div id="menu4Container">
    <div id="menu4Content" class="menu">
    <div class="options">
    <a href="/writings/i_want_my_DOM/">i want my DOM, dammit</a>
    </div>
    </div>
    </div>
    <div id="about">
    <code>Note that this sample doesn't look good in older browsers (even ie5!) that don't support all of CSS. This has nothing to do with the component, I've just implemented some extra CSS here to make it look cool. The same could be achieved with TABLE elements, but I just didn't feel like making them.</code>
    </div>

    /ssi_test/ypSlideOutMenusC.js
    http://www.gifford-consulting.co.uk/ssi_test/ypSlideOutMenusC.js

    Code:
    /*****************************************************
    * ypSlideOutMenu
    * 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... 
    *
    * Revised:
    * - 08/29/2002 : added .hideAll()
    *
    * --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
    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
    this.gRef = "ypSlideOutMenu_"+id
    eval(this.gRef+"=this")
    ypSlideOutMenu.Registry[id] = this
    var d = document
    var strCSS = '<style type="text/css">';
    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 += '}'
    strCSS += '</style>'
    d.write(strCSS)
    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)
    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
    for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
    if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
    if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
    }
    ypSlideOutMenu.hideMenu = function(id)
    {
    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)
    obj.hideTimer = 0
    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])
    }
    ypSlideOutMenu.prototype.onactivate = function() { }
    ypSlideOutMenu.prototype.ondeactivate = function() { }

    /ssi_test/folder/index.shtml
    http://www.gifford-consulting.co.uk/...er/index.shtml

    Code:
     
    <html>
    <head>
    <title>SSI test</title>
    </head>
     
    <!--#include virtual="/ssi_test/menu.html" -->
     
    </body>
    </html>

  19. #19
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try taking out the beginning "/" in your include tag or try ./
    DoesItMatter
    - anyone seen my underwear?

  20. #20
    SitePoint Zealot
    Join Date
    Mar 2002
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried removing the "/" and also replacing with "./"

    no joy unfortunately

  21. #21
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •