I have a table in which the even rows have a colspan spanning the width of the table and will contain details about the preceeding row. I'm trying to write a script that will resize the height of the row when the user clicks it to display it's contents. I am using a mixture of javascript and jQuery to do this and it works perfectly in IE9, however it doesn't work in anyother browser.
here is my test case...
http://www.duncangravill.com/Home/RevealResultsTest
it breaks the same way in all other browsers.
Is this a common problem with the jQuery Size effect? Does anybody know if there is a fix for this?
Thanks,
Try changing:
$(idToSelect).effect("size", { to: {height: 300} }, 500);
To:
$(idToSelect).animate({height:'300px'},500);
Related
I need to implement a table, in which I can both resize columns and scroll trough the body (as seen here). I am currently using colResizable to resize columns, but I was unable to find a way to make the body scrollable and still keep the columns resizable. colResizable only changes the header's width and expects the columns to behave the same way.
As far as my research went, it is only possible to do scroll through the body by setting display: block on <tbody> which will ultimatly screw up colResizable.
Changing the width of the columns on each drag via JavaScript is possible, but I'd rather go for a html + css only solution, since the table will contain multiple hundred if not thousands of rows and it might effect the performance.
If one of you guys knows a way around this, please let me know.
Edit 1: Unfortunately I am not able to post any code related to my project, since it may contain confidential information, but I believe it is not needed anyways since this problem is not specific to my existing code.
Edit 2: I forgot to mention, that I am using <thead> for my headers. As C4pt4inC4nn4bis pointed out, it is easily doable to resize columns and scroll through <tbody> when not using a <thead> tag. Since I want my headers to stay on top of the table, even while scrolling, I can't simply move everything in <thead> to <tbody>.
It's impossible to show Y-axis scroll at without display:block option.
Also colResizable doesn't support this situation.
Without , the headers can't not be fixed on the top.
Check this code. I manually resize columns whenever resize the table head.
There is an event handler (onDrag) in the colResizable plugin.
$("table").colResizable({
liveDrag: true,
onDrag: function (e) {
$("tbody tr td:nth-child(1)").width($("thead th:nth-child(1)").width());
$("tbody tr td:nth-child(2)").width($("thead th:nth-child(2)").width());
$("tbody tr td:nth-child(3)").width($("thead th:nth-child(3)").width());
$("tbody tr td:nth-child(4)").width($("thead th:nth-child(4)").width());
},
});
If you do not use the liveDrag option, use the onResize event handler.
Hope it helps.
Thank you.
For text editing purposes I use contenteditable divs in a website. When I edit some text the div height is growing dynamically and all other elements on the webiste below shift downwards. That's what I want. Finally I store the content via Ajax on a server. So far everything is working fine.
The problem is when I reload the content from the server the height of the contenteditable divs does not grow automatically to show all it's content. Instead its height stay in the initial size.
BTW, this is true for all browsers.
Does anyone have some hints to overcome this issue ?
EDIT
This is the html and javascript contendeditable relevant code
<div class="editable" contentEditable=true onkeyup="autoGrowSave(this)" onblur="update(this)" ></div>
function autoGrowSave (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
I use above javascript function to auto grow the contenteditable. Actually I do not know if even I need it. The jsFiddle example from Abhitalks below does not need one. Hmm ... I have to try without...
To store content on a sever I use the onblur attribute, which works perfect.
I answer the question myself. Thanks to Abhitaks jsFiddle I found the problem which limited to auto adjust the height. For this I appreciate the answer of course ;-)
In a CSS declaration I gave the class editable an initial height of 20px. Because of this the contenteditable could not adjust its height automatically. In turn I needed the javascript function autoGrow() to compensate this issue. While this "crazy" approach worked when editing the content, it did not work when reloading the content.
So the solution is to eliminate the heightin the CSS declaration and get rid of the javascript function autoGrow(). Now it works perfect !
I am calculating the width of all the elements with a class, on desktop this works fine(all total width is 2862) and I get an exact figure. On mobile however all elements are seen to have the same width(290px) causing the overflow of the scroll to take up 2 lines.
var daywidth = 0;
$(".timetable-day").each(function(){
daywidth += $(this).outerWidth();
});
jsfiddle: https://jsfiddle.net/7j8kskf0/
I have tried width, outerwidth and this.offsetWidth(normal javascript) and I don't know what is causing this problem. Any help would be great.I am using bootstrap 3.
The code you posted here is working on Android & iOS.
See for yourself: http://pascha.org/test/test.php
Your Problem must be somewhere else.
Possible thoughts:
In bootstrap some classes expand to 100% width on mobile browsers.
I think you may have used one of these classes.
OR You have changed some style for mobile output and dont remember;-)
The solution I found from this was to give the timetable-inner/inner scroll div a min-width of 3000px in css, then modify the javascript:
$(".timetable-inner").css("min-width", daywidth + "px");
This works as expected. The space gives all the elements the ability to go on the same line then the JavaScript shrinks the div.
I'm using Isotope (http://isotope.metafizzy.co). Testing the reLayout method by using the example provided here (http://isotope.metafizzy.co/demos/relayout.html), copied the css, js to (http://punkbit.com/webzine/isotope.html) but when I click in the first element all other elements go to the first column. I wonder why this happens ?
If we do the same in the official example, it works properly, apparently!
I'd like to toggle a class in the first element and by doing that, having the other elements take the vertical space and positioned properly. I tried to change the width of the container, etc but no success!
I've also got the same issue happening with Masonry:
http://codepen.io/anon/pen/BKAdH
If clicking in the first element, it won't work. All elements will be placed in the first column.
Also tried different layout modes etc without success
Sorry,
I've found the answer:
http://punkbit.com/webzine/isotope2.html
The property "columnWidth" needs to be set.
For Masonry:
http://codepen.io/helderoliveira/pen/gwvjA
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!