I want to make use of Infinite Scrolling using the Semantic UI Visibility Behavior but within an overflow-y: auto div rather than in relation to the whole page. Here is a simplified version of my code:
HTML
<div id="myDiv">
<!-- lots of lines of content -->
<p class="myElementWithinDiv">Alert should appear when this is visible</p>
</div>
CSS
#myDiv {
height: 200px;
overflow-y: auto;
}
JQuery
$('.myElementWithinTheDiv')
.visibility({
once: false,
observeChanges: true,
onTopVisible: function() {
console.log('top visible');
}
});
JSFiddle of the above working without the CSS restricting the DIV height: https://jsfiddle.net/jtge3s2o/
JSFiddle of the above not working with the CSS restricting the DIV height: https://jsfiddle.net/wznxkef2/2/
Is there a way to make this work with the div set to a fixed height?
As per the Behavior's Settings the context can be set as follows:
$('.myElementWithinTheDiv')
.visibility({
once: false,
context: document.getElementById('myDiv'),
observeChanges: true,
onTopVisible: function() {
console.log('top visible');
}
});
Related
So, I'd like to set the height of the collapsed navigation of bootstrap to 100% height.
e.g. https://getbootstrap.com/examples/navbar/ this should span over the whole screen.
I did some research and mostly found people using height: 100vh; but this is not dynamics, shouldn't matter too much in the end though, but I still don't like it.
Usually, one could e.g. do:
<div id="bar">
<div id="foo">
test
</div>
</div>
html,
body {
height: 100%;
}
#foo, #bar{
background-color: red;
min-height: 100%;
}
But I'm asking myself now, what's the best approach to implement this when using bootstrap v3.
you can hide the Content while the Navigation is collapsed using JavaScript..
for example: document.getElementById("ID").style.display = none;
if there is no content under the Navigation, there is nothing to scroll... :P
So I'm asking myself then, how I can deactive scrolling when the navigation collapsed?
I somehow fail listening to the proper event
As per your comment, I see the issue is that you dont get the proper point of the collapse. The plugin provides the events on collapse.
By bootstrap documentation this is how you do
$('#foo').on('hidden.bs.collapse', function () {
// do something…
})
I have the following html:
<div class="wrapper">
<img class="img" src="img.png">
<div clas="text">
This is sample text.<br/>
This is sample text.
</div>
</div>
I also have the following css:
.wrapper {
width: 1200px;
margin: 0 auto;
}
The image can be very big (4000px in width and 3000px in height). I cannot set the height of the div.wrapper. I cannot assume the amount of the text either. How can I use CSS to display the fully scaled-down image plus text in the viewport without the vertical scroll bar?
This is the example in jsfidille https://jsfiddle.net/c2q1w1tq/2/
In case you are ok with a solution that also involve javascript you can use this:
function updateImageHeight() {
textHeight = $('.wrapper').height() - $('.wrapper img.img').height()
imgMaxHeight = $('.container').height() - textHeight
$('.wrapper img.img').height(imgMaxHeight)
}
$(function() {
updateImageHeight();
});
$(window).on('resize', function() {
updateImageHeight();
})
I used jquery here
The $(window).on('resize' will also give you a solution for window-resizing.
Here is a working jsfiddle:
https://jsfiddle.net/Ly8sac3v/
(I removed margin/padding for the html/body elements and wrapped everything in a container. In case you can't do that you can use the above code with the body element, however you might need some changes there).
I want to use a fixed header in my Bootstrap modal, however if I set .modal-header as position:fixed it scrolls along with the moda content. How do I create a trully fixed header in BS modal?
Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.
You can easily do this using the CSS3 vh unit together with calc. Both vh as calc have pretty good browser support (IE9+).
The vh unit is relative to the viewport (= browser window) height. 1 vh is 1% of the height and 100vh means 100% of the viewport height.
We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.
Set either the height or max-height to calc(100vh - header+footer px).
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
See the jsfiddle
Here's a simple trick.
Let me assume that i have to fix the div with class "fixedHeader"
Simple Jquery Way:
$('.modal').scroll(function() {
var a=$('.modal').scrollTop();
$('.fixedHeader').css('top',a+'px');
});
CSS
.fixedHeader {
position:fixed;
}
Whatever i have answered above is for normal bootstrap using jquery.But if someone is using angular bootstrap for the modal then
Angular
$timeout(function() {
angular.element('.modal').scroll(function() {
var a = angular.element('.modal').scrollTop();
angular.element('.fixedHeader').css('top', a + 'px');
});
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */
CSS
.fixedHeader {
position:fixed;
}
Make sure you have jquery dependency installed in both cases.
My solution may seem a little silly, but it details the steps I took to solve this problem for my use case.
I tried something like ritz078's answer, but what I found was that it did not work well on iOS when scrolling, since Safari likes to do things its own way.
So, my solution was to duplicate the bit of code I wanted to affix and place that duplicate code outside of the modal altogether in its own hidden wrapper:
<div class="fixed-header">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
</div>
Then I used JS to 1) make the duplicate code visible after I scroll through the modal a bit, 2) close the duplicate code whenever I click out of the modal, and 3) restore functionality to the duplicate modal's close button:
$('#myModal').on('scroll', function() {
var threshold = 60;
if ($('#myModal').scrollTop() > threshold) {
$('.fixed-header').addClass('affixed');
}
else {
$('.fixed-header').removeClass('affixed');
}
});
$('#myModal').on('hide.bs.modal', function (e) {
$('.fixed-header').removeClass('affixed');
});
$('.fixed-header button').click(function() {
$('#myModal').modal('hide');
});
The challenge here is matching the modal's styling (particularly its width and margins), but this solution lets you scroll the modal freely on iOS without looking funky, which was my goal.
JSFiddle (forked from Jasny's answer to show how it's different in scope from his answer)
As per my comment, this was actually an improvement in Bootstrap 3. Allowing long content and having the whole modal scroll, not just the 'content' of the modal.
You can override it with something like this, but it's not as nice functionality.
.modal {
overflow: hidden;
}
.modal-body {
height: 300px;
overflow: auto;
}
Demo
In javascript add a class to modal:
windowClass: 'framework-modal'
In css adjust o modal-body:
.framework-modal .modal-body {
max-height: 600px;
overflow: auto;
}
In Body content
CSS:
body{
overflow:hidden;
}
I've the following mark up
<div class="row-fluid">
<div class="span4">
<ul class="test">
<li>Arun</li>
<li>Krishna</li>
<li>Soundar</li>
</ul>
</div>
</div>
And css
.test {
height: 500px;
margin-top: 10px;
overflow-y: auto;
padding: 10px 4px 70px;
}
And script
$('.test li').draggable({
revert: 'invalid'
})
If you drag the items to the right side, it disappears, I don't know why it is behaving so.
If the overflow-y: auto; style is removed from .test it works fine.
Demo: Fiddle
You may have to increase the width of the preview tab because of the responsive css to replicate the issue in the fiddle
I know this is an old question, but I think I found an answer. The reason the list disappears is because you drag it off the edge of the div and it begins to auto scroll. So, you you just remove it from the flow of the page when it is clicked on, like so:
$('.test li').draggable({
revert: 'invalid'
}).mousedown(function() {
var that = $(this);
//create div to fill the vacated space
$div = $('<div></div>');
$div.width(that.width());
$div.height(that.height());
$div.insertAfter(that);
//remove from flow of the page, set a different background color to see it work
that.css({'position':'absolute'});
});
New fiddle here
The problem with the CSS on bootstrap-combined.min.css. It sets some width due to that it causes the issue.
So remove bootstrap-combined.min.css and try.
Refer LIVE DEMO
UPDATE:
Add border: 1px solid; to your .test class then you will see the actual difference, why it is working if you comment overflow
If you debug on firebug, you will see below CSS class (that is from bootstrap-combined.min.css) is causing your issue
.row-fluid .span4 {
width: 31.4917%;
}
All you required was, the 'min-width:1100px', and 'width:100%;'
I have updated fiddle for you
Fiddle Link : http://jsfiddle.net/br57F/5/
Its working fine. overflow works with content, while draggable, will not add content to parent div. it will just change position in run time of the element.
I hope this will do :)
Just during drag, wrap dragged element by a div include position:absolute style.
So instead this code:
$('.test li').draggable({
revert: 'invalid'
})
Use this one:
$('.test li').draggable({
revert: 'invalid',
start: function(event, el){
$(el.helper[0]).wrap( "<div style='position:absolute;'></div>" );
},
stop: function(event, el){
$(el.helper[0]).unwrap();
}
});
Live Demo
This is probably not possible with CSS, but maybe I'm wrong:
I have a document structure like this:
BODY
DIV[A]
DIV[B]
DIV[A] is position:absolute with fixed with and centered on screen. It has no height setting.
DIV[B] is position:absolute with top:300px. This is the actual content DIV. Inside that, I position everything with position:absolute. Because I love position:absolute. It gives full control over positioning. No ugly text flow headaches... it's so nice.
Ok. But the problem now: DIV[B] is always only that height what I tell it to be. Now, maybe there's a cool CSS trick that would pull it always down to touch the bottom of the browser viewport?
To set the height to dynamically be the window height - DIV[A]'s height, you'll have to use JavaScript/jQuery and keep calling it with a SetTimeout.
Alternately, if it suits your needs, you can set DIV[B] to be position:fixed; bottom:0px;
<body onload="setupLayout();" >
...
<script language="javascript" type="text/javascript">
// ACTIVITIES TO RUN FOR THE PAGE
function setupLayout() {
setInterval('adjustLayout();', 1000);
}
// ADUST THE MAIN CONTAINER (content panel) LAYOUT
function adjustLayout() {
try {
var divB = $get('divB');
var divAHeight = 20px;
divB.style.height = document.body.clientHeight - divAHeight ;
}
catch (e) { }
}
</script>
</body>
#div_to_touch_the_bottom {
position:fixed;
bottom:0;
top:0;
left:25%;
right:25%;
}
This DIV will touch the bottom of viewport, you can modify its left and right according to your needs. I am not sure that this the answer you are lookign for but it could be a good start
When you want DIV to be a position:absolute, it should be in a position: relative container.
<div style="position: relative">
<div style="position: absolute; top: 300px">
<h3>Content Header</h3>
<!-- Content -->
</div>
</div>
So regarding your problem with DIV[B], you can mix between <table>s and <div>s.
I suppose DIV[A] is your header and DIV[B] your main content div and you would like to always have your content div take all the page when there is not a lot of text in it, right?
If I remember correctly, because I can't test it at the moment, you could:
html, body {
height: 100%;
}
DIV[B] {
height: 100%;
}
I think that should do the trick.
Edit: Here is a good example that might help you: http://www.xs4all.nl/~peterned/examples/csslayout1.html