I need to create a jQuery datatable, in which some rows might have gray background color - meaning that they are disactivated. A row can have gray background only if the column 'status' of the corresponding MySQL table is equal to 0.
Look at the below code. Column '10' is hidden. It contains status value. If it is 0, then the row should have different background color. But this does not work. No error message. Any ideas?
$(document).ready(function(){
$('#newspaper-b').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[4, "asc"]],
"aoColumns": [null,null,null,null,null,null,null,null,null,null,
{"bSearchable": true, "bVisible": false},null,null],
"bJQueryUI":true,
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if(aData[10]=="0"){
nRow.className = "disactivatedRow";
}
return nRow;
}
});
CSS
.disactivatedRow td {
background-color:#ffbba9 !important;
color: #e6e6fa;
}
#newspaper-b {
border-collapse: collapse;
border-color: #B7DDF2;
border-style: solid;
border-width: 1px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin: 0;
text-align: left;
width: 480px;
}
#newspaper-b th {
background: none repeat scroll 0 0 #EBF4FB;
border-color: lightgray;
font-size: 11px;
font-weight: bold;
padding: 15px 10px 10px;
}
#newspaper-b tbody tr td {
background: none repeat scroll 0 0 #FFFFFF;
}
#newspaper-b td {
border-top: 1px dashed #FFFFFF;
color: #000000;
padding: 10px;
}
#newspaper-b tbody tr:hover td {
background: none repeat scroll 0 0 #FFCF8B;
color: #000000;
}
#newspaper-b tbody tr.selected td {
background: none repeat scroll 0 0 #FFCF8B;
color: #000000;
}
Row doesn't have content hence background, td should be colored instead:
.disactivatedRow td {
background-color:#ffbba9 !important;
color: #e6e6fa;
}
If still doesn't solve I'd suggest you to console.log(aData[10]) outside of your if. For console.log to work use Chrome/Firefox, find console output via F12 and see what aData[10] contains, maybe you need aData[9] (programmers use to count from zero ;).
Related
I am making a flipster slider where people can give reviews about a company. But the text is flowing outside of the div. I tried numerous things but I cant get it to work like I want it. This is what I have:
https://imgur.com/dfLlUSg
and this is what I want:
https://imgur.com/f61MFCf
I am using the Advanced Custom Fields Repeater field.
Also, the two lines of text (above the picture) does not have any whitespaces, I don't know why.
This is how its built:
https://imgur.com/MX49WWB
can anyone help me with this?
This is some extra SCSS:
.flipster {
//margin-top: 75px;
ul {
height: 483px !important;
margin-top: 5px;
.flipster__item--current article {
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.2);
}
li {
&.flipster__item--future {
.flipster__item__content {
//transform: rotate(0) !important;
}
}
&.flipster__item--past {
.flipster__item__content {
//transform: rotate(0) !important;
}
}
article,
.flipster article {
padding: 45px;
width: 460px;
margin: 10px auto;
height: 460px;
background: #fff;
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, .1);
.quote {
text-align: center;
p {
font-size: 32px;
text-align: center;
}
}
.quote-persoon {
p {
font-size: 18px;
color: $oranje;
text-align: center;
padding: 35px 0 5px 0;
display: block;
}
span {
font-size: 16px;
width: 100%;
display: block;
text-align: center;
}
img {
margin: 35px auto 0 auto;
display: block;
border-radius: 75px;
}
}
}
}
}
.flipster__button {
opacity: 1;
svg {
color: $oranje;
}
}
}
When I reload the page, I can see it is all inside the div how it should be but then it just quickly jumps out
I found the problem. it was in the ul.flipster__container. there was a css line: white-space: nowrap;
no idea why that would be of any use
I have a listbox, I need it to on select neither change text color as active or inactive, focus or not focused. Its click add, click add. On this one the text stays white on select, and turns black when click out of the listbox. I need it to stay red and only background to change when its clicked, to show it was clicked, then just go back to black. (Ive been at this for a couple days before asking, might have errors in the code after rewriting it so many times.)
<select onclick="" class="sometext" name="sometext" size="5">
<?php
$sql = "select * FROM mom WHERE type='feedme'";
foreach ($dblsm->query($sql) as $row){
echo "<option value=$row[id]>$row[title]</option>";
/* Option values are added by looping through the array */
}
?>
</select>
css
/* turn it off completely */
select:active, select:hover, select:focus {
outline: none;
}
select option:hover {
background: linear-gradient(#a81b1b, #000000);
background-color: #000000 !important; /* for IE */
color: #a81b1b !important;
outline: none;
}
select option:checked, select option:active, select option:disabled {
background: linear-gradient(#000000, #000000);
background-color: #000000 !important; /* for IE */
color: #a81b1b !important;
}
.sometext::-webkit-scrollbar {
width: 8px;
}
/* Track */
.sometext::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.sometext::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #a81b1b;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.sometext {
color: #a81b1b;
background-color: black;
width: 225px;
border: 3px inset;
border-color: #a81b1b;
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #a81b1b;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
So, if I understand your question better now from your comments, I'm not sure how to accomplish this with the default options of a form's select box. What I did come up with for you is a way to get a similar outcome with plain ol' html/js/css and hopefully you can adapt this to your needs:
<html>
<head>
</head>
<body>
<div>
<ul class="redhue">
<li onClick="changeSelectionTo(this)">1</li>
<li onClick="changeSelectionTo(this)">2</li>
<li onClick="changeSelectionTo(this)">3</li>
</ul>
</div>
<script>
var currentlySelected;
function changeSelectionTo(item) {
if(currentlySelected){
currentlySelected.classList.remove("selected");
}
currentlySelected = item;
item.classList.add("selected");
console.log(item.innerText);
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li:hover,
.selected {
background: linear-gradient(#a81b1b, #000000);
background-color: #000000; /* for IE */
color: #a81b1b;
}
.redhue {
color: #a81b1b;
background-color: black;
width: 225px;
border: 3px inset;
border-color: #a81b1b;
list-style: none;
}
</style>
</body>
</html>
I left the console.log statement to show how to retrieve the list item's value for whatever you would need it for... Hope this helps!
The red and yellow standard colors of xdebug can hurt your eyes after a few hours.
http://www.designified.com/blog/article/76/restyling-xdebug-output describes how to replace the style with javascript requiring jquery.
I was looking for a more straight forward way and finally found one.
The solution is the !important tag, it overrides the existing style values. Use the following css code to avoid eye cancer when using xdebug:
.xdebug-error {
font-size: 12px !important;
width: 95% !important;
margin: 0 auto 10px auto !important;
border-color: #666 !important;
background: #ddd !important;
}
.xdebug-error th, .xdebug-error td {
padding: 2px !important;
}
.xdebug-error th {
background: #ccc !important;
}
.xdebug-error span {
display: none !important;
}
.xdebug-error_description th {
font-size: 1.2em !important;
padding: 20px 4px 20px 100px !important;
background: #ccc no-repeat left top !important;
}
.xdebug-error_callStack th {
background: #666 !important;
color: #ddd !important;
}
Have a nice xdebug!
Yes you can. Try this css below.
table.xdebug-error {
width: auto;
background: white;
border: none;
border-spacing: none;
border-collapse: collapse;
box-shadow: 0px 3px 10px 0px black;
position: fixed;
top: 0px;
right: 0px;
z-index: 8888;
font: 14px verdana;
transform-origin: top right;
transform: scaleX(0.4);
opacity: 0.3;
transition: all 200ms ease;
}
table.xdebug-error caption,
table.xdebug-error th,
table.xdebug-error td {
text-align: left;
vertical-align: middle;
}
table.xdebug-error a img {
border: 0;
}
table.xdebug-error :focus {
outline: 0;
}
table.xdebug-error pre {
margin: 0;
}
table.xdebug-error tbody tr td,
table.xdebug-error tbody tr th {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
font-weight: normal;
}
table.xdebug-error tbody tr td {
padding: 3px !important;
vertical-align: top;
}
table.xdebug-error tbody tr th {
padding: 13px !important;
}
table.xdebug-error tbody tr td:nth-of-type(1) {
width: 5% !important;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] {
font-weight: normal;
background: steelblue;
color: white;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] span {
display: none;
}
table.xdebug-error tbody tr font[color='#00bb00'] {
color: #005e00;
}
table.xdebug-error tbody tr td small {
display: none;
}
table.xdebug-error tbody tr td i {
padding-left: 12px;
}
table.xdebug-error:hover {
transform: none;
opacity: 1;
}
CONS:
Depending on your other css defs, you may have to fiddle a bit until it looks as promised.
It's not as beautiful as a Laravel/Symfony error
PROS:
You can see the actual page, despite the error. (Message will be dimmed and pushed on the right side, appearing on mouse hover.)
It's nothing more than CSS
You can even add it to your page via CSS Live Editor Plugin or something similar; therefore, no need to add to your own code
It won't break your styling, won't stuff a whole lot of text into a tiny container where the error happened, etc. - because it's position:fixed.
Pleasant to the eye - you'll end up throwing errors just to see it again :)
Another option is to disable xdebug from overloading var_dump.
In the php.ini [XDebug] section add xdebug.overload_var_dump=0
Formatting the output is then up to you; one such way could be wrapping var_dump in your own debug function that prints <pre> tags.
// notice the line height, the padding(cellspacing), monospace font, font size, making readability better at least for me.
//
// A FILENAME : xdebug_stack_trace.css
//
// This is how the xdebug_stack_trace.css is called from the index.php page
//
// <style><?php require_once("./resources/css/xdebug_stack_trace.css");?></ style>
//
// notice that on the line above there is a space between the slash
// and the 'style', on the ending 'style' tag, otherwise the display
// get all messed up when this page gets loaded.
//
// make sure that when you copy the 'style' line from here to the
// index page, that you remove the extra space at the ending 'style'
// tag of the index page.
// +---------+---------+---------+---------+---------+---------+---------+
// orange/black td header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error th
{
font-family:monospace;
font-weight:normal;
font-size:15px;
padding: 6px 6px 6px 6px;
border:1px solid black;
background: #FFCC99; // orange
color:#000000; // black
}
// +---------+---------+---------+---------+---------+---------+---------+
// black/white th header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
line-height:1.6em;
padding: 10px 10px 10px 10px;
border:1px solid #000000;
background: #000000; // black
color:#FFFFFF;
}
// +---------+---------+---------+---------+---------+---------+---------+
// green/black td content one or more lines
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error td
{
font-size:14px;
padding: 6px 6px 6px 6px;
border:1px solid green;
background: #D1FFE8; // light green
}
// +---------+---------+---------+---------+---------+---------+---------+
I find two html line break entries inserted between my div element and table elements. I don't know how to get rid of them. The unwanted space is labelled red in the attached screenshot.
My relevant table stylings are as follows:
table {
font-family: 'Arial';
margin: 25px auto;
border-collapse: collapse;
border: 1px solid #eee;
border-bottom: 2px solid #00cccc;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
.alt { background: #D0FFFF; color: #FFFFFF; }
table tr:hover {
background: #f4f4f4;
}
table tr:hover td {
color: #555;
}
table th, table td {
color: #5C5456;
border: 1px solid #eee;
font-size: 12px;
border-collapse: collapse;
}
table th {
background: #00cccc;
color: #fff;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
table th.last {
border-right: none;
}
Basically this is code I lifted elsewhere from the net as I'm not very knowledgeable with CSS yet.
My code has:
$dumpout .= "<div><p class=\"pi\">Dear ....</p></div>
<div><table>
<thead>
<tr>
{the rest of the stuff} ";
So clearly I do not have line breaks in the code. How can I get rid of this space?
Also what code can make the table expand and fill out the entire width of the screen as opposed to the little middle section? Please note, even though I display in browser to troubleshoot, the final output is being sent in an email.
Remove the lines saying and you will be done
- <body>
+ <div>
- <div>
<br>
<br>
- <table>
+ <thead>
In this code you are using break tags which causes for new line. Just remove tags and it will be fine
I have trouble with my CSS. I'm trying to correctly display this kind of array:
https://jsfiddle.net/ju8hmgp9/
I think the problem is maybe right there :
table {
display: table;
width:auto;
margin : auto;
border-spacing: 2px;
border-color: gray;
}
table td{
font-size: 8pt;
}
.empty{
background-color: #C7C7C7;
}
td, th {
display: table-cell;
vertical-align: inherit;
width: auto;
border: 1px solid gray;
border-collapse : collapse;
margin-left: 5px;
margin-right: 5px;
}
As I know, everything worked as well before, and I don't know how to fix this. How can I fix my problem ?
In your JSFiddle you have applied display: block; to the td element. If you remove this then the table displays as it should.
https://jsfiddle.net/4bx4n8fk/1/