Bootstrap affix moves element to left side of container - javascript

I want two side nav bars that are affixed, but when I scroll down, my left navbar column moves to the left side of its parent div.
I know the issue is that affix changes the position to fixed so any floats would be irrelevant.
My issue should be clear in this
http://www.bootply.com/deaSbNAJ0b - don't mind the right side bar
I believe the answer lies in the javascript. My first thought would be to alter the affix function to use the parent element's position to calculate the affixed elements position after it triggers, but I wouldn't know where to start, javascript is still new to me.

Basically this question has already been answered here. As explained in the docs..
Use the affix plugin via data attributes or manually with your own
JavaScript. In both situations, you must provide CSS for the
positioning and width of your affixed content.
So in this case you have to set a specific width for the affixed element. When it becomes position:fixed it's removed from the normal document flow, and won't maintain it's normal percentage-based "unfixed" width.
You'll need to adjust the width for what works best with the other page content, keeping in mind that position:fixed doesn't work responsively with the Bootstrap columns. Here it's applied only on widths greater than 991px so that the columns can stack normally on smaller screens.
#media (min-width: 992px) {
.affix-top {
position: static;
margin-top:10px;
width:240px;
}
.affix {
position: fixed;
top: 10px;
width:240px;
}
}
http://www.bootply.com/FlGXADz2L3

Related

jquery resize so content is always centered perfectly

I have the following right now, but its not perfect:
$(window).resize(function () {
$("#app-views").height($(window).height() - 140);
});
Basically, I have 75px from top before my content starts, and I have 60px from bottom of the page to my content.
How do I make it so when I resize the window, it will always respect those dimensions? I am using malihu scroll bar, and I am loading my view into #app-views.
I have a border all around the window (10px), a navbar (50px), and 15px of padding until my body. Then, I have 15px bottom padding on body, a footer of height 35px, and 10 px bottom border.
Here is the basic HTML:
If you want your contents to be placed and resized while keeping the same distance from the top and the bottom of the window, you don't have to use jQuery or Javascript. Only CSS would do the trick. Try this without height attribute in your style code:
#app-views {
position: fixed;
top: 75px;
bottom: 60px
}
You can set left and right without width to get the same effect in horizontal dimension.
You say you have specific measurements to place your content on the page
(75px from top before my content starts, and I have 60px from bottom
of the page)
Well with jQuery offset you can get the top position of the element and you can also update the css top position on screen resize so that your content will always adjust its position on resize.
To see where the bottom of your content element is you could find the offset of the top of the content and add the content's height to get the bottom position of the content relative to the top of the page.
I would recommend doing this in CSS, perhaps by dynamically changing the jQuery object's CSS property. I would attend to it with a simple CSS selector. This works even when the window is resized. Have a look:
#app-views {
position: absolute; /*this will allow you to position it exactly where you want it*/
left: 50%; /*this will move the left side of the container halfway across the page*/
transform: translateX(-50%); /*moves the container left by half its width,
so that the centre of the container aligns with the center of the page*/
}
You can adjust the vertical position with the 'top' property and 'translateY()' in a similar way I demonstrated with transform and translateX().
If you want to use jQuery, you could try:
#('app-views').css('position', 'top');
Furthermore, I would also suggest that you do not maintain the 75px at the top of your page for all kinds of screen sizes. 75px may be suitable for a desktop but not for a mobile. If you do intend to make your website fully support mobile, it is often a good idea to design the mobile layout first, as it tends to by simpler. Then, you can use media queries to adjust it for the desktop. It really does work brilliantly. I've used it myself many times before. You can learn more about that here:
MediaQuery CSS

Center div vertically or affix to top of window if height is too great

I have a popup that's centered on my page using the following syntax:
position:absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-38%); //well, slightly lower than center...
This works very well - unless the height of my popup is greater than the height of my current window. It doesn't happen often, but when it does, I can scroll DOWN to see the additional content, but I cannot scroll UP any further than the top of the window to see what's above, like in this example:
I want to say vertically center, but if the height of the div would cause the top of it to not be displayed, just affix the div to the top of the window instead
What code would I add into this to achieve that?
This is similar to another post on SO:
How to center an element vertically in css in a scrollable container
I'm not looking to center the item with a flex container however. I actually cannot use flex in this instance, because the div is a result of a javascript plugin and I can't add a separate parent div outside of this without a LOT of work. I am looking to center UNLESS the height of the div is too great - then i want it to affix itself to the top of the window.
If I could place some sort of div above this popup div that has a height of 1px and force the popup div never to go higher than it, that would be fine as well. I have a very specific reason for why I want the div at the TOP of the window when it's very long - I don't want it centered 100% of the time (which is what the other post does.)
I've also tried using a pseudo-element like so:
.popUpBody::before {
content: " ";
height:50px; //this needs to be dynamic based on the height of the parent
width:100%px;
display:block;
}
as it moves the rest of the div down - but I'd need to find some way to use a dynamic height - it might be 300px, or it might be 5000px. This also doesn't seem like a very good way to do this.
I could make it so the height of popup div is always centered by taking out the second transform variable: transform: translate(-50%); - and this would be a last resort, but I would really like for the div to affix to the top of the window when its height is larger than the window itself - if this is possible.
Javascript/Jquery is fine if I need to use that to add dynamics.

