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?
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?
HTMLCSS
Last Comment
Md Shah
yes. inside your single div will be the heading. "append" the data from your ajax request to this div.
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>
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/
Basically, use two tables, one for the header and one for the content:
Happy Coding..
Accept my solution, if I have resolved your issue :)
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/
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>
Happy Coding..
Accept my solution, if I have resolved your issue :)
ASKER
i don't want to use tables
Something like below code,still working on it :)
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>
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:
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.. :)
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>
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.. :)
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.. :)
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.. :)
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..
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.