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?
yes. inside your single div will be the heading. "append" the data from your ajax request to this div.
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 :)
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.. :)
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..
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 AccessWhy 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
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
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.