I want to remove pop-up option from this script while printing the content of textarea so the print page will be in same page of the textarea because i added css so the printed page wont have link or the date "#page { size: auto; margin: 0mm; }" but when it pop-up in seperate page it shows link and date
<html >
<head>
<title></title>
<!-- script print button -->
<script type="text/javascript">
function printTextArea() {
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body dir="rtl">');
childWindow.document.write(document.getElementById('targetTextArea').value.replace(/\n/gi,'<br/>'));
childWindow.document.write('</body></html>');
childWindow.print();
childWindow.document.close();
childWindow.close();
}
</script>
<style type="text/css">
#page { size: auto; margin: 0mm; }
textarea {
direction: rtl;
background-color: white;
font-size: 1em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #00acee;
resize: none;
}
input[type=button] {
background-color: #00acee;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<p>
<TEXTAREA name="thetext" rows="20" cols="80"id="targetTextArea" placeholder="قم بنسخ و لصق الطلب لملأه و التعديل عليه و طباعته بالزر أسفله ......"></TEXTAREA>
</p>
<!-- print button -->
<center> <input type="button" onclick="printTextArea()" value="طباعة"/></center>
</body>
</html>
This is happening because you are opening a new Window inside printTextArea().
When opening a window with the window.open() method, you can use this property from the destination window to return details of the source (parent) window.
You can read more about it here at w3schools. W3School Window Opener
function printTextArea() {
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body dir="rtl">');
childWindow.document.write(document.getElementById('targetTextArea').value.replace(/\n/gi,'<br/>'));
childWindow.document.write('</body></html>');
childWindow.print();
childWindow.document.close();
childWindow.close();
}
In stead of opening the new window, you should be selecting your textarea by id and updating it's html using .innerHTML. Ex:
document.getElementById("demo").innerHTML = "Paragraph changed!";
Related
I'm trying to make a Chrome extension, but click listeners aren't working. Yes it's being injected, but it's still not working.
// define all other functions...
var start = document.getElementById("startTask")
start.addEventListener("click", function() {
addTask()
console.log("add")
})
var cancel = document.getElementById("deleteTask")
cancel.addEventListener("click", function() {
hideAddTaskForm()
})
var showForm = document.getElementById("showForm");
showForm.addEventListener("click", function() {
showAddTaskForm()
console.log("add progrees")
})
HTML for refrence:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<style>
/* Add some styling for the task cards and the "add task" button */
.task-card {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #f1f1f1;
box-shadow: 2px 2px 5px #ccc;
}
.task-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.task-time {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.task-url {
font-size: 14px;
color: #666;
text-decoration: underline;
cursor: pointer;
}
.task-buttons {
float: right;
}
.add-task-button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-top: 10px;
}
/* Hide the "add task" form by default */
#add-task-form {
display: none;
}
</style>
</head>
<body>
<h2>Task List</h2>
<div id="task-list">
<!-- Task cards will be added here dynamically -->
</div>
<button class="add-task-button" id="showForm">Add Task</button>
<form id="add-task-form">
<input type="text" id="task-name" placeholder="Task Name">
<input type="text" id="task-time" placeholder="Task Time (HH:MM)">
<input type="text" id="task-url" placeholder="Task URL">
<button id="startTask" type="submit">Save</button>
<button id="deleteTask" type="button">Cancel</button>
</form>
</body>
</html>
It was supposed to show a form for the task for the user to fill in, but it's not showing, and it is being clicked.
Not sure if the code is running on the webpage instead of the popup page, any other things I should do? I am not using jQuery, by the way.
Things I did
I made it execute when the DOM loads, shown above. I haven't seen any difference when I click it.
I have an HTML page, and I have a <textarea> element in it. Let's also say I have a send button that displays the message on the screen. When multiple messages are sent, their position will move to below the previous message sent. New messages will be in separate containers (I made borders). I've used this code that worked. Actually, it didn't completely work. When you enter multiple messages, instead of creating a new message border with the message inside it, it puts all your text in the same element.
const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);
function displayText() {
const display = document.getElementById("msg");
const textArea = document.getElementById("enterMsg");
display.append(
textArea.value,
document.createElement("br")
);
textArea.value = "";
}
body {
background-color: skyblue;
font-weight: bolder;
}
#enterMsg {
margin-top: 34%;
height: 130px;
width: 100%;
font-family: Arial, sans-serif;
font-size: 15px;
color: darkorange;
background-color: #d796ff;
font-weight: bolder;
}
.enterText {
font-family: Arial, sans-serif;
font-size: 15px;
color: darkorange;
background-color: #d796ff;
font-weight: bolder;
}
#sendButton {
margin-left: 96%;
}
#msg {
margin-left: 80%;
border: solid;
border-color: #b19cd9;
background-color: #b4ff94;
border-radius: 50px;
color: darkorange;
}
.extraSpace {
padding: 5px;
}
textarea::placeholder {
color: darkorange;
}
div.centered {
text-align: center;
border: solid;
border-color: blue;
margin-top: 10%;
margin-bottom: 10%;
}
.confirmButton {
text-align: center;
margin-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="style.css">
<script src="tools.js"></script>
</head>
<body>
<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>
As I said, this code works but it puts all messages in a single element. Is there any way to make it so that a new border appears with the entered text inside it instead of putting every message into a single element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="style.css">
<script src="tools.js"></script>
</head>
<body>
<div id="messages"></div>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>
const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);
const textArea = document.getElementById("enterMsg");
const container = document.getElementById("messages");
function displayText() {
// Create a new element with the message as it's inner text.
const message = document.createElement("p");
message.innerText = textArea.value;
message.setAttribute("class", "msg");
// Add that to the document
container.appendChild(message);
textArea.value = "";
}
You'll also have to change your stylesheet because msg is a class now rather than an ID (since there will be more than one of them
I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()
Good Evening Stackoverflow!
So I am running into an issue in which I am trying to create a notes app using javascript and I wanted to play around with localStorage. I have tried a couple of options but I can't seem to select all and then copy to the clipboard the localStorage, has anyone else ran accross this before?
<!DOCTYPE html>
<html>
<head>
<title>NotePad</title>
<style>
body {
font-family: Tahoma;
line-height: 1.6em;
background: #f4f4f4;
}
header, footer {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto;
background: #FFFFa5;
overflow:hidden;
padding: 30px;
}
.clear {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
.copy {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
function getNote(){
if(localStorage.getItem('note')){
var note = localStorage.getItem('note');
} else {
var note = 'Go ahead and edit this note to save in local storage';
}
document.getElementById('note').innerHTML = note;
}
function saveNote(id){
var note = document.getElementById('note').innerHTML;
localStorage.setItem('note', note);
}
function clearNote(){
clear: localStorage.clear();
return false;
}
function copyNote(){
$("#note").select();
document.execCommand("copy");
return false;
}
</script>
</head>
<body>
<header>
<h1>My Notes!</h1>
</header>
<section id="container">
<div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
</section>
<footer>
<div>
Clear Note
</div>
<br>
<div>
Copy
</div>
<p>MyNote © 2017</p>
</footer>
<script>
getNote();
</script>
</body>
</html>
The select method does not select text. It fires the select event on that element (pretends the user selected that element themself), and since you have no event handlers for the select element, nothing happens. This question should help you create a function that selects your text.
In the following code, I am allowing users to edit text content, save and recall changes from own "local storage". So every editor's browser "remembers" their own editing, and each editor sees his changes only. I want to realise an idea of the anonymous wiki and import every user edits and display the last one in the final HTML page.
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML = "Готово";
}
function checkEdits() {
//find out if the user has previously saved edits
if (localStorage.userEdits !== null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
body {
display: block;
padding: 50px;
margin: 50px;
width: 90%;
font-family: 'Oranienbaum', serif;
font-size: 30px;
margin-right: 50px;
height: 90%
}
#edit {
background-color: white;
margin: 5px;
padding: 0px;
text-align: inherit;
font-size: 40px;
font-family: 'Oranienbaum', serif;
}
#button {
background-color: silver;
border: none;
top: 100px;
margin: 5px;
padding: 10px;
font-family: 'Oranienbaum', serif;
font-size: 20px;
}
#update {
background-color: white;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 20px;
}
hr {
display: block;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: 1px;
}
.footer {
background-color: inherit;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Indexmod Encyclopedia — anonymous real-time editing </title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Oranienbaum');
</style>
</head>
<body onload="checkEdits()">
Indexmod Россия
<hr>
<div id="edit" contenteditable="true">
Here is Indexmod Encyclopedia anonymous real-time editing sandbox area
</div>
<hr>
<input type="button" id=button value="Сохранить" onclick="saveEdits()" />
<div id="update">Редактируй текст и нажми сохранить до следующего раза</div>
<p class="footer" id="footer"><span><script src="footer.js"></script></span>
</p>
</body>
</html>
While you're going to set item on local storage, the method goes to:
localStorage.setItem('userEdits', userVersion);
And get item
localStorage.getItem('userEdits');
Hope it would be help, This works for me.
See the reference: http://www.w3schools.com/html/html5_webstorage.asp