Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Does a script for a stretchable navigation exist on Dynamic Drive?

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Does a script for a stretchable navigation exist on Dynamic Drive?

    I was hoping to find a script for a particular sort of top navigational menu on this forum. I took a look and couldn't find one so I thought I'd post the question here. Basically, what I have in mind starts out with a few tabs sitting inside a larger wrapper like you see in the first picture. The silver is simply a background color for the <div> containing the six cities that are listed. (see first image below)

    Attachment 2660

    Basically, what I was hoping for, is a script that allows me to click on one of the cities (an onclick not onmouseover) and that tab expands to fill 100% of the remaining space in the wrapping parent <div> This will stay that way until you click on a second city and that tab expands. (see second image)

    Attachment 2661

    Hope that makes sense. Thanks in advance for pointing me in the right direction....
    Last edited by Snookerman; 05-19-2009 at 05:40 AM. Reason: added Resolved prefix

  2. #2
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    I can't find anything, but I would gladly make something. Would you like to use just <div>'s or <li>'s?
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  3. #3
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    I think either floating <div> tags or even a table would work if that's easier. Thank you in advance, I appreciate the assistance!

  4. #4
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    Edit: Fixed Error
    Okay it's all done. Here is an example: http://masterscriptmaker.co.cc/dy/stretch.html. To do this you use the following structure:
    HTML Code:
    <div class="s_menu">
      <ul>
        <li style="background-color: violet;"><a href=""><span>Baltimore</span></a></li>
        <li style="background-color: yellow;" class="s_menu_f"><a href=""><span>Newark</span></a></li>
        <li style="background-color: blue;"><a href=""><span>Memphis</span></a></li>
        <li style="background-color: orange;"><a href=""><span>San Antonio</span></a></li>
        <li style="background-color: purple;"><a href=""><span>Miami</span></a></li>
        <li style="background-color: gold;"><a href=""><span>Bronx</span></a></li>
      </ul>
    </div>
    what ever <li> you want expanded add class="s_menu_f", as you can see it is in the second <li>. If you don't add it to anything, it defaults to the first.
    To style it correctly you would add this css:
    Code:
    body {
      padding: 0;
      margin: 0;
    }
    .s_menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .s_menu li {
      display: inline;
      float: left;
    }
    .s_menu a {
      color: white;
      text-decoration: none;
      font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    }
    .s_menu a span {
      display: block;
      padding: 5px 30px;
      cursor: pointer;
    }
    And now for the script, you would add this before the </body> tag:
    Code:
    <script type="text/javascript">
    /**Made By Master_Script_Maker**/
    var s_menu={
      by:[],
      init:function() {
        var t=this.get();
        var f='', t2=[];
        for(var i=0;i<t.length;i++) {
          t2=t[i].getElementsByTagName("li");
          for(var n=0;n<t2.length;++n) {
            if(t2[n].className=="s_menu_f") {
              f=n;
            }
            t2[n].onclick=(function(i, n) {
              return function() {
                s_menu.expand(i, n);
                return false;
              };
            })(i, n);
          }
          this.menus.push([t[i], t2]);
          if(!f) {
            f=t2[0];
            f.className="s_menu_f";
            f=0;
          }
          setTimeout((function(t, i, f) {return function() {t.expand(i, f);};})(this, i, f), 200);
        }
      },
      menus:[],
      get:function() {
        var t=document.body.getElementsByTagName("div");
        var a=[];
        for(var i=0;i<t.length;i++) {
          if(t[i].className=="s_menu") {
            a.push(t[i]);
          }
        }
        return a;
      },
      expand:function(n, m) {
        var f=this.menus[n][1][m];
        var tem=f.parentNode.getElementsByTagName("li");
        for(var i=0;i<tem.length;i++) {
          tem[i].style.width='';
        }
        if(!this.by[n]) {
          this.by[n]=f.offsetParent.clientWidth-tem[tem.length-1].offsetLeft-tem[tem.length-1].clientWidth;
        }
        f.style.width=f.childNodes[0].childNodes[0].offsetWidth+this.by[n]+"px";
      }
    };
    function check() {
      var div=document.createElement("div");
      document.body.appendChild(div);
      if(typeof console!="object") {
        log=(function(d) {
          return function() {
            var temp=document.createTextNode(arguments.join(" "));
            d.appendChild(temp);
             d.appendChild(document.createElement("br"));
          }
        })(div);
      } else {
        log=console.log;
      }
    }
    Object.prototype.join=function (a) {
      var t="";
      for(var i=0;i<this.length;i++) {
        t+=this[i]+a;
      }
      return t;
    };
    check();
    s_menu.init();  
    </script>
    Feel free to edit anything to better suit you; also, I'll be glad to answer any questions you have about it.
    Last edited by Master_script_maker; 05-11-2009 at 08:02 PM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  5. The Following User Says Thank You to Master_script_maker For This Useful Post:

    Shammus (05-06-2009)

  6. #5
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Hello,

    Sorry for the delay in my response, I've been out of town for a couple days. I appreciate the effort and time you put into helping me out with this. I'll take a look at the script a little closer and will certainly let you know, either way, the outcome or if I have any questions. Thank you again and much appreciated!

    Brian

  7. #6
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    You're welcome! If it doesn't suit your needs, I would be glad to change it.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  8. #7
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Thank you again for taking the time to put this together for me. It looks great in Firefox 2 and 3, however it's actually not working in IE 6 or 7. This holds true for the script hosted on your website at the URL above as well. Is there anything that I'm missing?

    Thanks again!
    Brian

  9. #8
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Friendly bump hoping "Master_script_maker" sees it....

    Thanks again

  10. #9
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    Okay, it's all fixed!
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  11. The Following User Says Thank You to Master_script_maker For This Useful Post:

    Shammus (05-14-2009)

  12. #10
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Thanks again for the assistance! I noticed a few quirks about the script, a couple things I already took care of -

    1. Removing the following IF statement allows you to have no tab extended when the page loads -

    if(!f) {
    f=t2[0];
    f.className="s_menu_f";
    f=0;
    }
    setTimeout((function(t, i, f) {return function() {t.expand(i, f);};})(this, i, f), 200);

    2. There was a tiny quirk in IE 6 where additional padding was created underneath the tabs after one had been clicked. However, adding a "clear:both;" tag after all the <li> tags in the html (since they're floating anyway) fixed this issue....

    The two things I haven't been able to fix just yet -

    1. In Firefox, the script as a whole gets very testy if you set it in a parent <div> that has a set width. Unfortunately though, it will be necessary to set a width somehow when this is used. If you place the script as is on a site that already has containing <div> tags set up, the tabs will appear normally at first, but anytime you click on one of them, it will knock the remaining tabs to a second line.

    2. In IE 6, if you click the tab on the right to extend it, and then click it a second time, that far right tab falls to a second line. Setting heights and widths for the tabs don't seem to have any effect on this either. This can be seen in IE 6 on your site at the URL above too.

    Thanks so much for the assistance so far...any thoughts on the final two quirks?

    PS...if it's easier to send you an email, let me know and I can continue dialogue with you privately.

    Regards,
    Brian

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
  •