How to persist HTML(DOM) changes in a New Tab - Chrome Extension? - javascript

I am trying to build a simple chrome New Tab extension where the extension takes an input from the user via a text field and then displays it.
My app.js has the following code:
document.onkeydown = function(e) {
if (e.keyCode == 13) {
if ($('#spark').value !== null) {
// console.log("Hello")
var string = $('#spark').val();
// console.log(string);
chrome.storage.sync.set({"myKey": string});
$('#spark').hide();
chrome.storage.sync.get("myKey", function(string) {
$('#text').append(string.myKey);
});
}
}
});
The HTML page has a div 'spark' which is the input form and a div 'text' where the text inputted in 'spark' should be displayed and is as follows:
<html>
<head>
<title>Blank New Tab</title>
<script src="app.js"></script>
<script src="jquery.min.js"></script>
<style>
div {
color: #cccccc;
vertical-align: 50%;
text-align: center;
font-family: sans-serif;
font-size: 300%;
}
</style>
</head>
<body>
<div style="height:40%" id='body'>
<div id="text"> </div>
</div>
<div>
<form>
<input type="text" name="spark" id="spark">
</form>
</div>
</body>
</html>
When I run this extension, the text gets displayed for a millisecond and then rests to the original page with the input. Here's a gif of that: http://imgur.com/XySGg4X
How do I get the text to persist on the New Tab page? Once the user types in the message and presses enter, the input form should be hidden and the page should display the text entered by the user.

Related

Keep selected drop down menu option visible after page reload

I have an error message that only shows if the audio file isn't found. If it is found then people see an ON button. The error message can be clicked on to reload the page. I want it to remain on the current active drop down menu page. Right now it makes you reselect an option from the drop down menu.
<!--I coult not get the page to display properly by putting the JS code here. That is why it's in the html field-->
<!--I coult not get the page to display properly by putting the css code here. That is why it's in the html field-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<style>
.down {
font: bold 15px Arial;
background-color: red;
color: white;
padding: 3px 3px;
width: 100%;
text-decoration: none;
display: inline-block;
border-top: 5px solid red;
border-right: 5px solid red;
border-bottom: 5px solid red;
border-left: 5px solid red;
}
</style>
<style>
select {
border: 50px;
color: #000000;
background: #12f3fd;
text-align: center;
font-weight: bold;
*background: Black;
}
</style>
</head>
<body>
<div align="center">
<select name="stations" id="station" style="font-size:25px;" align="center">
<option>Select a Opton</option>
<option value="1">What you see if audio file was found</option>
<option value="2">What you see if audio file was not found</option>
</select>
</div>
<div class="st hidden" id="st1">
<p>
<audio id="audio1" src="example.mp3"></audio>
<button id="A" class="button">ON</button>
</p>
</div>
<div class="st hidden" id="st2">
<p>
<audio id="audio2" src="example.mp3"></audio>
<button id="B" class="button">ON</button>
</p>
</div>
</body>
<!--Controls the Drop Down Menu-->
<script>
$(document).ready(function(){
$('#station').on('change', function(){
var theVal = $(this).val();
$('.st').addClass('hidden');
$('.st#st' + theVal).removeClass('hidden');
});
});
</script>
<!--Displays the error message if the audio file is not found and gives the option to reload the page.-->
<div id="dwnB" class="down">
<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
});
</script>
</div>
<!--This script reloads the page and is tied to the above script-->
<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>
</html>
I get this when i run the snippet.
Error: {
"message": "Uncaught ReferenceError: reloadButton is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 123,
"colno": 1
}
Remember, Reload button is not in the body of the page but is in the script part of the page and only displays if there's an error. Even though button A in the first menu option should error as well. I did not write a script for it to do that so you can see what it looks like with out the error.
Here is the script for the reload button.
<!--Displays the error message if the audio file is not found and gives the option to reload the page. The entire error message is the reload button.-->
<div id="dwnB" class="down">
<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
});
</script>
</div>
<!--This script reloads the page and is tied to the above script-->
<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>
Reloading in the snippet causes the page to go blank. But if you run the code and reload somewhere else it displays as if you haven't chosen a menu option yet.
I don't know where "filename": "https://stacksnippets.net/js", is coming from as I don't see that in my code.
How can I get to to stay on the current selected menu option after the reload button is clicked?
const reloadButton = document.querySelector("#reload");
As there is no element with id reload, reloadButton value is null
reloadButton.addEventListener("click", reload, false);
As you now know that reloadButton is null, event cannot be attached
Instead of only creating the error body, add the reload button and then add an event, on this new reload button, refer code given below:
$('#audio2').on('error', function (e) {
document.getElementById('B').outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b><br><button class="reload">Reload</button> </div>';
//once element with id 'dwnB' is created find the Reload Button
let newReloadButton = document.querySelector("#dwnB .reload");
newReloadButton.addEventListener('click', reload, false);
});
$(document).ready(function () {
$('#station').on('change', function () {
let value = $(this).val();
$('.st').addClass('hidden');
$('.st#st' + value).removeClass('hidden');
//store your latest value in localStorage
localStorage.setItem('station', value);
});
//fetch the old value from localStorage
let oldStation = localStorage.getItem('station');
//set station value as per stored value
if (oldStation) {
$('#station').val(oldStation).trigger('change');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
As you created the New Reload Button, no need of this lines
const reloadButton = document.querySelector("#reload");
reloadButton.addEventListener("click", reload, false);
Note: No need to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> as you are using <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

How to copy HTML code from the browser using javascript

I want to copy the HTML code by clicking on the button using javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#data {
background: #eee;
width: 300px;
padding: 13px;
text-align: center;
font-family: arial;
}
</style>
</head>
<body>
<button type="button" onclick="copyToClipboard('data')">Copy </button>
<textarea id="data" name="data">
<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>
</textarea>
<script src="doc/jquery.min.js"></script>
<script src="doc/clipboard.min.js"></script>
<script>
window.copyToClipboard = function(elementId) {
var aux = document.getElementById(elementId);
aux.select();
document.execCommand("copy");
}
</script>
</body>
</html>
I try this code, but it shows the code only, and I want it to show the preview of the HTML code.like this
So how can I copy HTML code from the browser by clicking on the button?
A textarea is a text only element.
It won't parse the HTML in its value.
What you might want to look into is a WYSIWYG editor that supports html export of its contents.
I have used TinyMCE (self-hosted, there is a paid option as well) in the past tho there are definitely other options. I have no affiliation with TinyMCE.
Edit:
After clarifying, here is a sample of the code:
<button onclick="fun_name();">get outerHTML</button>
<div id="idDiv">
<div id="data">
<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>
</div>
</div>
<script>
function copyToClipboard(text) {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
function fun_name() {
var elem = document.getElementById("idDiv").outerHTML;
copyToClipboard(elem)
}
</script>

Display a django-from from JS

so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>

Windows virtual keyboard is not showing when input is focused

Windows Virtual keyboard is not showing when app is running in touch mode (tablet device/simulator) and I'm manually triggering focus() on input. Instead keyboard shows when tapping anywhere on body (meaning that input is focused). Hoverer when running application as a regular desktop app with mouse input (instead of touch) - everything works well.
So the question is how to avoid such behaviour or at least how to manually display virtual keyboard when input is focused?
I'm using WinJS.4.0 4.0.0.winjs.2015.6.9.
Sample code to replicate the issue:
default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
</head>
<body class="win-type-body">
<div id="container">
<div id="text-holder">
Input value will be displayed here
</div>
<div id="input-holder">
<form id="form">
<input id="input" value="" type="number"></input>
</form>
</div>
</div>
<script src="/js/default.js"></script>
</body>
</html>
default.js
(function () {
var input = document.getElementById('input');
var form = document.getElementById('form');
var textHolder = document.getElementById('text-holder');
form.addEventListener('submit', function (e) {
e && e.preventDefault();
textHolder.innerText = input.value;
input.value = "";
input.blur();
});
textHolder.addEventListener('click', function (e) {
console.log(e);
input.focus();
});
})();
default.css:
body {
background-color: #fff;
}
#container {
width: 100%;
height: 100%;
}
#text-holder {
width: 200px;
height: 50px;
background-color: #191A15;
color: #fff;
}
Visual guidance:
Step 1:
Step 2:
Thanks for your interest, hope this problem is solvable.
It is a known OS issue with winjs/uwp app running on a W10 (build 10.240). It has been fixed with W10 TH2 (build 10.586) as mentionned in the following MSDN thread

How to clone div wrap on button click?

http://jsfiddle.net/TDmRv/1/
What I want to do: I want the div with the id "theDiv" to be wrapped around the text that gets inputted onto the page. I want this so the text will appear in multiple divs that are created.
Explained more:
Okay, so what I am trying to do is type some input in and have it display with in a div- that works fine, but I want the div to wrap around it when I click input. So every time I click "add" the text gets wrapped into a div and is displayed. BUT I am also trying to make this appear multiple times, so every time I add input the div is wrapped around the text. Finally I am trying to have those two buttons placed into there, I assume those would have to be inserted when "add" is clicked with jQuery. I just need some guidance because I am struggling to comprehend how this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$("#theDiv").css("background-color","red");
});
});
$(document).ready(function(){
$("#delete").click(function(){
$("#theDiv").remove();
});
});
$(document).ready(function(){
$("#add").click(function(){
$('#edit').wrap('<div class="theDiv" />');
});
});
</script>
<style>
#theDiv {
border: 1px solid rgb(204, 204, 204);
margin: 5px 0pt;
padding: 5px;
background-color: blue;
height:50px;
}
button {
float:right;
}
</style>
</head>
<body>
<div id="hold">
<button id="edit">Edit</button><button id="delete">Delete</button>
</div>
<form>
<div><textarea class="textI" id="textI2" style="width: 400px; height: 50px;"></textarea></div>
<div><input type="button" id="add"value="add" onclick="theDiv_append()" /></div>
</form>
<script language="javascript">
$('.textI').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
});
function theDiv_append() {
$('#theDiv').append($('#textI2').val());
}
</script>
</body>
</html>
try this , change #add click to this , it works in jsfiddle, just add the text, I didn't do that , but you will see how to add new blue div
$("#add").click(function(){
var newRow = $('#theDiv').clone();
$('#hold').append(newRow);
$('#edit').wrap('<div class="theDiv" />');
});
});

Categories

Resources