We Keep Coding

resizing multiple highcharts in a table

I have the following html table setup
<div>
<table>
<tr>
<td class='plot1'>Some data 1</td>
<td class='plot2'>Some data 2</td>
</tr>
<tr>
<td class='plot3'>Some data 3</td>
<td class='plot4'>Some data 4</td>
</tr>
</table>
</div>
with the following CSS
.plot1,.plot2,.plot3,.plot4{
width: 50%;
height: 50%;
border: 1px solid red;
}
On a double click in any of the 4 table cells (these will contain chart objects) I would like to expand that cell to fill up the parent div and hiding the other 3 cells. On a subsequent double click I would like the table to have its original setup.
Here is the jQuery for just a double click on plot 1.
$('td.plot1').dblclick(function(e) {
if (e.ctrlKey) {
if ($(this).closest('table').children('tbody').children('tr').children('td.plot2,td.plot3,td.plot4').is(":visible")) {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('100%');
} else {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('50%');
}
$(this).closest('table')
.children('tbody')
.children('tr')
.children('td.plot2,td.plot3,td.plot4')
.toggle();
}
});
A working example of the above can be found here.
I am having trouble with a couple of things. I'd obviously like to be able to have one jQuery for a double click on any table cell instead of 1 for each cell. This behavior works fine until I introduce a highcharts object into each table cell then the height of the clicked plot does not change when trying to "minimize" back to its original size.
Any help,or different approaches would be appreciated as I seem to be stuck on this silly issue!

High charts api has something like redraw, this will help you to redraw charts when the container size changes. There is an excellent demo which help you to achieve it, Chart resize fiddle.
You can also go through the official documentation Here

Fixed header Table, on scroll using Jquery flickers in IE11 (internet explorer) on click of div scroll bar icon click.

