Mutually Exclusive Listcells - javascript

I have 5 listcell when I click on one listcell the color of it should be changed to green, next time when I click of another listcell, the color of previous should be reset and newly clicked should become green.i.e only one listcell can be green at one time.
5 listcell is just an example in actual case, the listcells are variable i.e of any number. They are created at runtime and appended to listitem.I donnot have ID of the listcells. The html is send from server side. How can i achieve this using java script.
I want an generic solution. What actually happens in case of radio Groups, can provide hint to my question.
My Table (Confusing ? Code is not needed to address my question. added it beacuse of first comment on question):
<TABLE style="TABLE-LAYOUT: fixed" id=d0DQ35-cave border=0 cellSpacing=0
cellPadding=0 width="100%">
<TBODY style="HEIGHT: 0px; VISIBILITY: hidden">
<TR id=d0DQ45-bdfaker class=z-listbox-faker>
<TH style="WIDTH: 222px" id=d0DQ55-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ65-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ75-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ85-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ95-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH id=d0DQ45-bdfakerflex></TH>
</TR>
</TBODY>
<TBODY id=d0DQ35-tpad>
<TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY id=d0DQ35-rows>
<TR id=d0DQa5 class=z-listitem>
<TD id=d0DQb5 class=z-listcell>
<DIV id=d0DQb5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN id=d0DQa5-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQl5 class=z-label>LABEL</SPAN>
</DIV>
</TD>
<TD id=d0DQm5 class=z-listcell>
<DIV id=d0DQm5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQn5 class=z-label>5</SPAN>
</DIV>
</TD>
<TD id=d0DQo5 class=z-listcell>
<DIV id=d0DQo5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQp5 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQx9 class=z-listcell>
<DIV id=d0DQx9-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQy9 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQ_a class=z-listcell>
<DIV id=d0DQ_a-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQ1a class=z-label>0 (0.0%)</SPAN>
</DIV>
</TD>
</TR>
<TR id=d0DQe9 class="z-listitem z-listbox-odd">
<TD id=d0DQn1 class=z-listcell>
<DIV id=d0DQn1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN id=d0DQe9-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQo1 class=z-label>ID</SPAN>
</DIV>
</TD>
<TD id=d0DQp1 class=z-listcell>
<DIV id=d0DQp1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQq1 class=z-label>5</SPAN>
</DIV>
</TD>
<TD id=d0DQr1 class=z-listcell>
<DIV id=d0DQr1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQs1 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQt1 class=z-listcell>
<DIV id=d0DQt1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQu1 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQv1 class=z-listcell>
<DIV id=d0DQv1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
id=d0DQw1 class=z-label>0 (0.0%)</SPAN>
</DIV>
</TD>
</TR>
</TBODY>
<TBODY id=d0DQ35-bpad>
<TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY style="DISPLAY: none" id=d0DQ35-empty class=z-listbox-empty-body>
<TR>
<TD colSpan=5>No Columns Selected!</TD>
</TR>
</TBODY>
</TABLE>
Thanks,
Aman


css:
.selected { background: green }
js:
$('td').click(function () {
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
EDIT: Proof of concept http://jsfiddle.net/SKUqG/

Related

how to remove scroll bar in jpeg image

I have written some code to convert html in a bootstrap modal to image in jpeg format.
It is working fine but in the image it is showing some scroll bar(s). In this code I didn't include any scrollbar.
How to resolve this problem. can any one please help me. example image here I have included one image, I am getting scrollbar like this when I click on the download button.
$(document).on("click", "#jpgfrmt", function() {
domtoimage.toJpeg(document.getElementById('download'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'astDetails.jpeg';
link.href = dataUrl;
link.click();
});
});
#download {
background: #fff;
color: #000;
width: auto;
height: auto
}
#buttons {
margin: 0 auto;
display: inline;
}
#jpgfrmt {
float: right;
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="content" class="content">
<div id="buttons">
<div class="action_btn">
<a href="javascript:;" id="jpgfrmt" class="btn btn-xs btn-warning m-b-10">
<i class="fa fa-download m-r-5"></i> Download
</a>
</div>
</div>
<div class="row" id="download">
<div class="col-md-8">
<div class="table-responsive">
<table class="table">
<tr>
<td style="border:none;">
<table class="table">
<tr>
<td class="field highlight" width="25%" style="border:none;">Name:</td>
<td width="75%" style="border:none;">
Name
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Description:</td>
<td width="75%" style="border:none;">
Description
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Serial No:</td>
<td width="75%" style="border:none;">
Serial Number
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

How to remove side and bottom border in table

I have designed collapsible accordion and in that I placed a table.
I am unable to remove bottom boder of the td and side border of the table. I tried to make no-tr.no-bottom-border td {border-bottom: none; but it not working.
I tried to declare the class as outside and made tried border-bottom none but it didn't work.
Imported bootstrap js and css
<style>
table {
margin-left: 40px;
margin-right:auto;
margin-top: 10px;
}
tr.no-bottom-border td {
border-bottom: none;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
padding: 2px;
font-weight: lighter;
font-size: 11px;
line-height: 1.428571429;
vertical-align: top;
}
#outside{
border-style: none;
}
</style>
</head>
<body>
<div class="container ">
<div class="col-md-6 ">
<div class="panel panel-default ">
<div class="panel-heading " style="background-color: #b3daff; ">
<h4 class="panel-title ">
<a href="# "><span class="glyphicon glyphicon-remove "
style="color: red "></span></a> <a data-toggle="collapse "
data-parent="#accordion " href="#collapseTwo "> <span
style="font-weight: 700; ">Educational Details</span> <span
class="glyphicon glyphicon-plus " style="color: red "> </span>
<span class="glyphicon glyphicon-pencil " style="color: red "> </span>
</a>
</h4>
</div>
<div id="collapseTwo " class="panel-collapse collapse ">
<table class="table table-bordered responsive ">
<thead>
<tr>
<th bgcolor=" #b3daff ">Degree</th>
<th bgcolor=" #b3daff ">Stream</th>
<th bgcolor=" #b3daff ">Yr of Passing</th>
</tr>
</thead>
<tbody>
<tr>
<th>10th</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "> View Edit</td>
</tr>
<tr>
<th style="font-weight: 400px; ">12th*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row " >Bachelors*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">Masters</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C1</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C2</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C3</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C4</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr class="no-bottom-border ">
<th >C5</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "> View Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!----Ends second column-------->
</div>
<!----Ends accordion column-------->
</div>
<!-- BS example ends here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any Ideas?