Making off-canvas navigation scrollable

I have this off-canvas navigation: http://codepen.io/anon/pen/IcBis.
How do I make it scrollable like this one: http://codepen.io/jdigi/pen/nafJc ?
I only know how to make mine scrollable with scrollbar, but it still acts as a seperate element, rather than merged with rest of the body. Thanks!
Change the menus positioning from fixed to absolute. And to achieve full height, set the body's positioning to relative.
Updated code
You've (accidentally?) applied the fixed CSS rule to the #menu element.
The fixed CSS rule "nails" a block element to the viewport and keeps it from being scrollable.
This is ideal for watermarks but, I guess, not what you've intended.
Replace
#menu {
position: fixed;
with
#menu {
position: absolute;
That'll fix your problem.

Max height container with very tall fixed position container inside it

Having some trouble with a very basic CSS problem.
I have a container that has a max-height of 655px. Now to the very right of that container is a fixed position container (it must be fixed position due to what I'm doing). The fixed position container has an absurdly large height.
It needs that height because it will be filled with content, that you'll ultimately see by clicking buttons and by some javascript. (changing the scrollTop)
I'm not 100% sure what I'm doing wrong, but I basically need only 655px of the fixed position container to show. I'm not really sure why this doesn't work the way I have it setup.
Check out the JS fiddle here: http://jsfiddle.net/BG2bu/
.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}
I'm using this CSS to define the tall container. And I know if I change the position to absolute, it will constrain to the max height of it's parent container. I really need this container to be fixed though for other reasons. Is there any possible way to do this? Am I missing something simple here?
If this can be done with a JS/Jquery solution I'm definitely open to that.
Not sure this would be suitable for your needs but I've wrapped the .tall div with another container as position:fixed will not adhere to overflow:hidden in its container div.
http://jsfiddle.net/3DZ53/
Hard to tell if this suits your need or not, but could you...
.tall {
max-height: 655px;
overflow: scroll / hidden;
}

How can I enable scroll-bar only when window is resized smaller?

One page website.
Header at the top with anchor links
To different divs (sections) on the page.
Say my screen resolution is 1280*800 and each div section is max 800 and the content on each div section is visible when my browser is maximum size. I forgot to mention that scrolling is disabled so the other divs are only visible (scrolled automatically) using the anchor links at the top. So heres the problem, when I resize my browser, say for example theres only 450px worth of height on my browser, I can only see that amount of content on the screen and cannot scroll until the bottom of the div, so it hits the bottom of my browser.
Another point to understand is that all the elements in the div itself are not overflowing the height of the div so a simple overflow does not work because the issue is to do with the size of the browsers' height.
In essence when the browser window is anything less than 800px, the div is then covered up at the bottom by the amount reduced by the browser. I want the whole div (NOT THE CONTENT INSIDE IT) to be pushed up (top position) as far as it needs to so that the bottom of the div i.e. 800th pixel touches the bottom of the browser.
Any solution?
You can listen to changes in the window size and adjust the size of your divs to it. This way the div will always have the size of the window, so if it gets too small its overflow will show.
$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
$("div").css("height", $(window).height());
});​​​​
Working example at jsFiddle. Remember to set the div's overflow to auto, so they will show when the screen gets too small.
Update: from what I could understand in your update, your requirements can be satisfied with simple CSS. Let the html, body overflow at will, but set the "container" div's overflow to hidden (so it will only scroll one page at a time) and its height to 800px. When the browser window is resized to less than 800 px, the body's scroll bars will appear, letting you scroll the container div up and down. Both the container and the contentes will remain the same size: 800px.
html,body {
overflow: auto;
}
.container, .contents {
height: 800px;
overflow: hidden;
}
Working example at jsFiddle. Is that what you need? If you literally want to push the container div up until its bottom is aligned to the window, try setting padding-top or margin-top instead of top (though in this case I don't know how the scrolling will work).
Use media queries:
#media screen and (max-height: 450px) {
body { overflow: auto; } /* Or change the height or whatever */
}
I think the best solution to set min-height of main wrap 800px, else you have to add overflow hidden for your main content. Scrolling can be triggered by setting main content top position, but it must be absolute or similar. You cat write a function witch helps you to move main content changing it's top position.

Categories

Resources