<!DOCTYPE html>
<html>
<head>
<title> Title </title>
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
Please select your price range (per hour) :
<select id="valueDropdown">
<option value="lessThanFive">below 5</option>
<option value="betweenSixAndTen">6-10</option>
<option value="tenPlus">10+</option>
</select>
<button type="button" onclick="toggleTable();" >Search</button>
<div id="cheapestTable" style="display: none;>
<table class="tableizer-table" >
<tr class="tableizer-firstrow"><th>SCHOOLS</th><th>Booking </th><th>web site</th><th> Price per hour </th><th> Columna1 </th><th>Courses English</th><th>Language</th><th>Social Media</th><th>Location</th></tr>
<tr><td>Brittannia</td><td>no</td><td>7</td><td> £4.00 </td><td> </td><td>General, Examn, 1to1, Business</td><td>English</td><td> </td><td>Manchester</td></tr>
<tr><td>ABLE</td><td>no</td><td>8</td><td> £5.00 </td><td> </td><td>General, Examn, 1to1</td><td>English Spanish</td><td>F, T, S, in, I</td><td>Manchester</td></tr>
</table>
</div>
<script>
function toggleTable(){
var e = document.getElementById("valueDropdown");
if(e.options[e.selectedIndex].value === 'lessThanFive'){
document.getElementById('cheapestTable').style.display = "table"
}else{
document.getElementById('result').innerHTML="hi2";
}
}
</script>
</body>
</html>
I'm trying to print a table using Javascript when the user presses a button. The button works fine.
The table is quite complex. What I've tried so far is setting the original location of the table off the screen and then bringing it back when the user pressed the button.
Table:
<div id="cheapestTable">
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: absolute ;
top: -99px;
left: -99px;
}
.. more here with formatting of individual cells etc.
Then when the button is pressed:
document.getElementById('cheapestTable').style.tableizer-table.left = "100px";
document.getElementById('cheapestTable').style.tableizer-table.top = "100px";
However the table is not appearing when the button is pressed.
You're missing the closing quote in <div id="cheapestTable" style="display: none;>.
Also, the proper style to display the DIV is block, not table.
function toggleTable() {
var e = document.getElementById("valueDropdown");
if (e.options[e.selectedIndex].value === 'lessThanFive') {
document.getElementById('cheapestTable').style.display = "block"
} else {
document.getElementById('result').innerHTML = "hi2";
}
}
table.tableizer-table {
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
Please select your price range (per hour) :
<select id="valueDropdown">
<option value="lessThanFive">below 5</option>
<option value="betweenSixAndTen">6-10</option>
<option value="tenPlus">10+</option>
</select>
<button type="button" onclick="toggleTable();">Search</button>
<div id="cheapestTable" style="display: none;">
<table class="tableizer-table ">
<tr class="tableizer-firstrow ">
<th>SCHOOLS</th>
<th>Booking</th>
<th>web site</th>
<th>Price per hour</th>
<th>Columna1</th>
<th>Courses English</th>
<th>Language</th>
<th>Social Media</th>
<th>Location</th>
</tr>
<tr>
<td>Brittannia</td>
<td>no</td>
<td>7</td>
<td>£4.00</td>
<td> </td>
<td>General, Examn, 1to1, Business</td>
<td>English</td>
<td> </td>
<td>Manchester</td>
</tr>
<tr>
<td>ABLE</td>
<td>no</td>
<td>8</td>
<td>£5.00</td>
<td> </td>
<td>General, Examn, 1to1</td>
<td>English Spanish</td>
<td>F, T, S, in, I</td>
<td>Manchester</td>
</tr>
</table>
</div>
Related
I would like to be able to distinguish the row of the cell which a user has selected in the html table.
Is there a way to do that with Css and styles or do I need to program it with JQuery and JavaScript?
For example the user may click on the BA cell in the first row. After that I want the background of the first row be light blue.
example screenshot
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function() {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
$('.table-remove').click(function() {
$(this).parents('tr').detach();
});
$('.table-up').click(function() {
var $row = $(this).parents('tr');
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$('.table-down').click(function() {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function() {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
$($rows.shift()).find('th:not(:empty)').each(function() {
headers.push($(this).text().toLowerCase());
});
$rows.each(function() {
var $td = $(this).find('td');
var h = {};
headers.forEach(function(header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
table {
width: 750px;
border-collapse: collapse;
margin: 50px auto;
}
td,
th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.table-remove {
color: #700;
cursor: pointer;
&:hover {
color: #f00;
}
}
.table-up {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-down {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
&:hover {
color: #0b0;
}
}
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<div class="container">
<h1> JavaScript Editable Table </h1>
<div id="table" class="table-editable">
<table class="table">
<tr>
<th> Name</th>
<th> Roll No </th>
<th> Class </th>
<th> Marks </th>
</tr>
<tr>
<td contenteditable="true"> Ram </td>
<td contenteditable="true"> 1 </td>
<td contenteditable="true"> BA </td>
<td contenteditable="true"> 48 </td>
</tr>
<tr>
<td contenteditable="true"> Rama </td>
<td contenteditable="true"> 10 </td>
<td contenteditable="true"> BSC </td>
<td contenteditable="true"> 40 </td>
</tr>
<tr>
<td contenteditable="true"> sham </td>
<td contenteditable="true"> 8 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 34 </td>
</tr>
<tr>
<td contenteditable="true"> shama </td>
<td contenteditable="true"> 3 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 30 </td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</body>
</html>
jquery implement a has selector that you select all parent that has a specific child attribute
$('td[contenteditable="true"]').click(function() {
$( "tr" ).has('td[contenteditable="true"]').removeClass('selected');
$( "tr" ).has('td[contenteditable="true"]:focus').addClass('selected');
});
the selector to select the td that have the focus is td[contenteditable="true"]:focus
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function() {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
$('.table-remove').click(function() {
$(this).parents('tr').detach();
});
$('.table-up').click(function() {
var $row = $(this).parents('tr');
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$('.table-down').click(function() {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function() {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
$($rows.shift()).find('th:not(:empty)').each(function() {
headers.push($(this).text().toLowerCase());
});
$rows.each(function() {
var $td = $(this).find('td');
var h = {};
headers.forEach(function(header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
});
$('td[contenteditable="true"]').click(function() {
$( "tr" ).has('td[contenteditable="true"]').removeClass('selected');
$( "tr" ).has('td[contenteditable="true"]:focus').addClass('selected');
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
tr:nth-of-type(odd) {
background: #eee;
}
.selected {
background-color: red !important;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
table {
width: 750px;
border-collapse: collapse;
margin: 50px auto;
}
td,
th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.table-remove {
color: #700;
cursor: pointer;
&:hover {
color: #f00;
}
}
.table-up {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-down {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
&:hover {
color: #0b0;
}
}
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<div class="container">
<h1> JavaScript Editable Table </h1>
<div id="table" class="table-editable">
<table class="table">
<tr>
<th> Name</th>
<th> Roll No </th>
<th> Class </th>
<th> Marks </th>
</tr>
<tr>
<td contenteditable="true"> Ram </td>
<td contenteditable="true"> 1 </td>
<td contenteditable="true"> BA </td>
<td contenteditable="true"> 48 </td>
</tr>
<tr>
<td contenteditable="true"> Rama </td>
<td contenteditable="true"> 10 </td>
<td contenteditable="true"> BSC </td>
<td contenteditable="true"> 40 </td>
</tr>
<tr>
<td contenteditable="true"> sham </td>
<td contenteditable="true"> 8 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 34 </td>
</tr>
<tr>
<td contenteditable="true"> shama </td>
<td contenteditable="true"> 3 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 30 </td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</body>
</html>
By adding the following code in the style ,with use of has, the selected row would be shown in different color. There is no need for having jquery or javascript code.
tr:has(td:focus-visible) {
background-color: aquamarine;
}
I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):
Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here
one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/
You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
I have a html file in which currently resides all my javascript code. I want to make a separate .js file, put all the javascript code in that and include that in my .html file. I tried doing it, and also removed the opening/closing tags in the .js file and put this line in .html file -
<script type='text/javascript' src="myfile.js"></script>
However, this is not working. Any ideas on what's wrong?
Thanks in advance.
---------------------EDIT-----------------------------
<html>
<title>Process Details</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="myfile.js">
</script>
<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
.heading { font-size:110%; font-family:'Century Schoolbook'; color: maroon; }
.data { font-size:110%; font-family:'Century Schoolbook'; color:black; }
</style>
</head>
<body onload="init()">
<center>
<font face='Calibri' size='3' color='Blue'>PID : </font>
<select id='list' onchange="refreshData()">
</select>
<form>
<input type="button" id="Refresh" onclick="refreshPage()" value="Refresh Data"/>
</form>
</center>
<ul id="tabs">
<li>Memory</li>
<li>Thread</li>
<li>Summary</li>
</ul>
<div class="tabContent" id="memory">
<table id="graphtab" align="center">
<tr>
<td id="heap" align="center"></td>
<td id="nonheap" align="center"></td>
</tr>
<tr>
<td id="resident" align="center"></td>
<td id="pagefaults" align="center"></td>
</tr>
</table>
</div>
<div class="tabContent" id="thread">
<table id="threadtab" align="center">
<tr>
<td id="cpuusage" align="center"></td>
<td id="count" align="center"></td>
</tr>
<tr>
<td id="threadlist" align="center"></td>
<td id="threaddets" align="center"></td>
</tr>
</table>
</div>
<div class="tabContent" id="summary">
</div>
Home Page
</body>
</html>
Use http protocol instead of https. Using https throws a GET exception in Chrome but not Firefox.
And your <title> should be inside the <head> tag.