Footer will not position itself at the bottom of page - javascript

I have this footer that will not stick to the bottom of the page.
I think the issue is with my HTML and body not spanning the entire site but I just cannot find the exact place to correct this. I know its a big no-no to link to my page but I simply don't know what code to post here.
I cannot set the content to static instead of absolute because then my menu items will start pushing the content divs around when they open.

To fixed position into bottom you can try this code
Html:
<div class="tofix">
<p>Fixed this div into bottom</p>
</div>
Css:
.tofix{
width:300px;
position:fixed;
bottom:0;
}

The problem occurs because of your #content. You just try to change its position as following:
#content{
position : static;
}
Or you just simply remove it because the position is set as static by default.

Remove the position:absolute from your #content.
Also It worked when I first opened the link, please don't change the live code while asking the question.

Related

JQuery Issue: Sticky menu shifts to the right when it sticks

Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.
In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.
Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.
It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}

Google plus button creating horizontal scrollbar

I had no problems adding a Facebook/Twitter sharing buttons but right now Google+ is driving me crazy, WHEREVER i put this code on my page (using Bootstrap grid), i get a 2-3 pixels on the right creating an horizontal scrollbar:
<div class="g-plus" data-action="share" data-align="left" data-annotation="none"></div>
Plus Script code at the bottom of my page:
<script src="https://apis.google.com/js/platform.js" async defer>{lang: 'fr'}</script>
Any idea how to fix it? I've tried to put my div in another div with fixed width and stuff like that but no effect, the script is replacing the div and forcing all css regardless my attempts ... i have no idea what is replacing the original div and how to work on it.
I'm a bit lost here, help welcome, thanks.
I had a similar problem and this worked for me:
iframe[id^="oauth2relay"]{
display: none!important;
}
Taken from this tutorial: https://www.youtube.com/watch?v=4vYfnZ_XB8M
Try inspect the button and find out which element has the scrollbar and add this CSS on it.
overflow: visible;
this solved my problem
iframe[id^="oauth2relay"] { position: fixed !important; }
G+ button adds an iframe.

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Leave space at the top of every printed page

So, I have a header that needs to appear at the top of every page when the user prints this website. I'm setting position to fixed to get it to appear at the top of every page, but the problem is that the header is now overlapping some of the content near the top. The header is a static size, so if I could just put a margin X number of pixels at the top of every page that would solve my problem, but I can't find a way to do that. Thanks.
Example code:
HTML
<header>This should be at the top of every printed page</header>
<section id="content">*Multiple pages of text*</section>
CSS
header {
position:fixed;
top:-10;
height:20px;
}
#content {
left:0px;
overflow:visible;
position:relative;
/*top:52px;*/
width:98%;
}
The "top:52px" worked to get the content to avoid the header, but it was also causing some lines of text to be cut off in the middle by a page break, which is why it's commented out.
New info:
Something interesting I discovered about the "top:52px" line: it's not actually moving the content down 52 pixels, it's somehow hiding the top 52px of content on every page. I noticed this when I set header display to none and noticed significant portions of my content still missing.
Note: I'm open to javascript or jquery solutions if one exists.
Finally figured this out:
#content {
position:relative;
display:table;
table-layout:fixed;
padding-top:20px;
padding-bottom:20px;
width: 94%;
height:auto;
}
This puts padding at the top and bottom of every page, does not cut any content off from the top or bottom, and allows #content to respect width adjustments so that content doesn't get cut off on the right side of the page.
Lots of different ways to do this, one quick way would be to just use a div tag and set the margin-top to however many pixels you want:
<div style="margin-top:20px"></div>
simply add to #content:
#content {
margin-top: 50px; // however many pixels you need
}
I think you should read about CSS #media print and #page rule margin property here.
In my case, I only added a padding-top: XXpx and that was it. The css worked fine in all pages

Scrollbar for contentplaceholder

how to make the scrollbar of the hole page affect only on ConentPlaceHolder , i use style=" overflow:scroll; height: 500px;" but it makes a special scrollbar for Conentplaceholder but i want the main scrollbar to do this effect .
As far as I know, the best way to do it will be to use position:fixed on all your non-scrolling elements, and then just let the page flow normally. This way, the main scrollbar will scroll the content while the rest of the page appears not to move, giving the desired effect.
Here is a jsfiddle of Dereleased's suggestion: http://jsfiddle.net/sQmhY/2/
Note that the padding of the #content div is the same as the heights of the #header and #footer divs.
Demo
scroll bar demo
Documentation

Categories