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/
Related
If you check out this link, you will see that as you scroll down, the navigation has both affix and scrollspy functionality (From bootstrap 3)
http://codepen.io/datanity/pen/thnua
However, if you add white space at the top, the affix/scrollspy occurs in the wrong location. For example, this is with 800px of white space ontop.
http://codepen.io/datanity/pen/haKzg
Now of course here, you can adjust the affix/scrollspy code so that way it works with the 800px height ontop but, my problem is that I have no idea what space I will have on top. Sometimes it will be 2000px other times only 300px. Also, there is no way for me to know the id/class of the divs that appear ontop. Sometimes it will be 10 divs, sometimes 0, and they will always have different id/classes.
Is there a way that the affix and scrollspy can be triggered relative to the container it is in, and not a fixed px location from the top of the body?
Thanks for any help!
Tim
adding this to the top of the js fixed the issue. With this method, it does not matter how much white space or how many divs you have ontop. Your bootstrap scrollspy and affix will always be in the correct place!
$('#mynav').affix({
offset: {
top: $('#mynav').offset().top
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
});
Add an ID to the section element (located at the top of the HTML page). I'm assuming this is the element that you're concerned about changing heights.
<section id="top-section" style="height:800px;">
</section>
Then add these lines to your JS file:
var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);
This queries the rendered height of the section element, and then fixes your sidebar response height accordingly.
If you will also have an unknown amount of sections, then you should wrap the code that creates the sections in a div element. For instance, if you're using PHP to build the section area of your webpage, you should do something like this:
<div id="section-wrapper">
<?php echo "Whatever code you have here" ?>
</div>
I'm trying to make a white div that extends from point (A) to point (B) on the page as shown in the photo. I want it so that when the page is extended the white takes up from pooint (A) all the way down to the end of browser so that no bg grey is shown underneath, even when page extended from below.
If you're talkinng about making the footer stick to the bottom of the page, Ryan Fait has a well known solution to this that you can find here:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Basically how it works is you position the footer absolutely and put it at the bottom, and add a "push" element to the bottom of the page to make sure that the footer doesn't go ontop of the content.
if youre looking for the sticky footer, kpsuperplane's answer wouuld be it
But seems to me that you want to have a DIV that is bellow your content, and stretching to the bottom of your browser?.
If this is the case check this example I made really quick where I'm stretching
the bottom div to fill that area which is the result of the browsers height - the top area. Gets executed every time you resize.
http://jsfiddle.net/99FpT/
js
$(function() {
function stretch(){
$(".area2").css({"height" : $(window).height() - $(".area1").height() });
}
$(window).on("resize", function(){
stretch();
});
stretch();
});
We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.
How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.
I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.
This is not the answer but i have found something while inspecting your website...
This is you actual HTML when its working fine as you want..
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">
but when it is not working, the Position attribute is changing from Fixed to Relative .
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">
you can check you script for that or post you script here...
At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.
In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.
Hope that helps.
By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").
but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).
Try adding a zero height div just above the position of the sticky div, which will remain at that position as the page resizes, then check that position as you scroll to determine the position where the sticky div should stop.
Finally got it fixed by two techniques, setting explicit height wherever possible using CSS and delaying jQuery function after all images are loaded. Refer this: Delay some jQuery function until all images are loaded completely
How can I set a "spacer" div to fill remaining height space between CONTENT and FOOTER, so footer will be always at the bottom of the page (not window as originally asked)?
Here is a example where footer is not at the window's bottom: http://template1.staceyapp.com/ (I'm using this template, so structure is the same).
I've tried many things like creating a div and setting it to be min-height, height 100% etc.
Probably Javascript is needed for that.
Are you able to help me setting jQuery to calculate it's height to fill the remaining space?
Is there a better solution?
Many thanks in advance,
Graxa
You can use CSS to position the footer at the bottom of the page.
by using position: fixed or if the footer is contained within another div (container)
set the position of that to relative and the position of your footer to absolute and then specify bottom: 0; for your footer to keep it locked to the bottom of the page.
It sounds like you want a sticky footer, which sits at the bottom of the browser window or at the bottom of the content, whichever happens to be longer.
If that's true, check out: http://ryanfait.com/sticky-footer/
Have you tried to set the footer just to position:fixed on the bottom?
This is a followup to my question here. I would like to understand why applying position:absolute to the CSS of a div via jQuery fails, while applying it in a static style works. Here are two jsfiddle examples:
Works: http://jsfiddle.net/jasper/Ty6Af/2/
No worky: http://jsfiddle.net/Ty6Af/3/
Note that the only difference between the two is where I apply position:absolute. Vertical centering always works, but horizontal centering does not work when the page loads for the first time. If you manually re-size the window the div will center correctly.
All of my testing has been on Chrome under Ubuntu thus far.
Anyway, I'm just now delving into the world of web development and these are exactly the kinds of 'quirks' that I need to begin understanding.
EDIT:
#Jasper found something interesting. If you make two calls to .css(), first applying position and subsequently applying a margin, it works. I would love to understand why. Here is an example: http://jsfiddle.net/jasper/Ty6Af/5/
So the issue is with how the width of the div is calculated by the browser depending on its position.
If the div is set to position : static (by default) then it's width is 100% of it's parents width and the element is not allowed to move around the page.
If the div is set to position : relative then it's width is 100% of it's parents width but it can be moved around with left.
If the div is set to position : absolute then its width is determined by the actual content of the div, for instance if there is only a 200px wide <span> element within the div then the div will be 200px wide.
You can test these observations by changing the CSS of your jsfiddle to specify position : relative (etc...) and remove the JavaScript that makes the div position : absolute, then use your Developer Tools to inspect the element and it's calculated width.
The problem with your code is that it sets the position : absolute at the same time it sets the margin of the element by using its width/height (which are calculated differently depending on the position of the element).
If you want to set the position of the div in JavaScript then you can do something like this:
$(function() {
//notice I cached the selector so it can be used in the future as well as set the position of the div
$signuparea = $('#signuparea').css({position : 'absolute'});
$(window).resize(function() {
$signuparea.css({
'margin-top' : '-' + Math.round($signuparea.height() / 2) + 'px',
'margin-left' : '-' + Math.round($signuparea.width() / 2) + 'px',
});
}).trigger('resize');
});
Here's a jsfiddle: http://jsfiddle.net/jasper/Ty6Af/8/
I believe the problem is that when you apply your left and right in your second fiddle, you have yet to add position absolute to the div. Hence, the browser has no idea what do with the left and right values and ignores them initially.
Practically speaking in your second fiddle, you only actually add the position:absolute on the resize trigger. So before you resize your actual div has no positioning.
If you instead add the position absolute on load it works fine:http://jsfiddle.net/Ty6Af/9/
Notice that if you give it position:relative from the start (like this http://jsfiddle.net/Ty6Af/11/ ) it allready applies both the left and right value. The reason you can't actually see the effect of "left" is because it is a block element.
I hope that answers your question, I'm not quite clear on where you are stuck.
http://jsfiddle.net/Ty6Af/7/ this should work, the trigger function in jquery has bugs with chrome so you have to run the function on load too.
The problem seems to be that position:absolute; negates the current layout and requires you to position it.....
See: http://jsfiddle.net/ZHaRD/
Which Jasper explains much more eloquently than myself!