I am building an interface to display real time records which are provided via Ajax. The records should be shown in a rectangle of a set height, and the newest record should be located at the bottom of this rectangle. As new records come in, they are inserted at the bottom of the rectangle, and the older records move up. When more records than can fit in the rectangle have arrived, the rectangle should have a scroll bar so that old records can be viewed.
Ideally, solely CSS would be used, however, JavaScript/jQuery solutions are acceptable.
My first attempt was to use CSS, and is shown below and also located at https://jsbin.com/juyapihile/edit?html,output. Note that I don't really have two tables, but have only shown two so you can see the records located at the bottom on the first and the lack of the scroll bar on the second.
For this attempt, I included the records in a table which was positioned absolute with bottom equal to 0 within a div which was positioned relative. Unfortunately, when doing so, the scroll bar doesn't work.
How can this be accomplished? Or generically,how can a positioned element have a scroll bar?
<!DOCTYPE html>
<html>
<head>
<title>Client Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.table-container {
height:100px;
overflow-y: scroll;
position: relative;
border: 1px solid black;
padding: 5px;
margin-bottom: 20px;
}
#at-bottom {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<p>This keeps the newest record at the bottom</p>
<div class="table-container">
<table id="at-bottom">
<thead><tr><td>hello</td><td></td></tr></thead>
<tbody></tbody>
</table>
</div>
<p>This uses a scroll bar</p>
<div class="table-container">
<table id="with-scroll">
<thead><tr><td>hello</td><td></td></tr></thead>
<tbody></tbody>
</table>
</div>
<p>How do I do both???</p>
<script type="text/javascript">
$(function(){
var count=0;
setInterval(function(){
console.log('x')
count++;
$("#at-bottom thead tr").clone().appendTo($('#at-bottom tbody')).find('td').eq(1).text(count);
$("#with-scroll thead tr").clone().appendTo($('#with-scroll tbody')).find('td').eq(1).text(count);
}, 2000);
});
</script>
</body>
</html>
I read your post again and wasn't sure if you wanted the text at the bottom of the div when the text was shorter than the height of the div. My other answer works if you want the text filling the div from the top and then getting a scrollbar and keeping the last text at the bottom. If you want to keep the text at the bottom all the time, then I would use a flexbox solution as follows:
var wrap = document.getElementById('wrap');
var body = document.getElementById('body');
var count = 0;
setInterval(function() {
var row = document.createElement("tr");
var data = document.createElement("td");
var text = document.createTextNode("Hello " + count);
count+=1;
data.appendChild(text);
row.appendChild(data);
body.appendChild(row);
wrap.scrollTop = wrap.scrollHeight - wrap.clientHeight;
}, 1000);
.table-container {
display:flex;
flex-direction:column;
height:75px;
width:300px;
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
justify-content:flex-end;
}
.table-container div {
overflow-y: auto;
min-height: 0px;
}
<div class="table-container">
<div id="wrap">
<table>
<tbody id="body">
</tbody>
</table>
</div>
</div>
The other answer was a good start. You have to remove the "position:absolute". Then, add an id to each div and set the "scrollTop" attribute like this any time you add elements to the table:
var div = document.getElementById('divID');
div.scrollTop = div.scrollHeight - div.clientHeight;
Here it is working:
var div = document.getElementById('divID');
div.scrollTop = div.scrollHeight - div.clientHeight;
.table-container {
height: 75px;
overflow-y: auto;
position: relative;
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
}
<div class="table-container">
<table>
<tbody>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello last</td></tr>
</tbody>
</table>
</div>
<div id="divID" class="table-container">
<table>
<tbody>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello last</td></tr>
</tbody>
</table>
</div>
The problem is the inner table's height is as tall as it needs to be, a table can't have a scrollbar, and the outer div's scrollbar is off. Also generally, scrollbars require height to be somewhat specified.
To solve your problem, I think you should remove position absolute on your table. This will cause the div to scroll. Next, every time a new update comes in via ajax you should simply el.scrollTop = 999999999; where el is el = document.querySelector('.table-container')
Also note, you may want to detect when the user is not at the bottom, and not automatically scroll the to the bottom. You can do this, but measuring el.scrollTop and add the height of the div to it and compare the scroll height of the el. This should do it: el.scrollTop + el.height === el.scrollHeight.
Remove: position: absolute; on the table:
.table-container {
height: 200px;
overflow-y: scroll;
position: relative;
border: 1px solid black;
padding: 5px;
margin-bottom: 20px;
}
.table-container table {
bottom: 0;
}
<div class="table-container">
<table>
<tbody>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<tbody>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
<tr><td></td><td>Hello</td></tr>
</tbody>
</table>
</div>
Related
i am having trouble in placing my div in front of my table
here is my css for the div I want to pop up
#sc_div_option{
width:300px;
height:300px;
border:solid gray 1px;
display:none;
position: fixed;
float:right;
background-color:green;
z-index:99999999999999999999999999;
}
and here is my table style
#excel_table{
width:auto;
height:100%;
background-color:#fff;
min-height: 30%;
z-index: -1;
}
I already added z-index and position but does not work
appreciate your help
maybe you are wondering why I am doing this..
i want to have a menu list when I click one of my table data and pop up the div in front here is my jquery responsible for that
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(document).on("click",".scname_value",function(){
$('#sc_div_option').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
})
Tingug sad tawn mo please bitaw ni...
here is my image to show the problem
Just basically set your z-indexes for your content div set z-index: 1 and for the div to pop up to z-index: 2
The CSS z-index property only works on positioned elements. The only issue you seem to have is that #excel_table doesn't have a position attribute. Just set it to relative or absolute (in your case, relative seems to be what you want).
Example of z-index with and without position attributes: https://jsfiddle.net/7zxgrb3k/1
var dir = document.querySelectorAll('div');
for(var i=0; i<dir.length; ++i) {
dir[i].appendChild(document.createTextNode(dir[i].className));
}
.absolute { position: absolute; }
.relative { position: relative; }
.front { z-index: 10; }
.back { z-index: 0; }
div {
display: inline-block;
margin-right: -20px;
background-color: #333;
border: solid 4px #eee;
border-left: solid 4px #e00;
border-right: solid 4px #00e;
color: #eee;
width: 100px;
height: 100px;
}
<div class="front"></div>
<div class="back"></div>
<div class="front"></div>
<br />
<br />
<div class="front relative"></div>
<div class="back relative"></div>
<div class="front relative"></div>
<br />
<br />
<div class="front absolute"></div>
<div class="back absolute"></div>
<div class="front absolute"></div>
from my understanding , you want to show the popup on top of your table.
for that you have to play with css position.
I have fiddled the code here. you can refer that.parent div of your popup should be of position relative and position of popup should be absolute. and you can set the position from jquery as well as you did for now.
HTML
<div class="table-wrapper">
<table class="my-table">
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
<tr>
<td>hjskladj</td>
<td>hjskladj</td>
<td>hjskladj</td>
</tr>
</table>
<div class="my-popup">this is my div</div>
</div>
CSS
.table-wrapper{
position:relative;
}
.my-table td {
padding:5px;
border:1px solid #aaa;
}
.my-popup {
width:100px;
height:100px;
position:absolute;
background-color:red;
bottom:0px;
left:0px;
}
just try this and let me know if it works
Use this Javascript code: here is JSfiddle
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
console.log(var);
var sc_div_option = document.getElementById("sc_div_option");
sc_div_option.style.display = "block";
sc_div_option.style.top = y+"px";
sc_div_option.style.left = x+"px";
sc_div_option.innerHTML = coords;
}
Or use bootstrap modal. Here is JsFiddle
You have to use bootstrap modal. You have to put tha div id as data-target attribute value . Assign the bellowed think as your div css attributes. And in the div add other divs content, header, footer. Enjoy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src = "https://code.jquery.com/jquery.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script>
<table border="1">
<tr><td col>
<p data-toggle="modal" data-target="#sc_div_option">Click Here11</p>
</td> <td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here12</p>
</td><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here13</p>
</td><tr>
<tr><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here21</p>
</td><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here22</p>
</td><td>
<p data-toggle="modal" data-target="#sc_div_option">Click Here23</p>
</td><tr>
</table>
<div class="modal fade" id="sc_div_option" tabindex="-1" role="dialog" aria-labelledby="id" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Header
</div>
<div class="modal-body">
Body
<div class="modal-footer">
Footer
</div>
</div>
</div>
</div>
</div>
Actually I've a table where I need to set a max-height and make it scrollable.
My Table design
<table class="table table-striped table-notactiveusers table-custom-scroll" style="border: 1px solid #e7eaec;" id="tblNonUandMeUsersList" runat="server">
<thead>
<tr>
<th style="width: 5%">#</th>
<th style="width: 33%">First Name</th>
<th style="width: 30%">Country Code</th>
<th style="width: 32%">Mobile Number</th>
</tr>
</thead>
</table>
My Table css :
.table-custom-scroll > thead, .table-custom-scroll > tbody {
display: block;
}
.table-custom-scroll > tbody {
max-height: 450px;
overflow-y: auto;
overflow-x: hidden;
}
But, if the table has less rows than the max height, there is a space for the body on the right side like shown in the image
So,I thought of changing the css to display : compact, if the table rows are less than 12.
My JS to change css
<script>
$(document).ready(function () {
var notactiverowCount = $('.table-notactiveusers tr').length;
if (notactiverowCount < 12) {
$('.table-notactiveusers > thead').css('display', 'compact');
$('.table-notactiveusers > body').css('display', 'compact');
}
if (notactiverowCount < 12) {
$('.table-notactiveusers').children('head').css('display', 'compact');
$('.table-notactiveusers').children('body').css('display', 'compact');
}
});
</script>
But the css is not changing. Can anyone tell me the mistake I was doing?
what about using only css
.table-custom-scroll{
display: block;
}
see demo HERE
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
I posted a similar question a few hours ago, but I've made a couple breakthroughs(in my mind) and i feel as if I can explain better now.
First off, it's important to say that all of my images, the ones that I'm trying to edit the classes of, are in cells. Like, the cells that are within rows that are within a HTML table.
I have a class named .disableMenu, and it's supposed to simply hide the pictures. Here's that class -
.disableMenu {
visibility: hidden;
}
It's simple and it works like a charm.
So basically, I want a button that when it is pressed, it removes that class from the element(in this case, it's a single cell in a table).
Here's an example of a cell that I'm trying to get this to work on -
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
Now, here's the JS button that I'm trying to get to trigger this change of class -
<button onclick="changeColor('disableMenu');">GO</button>
I'm really sorry for half-double posting this and my general lack of knowledge, but I'm trying to learn(and having fun doing so).
Here's the full code, if anyone wants to have a look -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Complete the puzzle!</title>
<style>
.disableMenu {
visibility: hidden;
}
.merge {
position:absolute;
left: 496px;
top: 5px;
}
.merge0 {
position:absolute;
left:300px;
top:4px;
}
.merge1 {
position:absolute;
top: 218px;
left: 530px;
}
.merge2 {
position:absolute;
top: 218px;
left: 688px;
}
.row1 {
position:absolute;
left: 301px;
top: 208px;
}
.row2 {
position:absolute;
top: 476px;
left: 301px;
margin:0;
}
.row3 {
position:absolute;
top: 495px;
left: 716px;
margin:0;
}
.row4 {
position:absolute;
top: 691px;
left: 300px;
margin:0;
}
</style>
<body style="
">
<div>
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
<td>
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="4.png" class="row1">
</td>
<td id="gone">
<img src="2.png" class="merge1">
</td>
<td>
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td>
<img src="8.png" class="row2">
</td>
<td>
<img src="5.png" class="row3">
</td>
<td>
<img src="3.png" class="row4">
</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
Thanks for looking, any help would be greatly appreciated.
elem.style.class = disableMenu;
This is a big problem. There is not style attribute called "class". You want:
elem.className = "disableMenu";
and
elem.className = "";
to disable it.
You're also calling the wrong function:
<button onclick="changeColor('disableMenu');">GO</button>
should be
<button onclick="changeClass('disableMenu');">GO</button>
Hope this helps!
===================
Per your comment below I'm fixing your code:
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.className = "disableMenu";
//I put this line in there so you could UNDO your changes.
//Calling this immediately after the previous line will just undo what you did.
//Remove it an you should be good (the line below)
elem.className = "";
}
</script>
I don't have enough rep to comment, but building on dudewad's answer -
Try this code to add the class:
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<p class="merge0">Hi</p>
</td>
</tr>
</table>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var elem = document.getElementById("one");
elem.className = "disableMenu";
}
</script>
I am trying to write a piece of code that enables column re-sizing functionality to my data table.But its not working properly.. I explored on internet for couple of days but I could find nothing except some plug-ins. But I don't want to use any plug-in, since my data table is very complicated and if I use them the other functionalities of the table may be destroyed.Thus I tried to write my own. Can you please check and refine my code or suggest any other code that fulfills my spec....
Note: User can re-size the column towards right upto table width but towrds left, its upto td's left position only..
Eidt: Maxwell has given a great alternative..It works fine but in one case.If I try to resize towards left side, its not allowing since td width is fixed to it's content width...But I want to re-size it to left side upto it's its offset().left value by putting td's style to overflow:hidden or some other way....
Here is my piece of code....
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>
I merged your code with some techniques that I found — http://jsfiddle.net/tpqn7/
IMHO, there are still some problems. First of all I suppose it's would be better (also easier) if table headers can be re-sized by pressing each TH, no only small border.
Hope this helps.
After had been exploring in internet for couple of days, I got a good code,which was modified by me to make it satisfies my requirement as well( Of course, my change is bit little.It might be useful to somebody else,so I am posting here...
style
<link rel="stylesheet" href="E:\Examples\BSP\BSPExtensions\jquery-ui-1.8.18.custom.css"/>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
tr.last td {
border-bottom: 1px solid black;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
white-space:nowrap;
padding: 2px 5px;
text-align: left;
overflow:hidden;
}
td.last {
border-right: none;
}
thead td div:first-child{
text-overflow:ellipsis;
overflow:hidden;
}
tbody td div:first-child{
overflow:hidden;
}
.scrollContainer {
overflow:auto;
width:700px;
height:auto;
display:inline-block;
border:1px solid red;
}
#-moz-document url-prefix() {
.resizeHelper,.ui-resizable-e {
position: relative;
float: right;
}
}
</style>
Script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
/**
* Enables resizable data table columns.
**/
(function($) {
$.widget("ih.resizableColumns", {
_create: function() {
this._initResizable();
},
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("thead td").resizable({
handles: {"e": ".resizeHelper"},
minWidth: 2, // default min width in case there is no label
// set correct COL element and original size
start:function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize: function(event, ui) {
var resizeDelta = ui.size.width - originalSize;
var newColWidth = colWidth + resizeDelta;
colElement.width(newColWidth);
// height must be set in order to prevent IE9 to set wrong height
$(this).css("height", "auto");
}
});
}
});
// init resizable
$("#MyTable").resizableColumns();
})(jQuery);
</script>
Your html is to be like:*
<div class="scrollContainer">
<table class="resizable" id="MyTable" width="100%">
<thead>
<tr>
<td class="ui-resizable" style="width:100px;">
<div>
<span >Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:300px;">
<div>
<span >Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:150px;">
<div>
<span >Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable last" style="width:100px;">
<div>
<span >Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
<tr class="last">
<td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
</tbody>
</table>
</div>