Add floating menu to which page/template?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • tijmen_4real
    Member
    • Oct 2007
    • 56
    • 3.6.x

    Add floating menu to which page/template?

    Hi,

    I would like to add a floating menu to my board, instead of the default navbar. So i made a 100x150 Flash menu, and got the code to make it work as a floating menu.

    But, to which template can this code be added to work on each page as a menu?
    Greetz,

    tijmen_4real
  • Jake Bunce
    Senior Member
    • Dec 2000
    • 46598
    • 3.6.x

    #2
    The appropriate code location depends on the implementation. Did the author specify where on a HTML page the code should be placed?

    Comment

    • tijmen_4real
      Member
      • Oct 2007
      • 56
      • 3.6.x

      #3
      The code can be added anywhere in the body. I just want it to be displayed on each page. Which template is best to use for this?

      Comment

      • Jake Bunce
        Senior Member
        • Dec 2000
        • 46598
        • 3.6.x

        #4
        The header is inside of the body and is used on every forum page:

        Admin CP -> Styles & Templates -> Style Manager -> Common Templates (in the menu) -> header

        Comment

        • tijmen_4real
          Member
          • Oct 2007
          • 56
          • 3.6.x

          #5
          So i added this code to the (common) header template:

          PHP Code:
          <!-- FLOATING MENU -->
          <
          div id="floatdiv" style="
              position:absolute;
              width:100px;height:150px;"
          >
          <
          script language="javascript">
              if (
          AC_FL_RunContent == 0) {
                  
          alert("Deze pagina vereist AC_RunActiveContent.js.");
              } else {
                  
          AC_FL_RunContent(
                      
          'codebase''http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
                      
          'width''100',
                      
          'height''150',
                      
          'src''http://www.deorvanheemskerk.nl/floatingmenu/menu.swf',
                      
          'quality''high',
                      
          'pluginspage''http://www.macromedia.com/go/getflashplayer',
                      
          'align''middle',
                      
          'play''true',
                      
          'loop''true',
                      
          'scale''showall',
                      
          'wmode''transparent',
                      
          'devicefont''false',
                      
          'id''menu',
                      
          'bgcolor''#ffffff',
                      
          'name''menu',
                      
          'menu''false',
                      
          'allowFullScreen''false',
                      
          'allowScriptAccess','sameDomain',
                      
          'movie''menu',
                      
          'salign'''
                      
          ); //end AC code
              
          }
          </
          script>
          <
          noscript>
              <
          object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100" height="150" id="menu" align="middle">
              <
          param name="allowScriptAccess" value="sameDomain" />
              <
          param name="allowFullScreen" value="false" />
              <
          param name="wmode" value="transparent" />
              <
          param name="movie" value="menu.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />    <embed src="http://www.deorvanheemskerk.nl/floatingmenu/menu.swf" quality="high" width="100" height="150" name="menu" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
              </
          object>
          </
          noscript>
          </
          div>

          <
          script type="text/javascript"><!--
          /* Script by: www.jtricks.com
           * Version: 20071017
           * Latest version:
           * www.jtricks.com/javascript/navigation/floating.html
           */
          var floatingMenuId 'floatdiv';
          var 
          floatingMenu =
          {
              
          targetX0,
              
          targetY: -450,

              
          hasInnertypeof(window.innerWidth) == 'number',
              
          hasElementtypeof(document.documentElement) == 'object'
                  
          && typeof(document.documentElement.clientWidth) == 'number',

              
          menu:
                  
          document.getElementById
                  
          document.getElementById(floatingMenuId)
                  : 
          document.all
                    
          document.all[floatingMenuId]
                    : 
          document.layers[floatingMenuId]
          };

          floatingMenu.move = function ()
          {
              
          floatingMenu.menu.style.left floatingMenu.nextX 'px';
              
          floatingMenu.menu.style.top floatingMenu.nextY 'px';
          }

          floatingMenu.computeShifts = function ()
          {
              var 
          de document.documentElement;

              
          floatingMenu.shiftX =  
                  
          floatingMenu.hasInner  
                  
          pageXOffset  
                  
          floatingMenu.hasElement  
                    
          de.scrollLeft  
                    
          document.body.scrollLeft;  
              if (
          floatingMenu.targetX 0)
              {
                  
          floatingMenu.shiftX +=
                      
          floatingMenu.hasElement
                      
          de.clientWidth
                      
          document.body.clientWidth;
              }

              
          floatingMenu.shiftY 
                  
          floatingMenu.hasInner
                  
          pageYOffset
                  
          floatingMenu.hasElement
                    
          de.scrollTop
                    
          document.body.scrollTop;
              if (
          floatingMenu.targetY 0)
              {
                  if (
          floatingMenu.hasElement && floatingMenu.hasInner)
                  {
                      
          // Handle Opera 8 problems
                      
          floatingMenu.shiftY +=
                          
          de.clientHeight window.innerHeight
                          
          window.innerHeight
                          
          de.clientHeight
                  
          }
                  else
                  {
                      
          floatingMenu.shiftY +=
                          
          floatingMenu.hasElement
                          
          de.clientHeight
                          
          document.body.clientHeight;
                  }
              }
          }

          floatingMenu.calculateCornerX = function()
          {
              if (
          floatingMenu.targetX != 'center')
                  return 
          floatingMenu.shiftX floatingMenu.targetX;

              var 
          width parseInt(floatingMenu.menu.offsetWidth);

              var 
          cornerX =
                  
          floatingMenu.hasElement
                  
          ? (floatingMenu.hasInner
                     
          pageXOffset
                     
          document.documentElement.scrollLeft) + 
                    (
          document.documentElement.clientWidth width)/2
                  
          document.body.scrollLeft 
                    (
          document.body.clientWidth width)/2;
              return 
          cornerX;
          };

          floatingMenu.calculateCornerY = function()
          {
              if (
          floatingMenu.targetY != 'center')
                  return 
          floatingMenu.shiftY floatingMenu.targetY;

              var 
          height parseInt(floatingMenu.menu.offsetHeight);

              
          // Handle Opera 8 problems
              
          var clientHeight 
                  
          floatingMenu.hasElement && floatingMenu.hasInner
                  
          && document.documentElement.clientHeight 
                      
          window.innerHeight
                  
          window.innerHeight
                  
          document.documentElement.clientHeight

              
          var cornerY =
                  
          floatingMenu.hasElement
                  
          ? (floatingMenu.hasInner  
                     
          pageYOffset
                     
          document.documentElement.scrollTop) + 
                    (
          clientHeight height)/2
                  
          document.body.scrollTop 
                    (
          document.body.clientHeight height)/2;
              return 
          cornerY;
          };

          floatingMenu.doFloat = function()
          {
              var 
          stepXstepY;

              
          floatingMenu.computeShifts();

              var 
          cornerX floatingMenu.calculateCornerX();

              var 
          stepX = (cornerX floatingMenu.nextX) * .07;
              if (
          Math.abs(stepX) < .5)
              {
                  
          stepX cornerX floatingMenu.nextX;
              }

              var 
          cornerY floatingMenu.calculateCornerY();

              var 
          stepY = (cornerY floatingMenu.nextY) * .07;
              if (
          Math.abs(stepY) < .5)
              {
                  
          stepY cornerY floatingMenu.nextY;
              }

              if (
          Math.abs(stepX) > ||
                  
          Math.abs(stepY) > 0)
              {
                  
          floatingMenu.nextX += stepX;
                  
          floatingMenu.nextY += stepY;
                  
          floatingMenu.move();
              }

              
          setTimeout('floatingMenu.doFloat()'20);
          };

          // addEvent designed by Aaron Moore
          floatingMenu.addEvent = function(elementlistenerhandler)
          {
              if(
          typeof element[listener] != 'function' || 
                 
          typeof element[listener '_num'] == 'undefined')
              {
                  
          element[listener '_num'] = 0;
                  if (
          typeof element[listener] == 'function')
                  {
                      
          element[listener 0] = element[listener];
                      
          element[listener '_num']++;
                  }
                  
          element[listener] = function(e)
                  {
                      var 
          true;
                      
          = (e) ? window.event;
                      for(var 
          element[listener '_num'] -1>= 0i--)
                      {
                          if(
          element[listener i](e) == false)
                              
          false;
                      }
                      return 
          r;
                  }
              }

              
          //if handler is not already stored, assign it
              
          for(var 0element[listener '_num']; i++)
                  if(
          element[listener i] == handler)
                      return;
              
          element[listener element[listener '_num']] = handler;
              
          element[listener '_num']++;
          };

          floatingMenu.init = function()
          {
              
          floatingMenu.initSecondary();
              
          floatingMenu.doFloat();
          };

          // Some browsers init scrollbars only after
          // full document load.
          floatingMenu.initSecondary = function()
          {
              
          floatingMenu.computeShifts();
              
          floatingMenu.nextX floatingMenu.calculateCornerX();
              
          floatingMenu.nextY floatingMenu.calculateCornerY();
              
          floatingMenu.move();
          }

          if (
          document.layers)
              
          floatingMenu.addEvent(window'onload'floatingMenu.init);
          else
          {
              
          floatingMenu.init();
              
          floatingMenu.addEvent(window'onload',
                  
          floatingMenu.initSecondary);
          }

          //--></script>
          <!-- /FLOATING MENU --> 
          When i use the code in a single HTML file, with all the files in the same folder, i don't have any problems. But when i add this code to the template, i don't see any menu...

          This is how the template looks with the code of the floating menu:

          PHP Code:
          <!-- logo -->
          <
          a name="top"></a>
          <
          table border="0" width="$stylevar[outertablewidth]cellpadding="0" cellspacing="0" align="center">
          <
          tr>
              <!--<
          td align="$stylevar[left]">-->
          <
          td align="center" style="padding:0;" style="margin:0;><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img style="margin-top:-20px;" src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
              <!--<td align="
          $stylevar[right]" id="header_right_cell">-->
                  <if condition="
          $ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
              </td>
          </tr>
          </table>
          <!-- /logo -->

          <!-- FLOATING MENU -->
          <div id="
          floatdiv" style="
              
          position:absolute;
              
          width:100px;height:150px;">
          <script language="
          javascript">
              if (AC_FL_RunContent == 0) {
                  alert("
          Deze pagina vereist AC_RunActiveContent.js.");
              } else {
                  AC_FL_RunContent(
                      'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
                      'width', '100',
                      'height', '150',
                      'src', 'http://www.deorvanheemskerk.nl/floatingmenu/menu.swf',
                      'quality', 'high',
                      'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                      'align', 'middle',
                      'play', 'true',
                      'loop', 'true',
                      'scale', 'showall',
                      'wmode', 'transparent',
                      'devicefont', 'false',
                      'id', 'menu',
                      'bgcolor', '#ffffff',
                      'name', 'menu',
                      'menu', 'false',
                      'allowFullScreen', 'false',
                      'allowScriptAccess','sameDomain',
                      'movie', 'menu',
                      'salign', ''
                      ); //end AC code
              }
          </script>
          <noscript>
              <object classid="
          clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100" height="150" id="menu" align="middle">
              
          <param name="allowScriptAccess" value="sameDomain" />
              <
          param name="allowFullScreen" value="false" />
              <
          param name="wmode" value="transparent" />
              <
          param name="movie" value="menu.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />    <embed src="http://www.deorvanheemskerk.nl/floatingmenu/menu.swf" quality="high" width="100" height="150" name="menu" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
              </
          object>
          </
          noscript>
          </
          div>

          <
          script type="text/javascript"><!--
          /* Script by: www.jtricks.com
           * Version: 20071017
           * Latest version:
           * www.jtricks.com/javascript/navigation/floating.html
           */
          var floatingMenuId 'floatdiv';
          var 
          floatingMenu =
          {
              
          targetX0,
              
          targetY: -450,

              
          hasInnertypeof(window.innerWidth) == 'number',
              
          hasElementtypeof(document.documentElement) == 'object'
                  
          && typeof(document.documentElement.clientWidth) == 'number',

              
          menu:
                  
          document.getElementById
                  
          document.getElementById(floatingMenuId)
                  : 
          document.all
                    
          document.all[floatingMenuId]
                    : 
          document.layers[floatingMenuId]
          };

          floatingMenu.move = function ()
          {
              
          floatingMenu.menu.style.left floatingMenu.nextX 'px';
              
          floatingMenu.menu.style.top floatingMenu.nextY 'px';
          }

          floatingMenu.computeShifts = function ()
          {
              var 
          de document.documentElement;

              
          floatingMenu.shiftX =  
                  
          floatingMenu.hasInner  
                  
          pageXOffset  
                  
          floatingMenu.hasElement  
                    
          de.scrollLeft  
                    
          document.body.scrollLeft;  
              if (
          floatingMenu.targetX 0)
              {
                  
          floatingMenu.shiftX +=
                      
          floatingMenu.hasElement
                      
          de.clientWidth
                      
          document.body.clientWidth;
              }

              
          floatingMenu.shiftY 
                  
          floatingMenu.hasInner
                  
          pageYOffset
                  
          floatingMenu.hasElement
                    
          de.scrollTop
                    
          document.body.scrollTop;
              if (
          floatingMenu.targetY 0)
              {
                  if (
          floatingMenu.hasElement && floatingMenu.hasInner)
                  {
                      
          // Handle Opera 8 problems
                      
          floatingMenu.shiftY +=
                          
          de.clientHeight window.innerHeight
                          
          window.innerHeight
                          
          de.clientHeight
                  
          }
                  else
                  {
                      
          floatingMenu.shiftY +=
                          
          floatingMenu.hasElement
                          
          de.clientHeight
                          
          document.body.clientHeight;
                  }
              }
          }

          floatingMenu.calculateCornerX = function()
          {
              if (
          floatingMenu.targetX != 'center')
                  return 
          floatingMenu.shiftX floatingMenu.targetX;

              var 
          width parseInt(floatingMenu.menu.offsetWidth);

              var 
          cornerX =
                  
          floatingMenu.hasElement
                  
          ? (floatingMenu.hasInner
                     
          pageXOffset
                     
          document.documentElement.scrollLeft) + 
                    (
          document.documentElement.clientWidth width)/2
                  
          document.body.scrollLeft 
                    (
          document.body.clientWidth width)/2;
              return 
          cornerX;
          };

          floatingMenu.calculateCornerY = function()
          {
              if (
          floatingMenu.targetY != 'center')
                  return 
          floatingMenu.shiftY floatingMenu.targetY;

              var 
          height parseInt(floatingMenu.menu.offsetHeight);

              
          // Handle Opera 8 problems
              
          var clientHeight 
                  
          floatingMenu.hasElement && floatingMenu.hasInner
                  
          && document.documentElement.clientHeight 
                      
          window.innerHeight
                  
          window.innerHeight
                  
          document.documentElement.clientHeight

              
          var cornerY =
                  
          floatingMenu.hasElement
                  
          ? (floatingMenu.hasInner  
                     
          pageYOffset
                     
          document.documentElement.scrollTop) + 
                    (
          clientHeight height)/2
                  
          document.body.scrollTop 
                    (
          document.body.clientHeight height)/2;
              return 
          cornerY;
          };

          floatingMenu.doFloat = function()
          {
              var 
          stepXstepY;

              
          floatingMenu.computeShifts();

              var 
          cornerX floatingMenu.calculateCornerX();

              var 
          stepX = (cornerX floatingMenu.nextX) * .07;
              if (
          Math.abs(stepX) < .5)
              {
                  
          stepX cornerX floatingMenu.nextX;
              }

              var 
          cornerY floatingMenu.calculateCornerY();

              var 
          stepY = (cornerY floatingMenu.nextY) * .07;
              if (
          Math.abs(stepY) < .5)
              {
                  
          stepY cornerY floatingMenu.nextY;
              }

              if (
          Math.abs(stepX) > ||
                  
          Math.abs(stepY) > 0)
              {
                  
          floatingMenu.nextX += stepX;
                  
          floatingMenu.nextY += stepY;
                  
          floatingMenu.move();
              }

              
          setTimeout('floatingMenu.doFloat()'20);
          };

          // addEvent designed by Aaron Moore
          floatingMenu.addEvent = function(elementlistenerhandler)
          {
              if(
          typeof element[listener] != 'function' || 
                 
          typeof element[listener '_num'] == 'undefined')
              {
                  
          element[listener '_num'] = 0;
                  if (
          typeof element[listener] == 'function')
                  {
                      
          element[listener 0] = element[listener];
                      
          element[listener '_num']++;
                  }
                  
          element[listener] = function(e)
                  {
                      var 
          true;
                      
          = (e) ? window.event;
                      for(var 
          element[listener '_num'] -1>= 0i--)
                      {
                          if(
          element[listener i](e) == false)
                              
          false;
                      }
                      return 
          r;
                  }
              }

              
          //if handler is not already stored, assign it
              
          for(var 0element[listener '_num']; i++)
                  if(
          element[listener i] == handler)
                      return;
              
          element[listener element[listener '_num']] = handler;
              
          element[listener '_num']++;
          };

          floatingMenu.init = function()
          {
              
          floatingMenu.initSecondary();
              
          floatingMenu.doFloat();
          };

          // Some browsers init scrollbars only after
          // full document load.
          floatingMenu.initSecondary = function()
          {
              
          floatingMenu.computeShifts();
              
          floatingMenu.nextX floatingMenu.calculateCornerX();
              
          floatingMenu.nextY floatingMenu.calculateCornerY();
              
          floatingMenu.move();
          }

          if (
          document.layers)
              
          floatingMenu.addEvent(window'onload'floatingMenu.init);
          else
          {
              
          floatingMenu.init();
              
          floatingMenu.addEvent(window'onload',
                  
          floatingMenu.initSecondary);
          }

          //--></script>
          <!-- /FLOATING MENU -->

          <!-- 
          content table -->
          $spacer_open

          $_phpinclude_output

          $ad_location
          [ad_header_end
          The menu is in the good place, but something's wrong.
          Can someone please help me out with this?
          Greetz,

          tijmen_4real
          Attached Files

          Comment

          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
          Working...