Please see my fiddle below:
https://jsfiddle.net/okiewardoyo/s23v891m/11/
.affix {
top: 0;
}
To make the screen wider, scroll your screen.
What I want is, if I scroll, the sidebar become fixed when scrolling reach the bottom of header.
Then, when I scroll and reach the footer, the sidebar is not fixed and it follows the footer.
You will need to add an offset to the content class, and remove it again using jQuery.
Add the id 'content' to your content div. Then add the following jQuery script:
$('.sidebar').on('affix.bs.affix', function() {
$('#content').addClass('col-sm-offset-3');
}).on('affix-top.bs.affix', function(){
$('#content').removeClass('col-sm-offset-3');
});
You can test this here: https://jsfiddle.net/TimOgilvy/s23v891m/16/
Note I added a clearfix to the header.
Related
When a user scrolls through a webpage, how can I trigger animate css?
Is it a matter of when v-show="element" appears, trigger x?
Using Vue 2 + animate css
I found answer from Ikbel useful
How to display and transition when scroll position reaches element position in the screen?
you can achive this with custom directive which adds binding inViewport for window scroll event to elements that you want to animate.
I added data-transition to html element that I want to animate
<div v-vpshow data-transition="flipInX"><div>
and changed binding like this
el.$onScroll = function() {
if (binding.def.inViewport(el)) {
el.classList.add('animated')
el.classList.add(el.getAttribute('data-transition'))
el.classList.remove('before-enter')
binding.def.unbind(el, binding)
}
}
I'm trying to dynamically set the max-height of Bootstraps modal-body elements for all modal dialog boxes. I've written the following, which seems to work when the dialog is opened. I'm depending on the enforceFocus method to exist and to be called once the dialog is rendered. I realize there may be moment before the CSS property is set where the dialog will not be rendered exactly right, but I'm okay with that. Is there anything wrong with this solution? I know I have yet to account for resizing the screen with a modal open, but that seems the easier problem to solve.
(function ($) {
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.Constructor.DEFAULTS.keyword = false;
var oldEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function () {
oldEnforceFocus.call(this);
var $element = this.$element;
var maxHeight =
$("body").height() // full page
- $element.find(".modal-header").outerHeight(true) // modal header
- $element.find(".modal-footer").outerHeight(true) // modal footer
- ($element.find(".modal-dialog").outerHeight(true) - $element.find(".modal-dialog").height()) // dialog margins
- 5; // fudge factor
$element.find(".modal-body").css("max-height", maxHeight);
}
})(jQuery);
Thanks!
edit: To give credit where credit is due, this is based on
Correct way to extend Bootstrap Modal - lock, unlock.
If you don't want to use javascript, you can use CSS media queries and get close-ish to the height you need by using min-height. For example, define a media query on min-height: 540px, and set the max-height of the modal to something like max-height: 500px. Then define a media query at say min-height: 680px and set the modal to max-height: 640px. It's not fluid, and it requires several media queries to inch up to the largest size you want to plan for, but it will get you there.
#Josh solution is good with CSS and media queries but writing so many media queries where small devices has different screen heights e.g Iphone and SamSung G and N series, required alot of media queries to even calculate close-ish modal height on different screen sizes.
so setting height of modal (modal-body) dynamically according to media screen size and on small devices where there will be 2 types of media screen landscape and portrait, following few lines of code will put you very close-ish to your goal
Rendering modal HTML according to screen size with-in sec and later if screen size changes adjust it's height according to screen size
$(document).ready(function () {
setInterval(Dimension, 100);
function Dimension() {
var doc = $(document).height(); // document height
var head = $(".modal-header").height(); // modal header height
var footer = $(".modal-footer").height(); // modal footer height
var modheight = doc - head - footer - 65; // 65 is extra margins and it will not effect the height of modal any way if not changed.
$('.modal-body').css('height', modheight);
}
});
Note
Few Changes required in Modal CSS
CSS
.modal-dialog {
margin: 0px auto !important;
}
.modal-body {
overflow-y: scroll; // In-case the content in modal-body overflow so it will have scrolling.
}
Fiddle
You can check the modal height adjust itself by increasing and decreasing the fiddle result window's height and width.
If you look at the bootstrap demo that is hosted here And scroll down to the demo that has all 4 buttons. Now click on the left popover, it shows properly. However, When I shrink or extend the screen the popover is no longer anchored to the proper point. Is there a way around this?
This has to do with the container property for the popover.
http://jsfiddle.net/yvkhbw4b/1/
See the attached example. Show both popovers then resize the window from xs breakpoint to sm breakpoint. You will see the top item will seperate from the button as the container defaults to body. (I'm also setting it to body though options). The second item is attached to the parent div so that one remains attached to the element even though the breakpoint changed.
Documentation on popover options
Appends the popover to a specific element. Example: container: 'body'.
This option is particularly useful in that it allows you to position
the popover in the flow of the document near the triggering element -
which will prevent the popover from floating away from the triggering
element during a window resize.
$('#btn1').popover({
'container': 'body'
});
$('#btn2').popover({
'container': '.col-sm-12'
});
Potential Fix: you could add the following code. Currently only handles bottom aligned popovers but you can add options for other alignments.
$(window).resize(function () {
$('.popover.in').each(function () {
var el = $('[aria-describedby="' + this.id + '"]');
if ($(this).hasClass('bottom')){
$(this).css('top',el.offset().top + el.outerHeight(true));
}
});
});
http://jsfiddle.net/yvkhbw4b/2/
I'm using the supersized jquery plugin in order to display a fullscreen background slideshow.
Look at this website (it's not my own but I'm using the same structure):
http://mysampleconcept.com/situs4/
As you can see (for example if you give the header some opacity) the images begin at the top of the body.
But I want them to begin below the header (so that the header doesn't cover the top of the image).
If you give the supersized LIs for example top: 100px; the whole image moves down so that the bottom of the image disappears below my footer.
So that's not the solution I want.
So all in all which I need is the image to stretch to the biggest size it can, while still being inside the window not stretching over the top 100px nor bottom.
How can I do this?
Sorry, my English is not the best...
I found this solution but I don't know how to implement it: https://stackoverflow.com/a/12889088/1981981
You can use the solution offered in the question you refered to as a starting point. Just place it right below the $.supersized() inside your document ready function.
Since you want a top offset, we have to modify the top value aswell. I modified the snipped to suit your needs:
var portfolioSize = function() {
var headerOffset = 100;
$('#supersized').css({
height: $(window).height() - headerOffset,
top: headerOffset + 'px'
});
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });
I changed the $(window).load Event to a direct call, since we place the code inside the document ready function.
Don't forget to modify the CSS for positioning as mentioned in the other answer (https://stackoverflow.com/a/12889088/860205).
I'm using Twitter Bootstrap with fixed layout along with jQuery Masonry on a specific page.
It's working, however starting from the second row the top positions of the divs are miscalculated and are partly covering the elements of the first row.
It looks like the script quits before rearranging the elements.
Strangely, when I open the inspector in Chrome or slightly resize the viewport the divs are jumping to their correct positions. Refreshing the page sometimes helps, sometimes doesn't...
My masonry script:
jQuery(document).ready(function(){
jQuery('.span9').masonry({
itemSelector: '.span3',
columnWidth: function( containerWidth ) {
return containerWidth / 3;
}
});
});
Is this normal behaviour? Should I add window.resize to the above script?
Placing the masonry script in the page itself or in the header, footer doesn't change it's behaviour.
I'm calling masonry.js right after jQuery, before any other Bootstrap js.
Just read the help Section here http://masonry.desandro.com/docs/help.html
The Script runs before all images have been loaded, you have to trigger it after the window loaded
$(window).load(function(){
$('#container').masonry({
// options...
});
});