asked on

Fix header within a div

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?

Kyle Hamilton

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

Rocking

ASKER

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

Md Shah

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 :)

Rocking

ASKER

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

Md Shah

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.. :)

Md Shah

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.. :)

Rocking

ASKER

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..

ASKER CERTIFIED SOLUTION

Md Shah

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial