I have a calculator that is inside of an iframe.
<iframe id="tool_iframe" scrolling="no" height="750" srcdoc="
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;600;700&display=swap');
body{
height:100vh;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
font-family: 'Poppins', sans-serif;
background-position:center center;
}
.container {
width: 520px;
background-color: #ffffff20;
margin: 120px auto;
}
table {
width: 100%;
border-color: transparent;
font-family: 'Poppins', sans-serif;
border-radius:20px;
}
td {
width: 25%;
}
button {
width: 100%;
height: 90px;
font-size: 32px;
background-color: white;
border: none;
color:#273342;
}
#inputLabel {
height:100px;
font-size: 60px;
vertical-align: bottom;
text-align: right;
background-color: #27334210;
color:white;
padding:0 10px 0 0;
font-family: 'Poppins', sans-serif;
border-top-radius:20px;
}
</style>
<script>
var inputLabel = document.getElementById('inputLabel');
function pushBtn(obj) {
var pushed = obj.innerHTML;
if (pushed == '=') {
//Calculate
inputLabel.innerHTML = eval(inputLabel.innerHTML);
} else if (pushed == 'AC') {
//All clear
inputLabel.innerHTML = '0';
} else {
if (inputLabel.innerHTML == '0') {
inputLabel.innerHTML = pushed;
} else {
inputLabel.innerHTML += pushed;
}
}
}
</script>
</head>
<body>
<html>
<body>
<div class="container">
<table border="1" cellspacing="0">
<tr>
<td colspan="4" id="inputLabel">0</td>
</tr>
<tr>
<td colspan="3"><button onclick="pushBtn(this);">AC</button></td>
<td><button onclick="pushBtn(this);">/</button></td>
</tr>
<tr>
<td><button onclick="pushBtn(this);">7</button></td>
<td><button onclick="pushBtn(this);">8</button></td>
<td><button onclick="pushBtn(this);">9</button></td>
<td><button onclick="pushBtn(this);">*</button></td>
</tr>
<tr>
<td><button onclick="pushBtn(this);">4</button></td>
<td><button onclick="pushBtn(this);">5</button></td>
<td><button onclick="pushBtn(this);">6</button></td>
<td><button onclick="pushBtn(this);">-</button></td>
</tr>
<tr>
<td><button onclick="pushBtn(this);">1</button></td>
<td><button onclick="pushBtn(this);">2</button></td>
<td><button onclick="pushBtn(this);">3</button></td>
<td><button onclick="pushBtn(this);">+</button></td>
</tr>
<tr>
<td colspan="2"><button onclick="pushBtn(this);">0</button></td>
<td><button onclick="pushBtn(this);">.</button></td>
<td><button onclick="pushBtn(this);">=</button></td>
</tr>
</table>
</div>
</body>
</html>
</body>
</html> "></iframe>
The actual website is https://tropical.team/tool/calculator/ if you want to take a look for yourself. You can see when you load in everything loads fine but the calculator just doesn't work, i know the code is valid because when i copy the script from the head of the iframe and paste it into the consxole it workks. This must mean that it's a problem with the document.reference not working inside the iframe. The calculkator code is user made which means i can only modify it automaticaly in minor ways, like changing all document references to something else. What could i chage them to that would generally fix this?
Related
I'm trying to make a responsive calendar where if I press a day it change its color and if I press two days it colors the two days (also that sums the days I click on a counter that is shown on screen) and like that consecutivly. Then if press again the day it will decolor and is substracted from the total of the sum.
This is what I have:
let day = document.getElementsByClassName('day');
for (i = 0; i < day.length; i++) {
if (day[i].classList.contains('day')) {
day[i].addEventListener("click", function OnClick() {
this.classList.add("vacacion");
this.classList.remove("day");
})
} else if (day[i].classList.contains('vacation')) {
day[i].addEventListener("click", function Click() {
this.classList.remove("vacacion");
this.classList.add("day");
})
}
}
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: rgb(65, 65, 65);
}
h1, td, th {
text-align: center;
}
h1 {
padding: 30px;
background-color: rgb(140, 161, 218);
color: white;
}
div#colors {
margin: 15px 20px;
display: grid;
grid-template-columns: 85px 100px 100px auto;
}
div#colors div.config {
width: 20px;
height: 12px;
float: left;
margin-right: 3px;
border-radius: 4px;
}
div#colors div.contador {
width: 110px;
justify-items: right;
font-weight: 900;
}
div#colors div.contador h6 {
font-weight: 600;
}
.festivos {
background-color: #7d6da1;
color: white;
}
.vacaciones {
background-color: #ad626e;
color: white;
}
.vacacion {
background-color: #ad626e;
color: white;
}
.ausencias {
background-color: #a77f13;
color: white;
}
div#colors h6 {
font-size: 0.8em;
font-weight: 500;
}
div#calendar {
margin: 15px auto;
display: grid;
grid-template-columns: auto auto auto;
column-gap: 30px;
row-gap: 30px;
justify-items: center;
justify-content: center;
}
table {
justify-self: center;
align-self: start;
}
caption {
background-color: rgb(140, 161, 218);
padding: 5px;
color: white;
font-weight: 900;
}
.finde {
background-color: rgb(230, 230, 230);
}
th {
padding: 0 7px 0 7px;
}
td {
padding: 3px 0 3px 0;
}
.day {
background-color: none;
}
#media only screen and (min-width: 1200px) {
div#calendar {
grid-template-columns: auto auto auto auto;
}
}
#media only screen and (max-width: 850px) {
div#calendar {
grid-template-columns: auto auto;
}
}
#media only screen and (max-width: 600px) {
div#calendar {
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="calendario.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>2023</h1>
<div id="colors">
<div>
<div class="festivos config"></div>
<h6>Festivos</h6>
</div>
<div>
<div class="vacaciones config"></div>
<h6>Vacaciones</h6>
</div>
<div>
<div class="ausencias config"></div>
<h6>Ausencias</h6>
</div>
<div class="contador"><h6>Días festivos:<span id="contador">#</span></h6></div>
</div>
<div id="calendar">
<!-- ENERO 2023 -->
<table>
<caption>ENERO</caption>
<thead>
<tr>
<th>Lu</th>
<th>Ma</th>
<th>Mi</th>
<th>Ju</th>
<th>Vi</th>
<th>Sa</th>
<th>Do</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="finde">1</td>
</tr>
<tr>
<td class="day">2</td>
<td class="day">3</td>
<td>4</td>
<td>5</td>
<td class="festivos day">6</td>
<td class="finde day">7</td>
<td class="finde">8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td class="finde">14</td>
<td class="finde">15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td class="festivos">20</td>
<td class="finde">21</td>
<td class="finde">22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td class="finde">28</td>
<td class="finde">29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="calendario.js"></script>
</body>
</html>
You almost got it right! The only thing you missed is the "unchecked" state where you have to remove the class vacation and add day back to it.
It is also worth mentioning that only the elements that have day class (1,2,6 and 7) at the time you are query the elements (document.getElementsByClassName('day')) will have the click handler registered because you query only those. This is also the reason why you never get to register click handler on vacation items since else if in loop will never be reached.
I added an extra class for selected elements so it is easier to count them so the counter could be updated appropriately - you could use day or vacation class ass well for this purpose.
let day = document.getElementsByClassName('day');
// get counter element
let counterEl = document.getElementById('contador');
let counter = 0;
for (i = 0; i < day.length; i++) {
if (day[i].classList.contains('day')) {
day[i].addEventListener('click', function click() {
// you have to add vacation if it is not already in classList
// and remove it if it is already there. You could check if
// classList contains vacation and then remove it, but toggle
// does that under the hood for you
this.classList.toggle('vacacion');
this.classList.toggle('day');
// adding additional selected class to know which ones are selected
this.classList.toggle('selected');
// if element has selected class then increase the counter,
// otherwise decrease it
if (this.classList.contains('selected')) {
counter += 1;
} else {
counter -= 1;
}
// update the counter
counterEl.innerText = counter;
});
// the statement below will NEVER execute, since the first condition
// will always be true because you query only the elements with
// classname "day" in line 1.
// ...
}
}
I made a table in HTML, and I added a delete button so that it deletes the last recorded row in the table.
The delete button works but when I refresh the page the edits are gone, and everything is back to the original state.
How can I make it so that when the user edits the page it changes permanently?
This is a demo: http://jsfiddle.net/objcLfxd/#&togetherjs=9ai74rb5DH
If that doesn't work:
body {
background-color: #ffffff;
font-family: candara, monospace;
text-align: center;
font-weight: bold;
margin-top: 5px;
text-transform: uppercase;
height: 600px;
width: 1000px;
color: #1b1186;
}
#DELETE {
background-color: #1b1186;
width: 250px;
color: white;
margin-top: 50px;
}
#DELETE:hover {
background-color: #ff4625;
cursor: pointer;
}
button {
background-color: #1b1186;
border-radius: 0px;
border: 0px #cccccc;
font-family: candara, monospace;
font-weight: bold;
margin-top: 15px;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 10px;
width: 200px;
transition: all 1s;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
text-decoration: none;
}
button:hover {
background-color: #fff06d;
color: black;
padding-right: 25px;
padding-left: 25px;
}
table {
border: 5px, #1b1186
}
<!DOCTYPE html>
<html>
<head>
<button type="button" onclick="window.location.href='userhome.html';">Home</button>
<button type="button" onclick="window.location.href='settings.html';">Settings</button>
<button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var table = $('#HOURTABLE').DataTable();
$('#HOURTABLE tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
</script>
</head>
<body onload="checkEdits()">
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>4</th>
<th>4/5/2020</th>
<th>Tutoring</th>
<th>It was fun</th>
</tr>
<tr>
<th>2</th>
<th>67</th>
<th>4/8/2020</th>
<th>Tutoring</th>
<th>It was interesting</th>
</tr>
</tbody>
<tfoot>
</tfoot>
<br>
<button ondblclick="row()">
Delete Row
</button>
<script>
var x = document.getElementById("HOURTABLE").rows.length;
function row() {
// delete row (index-0).
document.getElementById("HOURTABLE").deleteRow(1);
}
</script>
</table>
</body>
</html>
first, if you want to show dynamic content you must use database, there is no other way.
second, if you want to make your content change in real-time you must use firebase, websocket or any other technology
In this example I am using the localstorage, and I have created some functions so that you can handle the data.
<html>
<head>
<button type="button" onclick="window.location.href='userhome.html';">Home</button>
<button type="button" onclick="window.location.href='settings.html';">Settings</button>
<button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody class="body-container">
</tbody>
<tfoot>
</tfoot>
<br>
<button ondblclick="deleteRowSelected()">Delete Row</button>
<script>
function getData() {
let local = localStorage.getItem('data');
if (local == null) {
local = setData();
}
return JSON.parse(local);
}
function setData(data = null) {
if (data == null) {
data =
[
{
session: 1,
hours: 4,
date: '4/5/2020',
organization: 'Tutoring',
description: 'It was fun'
},
{
session: 2,
hours: 67,
date: '4/8/2020',
organization: 'Tutoring',
description: 'It was interesting'
}
];
}
const textData = JSON.stringify(data);
localStorage.removeItem('data');
localStorage.setItem('data', textData);
return textData;
}
function generateRow(row) {
return `
<tr data-session="${row.session}">
<th>${row.session}</th>
<th>${row.hours}</th>
<th>${row.date}</th>
<th>${row.organization}</th>
<th>${row.description}</th>
</tr>`;
}
function deleteRow(session) {
const data = getData();
let newArray = [];
data.forEach(element => {
if (element.session !== session) {
newArray.push(element);
}
})
console.log(newArray);
setData(newArray);
load();
}
function load() {
const data = getData();
const container = $('.body-container');
container.html('');
if (container.length > 0) {
data.forEach(row => {
container.append(generateRow(row));
})
} else {
container.appent('<tr>empty</tr>');
}
}
var x = document.getElementById("HOURTABLE").rows.length;
function deleteRowSelected() {
const row = $('.body-container').find('tr.selected');
if (row.length == 0) {
alert('you must select a row');
} else {
row.remove();
deleteRow(row.data('session'));
}
}
$(document).ready(function () {
var table = $('#HOURTABLE').DataTable();
$('#HOURTABLE tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
load();
});
</script>
</table>
</body>
</html>
The following example assumes you are using PHP and that a PHP Script, called delsessions.php, is setup on your Web Server. This script will accept an Array of IDs via HTTP POST. It will then update a SQL Database and remove rows from a table associated with the Session IDs passed to it.
This also assumes there is script or API that provides the table data from the same Database table.
$(function() {
var table = $('#HOURTABLE').DataTable();
function href(el) {
window.location.href = $(el).data("href");
}
function delRows() {
var sessions = [];
$(".selected").each(function(i, el) {
sessions.push($(el).children().eq(0).text());
})
table.rows(".selected").remove().draw();
console.log("Delete Sessions", sessions);
$.post("delsessions.php", {
ids: sessions
});
}
$(".btn[data-href]").click(function(e) {
e.preventDefault();
href(this);
});
$(".delete-row").click(delRows);
$('#HOURTABLE tbody').on('click', 'tr', function() {
$(this).toggleClass("selected");
});
});
body {
background-color: #ffffff;
font-family: candara, monospace;
text-align: center;
font-weight: bold;
margin-top: 5px;
text-transform: uppercase;
height: 600px;
width: 1000px;
color: #1b1186;
}
#DELETE {
background-color: #1b1186;
width: 250px;
color: white;
margin-top: 50px;
}
#DELETE:hover {
background-color: #ff4625;
cursor: pointer;
}
button {
background-color: #1b1186;
border-radius: 0px;
border: 0px #cccccc;
font-family: candara, monospace;
font-weight: bold;
margin-top: 15px;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 10px;
width: 200px;
transition: all 1s;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
text-decoration: none;
}
button:hover {
background-color: #fff06d;
color: black;
padding-right: 25px;
padding-left: 25px;
}
table {
border: 5px, #1b1186
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<button class="home btn" data-href="userhome.html">Home</button>
<button class="settings btn" data-href="settings.html">Settings</button>
<button class="add-hours btn" data-href="userhome.html">Add Hours</button>
<button class="delete-row btn">Delete Row</button>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>4</th>
<th>4/5/2020</th>
<th>Tutoring</th>
<th>It was fun</th>
</tr>
<tr>
<th>2</th>
<th>67</th>
<th>4/8/2020</th>
<th>Tutoring</th>
<th>It was interesting</th>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
When the user selects, via click the various Rows and clicks "Delete Row" button, the Datatable will be updated, removing those rows, and the IDs for those rows will be posted to the PHP. The script will then delete the relative rows from the database. When the User returns to the site or reloads the site, the database table will no longer contain the rows and will not present them when constructing the HTML table.
There is no way you can do that without a back-end like PHP, node.js, firebase...
You can do a hack using localStorage but changes will remain only while user dosn't delete browser data.
Good day.
I've been trying top figure out why the copy to clipboard not working despite of putting the correct form name, please advise what would be the best command, i've been trying so hard couldn't seem to make it work.
here is the sample of the form or template im working on
I was hoping to use the copy to clipboard function so i can copy the title and content of each line
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
<script>
<script> }
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
}
</SCRIPT>
<head>
<body>
<!--Special comment-->
<!--Style-->
<style type="text/css">
/* Some Generic styles */
H1 {
Color: #9c33ff;
font-size: 20px;
isplay: inline-block;
}
H2 {
font-size: 15px;
Color: #751aff;
font-size: 13px;
}
Body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 580px;
height: 800px;
border: none;
font: normal 12px/1 "Trebuchet MS", Helvetica, sans-serif;
color: rgba(2,2,2,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-45deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: -moz-linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: Left;
}
input {
display: inline-block;
float: center;
}
TBODY {
font-size: 14px;
Color: #313133;
font-size: 13px;
}
#tickettemplate {
font-size: 15px;
Color: #313133;
font-size: 13px;
}
</style>
<!--Html starting point-->
<h1>i</h1>
<h2>i</h2>
<P align=center><IMG
src="" alt="" width="80" height="83"></P>
<FORM name=tickettemplate id=tickettemplate>
<!-- Table to contain page title and buttons -->
<TABLE>
<TBODY>
<TR>
<TD align=center colSpan=4>
<DIV></DIV></TD></TR>
<TR>
<TD><INPUT name=Reset onclick="resetForm();return false;" type=reset value="Clear All Fields">
</TD>
<TD><INPUT name=copyform onclick="val1();return false;" type=button value="Copy to Clipboard">
</TD></TR></TBODY></TABLE><!-- Table for General information --><BR>
<!--This is where i started-->
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>General Info</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Name:</TD>
<TD><INPUT name=cname_singleuser id=cname_singleuser size=50>
</TD>
<TR>
<TD vAlign=middle>User ID:</TD>
<TD><INPUT name=userid_singleuser0 id=userid_singleuser0 size=50> </TD></TR>
<TR>
<TD vAlign=top>Callback no.: </TD>
<TD><INPUT name="callback no" id=callbackno0 size=50></TD></TR>
<TR>
<TD vAlign=middle>Email Address:</TD>
<TD><INPUT name=emailaddy_singleuser id=emailaddy_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Office Location</TD>
<TD><INPUT name=oloc_singleuser id=oloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Current Location:</TD>
<TD><INPUT name=cloc_singleuser id=cloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Exisitng/Related:</TD>
<TD><INPUT name=exrelated_singleuser id=exrelated_singleuser
size=50></TD></TR>
<TD vAlign=top>Business Unit/Client:</TD>
<TD><INPUT name=client1 id=client1 size=50> </TD></TR></TBODY></TABLE><BR>
<TABLE width=750 cellSpacing=0 cellPadding=0>
<TBODY>
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>Brief Description</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Issue: </TD>
<TD><INPUT name=Issue id=issue0 size=50></TD></TR>
<TR>
<TD vAlign=top>Number of Users Affected: </TD>
<TD><INPUT name="Number of users Affected" id=numberofusers0
size=50></TD></TR>
<TR>
<TD vAlign=top>Business Impact:</TD>
<TD><SELECT name="Business Impact" id=businessimpact0 size=1 type="text">
<OPTION value="" selected></OPTION> <OPTION value=Minor>P4
Minor</OPTION> <OPTION value=Medium>P3 Medium</OPTION> <OPTION
value=High>P2 High</OPTION> <OPTION value=Major>P1
Major</OPTION></SELECT> </TD></TR>
<TR>
<TD width=400 vAlign=top><p>Additional information/
Incident Description:</p></TD>
<TD><TEXTAREA name=Description id=Description1 rows=8 cols=60 wrap=virtual></TEXTAREA></TD></TR></TBODY></TABLE>
<TABLE width=750>
<TBODY>
<TR><BR><STRONG>Choose the Category:</STRONG></TR></TBODY></TABLE>
Not sure where you got that code from, but seems to be wrong. If you are copying the text from an input it is pretty straight forward. Focus, select, and copy from a click action.
function copy(event) {
var selector = event.target.getAttribute('data-copy')
var elem = document.querySelector(selector)
elem.focus()
elem.select()
document.execCommand('copy')
}
document.querySelectorAll('[data-copy]').forEach( function () {
this.addEventListener('click', copy)
})
<textarea id="foo">Hello world</textarea>
<button type="button" id="btnCopy1" data-copy="#foo">copy</button>
<hr/>
<textarea id="bar">Hello world</textarea>
<button type="button" id="btnCopy2" data-copy="#bar">copy</button>
I want to save the content editable data to local storage.
Right now if you try to edit the stock table it changes, then when you refresh the page, it goes back to initial value.
Is there a way to do this automatically, without requiring a button to save it? Just by exiting the text box, it should save automatically.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inventory</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Titan+One" rel="stylesheet">
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#hewrap{
text-align: center;
}
#he {
font-family: 'Titan One', cursive;
font-family: 'Anton', sans-serif;
color: white;
background-color: black;
font-size: 32px;
}
.fi {
border-radius:5px;
height: 30px;
}
#btn {
border-radius: 5px;
height: 30px;
background-color: blue;
color:white;
}
#ftr {
background-color: black;
}
</style>
</head>
<body>
<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear storage</a>
<div id="hewrap">
<h1 id="he">Inventory</h1>
</div>
<table id="inventory">
<thead>
<tr>
<th>Description</th>
<th>Part-#</th>
<th>Required</th>
<th>Stock</th>
<th>Price</th>
<th>N/A</th>
</tr>
<tr id="ftr">
<td><input class="fi" type="text" id="one" placeholder="Description"></td>
<td><input class="fi" type="text" id="two" placeholder="Part-#"></td>
<td><input class="fi" type="text" id="three" placeholder="Required"></td>
<td><input class="fi" type="text" id="four" placeholder="Stock"></td>
<td><input class="fi" type="text" id="five" placeholder="Price"></td>
<td><button id="btn" onclick="addRow()">ADD</button></td>
</tr>
</thead>
<tbody id="screen">
</tbody>
</table>
</body>
<script>
//scribble data
//save
$( document ).ready(function(){
$('#screen').html(localStorage.getItem("data"));
});
function addRow(){
var str = '<tr class = "boxType"><td>'+$('#one').val()+'</td>\
<td>'+$('#two').val()+'</td>\
<td>'+$('#three').val()+'</td>\
<td id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);">'+$('#four').val()+'</td>\
<td>'+$('#five').val()+'</td>\
</tr>'
$('#screen').append(str);
localStorage.setItem("data", $('#screen').html());
}
</script>
<script type="text/javascript">
getUserScribble();
</script>
</html>
I have created one HTML page. I have done it in just french language now I am trying to add an option at the top of my website to translate language between French and English (there are 2 language flags in the link in paragraph below).
My idea is to have a table which contains a button of flag of France and England (French and English) in first row (something like this: http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using HTML and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one displayed at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
See this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have my HTML code below (it doesn't contain code for English table but it is assumed that the table have same HTML code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
After Wrick7 suggestion
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
The output is:
http://prntscr.com/6zdj0r
You can set one table with visibility hidden and another with visible and then when a button is pressed you just change it in js....
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}
.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }
<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>