Ok, the title may sound a bit easy or common but my problem is not that easier. I'm working on making a HTML page that displays a database in table rows. A sample code is:
<table>
<tr><td>ABC Hospitals</td></tr>
<tr><td>India</td><td>Contact:9999999999</td></tr>
</table>
<table>
<tr><td>XYZ Blood Bank</td></tr>
<tr><td>NewJersey</td><td>Contact:8888888888</td></tr>
</table>
<table>
<tr><td>ABC Inn</td></tr>
<tr><td>California</td><td>Contact:7777777777</td></tr>
</table>
I have used tables to group data, with each one containing rows to display data. The code gives the following output sample, with the CSS effects added:
Image1 - Sorry, I'm a new user and StackOverflow doesn't allow me to post images.
I'm now in requirement of a 'Find in page' box to search the HTML document for a specific piece of information(say "ABC"). The search must display ONLY the table(s) that contains the query term("ABC"), in our case, hiding ALL other tables which do not contain the search term. I have achieved the sample output by manually editing the HTML, just to more clearly show my requirement. I'm in need of the JScript(or any appropriate) code to achieve the result:
Image2 - Sorry again.
I'm sure somebody here will be able to help me, either provide me some code piece or guiding me to some useful link. Thanks in advance.
-Sriram
var search = document.querySelector('#search');
var database = document.querySelector('#database');
search.addEventListener('input', function (e) {
// Every time the input changes, execute filterMatching.
filterMatching(search.value, database);
});
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
.hidden {
display: none;
}
<input type="text" id="search" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
Never mind, for some reason, the thing doesn't work when the element are stored as 'var' types. So I modified the code slightly as follows: I created a new function:
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
and called
<input type="text" id="search" oninput="fn_search()" />
The program now works fine.
The complete code is below:
<html>
<head>
<style>
table{
padding: 20px;
margin: 10px;
background: #990030;
color: #fff;
font-size: 17px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #9ff;
border-radius: 10px;
box-shadow: 0 0 0 4px #990030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
table-layout: fixed;
width: 325px;
height:75px;
}
th, td {
overflow: hidden;
width: 100px;
}
table.hidden {
display: none;
}
</style>
</head>
<body>
<script>
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
</script>
<input type="text" id="search" oninput="fn_search()" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
</body>
</html>
Related
I am trying to create a tree with a three elements. Main Element, -> children, -> children.
I got pretty far, I can even collaps entire portions of the table. The problem however is, when I collabs row two.
At first, the table looks like this:
Which is fine. I have three <td> in one row.
However, if I show the second row (clicking on my blue arrow),
this is the result:
So, what happens is that the second <tr> then pushes the elements of the second <td> so much forward, that "SubKategorie_1 DELETE" has enough room to fit before "Hauptkategorie_1" begins, which is in a different table row.
I am pretty sure that all I need is a css attribute.
Ill give you the code shortend:
<table class="mainTable">
#{
var position = 0;
for (int i = 0; i < Model.MainNodes.Count(); i++)
{
string catId = "CatId" + i.ToString();
string classToHideCatId = "classToHideCatId" + i.ToString();
<tr class="mainCatRow">
<td>
<div>
<img src="#Url.Content("~/Content/images/icons/icon-open.png")" id="#catId" class="buttonLayoutMain" />
</div>
</td>
<td>
<div class="mainCat">
#Model.MainNodes[i].name
</div>
<td>
Delete
</td>
</tr>
<!--subcategory-->
<tr class="tr2">
<td>
<div class="#classToHideCatId">
<table class="subTable">
...
</table>
</div>
</td>
</tr>
}
}
</table>
With some basic CSS:
.MainDiv{
padding: 20px;
}
.mainTable{
background-color: green;
}
.mainCat {
font-size: 20px;
}
.mainCatRow{
background-color:orange;
}
.subCat {
margin-left: 40px;
font-size: 18px;
}
.tr2{
background-color:gray;
}
.subsubTable {
margin-left: 80px;
}
Question:
How can I make my table have differnt lenght rows?
<!DOCTYPE html>
<html>
<style>
#media only screen and (max-width: 600px) {
p {
background-color:powderblue;
}
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
padding: 0 4px;
flex: 20%;
}
I'm not sure if this is actually doing anything
.onclick{
width: 20px;
height: 20px;
}
</style>
<body>
I want these two onclicks to be next to each other
<table style="width:100%">
<tr>
<p id="demo" onclick="myFunction1()">Click me.</p>
</tr>
</tr>
<p id="funct" onclick="myFunction2()">Click me.</p>
</tr>
</table>
This part details what the functions do
<script>
function myFunction1() {
if (document.getElementById("demo").innerHTML == "Click me."){
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
else{
document.getElementById("demo").innerHTML = "Click me.";
}
}
function myFunction2() {
if (document.getElementById("funct").innerHTML == "Click me."){
document.getElementById("funct").innerHTML = "YOU CLICKED ME!";
}
else{
document.getElementById("funct").innerHTML = "Click me.";
}
}
</script>
</body>
</html>
You see your paragraphs in the different rows because you placed them in different rows of your table.
Just change into
<table style="width:100%">
<tr>
<td>
<p id="demo" onclick="myFunction1()">Click me.</p>
</td>
<td>
<p id="funct" onclick="myFunction2()">Click me.</p>
</td>
</tr>
</table>
and they will be placed in the same row.
In HTML tables:
<tr> tag starts a new row
</tr> tag ends current row
<td> tag starts a new box in current row
</td> tag ends current box in current row
Anyway, though it's not the object of the current question, I suggest you finding a different way than tables for organizing your web page. Take a look to <div>s + CSS.
I'm trying to save page length in SharePoint by having a list of links that expose corresponding copy directly below them onto the page.
I have this working great outside of SharePoint thanks to the labels solution in this question and once in SP it works fine in Chrome but the hidden divs don't expand when the links are clicked in IE11.
To get around SP stripping the formatting away I created a .txt file containing the CSS and HTML and uploaded it to the sites style library. Then linked to it in a Content Editor Webpart. you can see what I'm using in the demo.
I'd like a solution without using JQuery as I'm not sure if we can use it within our internal enviroment (I've asked if we can but haven't heard back yet) It seems logical that there must be a simple way to do this within SP itself or SharePoint Designer or CSS without the above issue?
.artifact_top
{padding:10px;border:1px solid lightgrey;margin:10px;overflow:auto;}
.collapse{
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover{
text-decoration: underline;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
table
{border-collapse:separate;width:100%;border:none;}
td
{padding-left:10px;padding-top:10px;vertical-align:top;}
<div style="float: right; width: 35%; padding-left: 5%;"><div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong></div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/><br/>
<div><label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>PM</td>
<td width="50%"><strong>Template</strong><br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>App Services</td>
<td width="50%"><strong>Template</strong><br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>App Services</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions. <br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>TechComm</td>
<td width="50%"><strong>Template</strong><br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
To support some advanced functionality in Internet Explorer, SharePoint 2010 uses some ActiveX controls that are only available in IE8. SharePoint forces Internet Explorer 11 into compatibility view to emulate Internet Explorer 8, essentially downgrading your version of IE.
Unfortunately, the input:checked CSS selector was introduced with CSS 3 and was not yet available in Internet Explorer 8.
As an alternative, you can use a click event handler in JavaScript to toggle the visibility of the divs. JavaScript can be entered into the same .txt file as your CSS and HTML (enclosed within <script> tags). If you put the JavaScript below your HTML, it will not execute until the preceding HTML is loaded by the browser, allowing you to query and reference the preceding HTML elements in your script.
<script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
var label = labels[i];
(function(div){
label.onclick = function(){
if(div.style.display == "block"){
div.style.display = "none";
}else{
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
</script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for (var i = 0; i < labels.length; i++) {
var label = labels[i];
(function(div) {
label.onclick = function() {
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
.collapse {
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover {
text-decoration: underline;
}
.collapse + input {
display: none;
/* hide the checkboxes */
}
.collapse + input + div {
display: none;
}
table {
border-collapse: separate;
width: 100%;
border: none;
}
td {
padding-left: 10px;
padding-top: 10px;
vertical-align: top;
}
.artifact_top {
padding: 10px;
border: 1px solid lightgrey;
margin: 10px;
overflow: auto;
}
<div style="float: right; width: 35%; padding-left: 5%;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong>
</div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/>
<br/>
<div>
<label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox" />
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>PM
</td>
<td width="50%"><strong>Template</strong>
<br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox" />
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>App Services</td>
<td width="50%"><strong>Template</strong>
<br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>App Services</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox" />
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>TechComm</td>
<td width="50%"><strong>Template</strong>
<br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
pure css and html, nice work!
have you the possibility to add a meta into the header?
see / try the ie=edge meta:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
we got a lot of issues with our sharepoint / our ie version on our workmachines - css styles are ignored, scripts not working etc.
are the contents always hidden and the click has no effect or are they alwasy visible?
I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Contest Coding</title>
<meta charset = 'utf-8'>
<meta name = 'description' content = 'The free programming competition for everyone'>
<meta name = 'keywords' content = 'programming competition, coding competition, programming contest, coding contest, progrramming puzzles, coding puzzles, contestcoding, contest coding, c, c#, c++, python, ruby, java, javascript, php, haskell, perl, programming, coding'>
<meta name = 'author' content = 'Lewis Cornwall'>
<style type = 'text/css'>
body {
margin: auto;
width: 960px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
#header {
text-align: center;
}
#leaderboard {
float: left;
}
#leaderboard table {
width: 280px;
}
#puzzles {
float: right;
}
#puzzles table {
width: 640px;
}
.view_full {
line-height: 2em;
}
h1 {
font-size: 60px;
line-height: .5em;
}
table {
border-collapse: collapse;
background-color: lightgrey;
}
table, th, td {
padding: 10px;
border: 1px solid #000;
text-align: left;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id = 'header'>
<h1>CONTEST CODING</h1>
<p>The free programming competition for everyone</p>
</div>
<div id = 'leaderboard'>
<h2>Leaderboard</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>Ed Southall</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Mark Bishop</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Krishna Teja</a>
</td>
<td>18</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View full leaderboard »</a>
</div>
<div id = 'puzzles'>
<h2>Latest Puzzles</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Solved By</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>The Truck Driver - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>The Eight Queens - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>Palindromic Primes - Click to View and Solve</a>
</td>
<td>3</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View all puzzles »</a>
</div>
</body>
</html>
and I ran it on Google Chrome. I right clicked, selected 'Inspect Element', clicked on the body section (so Chrome should highlight the whole body), but it only highlighted the #header section. Why doesn't it highlight the whole page?
Because you forgot to 'clear' the floats.
<div style="clear: both;"></div>
add this on the end of the last floating div.
It because "when an element is floated it is taken out of the normal flow of the document". So I guess the browser doesn't include the floated element to the normal contents of <body> and thus they are not highlighted.
It behaves the same in Firebug in Firefox, BTW.
body {
margin: auto;
width: 960px;
height:750px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
specify the body height. The above should solve your problem.
I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I don't have access to the .css with the service we are using. I am being forced to drop an HTML code box that I can paste my code into specific to the element I am changing, but not the entire .css file...just that element.
Here is my code. Any help in getting the background to change to #ff0000 and the Text to change to #000000 when I roll over the cell would be greatly appreciated.
(It is ultimately my intent to add a >a href for each of the cells as well, but I am trying to do this one step at a time. The >a href will (I hope) add the selected cell to a shopping cart.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<style type="text/css">
body {
background: #000;
}
#wrap {
margin: 0 auto; /* margin 0 auto will center that box in your document */
width: 780px; /*size of your box*/
background: #000;
text-align: center; /* everything will be written in that box will be centered horizontally*/
}
</style>
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
In CSS:
td:hover {
background-color: #ff0000;
color: #000000;
}
Or you can use JavaScript/jQuery:
$(document).ready(function() {
$("td").hover(
function() {
$(this).css('background-color', '#ff0000');
$(this).css('color', '#000000');
},
function() {
$(this).css('background-color', 'none');
$(this).css('color', 'black'); // or whatever your original color was
}
);
});
Wrap the cell data with a div (class="cell_hvr") and a link around the content.
.cell_hvr {
padding: 2px;
width: 100%;
height: 100%;
}
.cell_hvr a {
display: block;
text-decoration: none;
}
.cell_hvr a:hover {
background-color: red;
}
<div class="cell_hvr"> (Your content) </div>
You can do this by giving each cell a class
<td class="a">..</td>
and then styling it
<style>
td.a { background-color:#ff0000; }
td.a:hover { background-color:#000000; }
</style>
CSS: td:hover, th:hover { background:#ff0000; color:#000; }
I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..
I have
oCell = newRow.insertCell();
oCell.style.background = tintTest(myCounts[i]);
myCounts is just an array holding an Int..
but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop......
So I found the code below as the only checked answer in a stream of 'can't be done'.. just not sure if this would even help me.
var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn't supported at all.