How to drop max-height/overflow properties when Bootstrap column layout changes - javascript

I have two col elements in a single Bootstrap row/container. The left side one is a fixed size, containing a static table. The right side one contains a table, like the left, but is dynamically generated based on data retrieved when the page is loaded.
So, of course the right table can be taller than the left one. I've got the right table's max-height property set to the left table's height, and overflow-y: scroll, figured out in JavaScript. This looks and works great on desktop.
Code gist for reference, HTML:
<div class="container">
<div class="row">
<div class="col">
<table id="tblLegend">...</table>
</div>
<div class="col">
<table id="tblStops">...</table>
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
var mxHt = $("#tblLegend").css("height");
$("#tblStops").css("max-height", mxHt)
.css("overflow-y", "scroll");
});
However, I'd like to be able to remove the max-height (and subsequently, the overflow-y) property from the tblStops element if the page is displaying in a mobile format, or is resized to a mobile screen's size. In this case, the two tables would be stacked on top of one another vertically, and there would be no need for a separate scroll pane for mobile devices. (Not to mention that an internal scroll pane on mobile is irritating and difficult to control sometimes).
Is there a relatively easy way to do this without resorting to window.size or window.resize events? I just don't like the idea of having to check for hardcoded screen/window dimensions.

You can detect the screen size in JavaScript. As you are using JQuery:
if ($(window).width() < 700) {
$("#tblStops").css("max-height", "auto")
.css("overflow-y", "auto");
}
Auto value will add or remove scroll according to the requirement in overflow. In height minimum height will be applied for content.
NOTE: Might not work with Iphone's.
EDIT: width() will return value based on browsers and for iphone width 700 might not work.

Related

Trying to get my list to scroll and fit within the page

I'm displaying a list of results on my results page that require me to scroll, which is fine, but the whole page( nav bar, maps next to results, etc) all scroll down as well. I'm trying to figure out how to get JUST the list if results to be scrollable. I've tried to put
overflow-y: scroll
on a number of of the div's surrounding the list and
overflow-y:hidden
on the body to prevent the whole from scrolling down
but nothing seems to work. All I can achieve is a bunch of y - scroll bars that are all unusable,
where the outer most scroll is hidden (disabled) and I can't scroll any of the inner most scroll's, even though there is result content below the screen.
Can anyone suggest another way to create a scrollable div list on one side of the page while the other side remains unscrollable. Just like Airbnb.com's result page. Or please point me to some examples or Fiddle examples.
Try to give your div a fixed size.
The <div> needs to have a set height but you need this to be responsive. The best way to do this to support older browsers is using JavaScript. This <div> will resize to the current window height upon resize, the width is up to you, if you want it like Airbnb's then you'll need to set the width to 50%.
HTML:
<body onresize="setDiv();" style="overflow-y:hidden;">
<div id="listResults" style="border: 1px solid black;overflow-y:scroll;">some list results here</div>
</body>
JS:
function setDiv() {
var x = window.innerHeight;
document.getElementById("listResults").textContent = "height: " + x;
document.getElementById("listResults").style.height = x + 'px';
}
P.S. I only put the border there so you could see that the div was actually resizing.

Vertically Scrolling in Window 8 store app

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...

Divs too wide when hiding/showing

