Details

      Description

      When using the jboss.org tabzilla JavaScript on optaplanner.org (and soon drools.org and jbpm.org) we faced a number of issues to make it compatible with the stick menu at the top.

      1) The JS needs to be adjusted to add tabzillaHolder id to be compatible with the sticky menu.
      BEFORE (line 239):

          var body = document.getElementsByTagName('body')[0];
          body.insertBefore(Tabzilla.panel, body.firstChild);
      

      AFTER (line 239):

          var tabzillaHolder = document.getElementById('tabzillaHolder');
          if (tabzillaHolder == null) tabzillaHolder = document.getElementsByTagName('body')[0];
          tabzillaHolder.insertBefore(Tabzilla.panel, tabzillaHolder.firstChild);
      

      2) The fullWidth=true parameter doesn't work
      3) The tabzilla CSS dropup was overwritten with z-index=0 because it's default width (250px or 100px on small media) catches mouse click events not meant for it. Alternatively, reducing the width, broke the background image (= the tab) positioning.
      4) The tabzilla CSS dropup was overwritten with right=10px to save real-estate.
      5) Because our website has a sticky menu, the tabzilla remains visible and functional even if you scroll down the page.
      6) Uncollapsing the tabzilla on small media takes up too much space, breaking the website because it overlaps everything and cannot be closed... the tab content should be less (it has a lot of empty space)

      For more context, here's our website (with a sticky menu) using the adjusted JS script:
      http://www.optaplanner.org/
      Awestruct sources:
      https://github.com/droolsjbpm/optaplanner-website

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                ge0ffrey Geoffrey De Smet
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Date of First Comment: