We help IT Professionals succeed at work.

Fix header within a div

Rocking
Rocking asked
on
2,474 Views
Last Modified: 2014-05-03
Hi,

I have a div which will be having data populated from the server side.
I have to display heading in this div and the contents(coming through ajax) below the heading.

Heading is fixed and the contents are scrollable

Can it be possible in a single div?
Comment
Watch Question

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
yes. inside your single div will be the heading. "append" the data from your ajax request to this div.

Author

Commented:
can u please provide a sample code  ?Assuming "    My Heading" should be fixed and rest contents scrollable

<div style="width: 800px;border: solid 1px;">

<div style="float: left; width: 200px; margin-right: 5px; background-color: red;overflow: scroll;height: 100px;">
    My Heading
    
    This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
    This is our left text column.
    This is our left text column.
    This is our left text column.
</div>


</div>

Open in new window

Top Expert 2014

Commented:
Hello Rocking, Once Again..

I haven't got any information from your question that whether you are trying to get only normal content from server with Ajax request or you are trying to populate a table content inside scrollable div.

Anyways, you can try to separate the header from the content: http://jsfiddle.net/u2xZU/ and put the header outside the scrollable content.

Basically, use two tables, one for the header and one for the content:

<div>Some Page Content </div>
    <table>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test">
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>

Open in new window

Please let me know if you have any other issues.

Happy Coding..
Accept my solution, if I have resolved your issue :)

Author

Commented:
i don't want to use tables
Something like below code,still working on it :)


<HTML>

<HEAD>
   <script src="js/jquery-1.10.2.js"></script>
    <title>Scroll Fixed </title>
<style type="text/css">

#header{
width: 200px;
height: 300px;
overflow: scroll;
}
</style>
<SCRIPT>


$(document).ready(function() {
 
    var div = $('#header');
    var start = $(div).offset().top;
 
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });
 
});
</SCRIPT>
</HEAD>
<BODY>
 
<div id="header">
    <h1>Fixed HEader</h1>
</div>
 
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
 
</BODY>
</HTML>

Open in new window

Top Expert 2014

Commented:
Hmm.. In the question you have mentioned that you want a scrollable DIV with fixed header but in your last comment you were trying to write a code to scroll a Page with fixed header div.

Anyways, I have done small changes in your code as below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <title>Scroll Fixed </title>
    <style type="text/css">

    #header{
    width: 100%;
    height: 100px;
    background-color:#FFFFFF;
    }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {

            var div = $('#header');
            var start = $(div).offset().top;

            $.event.add(window, "scroll", function () {
                var p = $(window).scrollTop();
                $(div).css('position', ((p) > start) ? 'fixed' : 'static');
                $(div).css('top', ((p) > start) ? '0px' : '');
            });

        });
    </script>
</head>
<body>
    
    <div id="header">
        <h1>Fixed HEader</h1>
    </div>
 
    <p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
 
</body>
</html>

Open in new window

Check & let me know if this is what you are expecting..

or else please feel free to provide some more information about your question - about what exactly you are trying to do or get output look a like.. :)
Top Expert 2014

Commented:
A small Advise, if you are interested to know !!

When you are posting a Question, try to allocate maximum marks 500 instead of 100 or 265, so as to attract more Experts to your question & also to get a quick response or resolution.

Most of the Experts in their filter try to search with questions which are allocated to 500 points. In such scenarios, your question will not be visible to these Experts.

Benefit on both sides.. Think about it.. :)

Author

Commented:
Yes you are right the code i provided was scroll a Page with fixed header div.
I don't need this,what i need is

A div which is having a fixed header below is what i need

http://jsfiddle.net/b4fEE/12/

but in the above fiddle two different div are used, i want in single div..
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.