Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Please help...Javascript Menu Problem...

    Hello,

    I'm a javascript newbie and I found a script that works beautiful and is exactly what I want, except I need a vertical nav rather than a horizontal one. I've tried to modify my nav in the html a few different ways, but it didn't work.

    Basically, I want the nav to be vertical and have the line slide in from the left. What I've got so far is here http://www.shotsbylaine.com/. The only thing wrong is the underline doesn't slide in from the left like I want and the line under 'order prints' shouldn't be there.

    Here's my code (being a newbie with JS, I'm not sure which part would need to be modified, but it's not a lot of code so I'll post everything).

    I got the script from http://javascript.internet.com/navig...bs.html#source

    CSS -

    Code:
    <!-- Paste this code into the CSS section of your HTML document  -->
    
    #miniflex {
      width: 100%;
      float: left;
      font-size: small; /* could be specified at a higher level */
      margin: 0;
      padding: 0 10px 0 10px;
      border-bottom: 1px solid #696;
      position:relative;
      z-index:2;
    }
    
    #miniflex li {
      float: left;
      margin: 0;
      padding: 0;
      display: inline;
      list-style: none;
      position:relative;
    }
    
    #miniflex a:link, #miniflex a:visited {
      float: left;
      font-size: 85%;
      line-height: 20px;
      font-weight: bold;
      margin: 0 10px 0 10px;
      text-decoration: none;
      color: #9c9;
    }
    
    #miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
      border-bottom: 4px solid #696;
      padding-bottom: 2px;
      color: #696;
    }
      
    #animated-tab {
      position: absolute;
      z-index: 1;
      font-size: 85%;
      line-height: 20px;
      padding-bottom: 2px;
      border-bottom: 4px solid #696;
    }
    Javascript -

    Code:
    <!-- Paste this code into an external JavaScript file named: miniTab.js  -->
    
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Brian McAllister :: http://www.frequency-decoder.com/ */
    
    /*
    Animated miniTabs by frequency decoder
    Further information on this script can be located
    on the authors Web site http://www.frequency-decoder.com/
    
    Based on an idea by Rob L Glazebrook
    (http://www.rootarcana.com/test/smartmini/)
    which was derived from the original idea of Stephen Clark
    (http://www.sgclark.com/sandbox/minislide/)
    
    Changes
    =======
    05/03/06 : Creation
    08/03/06 : Added the cleanUp method to stop IE memory leaks.
    
    This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license
    
    You are free:
      1. to copy, distribute, display, and perform the work.
      2. to make derivative works.
    
    Under the following conditions:
    
      1. **Attribution*: You must attribute the work in the manner specified
         by the author or licensor.
      2. Noncommercial*: You may not use this work for commercial purposes.*
      3. Share Alike*: If you alter, transform, or build upon this work,
         you may distribute the resulting work only under a license identical to this one.
    */
    
    
    var miniTab = {
      currentTab:     0,
      activeTab:      0,
      destX:          0,
      destW:          0,
      t:              0,
      b:              0,
      c:              0,
      d:              20,
      animInterval:   null,
      sliderObj:      null,
      aHeight:        0,
      
      init: function() {
        if(!document.getElementById || !document.getElementById("miniflex")) return;
        
        var ul          = document.getElementById("miniflex");
        var liArr       = ul.getElementsByTagName("li");
        var aArr        = ul.getElementsByTagName("a");
        
        for(var i = 0, li; li = liArr[i]; i++) {
          liArr[i].onmouseover = aArr[i].onfocus = function(e) {
            var pos = 0;
            var elem = this.nodeName == "LI" ? this : this.parentNode;
            while(elem.previousSibling) {
              elem = elem.previousSibling;
              if(elem.tagName && elem.tagName == "LI") pos++;
            }
            miniTab.initSlide(pos);
          }
        }
    
        ul.onmouseout = function(e) {
          miniTab.initSlide(miniTab.currentTab);
        };
        
        for(var i = 0; i < aArr.length; i++) {
          if(document.location.href.indexOf(aArr[i].href)>=0) {
            miniTab.activeTab = miniTab.currentTab = i;
          }
          aArr[i].style.borderBottom  = "0px";
          aArr[i].style.paddingBottom = "6px";
        }
    
        miniTab.slideObj                = ul.parentNode.appendChild(document.createElement("div"));
        miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
        miniTab.slideObj.id             = "animated-tab";
        miniTab.slideObj.style.top      = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
        miniTab.slideObj.style.left     = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";
        miniTab.slideObj.style.width    = aArr[miniTab.activeTab].offsetWidth + "px";
        miniTab.aHeight                 = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;
        
        miniTab.initSlide(miniTab.activeTab, true);
        
        var intervalMethod = function() { miniTab.slideIt(); }
        miniTab.animInterval = setInterval(intervalMethod,10);
      },
    
      cleanUp: function() {
        clearInterval(miniTab.animInterval);
        miniTab.animInterval = null;
      },
      
      initSlide: function(pos, force) {
        if(!force && pos == miniTab.activeTab) return;
        miniTab.activeTab = pos;
        miniTab.initAnim();
      },
      
      initAnim: function() {
        var ul          = document.getElementById("miniflex");
        var liArr       = ul.getElementsByTagName("li");
        var aArr        = ul.getElementsByTagName("a");
        miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);
        miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);
        miniTab.t = 0;
        miniTab.b = miniTab.slideObj.offsetLeft;
        miniTab.c = miniTab.destX - miniTab.b;
        miniTab.bW = miniTab.slideObj.offsetWidth;
        miniTab.cW = miniTab.destW - miniTab.bW;
        miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
      },
      
      slideIt:function() {
        var ul          = document.getElementById("miniflex");
        var liArr       = ul.getElementsByTagName("li");
        var aArr        = ul.getElementsByTagName("a");
        
        // Has the browser text size changed?
        if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {
          miniTab.initAnim();
          miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop
        };
        
        if(miniTab.t++ < miniTab.d) {
          var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
          var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
          miniTab.slideObj.style.left = parseInt(x) + "px";
          miniTab.slideObj.style.width = parseInt(w) + "px";
        } else {
          miniTab.slideObj.style.left = miniTab.destX + "px";
          miniTab.slideObj.style.width = miniTab.destW +"px";
        }
      },
    
      animate: function(t,b,c,d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
      }
    }
    
    window.onload = miniTab.init;
    window.onunload = miniTab.cleanUp;
    HTML -

    Code:
    <!-- Paste this code into the HEAD section of your HTML document.
         You may need to change the path of the file.  -->
    
    <script type="text/javascript" src="miniTab.js"></script>
    
    
    
    <!-- Paste this code into the BODY section of your HTML document  -->
    
    <h2>Animated Mini Tabs</h2>
    <ul id="miniflex">
      <li><a href="/about/" title="">About</a></li>
      <li><a href="/archives/" title="">Archives</a></li>
      <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li>
      <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li>
      <li><a href="/contact/" title="">Contact</a></li>
    </ul>
    <p><div align="center">
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </div><p>
    Any help anyone could give me would be brilliant. Thanks!

    Laine

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    What "order prints"???

    Anyway, it would be a lot easier to write it from scratch than to try to adapt that code that was ONLY designed for horizontal menu.


  •  

    Posting Permissions

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