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.
Related
I am using Python to draft a Table for the mail. In the mail I will be needing to color the text if that text is of some text value. Say if the text contains "Successful" then the text will be colored as "GREEN". I am using the Python string template to make a HTML snippet.The $w__ are the variable which contains the text. I would like to change the colors of the text based on the text. Please help me out.
'''
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td>AM</td>
<td>$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td>$w32</td>
<td>$w33</td>
<td>$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td>$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
'''
s=Template(bdy).safe_substitute(w21=xxx[0][0],w22=xxx[0][1],w23=xxx[0][2],w24=xxx[0][3],w25=all[0][4],w26=all[0][5],w27=all[0][6],w28=all[0][7],
w29=all[0][8],w210=all[0][9],w211=all[0][10],w20m_3=all[0][11],
w31=xxx[1][0],w32=xxx[1][1],w33=xxx[1][2],w34=xxx[1][3],w35=all[1][4],w36=all[1][5],w37=all[1][6],w38=all[1][7],
w39=all[1][8],w310=all[1][9],w311=all[1][10],w20m_4=all[1][11])
You can use basic style to add class and append that class in td.
<style>
.success {
background: green
}
.error {
background: red
}
<style>
<td class="success">AM</td>
<td class="success">$w21</td>
<td class="error">$w21</td>
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
.success {
background: green
}
.error {
background: red
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td class="success">AM</td>
<td class="success">$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td class="success">$w32</td>
<td>$w33</td>
<td class="error">$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td class="error" >$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
I'm learning javascript and I have a problem with a div... On my CV there are four divs that should be hidden and only the active div should be visible.
All fine with that but at the beginning, all is mixed together. I would like instead that only the general tabcontent will be visible...
Can you help with that?
https://github.com/DevFrancoisXavierPelletier/CV
if you want do this with js code ,just add this code somewhere in index.html :
<script>
openTab(event, 'General');
</script>
but it is not right way ! the best way and lightweight way is handle with css , put this css class in bottom of style.css :
.tabcontent{
display: none;
}
.tabcontent:first-child{
display: block;
}
In your CSS just add...
.tabcontent{
display: none;
}
#General {
display: block;
}
Then just add class active to the first link.
You can use display property in CSS
#General {
display: block;
}
.tabcontent{
display: none;
}
Also add active class on the first button (General).. so you will see General button in white (as selected)..
<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
function openTab(evt, tab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tab).style.display = "block";
if(evt){
evt.currentTarget.className += " active";
}
}
html, body{
margin: 0;
padding: 0;
top: 0;
}
#sidebar{
background: #c5deea;
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%);
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%);
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 );
position: fixed;
z-index: 1;
top: 0;
left: 0;
top: 0;
height:100%;
width:20%;
}
#photo{
width:100%;
height:40%;
}
.sidenav button {
width: 100%;
height: 75px;
padding: 6px 8px 6px 16px;
font-family: sans-serif;
font-size: 25px;
text-decoration: none;
text-align: center;
color: darkslategrey;
background-color: transparent;
border: none;
outline: none;
display: block;
}
.sidenav button:hover {
background-color: navajowhite;
}
.sidenav button.active {
background-color: white;
}
.tabcontent{
background: transparent;
position: fixed;
z-index: 1;
top: 0;
left: 20%;
top: 0;
padding: 2.5%;
height:97.5%;
width:75%;
}
h3{
font-family: sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
border-radius: 25px;
font-family: sans-serif;
}
th, td {
text-align: left;
padding: 16px;
}
.bold {
background-color:antiquewhite;
font-weight: bold;
}
#General {
display: block;
}
.tabcontent{
display: none;
}
.container {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}
.skills {
text-align: right; /* Right-align text */
padding: 10px; /* Add some padding */
color: white; /* White text color */
}
.html {width: 90%; background-color: #4CAF50;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #808080;} /* Dark Grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>My CV online</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="sidebar">
<div id="photo">
<img src="https://raw.githubusercontent.com/DevFrancoisXavierPelletier/CV/master/image.png" alt="Francois Xavier Pelletier" style="width:75%;height:75%; padding: 12.5%;">
</div>
<div class="sidenav">
<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
<button class="tablinks" onclick="openTab(event, 'Experience')">Expérience</button>
<button class="tablinks" onclick="openTab(event, 'Studies')">Etudes</button>
<button class="tablinks" onclick="openTab(event, 'Skills')">Compétences</button>
</div>
</div>
<div id="General" class="tabcontent">
<h3>Informations générales</h3>
<table class="table">
<tr>
<td class="bold">Prénom</td>
<td class="bold">Nom</td>
<td class="bold">Age</td>
</tr>
<tr>
<td>François Xavier</td>
<td>Pelletier</td>
<td>29 ans</td>
</tr>
<tr>
<td class="bold">Adresse</td>
<td class="bold">Code Postal</td>
<td class="bold">Ville</td>
</tr>
<tr>
<td>52 rue Madame de Maintenon</td>
<td>78120</td>
<td>Rambouillet</td>
</tr>
</table>
<h3>Contact</h3>
<table class="table">
<tr>
<td class="bold">Téléphone</td>
<td class="bold">Email</td>
</tr>
<tr>
<td>+33 **********</td>
<td>dev.francois.xavier.pelletier#gmail.com</td>
</tr>
</table>
<h3>Mobilité</h3>
<table class="table">
<tr>
<td class="bold">Permis</td>
<td class="bold">Véhicule</td>
</tr>
<tr>
<td>B</td>
<td>Non</td>
</tr>
</table>
</div>
<div id="Experience" class="tabcontent">
<h3>Experience</h3>
<table class="table">
<tr>
<td class="bold">Nom du projet</td>
<td class="bold">Adresse en ligne</td>
<td class="bold">Contact</td>
</tr>
<tr>
<td>Eagle-dev</td>
<td>www.eagle-dev.com</td>
<td>dev.francois.xavier.pelletier#gmail.com</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="Studies" class="tabcontent">
<h3>Etudes</h3>
<table class="table">
<tr>
<td class="bold">Année</td>
<td class="bold">Nom de l'établissement</td>
<td class="bold">Statut</td>
</tr>
<tr>
<td>2018-2019</td>
<td>IFOCOP (Paris) - Développeur intégrateur web</td>
<td>En cours</td>
</tr>
<tr>
<td>2014-2017</td>
<td>War Studies Academy (Varsovie) - Relations internationales</td>
<td>Licence obtenue</td>
</tr>
</table>
</div>
<div id="Skills" class="tabcontent">
<h3>Compétences</h3>
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">40%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">0%</div>
</div>
</div>
<script src="myScript1.js"></script>
</body>
First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.
I have created a small website with a couple of buttons. Each button should call a previously defined JS function. But with every button press I get a ReferenceError stating that the function is not defined.
(index):1 Uncaught ReferenceError: mainLightOn is not defined
Here's the code of my site:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Cinema Control Center</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
td {
padding: 10px;
}
body {
font-family: Segoe UI, Arial, sans-serif;
background-color: #636363;
}
p {
color: #3b3b3b;
font-size: 4.0em;
}
.btn-xlarge {
padding: 18px 28px;
font-size: 3.5em;
line-height: normal;
border-radius: 8px;
}
.box {
background-color: #fbfbfb;
margin: 120px auto;
padding: 20px;
border-radius: 5px;
box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3);
}
</style>
<script type="text/javascript">
function httpGetAsync(theUrl) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// Add stuff later
}
}
xmlHttp.open("GET", theUrl, true);
xmlHttp.send(null);
}
function mainLightOn() {
httpGetAsync("/api/mainlight/1");
}
function mainLightOff() {
httpGetAsync("/api/mainlight/0");
}
</script>
</head>
<body>
<div class="box" style="width:90%; display:table">
<table style="width:100%">
<tr>
<td style="width:40%;">
<p>Main Light</p>
</td>
<td style="width:30%;">
<button type="button" class="btn btn-success btn-xlarge btn-block" onclick="mainLightOn()">On</button>
</td>
<td style="width:30%;">
<button type="button" class="btn btn-danger btn-xlarge btn-block" onclick="mainLightOff()">Off</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Strangely the error does only occur when I open the website from my server. When I open the html locally on my laptop, the functions are called fine.
Your function definitions are inside the $().ready(function() {... }) body, so the scope is just that function. Javasript that's executed from HTML elements is executed in the global scope.
There's no need to put those functions inside $().ready(). You only need to put code there if it has to wait until the DOM is ready before running. But these functions will only be executed when the user clicks on the elements, which can't happen until the DOM is ready.
The error can be reproduced if named functions are within .ready() handler, where this is set to document
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Cinema Control Center</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
td {
padding: 10px;
}
body {
font-family: Segoe UI, Arial, sans-serif;
background-color: #636363;
}
p {
color: #3b3b3b;
font-size: 4.0em;
}
.btn-xlarge {
padding: 18px 28px;
font-size: 3.5em;
line-height: normal;
border-radius: 8px;
}
.box {
background-color: #fbfbfb;
margin: 120px auto;
padding: 20px;
border-radius: 5px;
box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3);
}
</style>
<script type="text/javascript">
$().ready(function() {
function httpGetAsync(theUrl) {
console.log(theUrl);
}
function mainLightOn() {
httpGetAsync("/api/mainlight/1");
}
function mainLightOff() {
httpGetAsync("/api/mainlight/0");
}
})
</script>
</head>
<body>
<div class="box" style="width:90%; display:table">
<table style="width:100%">
<tr>
<td style="width:40%;">
<p>Main Light</p>
</td>
<td style="width:30%;">
<button type="button" class="btn btn-success btn-xlarge btn-block" onclick="mainLightOn()">On</button>
</td>
<td style="width:30%;">
<button type="button" class="btn btn-danger btn-xlarge btn-block" onclick="mainLightOff()">Off</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Solution, since it does not appear to be possible to set this to other than document using .ready(), where the onclick handler is expecting this to be window, is to place the named functions outside of .ready() handler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Cinema Control Center</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
td {
padding: 10px;
}
body {
font-family: Segoe UI, Arial, sans-serif;
background-color: #636363;
}
p {
color: #3b3b3b;
font-size: 4.0em;
}
.btn-xlarge {
padding: 18px 28px;
font-size: 3.5em;
line-height: normal;
border-radius: 8px;
}
.box {
background-color: #fbfbfb;
margin: 120px auto;
padding: 20px;
border-radius: 5px;
box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3);
}
</style>
<script type="text/javascript">
function httpGetAsync(theUrl) {
console.log(theUrl);
}
function mainLightOn() {
httpGetAsync("/api/mainlight/1");
}
function mainLightOff() {
httpGetAsync("/api/mainlight/0");
}
</script>
</head>
<body>
<div class="box" style="width:90%; display:table">
<table style="width:100%">
<tr>
<td style="width:40%;">
<p>Main Light</p>
</td>
<td style="width:30%;">
<button type="button" class="btn btn-success btn-xlarge btn-block" onclick="mainLightOn()">On</button>
</td>
<td style="width:30%;">
<button type="button" class="btn btn-danger btn-xlarge btn-block" onclick="mainLightOff()">Off</button>
</td>
</tr>
</table>
</div>
</body>
</html>
<!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>