Moving division

chiragkhunti · #1 (**permalink**) 03-19-09, 04:24 AM

Hello friends,

Need ur quick help here..

i m developing a consultancy website, in which i m having list of services. there are 12 services, all 12 services having different static htm pages for it's detail. and i have put list of all service to the left side of page to navigate through any service.

till here it is working fine. but now i want to move that left side list of services along with page scrolling. i.e. if the page scrolls down then the service list should also move downwards so that the navigation becomes very easy....

does anyone having any idea abt this...... i know it can be done but how that is big question?

UnrealEd · #2 (**permalink**) 03-19-09, 04:40 AM

Topic moved to the CSS forum.

Have you tried setting the "position" to "static" ?

chiragkhunti · #3 (**permalink**) 03-19-09, 04:54 AM

yes, i tried it but not working like i want.... it is just sticking to one place in static position. when i scroll down it is not coming down.....

job0107 · #4 (**permalink**) 03-19-09, 05:37 AM

You could try something like "Fixed & Sticky Menu".
http://www.jtricks.com/javascript/na...ixed_menu.html

chiragkhunti · #5 (**permalink**) 03-19-09, 06:28 AM

i have done all things from ur given reference link but still not working. will the given example work in html page?

job0107 · #6 (**permalink**) 03-19-09, 12:47 PM

Look, here is a very simple example using the "Sticky Menu".
I have modified it slightly so the bulk of the Javascript will be in the HEAD element.

The "Sticky Menu" div has the id "menu_container".
Put your menu inside that div.

The div with the id "menu_spacer" and the div with the class "menu_container" are used to reserve space for the "Sticky Menu".

There is more documentation in the code.

Javascript Code:

<html>
<head>
<script>
var fixedMenuId;
var fixedMenu;
function stickit(obj)
{
 fixedMenuId = obj;
 fixedMenu =
   {
       hasInner: typeof(window.innerWidth) == 'number',
       hasElement: document.documentElement != null
          && document.documentElement.clientWidth,
 
       menu: document.getElementById
           ? document.getElementById(fixedMenuId)
           : document.all
             ? document.all[fixedMenuId]
             : document.layers[fixedMenuId]
   };
   stickit_1();
   }
  function stickit_1()
  {
    /* Script by: [url]www.jtricks.com[/url]
     * Version: 20071127
     * Latest version:
     * [url]www.jtricks.com/javascript/navigation/fixed_menu.html[/url]
     */
 
 
 
 
   fixedMenu.computeShifts = function()
   {
       fixedMenu.shiftX = fixedMenu.hasInner
           ? pageXOffset
           : fixedMenu.hasElement
             ? document.documentElement.scrollLeft
             : document.body.scrollLeft;
       if (fixedMenu.targetLeft > 0)
           fixedMenu.shiftX += fixedMenu.targetLeft;
       else
       {
           fixedMenu.shiftX +=
               (fixedMenu.hasElement
                 ? document.documentElement.clientWidth
                 : fixedMenu.hasInner
                   ? window.innerWidth - 20
                   : document.body.clientWidth)
               - fixedMenu.targetRight
               - fixedMenu.menu.offsetWidth;
       }
 
       fixedMenu.shiftY = fixedMenu.hasInner
           ? pageYOffset
           : fixedMenu.hasElement
             ? document.documentElement.scrollTop
             : document.body.scrollTop;
       if (fixedMenu.targetTop > 0)
           fixedMenu.shiftY += fixedMenu.targetTop;
       else
       {
           fixedMenu.shiftY +=
               (fixedMenu.hasElement
               ? document.documentElement.clientHeight
               : fixedMenu.hasInner
                 ? window.innerHeight - 20
                 : document.body.clientHeight)
               - fixedMenu.targetBottom
               - fixedMenu.menu.offsetHeight;
       }
   };
 
   fixedMenu.moveMenu = function()
   {
       fixedMenu.computeShifts();
 
       if (fixedMenu.currentX != fixedMenu.shiftX
           || fixedMenu.currentY != fixedMenu.shiftY)
       {
           fixedMenu.currentX = fixedMenu.shiftX;
           fixedMenu.currentY = fixedMenu.shiftY;
 
           if (document.layers)
           {
               fixedMenu.menu.left = fixedMenu.currentX;
               fixedMenu.menu.top = fixedMenu.currentY;
           }
           else
           {
               fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
               fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
           }
       }
 
       fixedMenu.menu.style.right = '';
       fixedMenu.menu.style.bottom = '';
   };
 
   fixedMenu.floatMenu = function()
   {
       fixedMenu.moveMenu();
       setTimeout('fixedMenu.floatMenu()', 20);
   };
 
   // addEvent designed by Aaron Moore
   fixedMenu.addEvent = function(element, listener, handler)
   {
       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 r = true;
              e = (e) ? e : window.event;
              for(var i = 0; i < element[listener + '_num']; i++)
                  if(element[listener + i](e) === false)
                      r = false;
              return r;
          }
      }
 
      //if handler is not already stored, assign it
      for(var i = 0; i < element[listener + '_num']; i++)
          if(element[listener + i] == handler)
              return;
      element[listener + element[listener + '_num']] = handler;
      element[listener + '_num']++;
  };
 
  fixedMenu.supportsFixed = function()
  {
      var testDiv = document.createElement("div");
      testDiv.id = "testingPositionFixed";
      testDiv.style.position = "fixed";
      testDiv.style.top = "0px";
      testDiv.style.right = "0px";
      document.body.appendChild(testDiv);
      var offset = 1;
      if (typeof testDiv.offsetTop == "number"
          && testDiv.offsetTop != null
          && testDiv.offsetTop != "undefined")
      {
          offset = parseInt(testDiv.offsetTop);
      }
      if (offset == 0)
      {
          return true;
      }
 
      return false;
  };
 
  fixedMenu.init = function()
  {
      if (fixedMenu.supportsFixed())
          fixedMenu.menu.style.position = "fixed";
      else
      {
          var ob =
              document.layers
              ? fixedMenu.menu
              : fixedMenu.menu.style;
 
          fixedMenu.targetLeft = parseInt(ob.left);
          fixedMenu.targetTop = parseInt(ob.top);
          fixedMenu.targetRight = parseInt(ob.right);
          fixedMenu.targetBottom = parseInt(ob.bottom);
 
          if (document.layers)
          {
              menu.left = 0;
              menu.top = 0;
          }
          fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
          fixedMenu.floatMenu();
      }
  };
  fixedMenu.addEvent(window, 'onload', fixedMenu.init);
  }
