I am wondering if there is any way that I can make ZeroClipBoard working on my popup page's buttons?I have the following code so far which will bring a popup page, the popup page is called from a php file include 2 buttons.
code for the first page:
<html>
<head>
<title>test</title>
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="myDiv">This is the content to get copied to the text area and then to clipboard</div>
<button id="testButton" data-clipboard-target="myDiv"><b>Copy To Clipboard</b></button>
<!--<script type="text/javascript">
var clicks = 0;
</script>-->
<button onclick="launchPopUp('', '', 700, 'embedCode.php');">test button</button>
<!--<script>
function test123(){
if(clicks>=1){
alert(clicks);
var client = new ZeroClipboard( document.getElementById('copyAll') );
}
}
</script>-->
</body>
<script>
var client1 = new ZeroClipboard( document.getElementById('testButton') );
</script>
I have tried make the "copy to clipboard" for "testButton" button working on my first page by using ZeroClipboard.
my code for second page which will be the content for popup page:
<?php
session_start();
$userName = "asdfbsadf";//$_SESSION['user_name'];
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="copiedContent" style="border: 2px solid; margin: 30px 20px 10px 20px; padding: 4px 3px 5px 3px;">
Here will be the content and <?php echo $userName?> that be copied to the clipboard
</div>
<button id="copyAll" data-clipboard-target="copiedContent" style="float: right; margin-right: 20px;">Copy All</button>
<button style="float: right;" onclick="whatIsThis()">What Is This?</button>
<script>
function whatIsThis(){
alert("This is...");
}
</script>
</body>
<!--<script language="JavaScript">
var client = new ZeroClipboard( document.getElementById('copyAll') );
</script>-->
</html>
the "launchPopup()" function is called from an open source which called popUp2.0.js, if that js file is needed, I will post that, but that one is a 170 lines code.
The comment out codes above are the ones that I tried. I have tried add "var client = new ZeroClipboard( document.getElementById('copyAll') );" for my popup page's copyAll button to the second page, it didn't work; I tried to add that to first page, the button didn't work also.
I found that if the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is called after the button, that will work; but I have tried everything that I know to put it after the button, and when I run the page and click the test button to bring up the popup page, I found the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is always called before the button when I inspect the element.
I'm wondering if I have a function called test123(), is there any way that I can run this function after the button is clicked and the whole popup page is showed, so I can make the Javascript run after the popup page showed, and make the copyAll button working?
Or did I think that in a wrong way and my code is too bad? and if there have any way that can make it work I will appreciate as it's first time I use ZeroClipboard.
Have you tried calling the second function in the onclick event?
<button onclick="launchPopUp('', '', 700, 'embedCode.php'); test123();">test button</button>
Related
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>
I am currently working on developing a Mozilla Firefox extension that blocks ads to learn more JavaScript, HTML, and CSS. Within the extension of that popup, I want to be able to click a button and refresh whatever page the browser is currently on. I have the buttons developed, and are currently interactive, but I am failing to see how I can extend the scope from the HTML I am using to see the webpage the browser is on.
Here is the most simplified state I have working:
popup.html
<!doctype html>
<hmtl>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
padding: 1em;
}
input {
margin-left: 1em;
margin-right: 1em;
}
</style>
</head>
<form>
<input type="button" value="Refresh">
<button onClick="document.location.href=window.location.href">Refresh Window</button>
<button onClick="document.location.href = 'popup.html' + '?' + Date.parse(new Date());">Refresh Page</button>
</form>
<p>Page hasn't been refreshed</p>
<script src="/popup1.js"></script>
</hmtl>
popup1.js:
const button = document.querySelector('input');
const paragraph = document.querySelector('p');
const mainBrowser = browser.document
button.addEventListener('click', refreshButton);
function refreshButton(){
button.disabled = true;
button.value="Refreshing"
paragraph.textContent = 'Page is refreshing';
// mainBrowser.reload();
window.setTimeout(function() {
button.disabled = false;
button.value = "Refresh"
paragraph.textContent = 'Page is up-to-date.';
}, 1000);
}
Image of what extension ui looks like, on clicking icon
The goal is to be able to click the Refresh Page button in the extension, and it reload whatever website my browser is currently on. I'm very new to JS, CSS, and HTML, and am failing to access things outside the scope of my extension.
My pop up window in javascript does not show any content. It does not even open. I've written innerHTML in the javascript pop up window by creating a div id(mainBody) for my tictactoe.html page.
HTML code for button that open popup window:
<input type="image" id="buttonimage2" alt="game2"
src="canon.png" onclick="newWindow();">
Javascript:
{
var newWindow = window.open("tictactoe.html", "myWindow", "width=500,height=700,status=yes,toolbar=no,menubar=no,location=no");
newWindow.focus();
newWindow.onload = function(){
let content = "<button class='btn btn-primary' onclick='window.print();'>Confirm</button>";
newWindow.document.getElementById('mainBody').innerHTML = content;
}
newWindow.window.close();
}
HTML code for tictactoe page that should be displayed in pop up window:
<head>
<link rel="stylesheet" href="style.css">
<script src="game.js"></script>
</head>
<body id="mainBody" >
It should be mentioned that my background for the main html page is a video, and I've made the position of all the elements on it absolute.
I'm working on a project where, on the client side, the user would have to fill out an online survey and on the server side, the data is stored in a database. The survey itself consists of multiple pages, where each page is a form. So essentially, that single online survey consists of multiple forms.
I'm picking up right after where the person who created the online survey left off. The way she had it done was something like this:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="survey.css">
<script>
// when the user clicks the button on the first page, he/she is brought to a new page where the stuff inside the function is displayed
function Q2(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q3()'>Next</button>";
// same deal here, stuff in this function are displayed in a new page
function Q3(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q4()'>Next</button>";
// same as the two functions above
function Q4(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q5()'>Next</button>";
// keeps going until the last question
</script>
</head>
<body>
<!-- this is the first page when the file is opened -->
<h1>Meeting 1</h1>
<p id="Q">Some text...<br><input type="text" name="tweet" style='height: 50px;width: 500px;'><br><br>
<button type="button" onclick="Q2()">Next</button>
</p>
</body>
</html>
I have to store things in a database, and that's where things started getting confusing for me. I've done research online and I'm sure that rather than having each page/form be a function (Q2, Q3, etc.) in JS, it would be better to have each page be its own HTML form and send the data to a PHP file, where the connection and storing data to the database happens.
WHAT I WANT TO HAPPEN: Is it possible to have all the forms be written/stored in a single HTML file, and at the same time, have each subsequent form be displayed on the next page? If that's not possible, what should I do?
Here's some test code I created (currently displays both forms on the same page, which isn't what I want):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<link rel="stylesheet" type="text/css" href="survey.css">
</head>
<body>
<div>
<h1>Meeting 1</h1>
<form name="form1">
<!-- Some HTML code goes here -->
<button type="button">Next</button>
</form>
</div>
<div>
<form name="form2">
<!-- Some HTML code goes here -->
<button type='button'>Next</button>
</form>
</div>
</body>
</html>
Thank you in advance!
you could use actually simply use jQuery and CSS to put all your forms in the same place one behind the other. However you'd have to use ajax to put the form info into your database. Do it as such:
$(".step1").show();
$(".step2").hide();
$(".step3").hide();
$(".step1").submit(function(e)
{
e.preventDefault();
$.ajax({
url : 'submission1.php',
data : { name : $(".step1").children("input[name='username']") },
method : 'POST'
})
.done(function(data)
{
$(".step2").show();
});
});
/** Repeat the same process with step 2 and 3 **/
Then your CSS could be as follows Your forms must be in a parent container:
.step1
{
position: relative;
top: 0;
left: 0;
z-index: 10;
}
.step2
{
position: relative;
top: 0;
left: 0;
z-index: 5;
}
.step3
{
position: relative;
top: 0;
left: 0;
z-index: 1;
}
Complete example here: https://jsfiddle.net/LkjmL43h/3/
I'm starting to learn HTML5+CSS+JS. It was all going fine on my Windows desktop, but when I try doing something on my Linux notebook, no javascript seems to work.
This is the mini tutorial I followed: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript
and this is my page with the result: http://www.lele.bbt.net.ar/prueba01/
(As you can see, the JS is not doing a thing).
// JavaScript demonstration
var changeBg = function(event) {
console.log("method called");
var me = event.target,
square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function() {
clearDemo(me)
}, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
#square {
width: 120px;
height: 120px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
</body>
</html>
(Here it works, but for some reason, not when I do it on my computer).
I don't know if it can be a priviledge problem or something like that (js has read/write priviledges, not execute. But I guess that's how it should be)
Thanks!
I'm pretty sure it's because the script can't find the button.
You load your script before everything else is loaded, which is fine. But you can have problems like this. To avoid this kind of problems you load the JavaScript file after the HTML.
At the moment if you try to print the var "button" you will receive "null".
The Chrome console when you open the page gives you this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
That means that it is trying to read the property of the button, which is null.
Move the script tag to the very end, just before the closing </body> tag:
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
<script type="text/javascript" src="script.js"></script>
</body>