I have two divs that contain two other divs each. One containing DIV's display is set to none. I have a button that toggles the containing DIVs so I can alternately hide/show the containing div and thus the two divs inside. The inside DIVs are set the 49% width, floated left/right. Problem I have is the fist time the visible DIV is hidden and the hidden one displayed the inside two divs are way too wide. If I resize the width of the browser just a tiny bit with my mouse they are the desired size and any time I toggle the visibility from here on out all is fine. If I reload the page it is wrong on the first toggle. Works the same in IE 10 and Chrome so don't think a browser issue.
The inner two divs both contain high charts that are generated and rendered to the inner divs I want them to be side by side and almost (99%) the width of my page.
Here is snipped of my DIVs to be hidden and shown that contain the inner DIVs with highcharts
<div id="highChartsNG" style="width:99%;display:none;">
<div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>
</div>
<div id="LowChartsPEAK" style="width:99%">
<div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>
</div>
This is a snippet of the javascript function I call on a button click to toggle on/off on the display of two containing DIVs
document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";
Fiddle showing problem, see comment of mine below on how to reproduce http://jsfiddle.net/rplace/UTTz4/1/
Okay, after hours of searching I finally found the problem (I think). I was determined to find the solution =).
The problem is multiple-fold.
The first problem was the display:none; property on the second chartcontainer. For some reason the widths calculated for the charts and their containers were incorrect for the hidden div. So I removed the property from the HTML, and instead hid it dynamically with document.getElementById("LowChartsPEAK").style.display = "none"; in the JS right after the chart rendering functions. If you do this, your SVG's will fit your containers already, although the last one has a slight shift.
Apparently HighChart doesn't like percentage-based parent containers. When you go to your updated fiddle , run the fiddle with both:
<div id="wrapper" style="width: 800px;">
<div id="wrapper" style="width: 100%;">
Open the console and check the results (container name - SVG width - container width). When the wrapper is given a pixel width, all container widths are equal (as it should be). Now check the wrapper with percentage width: your last SVG will be about 6 to 20 pixels smaller. The only solution I have found for eliminating that small shift in the last container, is that somewhere a top container must have a pixel-width.
EDIT: pt's and em's also work. It's only % that causes problems
If you are hiding DIV, you should be aware that browser won't calculate %-based widths with display:none. Then if browser won;t calculate DIV, then also Highcharts are not able to do it ;)
Check this FAQ - when showing chart update his size or call reflow().

Dynamically generated “floating divs” with even width but not even heights, align issue

I will be very appreciative if anyone has a lead how to solve this:
Problem description:
we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) .
the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width.
divs order is left to right, always by hirarchical order 1,2,3 etc...
How can we achieve this without creating gaps? ( casued by traditional floats method).
Number of divs is dynamically created and not limited...
Solution should be ie8,ie9 compatible
thanks, Jonathan. ![enter image description here][1]
example illustration can be found here:
https://app.box.com/s/6y89dlan1jt8bpjvcgb9
Have you considered using something like Masonry?
Pure CSS solution - Cross Browser (IE6+)
Use a column layout instead of floating.
This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.
For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.
You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).
Here's the basic HTML & CSS for the 3 column layout
<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>
.Container {
float: left;
width: 31.33%;
margin: 1%;
}
The script in the fiddle is for the sole purpose of adding dynamic content.
and although the content that I had have a fixed height, it will obviously work with changing heights as well.
BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This

Hide child <div>s as parent div shrinks?

I am trying to write a zoom in/out feature on a web app I am making using the jqueryUI slider.
I am having difficulty handling when my parent div shrinks too much, and cramps its child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Here is the relevant section of code I have
http://jsfiddle.net/aQKwE/
Basically I have the parent div (class 'puck') that is being shrunk using a jquery slider. For this code I just used a text box, but same idea.
When I shrink that div, the containing divs stick around and are very garbled.
I want to be able to remove the middle child div when it becomes to cramped, leaving the left and right child divs to occupy all the space
Furthermore, if it becomes to cramped yet after that, I want to remove the right div, leaving only the left.
Finally I want to be able to remove all contents so that nothing more than the background of the parent shows.
Is there a way to do this easily, preferably through CSS? I don't want to write more javascript code to set 'display:none' on each child div, since it seems like some CSS rules should handle this.
Any ideas?
There's not really any logic built into CSS to handle something like this. You can set rules based on viewport size, but that won't help in this case.
I updated your jsfiddle with this code so you can test it and see what you think, but essentially I just added some checks in your javascript function to hide based on the width submitted.
var newwidth = $('#text').val();
$(".middle-number").show();
$(".right-number").show();
if (newwidth < 280) {
$(".middle-number").hide();
}
if (newwidth < 180) {
$(".right-number").hide();
}
$('.puck').css('width',newwidth);

Categories