FIXED HEADER TABLE ____When Clicking on scrollbar icon in ie11 flickers when using positioning as i cannot change the structure as it is dynamically coming from different sources and gets in table body structure
<tbody><tr></tr><tr></tr></tbody>
here is the fiddle attached works fine in chrome but when i check in ie it flickers horriblly when clicking on div vertical scrollbar below or above icon
Any Css or html solution is also acceptable until if there is no change in html structure
DEMOJs Fiddle Demo
JQUERY
$(document).ready(function() {
$('#theDiv').on('scroll', function () {
$('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
});

First we wrap #theDiv in a #theDivWrap (using jQuery) and use the css to style it...
The idea is to duplicate header row into a new div appended to #theDivWrap via JS
Now loop through table heading elements and create a div based similar styled heading which will come over table and is prepended to #theDivWrap and stays there forever even on scroll because wrap is not overflow auto...
https://jsfiddle.net/5dqnumh6/39/
Adjust negative margin bottom of .headerRow to suit your needs ;)

As Ie doesn't support overflow property for table group elements. So we can add a workaround to support the required behaviour. Add this css to your fiddle and try it will work.
tbody{display:block;height:auto;}
This will make your flicker go away in ie older versions. Although its a hack to make it work but there is no other pure css way. For more details and explanation you may want to read this link.
Updated fiddle is here.
But as you told me flickering not goes away.A workaround exists but it requires changing in ie settings. Go to internet options, navigate to advanced and scroll down until you see browsing section and uncheck "enable smooth scrolling". But I don't know whether it suits your requirement or not

This has been noted to be an IE11 bug, and according to this other SO question from 2014, shows up under the following conditions:
Three things can cause IE 11 flickering/choppy/delay for fixed
position element while scrolling:
If you have an "overflow: auto;" on the parent container element,
remove it.
Remove background-attachment:fixed; from the fixed position
element.
Remove border-radius from the fixed position element (mobile
IE only).
(Accepted answer by #Adamy)
Well, removing auto-overflow from your code takes away the whole purpose, so it's not the best solution here, and the others don't apply. What seems to work however (according to this MS Connect bug) is some HTML changes, separating the header row, and adding a custom scroll function to the actual table body. This JsFiddle page (kindly provided by folks that responded to the MS bug) has a working example:
https://jsfiddle.net/84y0vtyx/
(Including only part of the example with relevant comment. Full explanation requires reviewing the JsFiddle example.)
/* Only WinIE will fire this function. All other browsers scroll the TBODY element and not the DIV */
/* This is to hide the SELECT elements from scrolling over the fixed Header. WinIE only. */
/* toggleSelectBoxes added on 2005-01-28 */
/* Terence Ordona, portal[AT]imaputz[DOT]com */
window.onload = function() { addIEonScroll(); }

Hi here is my update based on your comment.
I copied the HTML part from your js Fiddle and just added this style tag to the above the table div and it works perfectly in microsoft edge and other browsers with no Jquery needed:
<style>
#headerRow
{
position: fixed !important;
top:0px;
background:Red;
}
</style>
////OLD
I apologies as you have mentioned that you cannot change the html table structure that comes down however see my old answer below which i wrote without this consideration. Can you consider using css to traverse the fixed table that comes down and apply a fixed position to the top header row? I have read that you can give a fixed position and a background color to a table row so that it remains fixed and the background prevents the text from overlapping How to make table row fixed at the top
You can use css to select the top row of the table:
Css:
table tr:first-child
{
position: fixed;
top:0px;
background:#FFF;
}
/// old answer:
Please may i suggest that you forget about using a document scroll event and just create a header with an absolute position if it is a div with an overflow scroll or a fixed position if it is just to remain fixed as the window scrolls. you can specify widths for your colums so that the fixed header lines up. so something along these lines (im just typing on my phone):
<table style="position:fixed; width:100% ">
<tr>
<th width="50%">
Test1
</th>
<th width="50%">
Test2
</th>
</tr>
</table>
<table style="margin-top:25px; width:100% ">
<tr>
<td width="50%">
a
</td>
<td width="50%">
b
</td>
</tr>
<tr>
<td width="50%">
c
</td>
<td width="50%">
d
</td>
</tr>
</table>
Especialy if we are talking cross browser compatibilty here- the simpler and most basic html/ css implementation the better. Css has provided us with a fixed class. There is no need to use jquery to watch your documents scroll.

I use this one my site:
https://raw.githubusercontent.com/jmosbech/StickyTableHeaders/master/js/jquery.stickytableheaders.min.js
Simply load it in your <head></head> section of the page and it will float the header of any table loaded on that page. It's cross-browser and gets the job done with no additional tricks, just plug & play.

Responsive columns and the columnizer plugin - How can I stop the text from wrapping/stopping at the certain point?

I'm working on a little project to learn html/CSS and use the Columnizer plugin.
The problem:
The project is a responsive table. If I resize the window the layout changes and adapts to the new window size. I want to prevent the "category titles" from being at the end of a column. For example like this.
Ideally I'd set manual rules. For example make the title stick to the first two rows of the table (and let it only break/split anywhere after that) and make it impossible that the last two lines are alone at the top of a column.
What I've tried:
Columnizer includes two CSS classes called "dontsplit" & "dontend" (both apply javascript) that I'm trying to use. According to the documentation it does that:
Any node that has the CSS class “dontsplit” won’t be split into multiple columns. This is handy to make sure that tables, etc, aren’t chopped in half if they land at the bottom of a column.
&
Any node that has the CSS class “dontend” will never be put at the end of a column.
The problem is that I can't seem to make it work. For example adding the "dontend" to the Category Title will not change anything. And the dontsplit (I use it in a ) always automatically applies "dontsplit" to everything as if the wouldn't have a closing tag.
Didn't work:
<div class="dontsplit">
<h2>Category Title</h2>
<table class="table table-hover" >
<tr><td WIDTH="67%"><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
<tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
<tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
</div>
How can I use them correctly? Or is there another simple way to do this?
Thanks
http://jsfiddle.net/vqsd8x16/

var defaults = {
// default width of columns
width:400px,
change in your code to have pixels will fix your problem.

How to adjust number rows in HTML table based on window size and swap data at timed intervals?

I have a set of tuples that I would like to display in a table. If there are more tuples than would fit in the window, I would like to cut the table short and only display that many tuples (rows), and then swap the data out at periodic intervals (allowing the data to be shown on a projector screen for example).
I can monkey around with Javascript enough to do this if I knew where to start, but I don't have much experience programming in the browser. i.e. I'm not even sure where to start looking.

Use the tabe width and row width as percentage like,
<table width='100%'>
<tr>
<td width='10%'></td>
..................
<tr>
</table>

Resize margin-top/bottom proportional to screen height

I have multiple rows of elements that i want to align vertical so that on different resolutions, the first screen (without scrolling) would be the same for each of them.
Luckly, i have some limits that i have to respect 800px and 1200px (vertical resolution). So only between those two values my margins have to increase/decrease proportionaly. If bigger or smaller than that interval the screen remains as it is to one of those limits.
Unfortunely, based on requirements i can't use media-queries or javascript for calculating this, so it has to be a pure CSS solution.
Is there a way of doing that? Without affecting height, width or left/right margins of the elements.
Or is there a javascript way of modifying that without injecting inline CSS property? I haven't heard of that but could it be possible to modify CSS files?
EDIT A non-table solution would be prefered.

No javascript ? The only markup i see able to achieve this (divide a page vertically + evenly) is a <table>
I fiddled an example here
You will have to trigger height of 100% on body and html first,
html, body {
height:100%
}
<table style="width:100%;height:100%">
<tr>
<td style="color:green;background-color:pink">a a</td>
</tr>
<tr>
<td style="color:blue;background-color:aqua">b b</td>
</tr>
<tr>
<td style="color:red;background-color:cyan">r r</td>
</tr>
</table>
Play with this, test it out to see if this solution suits your situation.
Otherwise, if you intent to use javascript, you can check out 'not fully supported' calc() in css3