</script>
<style>
#menu_spacer
{
 height:500px;
 float:left;
 }
#menu_container
{
 position:absolute;
 width:200px;
 height:50px;
 padding:16px;
 background:#FFFFFF;
 border:2px solid #2266AA;
 }
.menu_container
{
 width:200px;
 padding:16px;
 border:2px solid #fff;
 }
#content_container
{
 float:left;
 padding:10px;
 }
</style>
</head>
<body>
 
<!-- This div used to reserve space for menu. -->
<div id="menu_spacer">
 
 <!-- This div defines the width of the reserved space. It must match the CSS of the menu container. -->
 <div class="menu_container"></div>
 
 <!-- This div holds the menu. -->
 <div id="menu_container" style="left:10px;top:10px;">
  This is a (Javascript/CSS) Fixed menu.
 </div>
 <script type="text/javascript">
 stickit('menu_container');
 </script>
</div>
  
<!-- This div holds the main content. -->
<div id="content_container">
 Line 1
 <br />Line 2
 <br />Line 3
 <br />Line 4
 <br />Line 5
 <br />Line 6
 <br />Line 7
 <br />Line 8
 <br />Line 9
 <br />Line 10
 <br />Line 11
 <br />Line 12
 <br />Line 13
 <br />Line 14
 <br />Line 15
 <br />Line 16
 <br />Line 17
 <br />Line 18
 <br />Line 19
 <br />Line 20
 <br />Line 21
 <br />Line 22
 <br />Line 23
 <br />Line 24
 <br />Line 25
 <br />Line 26
 <br />Line 27
 <br />Line 28
 <br />Line 29
  <br />Line 30
  <br />Line 31
  <br />Line 32
  <br />Line 33
  <br />Line 34
  <br />Line 35
  <br />Line 36
  <br />Line 37
  <br />Line 38
  <br />Line 39
  <br />Line 40
  </div>
</body>
</html>