CSS style issue in table rows - javascript

I have use the className like below code snippet.
Code Snippet
<tr class="gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand">
<td class="e-rowcell ">
<div style="height: 20px;">
<div class="intend" style="width: 0px; height: 1px; float: left; display: inline-block;">
</div>
<div class="e-gridtreeexpand" style="float: left; display: inline-block;">
</div>
<div class="e-cell" style="width: 100%; display: inline-block;">
6
</div>
</div>
</td>
<td class="e-rowcell">Implementation Phase 2</td>
<td class="e-rowcell">02/15/2010</td>
<td class="e-rowcell"></td>
<td class="e-rowcell">8</td>
<td class="e-rowcell">50</td>
<td class="e-rowcell"></td>
<td class="e-extendcolumn"></td>
</tr>
Note: here class Name = gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand
i have tried to apply css style(display) for this row based on some condition like following
two ways
$('.gridrowtaskIdlevel0').addClass('e-hide');
CSS:
.e-hide{
display:none;
}
2. $('.gridrowtaskIdlevel0').css({'display':'none'});
how to apply css style to tr in runtime

Don't really understand what runtime do you mean, but if you just need make this code working - you need put it in some event: click on smth, doc.ready and etc.
Please, try such construction:
JS:
$(document).ready(function() {
$('.gridrowtaskIdlevel0').addClass('e-hide'); // the 1st way
// or
$('.gridrowtaskIdlevel0').css({'display':'none'}); // the 2nd way
// or
$('.gridrowtaskIdlevel0').hide(); // the 3rd way
});
But If you will use the 1st way you also need to add css (same to your).
I recommend use 1st or 3rd variant, but all of they will work similarly.
Good luck!

<tr>s don't always do well with all styles.
Here's an example FIDDLE that shows how you might focus on <td>s.
CSS
table {
border-collapse: collapse;
}
tbody, th, td {
padding:0px;
margin:0px;
border:0px;
border-collapse: collapse;
padding: 5px;
}
tr.foo {
border: 1px solid blue;
background-color: red;
}
tr:nth-child(3) td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
tr:nth-child(3) td:nth-child(1){
border-left: 2px solid blue;
}
tr:nth-child(3) td:nth-child(2){
border-right: 2px solid blue;
}

Related

Fill Background Color entire TD

