Develop Reference

Push the content behind the fixed position header

I have created fiddle regarding the problem issue in link here
Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.

Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:
.top{
margin-top:100px;
}
Add this to you div with ".content" Like so:
<div class="content top">
Then just toggle it on the 2 clicks like:
$( ".content" ).toggleClass( "top" );
You can give additional styles, but this is the basic run down.

Update :
If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
Source
Old Answer :
There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.
See this : https://jsfiddle.net/d0pyxdoj/3/
P.S. Header/Footer have position fixed in your code, not absolute

Please check the below example. Height identification using script we can inject the spacing.
Script:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
Example Fiddler : https://jsfiddle.net/scj4u0t5/1/

How to add Scrollbars to Jquery Dialog

I have a JQuery dialog on an page which opens to depending upon the size of the window. Unfortunately, I have been able to achieve in the containing div that is shown by the dialog a horizontal scrollbar when the minWidth of the containing div is reached in order that a user can scroll to the rest of the content. My relevant code snippet is as follows:
$('#containingDiv').dialog({modal:true,
autoOpen:false,
height:heightOfWindow,
width:widthOfWindow,
resizable:true});
$('#containingDiv').dialog('open');
/*css Code for containing Div element*/
#containingDiv{
min-height:900px;
min-width:900px;
overflow-x:auto;
overflow-y:hidden;
}
So, how can I achieve a position where if the dialog goes beyond the min-width of the containing div that the dialog window can then scroll to the content of the div?
Can anyone help me, please?

Solved by creating another inner div with min-width and the outer div with width along with overflow-x. This will provide the scrollbar to the dialog.

Fix position of div tag inside dialog op-up

I have dialog box which comes on clicking a button. In the dialog box i have a button and other content. I want to make that button position fixed inside dialog pop-up.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('#footer_buttons').addClass('sticky');
}
else {
$('##footer_buttons').removeClass('sticky');
}
});
<style>
.sticky{
position : fixed;
}
</style>
I used above code to make the button position fix, it worked outside the dialog box but not working when the same code is used inside the dialog box. I can make a button fix by adding a min-height to dialog and make the dialog content scrollable. But I don't want to add any scroll to the content inside dialog box.
Can any one help me out. Thanks in advance

From MDN CSS position property:
fixed:
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page.
So it doesn't matter where your element is. If you apply the fixed position, the top, left, right, bottom values are relative to the screen's viewport (visible area in browser).
In your case you should use absolute positioning and set the position using two of the four positioning properties: top, right, bottom, left. Don't forget to add position: relative or absolute to the modal container.

popup layer inside scrollable div

I have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.
The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.
How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?
Any help is appreciated.
Thanks.

This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.
of course then use top: -px and left: -px to set a value for its position within the element.

Issue when scrolltofixed plugin switches to position: absolute

i'm having a problem using the scrolltofixed jquery plugin
https://github.com/bigspotteddog/ScrollToFixed
i use:
$('#tostick').scrollToFixed({ limit: $('#app-footer').offset().top - $('#tostick').height() - 20});
my #tostick is inside a
margin:0 auto
div container and as soon it hits the fixed footer and the script switches from fixed to absolute positioning it jumps out of the container because
left: 1107px
is applied, which is the distance to the left border of the browser window, instead of the left border of the centered div container. it tried to add:
offsetLeft: -$('#container').offset().left
which is completely ignored.
thanks in advance for any tip!

You need to give more info we don't know what #tostick is. Obviously we need the whole JS, and related html and css. Have you tried moving the entire container div it its only purpose is to have a style of margin:0 auto?
Also you can do:
$('#tostick').bind('unfixed', function() { $(this).css('left', ''); });//or what it needs to look right
$('#tostick').bind('fixed', function() { $(this).css('left', '1107px'); });//switch back to what it was