SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stcking the content of div in page

    Hi,

    I have given the link to the code.

    http://jsfiddle.net/coding_rd/SXfap/

    The original link: http://jsfiddle.net/jmosbech/stFcx/

    i want the div above the table( i am the header) also to stick to the page when table scrolling happens.
    The table scrolling is using stickyTableHeaders plugin. The table appears inside div container.

    tried using a plugin called .pin(); but it did not work.
    i tried giving Position:fixed; but that spoiled the alignment. i cannot touch it as it will affect global template.

    here goes one more example link.
    http://css-tricks.com/examples/PersistantHeaders/

    i want the persister headers above the table to stay, stick to the page, when scrolling of the table happens.

    https://github.com/dubroe/sticky-div i saw this JS file. i tried using it but did not work.
    if this could be used, how ?

    Appreciate it if i get an working example.

    Thanks.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Welcome to the forums

    You don't need jQuery to achieve a sticky header, just use the following CSS:

    Code CSS:
    .fixedElement{
      background-color: #fff;
      position:fixed;
      margin:0;
      padding:15px 0;
      top:0;
      width:100%;
      z-index:100;
    }

    And then initialize the plugin with an offset, like this:

    Code JavaScript:
    $("table").stickyTableHeaders({fixedOffset: 55});

    Here's a demo.

    And here's the code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Fixed header example</title>
        <style>
          body{
          margin: 0 auto;
          padding: 0 20px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 11px;
          color: #555;
          }
          
          table{
          border: 0;
          padding: 0;
          margin: 0 0 20px 0;
          border-collapse: collapse;
          }
          
          th{
          padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
          text-align: right;        
          font-weight:bold;
          line-height: 2em;
          color: #FFF;
          background-color: #555;
          }
          
          tbody td{
          padding: 10px;
          line-height: 18px;
          border-top: 1px solid #E0E0E0;
          }
          
          tbody tr:nth-child(2n){
          background-color: #F7F7F7;
          }
          
          tbody tr:hover{
          background-color: #EEEEEE;
          }
          
          td{ text-align: right; }
          
          td:first-child, th:first-child{ text-align: left; }
          
          .fixedElement{
            background-color: #fff;
            position:fixed;
            margin:0;
            padding:15px 0;
            top:0;
            width:100%;
            z-index:100;
          }
          
          #wrapper{ width: 600px; }
          .first{ margin-top:55px; }
          .last{ margin-bottom: 25px; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <div id="wrapper">
           <h1 class="fixedElement">I am the header</h1>
      
           <p class="first">
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p>
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p>
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p>
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p class="last">
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
        
            <table>
            <thead>
            <tr>
            <th colspan="9">
            Companies listed on NASDAQ OMX Copenhagen.
            </th>
            </tr>
            <tr>
            <th>
            Full name
            </th>
            <th>
            CCY
            </th>
            <th>
            Last
            </th>
            <th>
            +/-
            </th>
            <th>
            %
            </th>
            <th>
            Bid
            </th>
            <th>
            Ask
            </th>
            <th>
            Volume
            </th>
            <th>
            Turnover
            </th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            A.P. Mller...
            </td>
            <td>
            DKK
            </td>
            <td>
            33,220.00
            </td>
            <td>
            760
            </td>
            <td>
            2.34
            </td>
            <td>
            33,140.00
            </td>
            <td>
            33,220.00
            </td>
            <td>
            594
            </td>
            <td>
            19,791,910
            </td>
            </tr>
            <tr>
            <td>
            A.P. Mller...
            </td>
            <td>
            DKK
            </td>
            <td>
            34,620.00
            </td>
            <td>
            640
            </td>
            <td>
            1.88
            </td>
            <td>
            34,620.00
            </td>
            <td>
            34,700.00
            </td>
            <td>
            9,954
            </td>
            <td>
            346,530,246
            </td>
            </tr>
            <tr>
            <td>
            Carlsberg A
            </td>
            <td>
            DKK
            </td>
            <td>
            380
            </td>
            <td>
            0
            </td>
            <td>
            0
            </td>
            <td>
            371
            </td>
            <td>
            391.5
            </td>
            <td>
            6
            </td>
            <td>
            2,280
            </td>
            </tr>
            <tr>
            <td>
            Carlsberg B
            </td>
            <td>
            DKK
            </td>
            <td>
            364.4
            </td>
            <td>
            8.6
            </td>
            <td>
            2.42
            </td>
            <td>
            363
            </td>
            <td>
            364.4
            </td>
            <td>
            636,267
            </td>
            <td>
            228,530,601
            </td>
            </tr>
            <tr>
            <td>
            Chr. Hansen...
            </td>
            <td>
            DKK
            </td>
            <td>
            114.5
            </td>
            <td>
            -1.6
            </td>
            <td>
            -1.38
            </td>
            <td>
            114.2
            </td>
            <td>
            114.5
            </td>
            <td>
            141,822
            </td>
            <td>
            16,311,454
            </td>
            </tr>
            <tr>
            <td>
            Coloplast B
            </td>
            <td>
            DKK
            </td>
            <td>
            809.5
            </td>
            <td>
            11
            </td>
            <td>
            1.38
            </td>
            <td>
            809
            </td>
            <td>
            809.5
            </td>
            <td>
            85,840
            </td>
            <td>
            69,363,301
            </td>
            </tr>
            <tr>
            <td>
            D/S Norden
            </td>
            <td>
            DKK
            </td>
            <td>
            155
            </td>
            <td>
            -1.5
            </td>
            <td>
            -0.96
            </td>
            <td>
            155
            </td>
            <td>
            155.1
            </td>
            <td>
            51,681
            </td>
            <td>
            8,037,225
            </td>
            </tr>
            <tr>
            <td>
            Danske Bank
            </td>
            <td>
            DKK
            </td>
            <td>
            69.05
            </td>
            <td>
            2.55
            </td>
            <td>
            3.83
            </td>
            <td>
            69.05
            </td>
            <td>
            69.2
            </td>
            <td>
            1,723,719
            </td>
            <td>
            115,348,068
            </td>
            </tr>
            <tr>
            <td>
            DSV
            </td>
            <td>
            DKK
            </td>
            <td>
            105.4
            </td>
            <td>
            0.2
            </td>
            <td>
            0.19
            </td>
            <td>
            105.2
            </td>
            <td>
            105.4
            </td>
            <td>
            674,873
            </td>
            <td>
            71,575,035
            </td>
            </tr>
            <tr>
            <td>
            FLSmidth &amp; Co.
            </td>
            <td>
            DKK
            </td>
            <td>
            295.8
            </td>
            <td>
            -1.8
            </td>
            <td>
            -0.6
            </td>
            <td>
            295.1
            </td>
            <td>
            295.8
            </td>
            <td>
            341,263
            </td>
            <td>
            100,301,032
            </td>
            </tr>
            <tr>
            <td>
            G4S plc
            </td>
            <td>
            DKK
            </td>
            <td>
            22.53
            </td>
            <td>
            0.05
            </td>
            <td>
            0.22
            </td>
            <td>
            22.53
            </td>
            <td>
            22.57
            </td>
            <td>
            190,920
            </td>
            <td>
            4,338,150
            </td>
            </tr>
            <tr>
            <td>
            Jyske Bank
            </td>
            <td>
            DKK
            </td>
            <td>
            144.2
            </td>
            <td>
            1.4
            </td>
            <td>
            0.98
            </td>
            <td>
            142.8
            </td>
            <td>
            144.2
            </td>
            <td>
            78,163
            </td>
            <td>
            11,104,874
            </td>
            </tr>
            <tr>
            <td>
            Kbenhavns ...
            </td>
            <td>
            DKK
            </td>
            <td>
            1,580.00
            </td>
            <td>
            -12
            </td>
            <td>
            -0.75
            </td>
            <td>
            1,590.00
            </td>
            <td>
            1,620.00
            </td>
            <td>
            82
            </td>
            <td>
            131,110
            </td>
            </tr>
            <tr>
            <td>
            Lundbeck
            </td>
            <td>
            DKK
            </td>
            <td>
            103.4
            </td>
            <td>
            -2.5
            </td>
            <td>
            -2.36
            </td>
            <td>
            103.4
            </td>
            <td>
            103.8
            </td>
            <td>
            157,162
            </td>
            <td>
            16,462,282
            </td>
            </tr>
            <tr>
            <td>
            Nordea Bank
            </td>
            <td>
            DKK
            </td>
            <td>
            43.22
            </td>
            <td>
            -0.06
            </td>
            <td>
            -0.14
            </td>
            <td>
            43.22
            </td>
            <td>
            43.25
            </td>
            <td>
            167,520
            </td>
            <td>
            7,310,143
            </td>
            </tr>
            <tr>
            <td>
            Novo Nordisk B
            </td>
            <td>
            DKK
            </td>
            <td>
            552.5
            </td>
            <td>
            -3.5
            </td>
            <td>
            -0.63
            </td>
            <td>
            550.5
            </td>
            <td>
            552.5
            </td>
            <td>
            843,533
            </td>
            <td>
            463,962,375
            </td>
            </tr>
            <tr>
            <td>
            Novozymes B
            </td>
            <td>
            DKK
            </td>
            <td>
            805.5
            </td>
            <td>
            5.5
            </td>
            <td>
            0.69
            </td>
            <td>
            805
            </td>
            <td>
            805.5
            </td>
            <td>
            152,188
            </td>
            <td>
            121,746,199
            </td>
            </tr>
            <tr>
            <td>
            Pandora
            </td>
            <td>
            DKK
            </td>
            <td>
            39.04
            </td>
            <td>
            0.94
            </td>
            <td>
            2.47
            </td>
            <td>
            38.8
            </td>
            <td>
            39.04
            </td>
            <td>
            350,965
            </td>
            <td>
            13,611,838
            </td>
            </tr>
            <tr>
            <td>
            Rockwool In...
            </td>
            <td>
            DKK
            </td>
            <td>
            492
            </td>
            <td>
            0
            </td>
            <td>
            0
            </td>
            <td>
            482
            </td>
            <td>
            492
            </td>
            <td></td>
            <td></td>
            </tr>
            <tr>
            <td>
            Rockwool In...
            </td>
            <td>
            DKK
            </td>
            <td>
            468
            </td>
            <td>
            12
            </td>
            <td>
            2.63
            </td>
            <td>
            465.2
            </td>
            <td>
            468
            </td>
            <td>
            9,885
            </td>
            <td>
            4,623,850
            </td>
            </tr>
            <tr>
            <td>
            Sydbank
            </td>
            <td>
            DKK
            </td>
            <td>
            95
            </td>
            <td>
            0.05
            </td>
            <td>
            0.05
            </td>
            <td>
            94.7
            </td>
            <td>
            95
            </td>
            <td>
            103,438
            </td>
            <td>
            9,802,899
            </td>
            </tr>
            <tr>
            <td>
            TDC
            </td>
            <td>
            DKK
            </td>
            <td>
            43.6
            </td>
            <td>
            0.13
            </td>
            <td>
            0.3
            </td>
            <td>
            43.5
            </td>
            <td>
            43.6
            </td>
            <td>
            845,110
            </td>
            <td>
            36,785,339
            </td>
            </tr>
            <tr>
            <td>
            Topdanmark
            </td>
            <td>
            DKK
            </td>
            <td>
            854
            </td>
            <td>
            13.5
            </td>
            <td>
            1.61
            </td>
            <td>
            854
            </td>
            <td>
            855
            </td>
            <td>
            38,679
            </td>
            <td>
            32,737,678
            </td>
            </tr>
            <tr>
            <td>
            Tryg
            </td>
            <td>
            DKK
            </td>
            <td>
            290.4
            </td>
            <td>
            0.3
            </td>
            <td>
            0.1
            </td>
            <td>
            290
            </td>
            <td>
            290.4
            </td>
            <td>
            94,587
            </td>
            <td>
            27,537,247
            </td>
            </tr>
            <tr>
            <td>
            Vestas Wind...
            </td>
            <td>
            DKK
            </td>
            <td>
            90.15
            </td>
            <td>
            -4.2
            </td>
            <td>
            -4.45
            </td>
            <td>
            90.1
            </td>
            <td>
            90.15
            </td>
            <td>
            1,317,313
            </td>
            <td>
            121,064,314
            </td>
            </tr>
            <tr>
            <td>
            William Dem...
            </td>
            <td>
            DKK
            </td>
            <td>
            417.6
            </td>
            <td>
            0.1
            </td>
            <td>
            0.02
            </td>
            <td>
            417
            </td>
            <td>
            417.6
            </td>
            <td>
            64,242
            </td>
            <td>
            26,859,554
            </td>
            </tr>
            </tbody>
            </table>
            
            <div style="height: 4000px">
               lots of content down here...
            </div>
          </div>
        <script>
          $(function(){
            $("table").stickyTableHeaders({fixedOffset: 55});
          });
          
          /*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
          MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */
          
          ;(function ($, window, undefined) {
          'use strict';
          
          var name = 'stickyTableHeaders';
          var defaults = {
            fixedOffset: 0
          };
          
          function Plugin (el, options) {
          // To avoid scope issues, use 'base' instead of 'this'
          // to reference this class from internal events and functions.
          var base = this;
          
          // Access to jQuery and DOM versions of element
          base.$el = $(el);
          base.el = el;
          
          // Listen for destroyed, call teardown
          base.$el.bind('destroyed',
            $.proxy(base.teardown, base));
          
          // Cache DOM refs for performance reasons
          base.$window = $(window);
          base.$clonedHeader = null;
          base.$originalHeader = null;
          
          // Keep track of state
          base.isCloneVisible = false;
          base.leftOffset = null;
          base.topOffset = null;
          
          base.init = function () {
            base.options = $.extend({}, defaults, options);
          
            base.$el.each(function () {
              var $this = $(this);
          
              // remove padding on <table> to fix issue #7
              $this.css('padding', 0);
          
              base.$originalHeader = $('thead:first', this);
              base.$clonedHeader = base.$originalHeader.clone();
          
              base.$clonedHeader.addClass('tableFloatingHeader');
              base.$clonedHeader.css({
                'position': 'fixed',
                'top': 0,
                'z-index': 1, // #18: opacity bug
                'display': 'none'
              });
          
              base.$originalHeader.addClass('tableFloatingHeaderOriginal');
          
              base.$originalHeader.after(base.$clonedHeader);
          
              // enabling support for jquery.tablesorter plugin
              // forward clicks on clone to original
              $('th', base.$clonedHeader).on('click.' + name, function (e) {
                var index = $('th', base.$clonedHeader).index(this);
                $('th', base.$originalHeader).eq(index).click();
              });
              $this.on('sortEnd.' + name, base.updateWidth);
          
              base.$printStyle = $('<style type="text/css" media="print">' +
                '.tableFloatingHeader{display:none !important;}' +
                '.tableFloatingHeaderOriginal{visibility:visible !important;}' +
                '</style>');
              $('head').append(base.$printStyle);
            });
          
            base.updateWidth();
            base.toggleHeaders();
          
            base.bind();
          };
          
          base.destroy = function (){
            base.$el.unbind('destroyed', base.teardown);
            base.teardown();
          };
          
          base.teardown = function(){
            $.removeData(base.el, 'plugin_' + name);
            base.unbind();
          
            base.$clonedHeader.remove();
            base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
            base.$originalHeader.css('visibility', 'visible');
            base.$printStyle.remove();
          
            base.el = null;
            base.$el = null;
          };
          
          base.bind = function(){
            base.$window.on('scroll.' + name, base.toggleHeaders);
            base.$window.on('resize.' + name, base.toggleHeaders);
            base.$window.on('resize.' + name, base.updateWidth);
            // TODO: move tablesorter bindings here
          };
          
          base.unbind = function(){
            // unbind window events by specifying handle so we don't remove too much
            base.$window.off('.' + name, base.toggleHeaders);
            base.$window.off('.' + name, base.updateWidth);
            base.$el.off('.' + name);
            base.$el.find('*').off('.' + name);
          };
          
          base.toggleHeaders = function () {
            base.$el.each(function () {
              var $this = $(this);
          
              var newTopOffset = isNaN(base.options.fixedOffset) ?
                base.options.fixedOffset.height() : base.options.fixedOffset;
          
              var offset = $this.offset();
              var scrollTop = base.$window.scrollTop() + newTopOffset;
              var scrollLeft = base.$window.scrollLeft();
          
              if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
                var newLeft = offset.left - scrollLeft;
                if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
                  return;
                }
          
                base.$clonedHeader.css({
                  'top': newTopOffset,
                  'margin-top': 0,
                  'left': newLeft,
                  'display': 'block'
                });
                base.$originalHeader.css('visibility', 'hidden');
                base.isCloneVisible = true;
                base.leftOffset = newLeft;
                base.topOffset = newTopOffset;
              }
              else if (base.isCloneVisible) {
                base.$clonedHeader.css('display', 'none');
                base.$originalHeader.css('visibility', 'visible');
                base.isCloneVisible = false;
              }
            });
          };
          
          base.updateWidth = function () {
            // Copy cell widths and classes from original header
            $('th', base.$clonedHeader).each(function (index) {
              var $this = $(this);
              var $origCell = $('th', base.$originalHeader).eq(index);
              this.className = $origCell.attr('class') || '';
              // use min/max-width to fix overflow issue (#30)
              $this.css({
                'min-width': $origCell.width(),
                'max-width': $origCell.width()
              });
            });
          
            // Copy row width from whole table
            base.$clonedHeader.css('width', base.$originalHeader.width());
          };
          
          // Run initializer
          base.init();
          }
          
          // A plugin wrapper around the constructor,
          // preventing against multiple instantiations
          $.fn[name] = function ( options ) {
          return this.each(function () {
            var instance = $.data(this, 'plugin_' + name);
            if (instance) {
              if (typeof options === "string") {
                instance[options].apply(instance);
              }
            } else if(options !== 'destroy') {
              $.data(this, 'plugin_' + name, new Plugin( this, options ));
            }
          });
          };
          
          })(jQuery, window);
        </script>    
      </body>
    </html>
    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome
    Thanks for the solution. Appreciate it.

    But if i want even the paragraph tag (the content of paragraph)to show along with the header, then what would be the properties?

    Thanks.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by Coding_rd View Post
    But if i want even the paragraph tag (the content of paragraph)to show along with the header, then what would be the properties?
    Just so I understand: you're asking me to explain what I did and show you how to adjust things, so that you can "sticky" other elements, as well as the header.
    Is that correct?

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    posted is the code below to male header and paragraph stick to page from your code.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Fixed header example</title>
        <style>
          body{
          margin: 0 auto;
          padding: 0 20px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 11px;
          color: #555;
          }
          
          table{
          border: 0;
          padding: 0;
          margin: 0 0 20px 0;
          border-collapse: collapse;
          }
          
          th{
          padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
          text-align: right;        
          font-weight:bold;
          line-height: 2em;
          color: #FFF;
          background-color: #555;
          }
          
          tbody td{
          padding: 10px;
          line-height: 18px;
          border-top: 1px solid #E0E0E0;
          }
          
          tbody tr:nth-child(2n){
          background-color: #F7F7F7;
          }
          
          tbody tr:hover{
          background-color: #EEEEEE;
          }
          
          td{ text-align: right; }
          
          td:first-child, th:first-child{ text-align: left; }
          
          .fixedElement{
            background-color: #fff;
            position:fixed;
            margin:0;
            padding:15px 0;
            top:0;
            width:100%;
            z-index:100;
          }
          
          #wrapper{ width: 600px; }
          .first{ margin-top:55px; width:600px; }
          .last{ margin-bottom: 25px; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <div id="wrapper">
           <h1 class="fixedElement">I am the header</h1>
      
           <p class="first fixedElement">
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p>
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p>
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p>
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
           <p class="last">
             the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
            tagthe paragraph tagthe paragraph tagthe paragraph tag
           </p>
        
            <table>
            <thead>
            <tr>
            <th colspan="9">
            Companies listed on NASDAQ OMX Copenhagen.
            </th>
            </tr>
            <tr>
            <th>
            Full name
            </th>
            <th>
            CCY
            </th>
            <th>
            Last
            </th>
            <th>
            +/-
            </th>
            <th>
            %
            </th>
            <th>
            Bid
            </th>
            <th>
            Ask
            </th>
            <th>
            Volume
            </th>
            <th>
            Turnover
            </th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            A.P. Mller...
            </td>
            <td>
            DKK
            </td>
            <td>
            33,220.00
            </td>
            <td>
            760
            </td>
            <td>
            2.34
            </td>
            <td>
            33,140.00
            </td>
            <td>
            33,220.00
            </td>
            <td>
            594
            </td>
            <td>
            19,791,910
            </td>
            </tr>
            <tr>
            <td>
            A.P. Mller...
            </td>
            <td>
            DKK
            </td>
            <td>
            34,620.00
            </td>
            <td>
            640
            </td>
            <td>
            1.88
            </td>
            <td>
            34,620.00
            </td>
            <td>
            34,700.00
            </td>
            <td>
            9,954
            </td>
            <td>
            346,530,246
            </td>
            </tr>
            <tr>
            <td>
            Carlsberg A
            </td>
            <td>
            DKK
            </td>
            <td>
            380
            </td>
            <td>
            0
            </td>
            <td>
            0
            </td>
            <td>
            371
            </td>
            <td>
            391.5
            </td>
            <td>
            6
            </td>
            <td>
            2,280
            </td>
            </tr>
            <tr>
            <td>
            Carlsberg B
            </td>
            <td>
            DKK
            </td>
            <td>
            364.4
            </td>
            <td>
            8.6
            </td>
            <td>
            2.42
            </td>
            <td>
            363
            </td>
            <td>
            364.4
            </td>
            <td>
            636,267
            </td>
            <td>
            228,530,601
            </td>
            </tr>
            <tr>
            <td>
            Chr. Hansen...
            </td>
            <td>
            DKK
            </td>
            <td>
            114.5
            </td>
            <td>
            -1.6
            </td>
            <td>
            -1.38
            </td>
            <td>
            114.2
            </td>
            <td>
            114.5
            </td>
            <td>
            141,822
            </td>
            <td>
            16,311,454
            </td>
            </tr>
            <tr>
            <td>
            Coloplast B
            </td>
            <td>
            DKK
            </td>
            <td>
            809.5
            </td>
            <td>
            11
            </td>
            <td>
            1.38
            </td>
            <td>
            809
            </td>
            <td>
            809.5
            </td>
            <td>
            85,840
            </td>
            <td>
            69,363,301
            </td>
            </tr>
            <tr>
            <td>
            D/S Norden
            </td>
            <td>
            DKK
            </td>
            <td>
            155
            </td>
            <td>
            -1.5
            </td>
            <td>
            -0.96
            </td>
            <td>
            155
            </td>
            <td>
            155.1
            </td>
            <td>
            51,681
            </td>
            <td>
            8,037,225
            </td>
            </tr>
            <tr>
            <td>
            Danske Bank
            </td>
            <td>
            DKK
            </td>
            <td>
            69.05
            </td>
            <td>
            2.55
            </td>
            <td>
            3.83
            </td>
            <td>
            69.05
            </td>
            <td>
            69.2
            </td>
            <td>
            1,723,719
            </td>
            <td>
            115,348,068
            </td>
            </tr>
            <tr>
            <td>
            DSV
            </td>
            <td>
            DKK
            </td>
            <td>
            105.4
            </td>
            <td>
            0.2
            </td>
            <td>
            0.19
            </td>
            <td>
            105.2
            </td>
            <td>
            105.4
            </td>
            <td>
            674,873
            </td>
            <td>
            71,575,035
            </td>
            </tr>
            <tr>
            <td>
            FLSmidth &amp; Co.
            </td>
            <td>
            DKK
            </td>
            <td>
            295.8
            </td>
            <td>
            -1.8
            </td>
            <td>
            -0.6
            </td>
            <td>
            295.1
            </td>
            <td>
            295.8
            </td>
            <td>
            341,263
            </td>
            <td>
            100,301,032
            </td>
            </tr>
            <tr>
            <td>
            G4S plc
            </td>
            <td>
            DKK
            </td>
            <td>
            22.53
            </td>
            <td>
            0.05
            </td>
            <td>
            0.22
            </td>
            <td>
            22.53
            </td>
            <td>
            22.57
            </td>
            <td>
            190,920
            </td>
            <td>
            4,338,150
            </td>
            </tr>
            <tr>
            <td>
            Jyske Bank
            </td>
            <td>
            DKK
            </td>
            <td>
            144.2
            </td>
            <td>
            1.4
            </td>
            <td>
            0.98
            </td>
            <td>
            142.8
            </td>
            <td>
            144.2
            </td>
            <td>
            78,163
            </td>
            <td>
            11,104,874
            </td>
            </tr>
            <tr>
            <td>
            Kbenhavns ...
            </td>
            <td>
            DKK
            </td>
            <td>
            1,580.00
            </td>
            <td>
            -12
            </td>
            <td>
            -0.75
            </td>
            <td>
            1,590.00
            </td>
            <td>
            1,620.00
            </td>
            <td>
            82
            </td>
            <td>
            131,110
            </td>
            </tr>
            <tr>
            <td>
            Lundbeck
            </td>
            <td>
            DKK
            </td>
            <td>
            103.4
            </td>
            <td>
            -2.5
            </td>
            <td>
            -2.36
            </td>
            <td>
            103.4
            </td>
            <td>
            103.8
            </td>
            <td>
            157,162
            </td>
            <td>
            16,462,282
            </td>
            </tr>
            <tr>
            <td>
            Nordea Bank
            </td>
            <td>
            DKK
            </td>
            <td>
            43.22
            </td>
            <td>
            -0.06
            </td>
            <td>
            -0.14
            </td>
            <td>
            43.22
            </td>
            <td>
            43.25
            </td>
            <td>
            167,520
            </td>
            <td>
            7,310,143
            </td>
            </tr>
            <tr>
            <td>
            Novo Nordisk B
            </td>
            <td>
            DKK
            </td>
            <td>
            552.5
            </td>
            <td>
            -3.5
            </td>
            <td>
            -0.63
            </td>
            <td>
            550.5
            </td>
            <td>
            552.5
            </td>
            <td>
            843,533
            </td>
            <td>
            463,962,375
            </td>
            </tr>
            <tr>
            <td>
            Novozymes B
            </td>
            <td>
            DKK
            </td>
            <td>
            805.5
            </td>
            <td>
            5.5
            </td>
            <td>
            0.69
            </td>
            <td>
            805
            </td>
            <td>
            805.5
            </td>
            <td>
            152,188
            </td>
            <td>
            121,746,199
            </td>
            </tr>
            <tr>
            <td>
            Pandora
            </td>
            <td>
            DKK
            </td>
            <td>
            39.04
            </td>
            <td>
            0.94
            </td>
            <td>
            2.47
            </td>
            <td>
            38.8
            </td>
            <td>
            39.04
            </td>
            <td>
            350,965
            </td>
            <td>
            13,611,838
            </td>
            </tr>
            <tr>
            <td>
            Rockwool In...
            </td>
            <td>
            DKK
            </td>
            <td>
            492
            </td>
            <td>
            0
            </td>
            <td>
            0
            </td>
            <td>
            482
            </td>
            <td>
            492
            </td>
            <td></td>
            <td></td>
            </tr>
            <tr>
            <td>
            Rockwool In...
            </td>
            <td>
            DKK
            </td>
            <td>
            468
            </td>
            <td>
            12
            </td>
            <td>
            2.63
            </td>
            <td>
            465.2
            </td>
            <td>
            468
            </td>
            <td>
            9,885
            </td>
            <td>
            4,623,850
            </td>
            </tr>
            <tr>
            <td>
            Sydbank
            </td>
            <td>
            DKK
            </td>
            <td>
            95
            </td>
            <td>
            0.05
            </td>
            <td>
            0.05
            </td>
            <td>
            94.7
            </td>
            <td>
            95
            </td>
            <td>
            103,438
            </td>
            <td>
            9,802,899
            </td>
            </tr>
            <tr>
            <td>
            TDC
            </td>
            <td>
            DKK
            </td>
            <td>
            43.6
            </td>
            <td>
            0.13
            </td>
            <td>
            0.3
            </td>
            <td>
            43.5
            </td>
            <td>
            43.6
            </td>
            <td>
            845,110
            </td>
            <td>
            36,785,339
            </td>
            </tr>
            <tr>
            <td>
            Topdanmark
            </td>
            <td>
            DKK
            </td>
            <td>
            854
            </td>
            <td>
            13.5
            </td>
            <td>
            1.61
            </td>
            <td>
            854
            </td>
            <td>
            855
            </td>
            <td>
            38,679
            </td>
            <td>
            32,737,678
            </td>
            </tr>
            <tr>
            <td>
            Tryg
            </td>
            <td>
            DKK
            </td>
            <td>
            290.4
            </td>
            <td>
            0.3
            </td>
            <td>
            0.1
            </td>
            <td>
            290
            </td>
            <td>
            290.4
            </td>
            <td>
            94,587
            </td>
            <td>
            27,537,247
            </td>
            </tr>
            <tr>
            <td>
            Vestas Wind...
            </td>
            <td>
            DKK
            </td>
            <td>
            90.15
            </td>
            <td>
            -4.2
            </td>
            <td>
            -4.45
            </td>
            <td>
            90.1
            </td>
            <td>
            90.15
            </td>
            <td>
            1,317,313
            </td>
            <td>
            121,064,314
            </td>
            </tr>
            <tr>
            <td>
            William Dem...
            </td>
            <td>
            DKK
            </td>
            <td>
            417.6
            </td>
            <td>
            0.1
            </td>
            <td>
            0.02
            </td>
            <td>
            417
            </td>
            <td>
            417.6
            </td>
            <td>
            64,242
            </td>
            <td>
            26,859,554
            </td>
            </tr>
            </tbody>
            </table>
            
            <div style="height: 4000px">
               lots of content down here...
            </div>
          </div>
        <script>
          $(function(){
            $("table").stickyTableHeaders({fixedOffset: 55});
          });
          
          /*! Copyright (c) 2011 by Jonas Mosbech - [url]https://github.com/jmosbech/StickyTableHeaders[/url]
          MIT license info: [url]https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt[/url] */
          
          ;(function ($, window, undefined) {
          'use strict';
          
          var name = 'stickyTableHeaders';
          var defaults = {
            fixedOffset: 0
          };
          
          function Plugin (el, options) {
          // To avoid scope issues, use 'base' instead of 'this'
          // to reference this class from internal events and functions.
          var base = this;
          
          // Access to jQuery and DOM versions of element
          base.$el = $(el);
          base.el = el;
          
          // Listen for destroyed, call teardown
          base.$el.bind('destroyed',
            $.proxy(base.teardown, base));
          
          // Cache DOM refs for performance reasons
          base.$window = $(window);
          base.$clonedHeader = null;
          base.$originalHeader = null;
          
          // Keep track of state
          base.isCloneVisible = false;
          base.leftOffset = null;
          base.topOffset = null;
          
          base.init = function () {
            base.options = $.extend({}, defaults, options);
          
            base.$el.each(function () {
              var $this = $(this);
          
              // remove padding on <table> to fix issue #7
              $this.css('padding', 0);
          
              base.$originalHeader = $('thead:first', this);
              base.$clonedHeader = base.$originalHeader.clone();
          
              base.$clonedHeader.addClass('tableFloatingHeader');
              base.$clonedHeader.css({
                'position': 'fixed',
                'top': 0,
                'z-index': 1, // #18: opacity bug
                'display': 'none'
              });
          
              base.$originalHeader.addClass('tableFloatingHeaderOriginal');
          
              base.$originalHeader.after(base.$clonedHeader);
          
              // enabling support for jquery.tablesorter plugin
              // forward clicks on clone to original
              $('th', base.$clonedHeader).on('click.' + name, function (e) {
                var index = $('th', base.$clonedHeader).index(this);
                $('th', base.$originalHeader).eq(index).click();
              });
              $this.on('sortEnd.' + name, base.updateWidth);
          
              base.$printStyle = $('<style type="text/css" media="print">' +
                '.tableFloatingHeader{display:none !important;}' +
                '.tableFloatingHeaderOriginal{visibility:visible !important;}' +
                '</style>');
              $('head').append(base.$printStyle);
            });
          
            base.updateWidth();
            base.toggleHeaders();
          
            base.bind();
          };
          
          base.destroy = function (){
            base.$el.unbind('destroyed', base.teardown);
            base.teardown();
          };
          
          base.teardown = function(){
            $.removeData(base.el, 'plugin_' + name);
            base.unbind();
          
            base.$clonedHeader.remove();
            base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
            base.$originalHeader.css('visibility', 'visible');
            base.$printStyle.remove();
          
            base.el = null;
            base.$el = null;
          };
          
          base.bind = function(){
            base.$window.on('scroll.' + name, base.toggleHeaders);
            base.$window.on('resize.' + name, base.toggleHeaders);
            base.$window.on('resize.' + name, base.updateWidth);
            // TODO: move tablesorter bindings here
          };
          
          base.unbind = function(){
            // unbind window events by specifying handle so we don't remove too much
            base.$window.off('.' + name, base.toggleHeaders);
            base.$window.off('.' + name, base.updateWidth);
            base.$el.off('.' + name);
            base.$el.find('*').off('.' + name);
          };
          
          base.toggleHeaders = function () {
            base.$el.each(function () {
              var $this = $(this);
          
              var newTopOffset = isNaN(base.options.fixedOffset) ?
                base.options.fixedOffset.height() : base.options.fixedOffset;
          
              var offset = $this.offset();
              var scrollTop = base.$window.scrollTop() + newTopOffset;
              var scrollLeft = base.$window.scrollLeft();
          
              if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
                var newLeft = offset.left - scrollLeft;
                if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
                  return;
                }
          
                base.$clonedHeader.css({
                  'top': newTopOffset,
                  'margin-top': 0,
                  'left': newLeft,
                  'display': 'block'
                });
                base.$originalHeader.css('visibility', 'hidden');
                base.isCloneVisible = true;
                base.leftOffset = newLeft;
                base.topOffset = newTopOffset;
              }
              else if (base.isCloneVisible) {
                base.$clonedHeader.css('display', 'none');
                base.$originalHeader.css('visibility', 'visible');
                base.isCloneVisible = false;
              }
            });
          };
          
          base.updateWidth = function () {
            // Copy cell widths and classes from original header
            $('th', base.$clonedHeader).each(function (index) {
              var $this = $(this);
              var $origCell = $('th', base.$originalHeader).eq(index);
              this.className = $origCell.attr('class') || '';
              // use min/max-width to fix overflow issue (#30)
              $this.css({
                'min-width': $origCell.width(),
                'max-width': $origCell.width()
              });
            });
          
            // Copy row width from whole table
            base.$clonedHeader.css('width', base.$originalHeader.width());
          };
          
          // Run initializer
          base.init();
          }
          
          // A plugin wrapper around the constructor,
          // preventing against multiple instantiations
          $.fn[name] = function ( options ) {
          return this.each(function () {
            var instance = $.data(this, 'plugin_' + name);
            if (instance) {
              if (typeof options === "string") {
                instance[options].apply(instance);
              }
            } else if(options !== 'destroy') {
              $.data(this, 'plugin_' + name, new Plugin( this, options ));
            }
          });
          };
          
          })(jQuery, window);
        </script>    
      </body>
    </html>
    the above code will make the header and the first paragraph stick to the page along with table scrolling.

    http://jsfiddle.net/coding_rd/yhGC6/

    in the above link, if i call the fixedElement call at the top of the div..it sticks to the page..without any scroll. So, if i call CSS class at top of div, how it will stick and scrolling will take? anything to do with fixedOffset?
    I already played a bit with the code , using CSS to stick the container to the page.but with least success. So, i thought JS would help.

    an example would be great.

    again, truly appreciate your efforts.

    Thanks.
    Last edited by ScallioXTX; May 18, 2013 at 22:49. Reason: Wrapped code in [html][/html]

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    I'm a little unsure what you're trying to achieve here.
    If you set the position of the containing div as fixed, then of course it will stick to the page and no scroll.

    Are you trying to make the header and paragraph elements sticky?
    Here's a fiddle that does that.

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. so, it's fixedOffset coordinates change to 160. hmm....ok.

    Thanks.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Yeah, the offset is amount of pixels (measured from the top of the screen), at which you want the table header to stick.

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    i am reposting this again.

    all classes take the position of relative. so when i give it fixedElement. it just stops there and no scrolling takes place.

    http://jsfiddle.net/coding_rd/rQasQ/

    i have posted a link here with just html.

    I have dropped the plugin. now i need to scroll just the table body alone. and rest of the things should stick to page. the header, the content and the table header<thead>.
    I am writing the code for in JS against the window scroll as CSS alone will not help. I don't want to give my solution. Do you think there can be any other solution to achieve this.

    i found this link http://jsfiddle.net/livibetter/HV9HM/ to be useful.
    http://jsfiddle.net/HQS8s/ this link also to be useful.

    Let me know your thoughts.

    thanks.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by Coding_rd View Post
    Let me know your thoughts.
    The links you posted use the same method as I did, namely applying a style of position: fixed to the elements to keep them in place.
    If my previous solution is not acceptable, I would use one of those methods to sticky content at the top of the page, and stay with the plugin to sticky the table.

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,



    The links you posted use the same method as I did, namely applying a style of position: fixed to the elements to keep them in place.
    in this link http://jsfiddle.net/coding_rd/rQasQ/1/ if i give the fixedElement,at <div id="myid" class="myidclass fixedElement"> the whole thing gets fixed. what is wrong here. i know the content is wrapped inside that div. can i get an working link.

    thanks.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Coding_rd View Post
    what is wrong here.
    You have fixed both the header, as well as the entire table into position.
    The table takes up the whole screen (as it is so long) and thus, no scrolling takes place.

    As I mentioned before, I would split this problem in two.
    I would first make a <div> element at the top of the page which you can sticky using one of the methods you previously linked to.
    Then I would use the plugin from your first post to sticky the table header.

    I still don't understand why the solution I posted won't work for you.

  13. #13
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. I did do that what you had said. I put them is 2 seperate divs.
    But still something was not ok there so. I dropped everything and started fresh.

    If you don't mind can I get an working example of putting them into 2 seperate div and applying the plugin.

    Thanks. Appreciate it.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    I just had a look at this.
    The problem is that you are nesting your table in <divs> and <form> elements, so deeply, that you cannot separate the table from the other content that you want to sticky.

    E.g. you have:

    Code:
    <div>
      <div>
        <div>
          <div>
            <form>
              <div>
                <h1></h1>
                <div>
                  <div>
                    <input type="button" />
                    <span></span>
                    <input type="button" />
                    <input type="button" />
                  </div>
                </div>
                <table class="mytableclass">
                ...
                </table>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    We need to make that something similar to this:

    Code:
    <div id="wrapper">
      <div class="sticky">
        <h1></h1>
        <form>
          <input type="button" />
          <span></span>
          <input type="button" />
          <input type="button" />
        </form>
      </div> <!-- sticky -->
     
      <table class="mytableclass">
      ...
      </table>
    </div> <!-- wrapper -->
    That way you can separate out your content and make various pieces sticky at will.

    If you simplify your HTML in the way I describe, I can give you a hand to implement the rest.

  15. #15
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for letting me know this. yes i can do that in the HTML part. So, how do i handle the rest? i need to finish this. Can you please demonstrate this?


    Thanks

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    If you modify your HTML (as above) and post it here, I'll show you how.

  17. #17
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    http://jsfiddle.net/coding_rd/vVKQE/ i have posted the link for the HTML part. hope it's good.
    How to handle the rest?

    Thanks.

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Yay, that's much better.
    I am away from the PC right now, but I'll have a look at this later on.

  19. #19
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is one more thing, i don't want the top to be positioned at 0. top:0 for the class sticky, instead top to be placed at 91px.

    .sticky
    {
    top:91px;
    }

    thanks.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Ok, here's a new demo combining the two techniques.

    Quote Originally Posted by Coding_rd View Post
    there is one more thing, i don't want the top to be positioned at 0. top:0 for the class sticky, instead top to be placed at 91px.
    I'm sure you can manage this

  21. #21
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank You so much. Cheers

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    You're welcome.
    Glad we got there in the end

  23. #23
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It's about IE issue ? How to handle it?

    Thanks.

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    What IE issue?
    Can you post details with a link to a page where I can see it?

  25. #25
    SitePoint Member
    Join Date
    May 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have link .

    The div content and the table header ,shrinks from it,s original width on sticking to top when scrolling takes place. How to handle this? This reflects only in Internet explorer .


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
  •