How do I add a title to the following div?
document.write('<div style="width:auto; margin:10px;"><table style="background-color:purple;"
border="1" cellspacing="1" cellpadding="35">')
Below is the complete script:
<html>
<body>
<script Language="JavaScript">
rows = 6;
cols = 6;
document.write('<div style="width:auto; margin:10px;"><table style="background-color:purple;"
border="1" cellspacing="1" cellpadding="35">')
/* Not apart of the Table */
//document.write('<h3> <center>Table </center> </h3>')
for (i = 0; i < rows; i++) {
document.write('<tr>')
for (j = 0; j < cols; j++)
{
document.write('<td style="color:orange;">' + (i*j) + '</td>')
}
document.write('</tr>')
}
document.write('</table></div>')
</script>
</body>
</html>
How do I also use a Universal Selector (*) to make all the font size the same?
Just add a <caption> element inside the table:
document.write('<div style="width:auto; margin:10px;"><table style="background-
color:purple;" border="1" cellspacing="1" cellpadding="35"><caption>Title</caption>')
for the * universal selector I believe you want css:
<style type="text/css">
*{
font-size: 12px;
}
</style>
Try this:
var elements = document.getElementsByTagName("*");
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
element.style.fontSize = "20px"
}
Related
I have some code (as below) that allows me to open and display a csv file in Firefox from a location on my hard drive. I'd like to add a search box so it will filter the list when text is entered. I've seen some other working examples that had the table data stored between tags, but I can't get this to work when it's pulling the data from an external file location. I'm really new to JavaScript and this is a bit over my head so if anyone has any pointers i'd appreciate it..
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Try this solution :
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
var searchKey = "";
function myFunction(e){
searchKey = e.value;
}
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
if(!cell_data[cell_count].includes(searchKey) && cell_count == 0){
break;
}
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Keep in mind that this solution only works if you're going to search within the first column only
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have the following element:
<div class="parent">
<div class="col">MyColumn</div>
</div>
I want to style the parent class only if it contains a class with class col
Threw together a fairly legacy compatible JavaScript version:
var parents = document.querySelectorAll('.parent')
for (var i = 0; i < parents.length; i++) {
for (var j = 0; j < parents[i].children.length; j++) {
if (hasClass(parents[i].children[j], 'col')) {
updateCss(parents[i])
}
}
}
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
function updateCss (parent) {
// whatever you want to add here...
parent.style.color = 'red';
}
.parent {
margin: 15px;
outline: 1px dotted black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="parent">
<div class="col">MyColumn</div>
</div>
<div class="parent">
<div class="something-else">not column</div>
<div class="col">MyColumn</div>
</div>
<div class="parent">
<div class="something-else">not column</div>
</div>
<script src="index.js"></script>
</body>
</html>
In JQuery you can use the :has selector, like this:
$('.parent:has(.col)').css(/* your css */);
Below are two options to do it using jQuery:
Option 1
$('.parent').has('.col').addClass('style');
.style {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="col">MyColumn</div>
</div>
Option 2
if ($(".col").parents(".parent").length == 1) {
// add style here
$(".parent").css({'background': "red"});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="col">MyColumn</div>
</div>
this is what I've come up with so far. what I'm trying to do is to spread the div's with class COL in the remaining space after the size specific col's.
it's still not perfect and needs a little tweaking, but a step in the right direction.
var mediaBase = parseFloat(8.33333);
$.each($("div.row"), function (index) {
var gens = 0;
var total = 0;
$.each($(this).find("div[class^='col']"), function (ii) {
if (total > 100) {
$(this).hide();
}
else {
if ($(this).attr("class").indexOf("-") > 0) {
let tmp = $(this).attr("class");
tmp = parseInt(tmp.slice(tmp.lastIndexOf("-") + 1));
total += parseFloat(mediaBase * tmp);
}
else {
gens++;
}
}
});
if (gens > 0 && total < 100) {
let val = (100 - total) / gens;
if (total === 0) {
val = 100 / gens;
}
$(this).find("div.col").css("width", val.toString() + "%");
}
});
I have a footer file which is rendered on every page (with the numerotation).
I'd like it not to be rendered on the first page. Do you have an idea ?
This is my code:
<html><head><script>
function subst() {
var vars={};
var x=document.location.search.substring(1).split('&');
for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
for(var i in x) {
var y = document.getElementsByClassName(x[i]);
for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script></head><body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
<tr>
<td style="text-align:left"><font face="Century Gothic">
Page <span class="page"></span> sur <span class="topage"></span>
</font> </td>
</tr>
</table>
use this js in your script....first store page value in var and then use it to remove the footer.
your html code..set the page value either by ruby/js(any way you prefer)
<p id="page_value" data-value="<%= #page.value %>"></p>
after setting ,use it to remove the footer
<script type="text/javascript">
window.onload = function () {
var value= $("#page_value").data("value");
if (value==1){
$('#footer').remove()
}
}//if ends
</script>
..hope it helps...
Html- i am writing a program so that the user clicks on an image and is linked to another image and to another i can do it for one image but am struggling with the code to make the second image link to the third and so on any suggestions greatly appreciated?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript">
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
document.theClock.theTime.value = ""
+ tDate.getHours() `enter code here`+ ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
</script>
<body onload="StartClock()" onunload="KillClock()">
<form name="theClock">
<input type=text name="theTime" size=8 style="text-align: center">
</form>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecodes.com/"><span style="font-size: 8pt; text-decoration: none"></span></a></font>
<A HREF = "img2.png">
<img src= "img1.png">
<!--<A HREF = "img4.png">
<img src= "img3.png"> </a>-->
</body>
</html>
Here is the jsfiddle of the below code. http://jsfiddle.net/ux4DD/. What I want is the name Harry Pham to be in one line, so I make the width very small and do white-space:nowrap. It work on Firefox, but not IE. Help please
<table cellpadding="0" cellspacing="0" style="width: 450px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:20px;border-top:1px solid gray;white-space: nowrap;"><span class="linkColor">Harry Pham</span>
</td>
<td style="height:15px;background:url('images/line.png') no-repeat;width:28px;" width="35px"></td>
<td style="border-bottom:1px solid gray;" width="auto"></td>
</tr>
</table>
</td>
</tr>
</table>
For IE 6 and 7 you need to wrap your text with a <span> tag and give it a white-space property. Since you already have a <span> tag wrapped around your text and you have a class for it, just add the white-space property to your <span> class .linkColor.
.linkColor{
white-space:nowrap;
}
Check working example at http://jsfiddle.net/ux4DD/1/
Hope this will be helpful:
var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
var button = buttons[j];
var textNode = button;
while(textNode.children[0]) {
textNode = textNode.children[0];
}
var text, words, numSplits;
var spacing = 0;
while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
button.scrollWidth > button.clientWidth) {
if(!spacing) {
text = textNode.innerHTML;
words = text.split(' ');
numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
spacing = Math.round((words.length)/numSplits);
}
for(var i = spacing; i < words.length; i+=spacing+1) {
words.splice(i , 0, '<br />');
}
textNode.innerHTML = words.join(' ');
spacing--;
words = text.split(' ');
}
}
Ref: Word wrapping for button with specified width in ie7?