I have this code:
body {
background-color: #2c3e50;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
<table>
<tr>
<td id="td_design">
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
I tried putting a color on the body to test if the TD's Color actually expands through. Here's the result:
I know this can be fixed by adding the id = "td_design" on the <table> instead on the <td> but I can't since I want to add different background-color to each td . How can I make the TD's color extend to the whole page?
Tables, by default, have some spacing between cells.
You can remove this spacing using one of the following:
border-collapse: collapse;
/* OR */
border-spacing: 0;
If your table has no borders then you can use whichever one you want. If you do start adding borders, then collapse will start merging borders together (which can lead to interesting effects...) while border-spacing will just put them side-by-side with no gap.
Here's some demos:
table {
margin-bottom: 16px;
background-color: black;
}
td {
background-color: #cfc;
}
#tbl_2 {border-spacing: 0}
#tbl_3 {border-collapse: collapse}
#tbl_4 td {border: 1px solid #3cf}
#tbl_5 {border-spacing: 0}
#tbl_5 td {border: 1px solid #3cf}
#tbl_6 {border-collapse: collapse}
#tbl_6 td {border: 1px solid #3cf}
#tbl_7 {border-collapse: collapse}
#tbl_7 td {border: 1px solid #3cf}
td.red {
border-color: #f66 !important;
background-color: #fcc !important;
}
td.red.fix {
border-style: double !important;
}
Default
<table id="tbl_1"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Spacing 0
<table id="tbl_2"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Collapse
<table id="tbl_3"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Default with cell borders
<table id="tbl_4"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Spacing 0 (note double width on middle borders, and blue/red together)
<table id="tbl_5"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Collapse (note loss of red borders in middle)
<table id="tbl_6"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Double-style "fix" to make the red border more "important" in collapse priority
<table id="tbl_7"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red fix">X2Y2</td></tr></table>
Make sure in your css that you have all spacing and padding set to 0px
Try this code:
I added different class as per requirement (different color for each TD).
added 3 classes namely td_design1, td_design2 and td_design3 each with different color.
So this will call different class style for different table TD.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body {
background-color: #2c3e50;
}
#td_design1 {
background-color: #f39c12;
color: #FFFFFF;
}
#td_design2 {
background-color: #559542;
color: #FFFFFF;
}
#td_design3 {
background-color: #f00112;
color: #FFFFFF;
}
</style>
<table>
<tr>
<td id = "td_design1">
asdasd
</td>
<td id = "td_design2">
asdsajsakj
</td>
<td id = "td_design3">
asdqjwhdksad
</td>
</tr>
</table>
</body>
</html>
remove border from tr / td, this seems to be a border: 3px inset gray or close to...
body {
background-color: lightgray;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
.withBorder {
border: 3px inset gray;
}
.withoutBorder{
border: none;
}
<table>
<tr>
<td id="td_design">
<h5>default navigator style</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withBorder>
<h5>with border styled</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withoutBorder>
<h5>with border none (like many browsers default)</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>

.outerHeight & .outerWidth grows exponentially, when setting table cell height & width

Another web developer wanted to freeze the left-most column and allow scrolling of the table. He found this code and implemented into his client's site. The code does its job and works as expected.
However he added some #media queries to make the table a bit more responsive. When doing so it screwed up the table. It left the left column to not be aligned with the rest of the table.
#media screen and (max-width: 699px) and (min-width: 520px) {
.exportTable th{
min-width: 170px !important;
}
.exportTable td{
min-width:170px !important;
max-width:170px !important;
}
}
So I added the function call inside a window.resize().
$(document).ready(function () {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
$(window).resize(function() {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
});
});
The code was called upon resize of the window however, the outerHeight and outerWidth grew exponentially, causing a serious issue.
The issue happens when you set the height:
$(this).css('height', current_row_height);
and the width/margin:
$(this).css('position','absolute')
.css('margin-left','-'+table_collumns_margin[index]+'px')
.css('width',table_collumns_width[index])
Here is a fiddle.
Simply grab the window and resize back and forth, the table cell's height/width will exponentially grow, causing a serious issue.
This fiddle demonstrates how when you hit the #media queries that the left column will be misaligned. (it's important when viewing this fiddle to get the #media query to be hit.)
How can I resolve these issues?
In my opinion, adding javascript to the equation makes it overly complex. I believe what you want can be accomplished with CSS alone.
How this works, if the browser has a max-width of 500px, then remove the sticky column. If not, show the sticky column.
Unless you need to support browsers older than IE 9, then try this on for size:
https://jsfiddle.net/BmLpV/284/
CSS:
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
#media (max-width: 500px) {
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
position: relative;
top: auto;
width: auto;
}
.zui-scroller {
margin-left: 0;
}
}
HTML:
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
Edit: To support dynamic heights, you could do something like this:
$(function(){
$('.zui-table tr').each(function(i, row) {
var height = $('.zui-sticky-col').eq(i).outerHeight() - $('.zui-sticky-col').eq(i).height();
$('.zui-sticky-col').eq(i).height($(row).height() - height);
});
})
For better performance, you could only access the element once:
$(function(){
$('.zui-table tr').each(function(i, row) {
var el = $('.zui-sticky-col').eq(i);
var height = el.outerHeight() - el.height();
el.height($(row).height() - height);
});
})
https://jsfiddle.net/BmLpV/289/

Internet Explorer CSS display block issue

I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>
try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here

How to freeze a table header and everything above it when scrolling down?

I've been struggling with trying to freeze a table header and everything above it.
I've published a similar question and got an answer which I thought was good but eventually didn't do the trick.
Don't need cross browser support, just google chrome.
I'm trying to get this part of the html frozen when scrolling down:
<input>input1</input>
<input>input2</input>
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<tr><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th></tr>
Here is the fiddle (please publish a fiddle basing on it with the answer):
jsfiddle
Thanks
Copy and paste this:
<div style="position:fixed; height:40px;">
<input>input1</input>
<input>input2</input>
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<table >
<tr ><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th></tr>
</table>
</div>
<p style="height:2000px; padding-top:150px;">hello</p>
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:52px;
background:#FFFFFF;
margin:0px auto;
}
.content {
width:960px;
background: #FFFFFF;
margin: 30px auto;
}
table {
border-collapse:collapse;
}
td ,th{
text-align: center;
border-bottom: 2px solid black;
border-top: 2px solid black;
border-left: 2px solid black;
}
#t1 tr td{
visibility:hidden;
}
#t2{
padding-top: 42px;
display: block;
}
Here is a Demo

How to open popup window from each of dynamically generate tr

I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?
Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.

Categories