Here is the updated code:
https://codepen.io/creativedev/pen/gKPXJR
I have added
.table-bordered{
border: none;
}
and removed
tr.no-bottom-border td {
border-bottom: none;
}

When I run your code snippet, I don't see any border-bottom in the table or any of the cells.
The underline below the links View, Edit is the default text-decoration style for tag. Set it to none like below if you don't want it
#outside a {
text-decoration: none;
}

How to overwrite a CSS class at the press of a button and remove it with another button?

I and trying to apply a blinking effect css class to the whole table when someone presses the button. However, some rows are not being affected by the blink class.
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

All the elements that have their own background-color style won't inherit the style from the container. You need to put the class on those elements.
$("#alarm").click(function() {
$("#tableContainer td, #tableContainer th").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer td, #tableContainer th").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

Check This
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#status").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#status").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr id="status" class="status">
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

The answer was to make my jQuery addClass and Remove Class to be more specific:
$("#alarm").click(function(){
$("#tableContainer th").addClass("blink");
$("#tableContainer td").addClass("blink");
});
$("#stopAlarm").click(function(){
$("#tableContainer th").removeClass("blink");
$("#tableContainer td").removeClass("blink");
});

How to add a CSS class with animation to the border of a table's cells?

I am trying to add a blinking effect to my table when a button is pressed. My code kind of achieves this by making the whole table blink however it makes the data in the cells without an existing css hard to read. Therefore, I am trying to figure out if it is possible to make the just the border of each cell have the blinking effect instead of the whole cell so that the data is still easily readable as seen in the status row. Is this possible without having to add a css to every single cell?
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

To achieve this you first need to put borders on the th and td elements. Then you can amend the .blink selector to amend the colours of the border, instead of the background, like this:
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
table {
border-collapse: collapse;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #FFF;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink th,
.blink td {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
border-color: white;
}
to {
border-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>

styled links only work sometimes or only after opening/closing links in a specific order

http://www.tweeturrep.com.s3-website-us-east-1.amazonaws.com/index.html
for some reason when i added style to the nav bar at the top, the links started to only work sometimes. for example, u can't click to enter your zip code until u open and close the votes modal. also if u mouseover the videos link it'll change to the pointer then back and u can't click. idk whats going on but i think it's something to do with bootstrap stuff
<div class="content" position="absolute">
<table position="absolute">
<tr>
<td class="navOPtion">
<img class ="navImage" src="navicon.png">
</td>
<td class="navOPtion" id="hideNav5">
<a style="color:white" href="index.html" id="home">home</a>
</td>
<td class="navOPtion" id="hideNav1">
<a style="color:white" href="videos.html" id="videos" >videos</a>
</td>
<td class="navOPtion" id="hideNav">
<a style="color:white" href="resume.html" target="blank" id="resume">resume</a>
</td>
<td class="navOPtion" id="hideNav2">
<a style="color:white" data-toggle="modal" data-target="#myModal1">
about
</a>
</td>
<td class="navOPtion" id="hideNav3">
<a style="color:white" href="blog.html">blog</a>
</td>
<td class="navOPtion" id="hideNav4">
<a style="color:white" data-toggle="modal" data-target="#myModal">
votes
</a>
</td>
</tr>
<tr>
<td class="title" colspan="7">
tweetUrRep
</td>
</tr>
<tr>
<td class="search" colspan="7">
<form id="find_overlords" align="center">
<form action="" id="find_overlords" type="post">
<input type="text" id="user_Zip" name="zip" placeholder="Zip code" style="width:225px; height:75px;
font-size:20pt" class="input33"></input>
<input type="image" src="search-13-128.png" name="saveForm" class="smallSearchIcon" id="saveForm" >
<br>
<input type="image" src="search-13-128.png" name="saveForm" class="searchIcon" id="saveForm" >
</form>
</td>
</tr>
</table>
the css:
table{
position:static;
margin:auto auto auto auto;
color:white;
width:100%;
}
.navImage {
height: 50px;
width: 75px;
cursor: pointer;
}
.navOPtion{
width:10%;
}
#hideNav{
display:none;
font-size: 30px;
}
#hideNav2{
display:none;
font-size: 30px;
}
#hideNav3{
display:none;
font-size: 30px;
}
#hideNav4{
display:none;
font-size: 30px;
color:white;
}
#hideNav5{
display:none;
font-size: 30px;
color:white;
}
#hideNav1{
display:none;
font-size: 30px;
color:white;
}
the javascript to display the hideNavs:
$(document).ready(function(){
$('.navImage').click(function(){
$('#hideNav').slideToggle('fast');
$('#hideNav1').slideToggle('fast');
$('#hideNav2').slideToggle('fast');
$('#hideNav3').slideToggle('fast');
$('#hideNav4').slideToggle('fast');
$('#hideNav5').slideToggle('fast');
});
});

Categories

Resources