I am working on a chrome extension and I want to be able to have a response when the 'done' button is clicked, the settings window should close and the user would receive a message :
Here is the code for the settings page:
settings.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/settings.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>SSS- Settings</title>
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="card__header">
<div class="toolbar">
<div class="toolbar__item toolbar__item--close"></div>
<div class="toolbar__item toolbar__item--min"></div>
<div class="toolbar__item toolbar__item--max"></div>
.....................................................(other settings)
<br>
<div class="buttons"><button onclick="closeFunction()" id = "save_settings" class="button">Done</button></div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/settings.js"></script>
<script>
function closeFunction() {
close();
}
</script>
</body>
</html>
settings.js
console.clear();
toggle = document.querySelectorAll('.toggle');
const fno = document.getElementById('fake-news-opt');
const hso = document.getElementById('hate-speech-opt');
const cbo = document.getElementById('click-baits-opt');
const pwo = document.getElementById('profanity-words-opt');
const save_button = document.getElementById('save_settings');
.............
So from my understanding, you are trying to close the window when the "DONE" button is clicked, if so:
You can remove the onclick attribute from the button tag and attach an EventListener to the button itself like so:
save_button.addEventListener("click", () => {
close();
}
Related
function takeshot() {
let div = document.getElementById('result');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css#master/dist/aqua.min.css">
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<script type="module"
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>
<script nomodule=""
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -->
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="subj.css"> -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap"
rel="stylesheet">
<title>Constructor</title>
</head>
<body>
<div class="parent">
<div id="result">
<img src="https://picsum.photos/500/500" alt="" />
en inch piti tpvi
<h3>Heading </h3>
</div>
<form class="login-form" action="javascript:void(0);">
<button onclick="takeshot()">
Take Screenshot
</button>
</form>
</div>
<div id="output"></div>
<!-- <button onclick="delete1()">Delete</button> -->
<script src="script.js"></script>
</body>
</html>
In this code, capturing is working for both texts, but not for <img /> tags or some other external tags like <deckgo-drr>, Is there some way to screenshot the screen that we are actually seeing, like smartphone's screenshot function just capture the moment that's all
Why it is not working?
Capturing everything except img tags, and not only I am using tag they are not getting captured neither...
try setting useCORS to true
html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
I am trying to use Repo.js for embedding a github repo into my HTML this is what I've tried so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="As my favourite director, Billy Wilder said; If a movie makes you forget for a second
that you didn’t park the car properly, or that you argued with your boss… Then it fulfilled its goal.
">
<meta name="keywords" content='pawelpawlowski,petersellers,montgomeryclift'>
<title>Movie Torrents</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <script src="jquery-3.5.1.min.js"></script>
<script src="repo.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" />
<script src="https://raw.githubusercontent.com/darcyclarke/Repo.js/master/repo.min.js" />
<script>
$(function() {
$('body').repo({ user: 'pablobiedma', name: 'movie-torrents' })
});
</script>
<link rel="icon" type="image/png" href="foto.png" />
</head>
<body>
<div id="particles-js"></div>
<header>
<div class="topnav" id="myTopnav">
Home
Movie Reviews
My Favourite Movies
Movie Torrents
Filmmate
Spanish
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script type="text/javascript">
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
</header>
<div class="texto">
<h2 class="texto">Movie Torrents</h2></div>
</div>
</body>
</html>
The repo is not showing up, you can only see this:
What am I doing wrong, please I don't know too much about javascript or jquery so sorry if my mistake is too stupid because I've no clue what to do/dowload in order to make this work.
Im writing a program to monitor prices on the steam market and im building a UI in electron, the issue is that when i click a button it doesn't register.
i have tried with logging it to console or sending to a new window or opening a link but it doesn't work. I tired using an .on('click', .... as well
index.js:
const {BrowserWindow} = require('electron').remote
const path = require('path')
const {shell} = require('electron')
const launchbtn = document.getElementById('launch')
launchbtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, 'launch.html')
let win = new BrowserWindow({ width: 400, height: 320 })
//shell.openExternal('http://electron.atom.io') tried but didnt work
win.on('close', () => { win = null })
win.loadURL(modalPath)
win.show()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Market-Monitor</p>
<h1 id="About">By SourcE</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">Monitor Prices of items</span></p>
</div>
<div id="right-container">
<button id="launch">Launch</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
launch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<button id="launch">test</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
If the button was to work it should open a new instance of the window with the text changed to text.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<form name="form-name" action="launch.php">
<input type="submit" name="submit" value="Button Name">
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
New File call it launch.php
<?php
if ( isset( $_POST['submit'] ) ) {
header("Location: <LINK>");
}
?>
You can easily open a new window via Javascript. Below you can see the code. You just have to do a quick query.
<button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>
Do that with php and a form. The form should have the action of the php file and in the php file you make a query if he has clicked submit and then you make a header location: index ...... etc. I can sent you a code if you want.
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>
The code at the bottom of the page dynamically populates a jQuery Mobile select menu. In addition to populating the menu I'd like to bind data to each menu item and assign a click handler. This is attempted with the following line.
menuItem.bind("click",{testdata: "test"}, clickHandler); $("#testMenu").append(menuItem); }
This approach has worked with jQuery Mobile lists in the past. Can anybody see what's going wrong?
Full Code:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fbObj1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css "/>
<link rel="stylesheet " href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css " />
</head>
<body>
<script>
function clickHandler(e) {
alert("click ");
alert(e.testdata);
};
$(document).ready(function() {
var int = 0;
for (int=0;int<=4;int=int+1)
{
var menuItem = $("<option id=''></option>");
menuItem.html("Item "+int); menuItem.attr('id',int);
//DATA BIND LINE
menuItem.bind("click",{testdata: "test"}, clickHandler);
//menuItem.on("click", {testdata: "test"}, clickHandler);
$("#testMenu").append(menuItem);
}
$("#testMenu").selectmenu('refresh');
$("#testMenu").selectmenu('open'); });
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none">
<select name="testMenu" id="testMenu" data-native-menu="false"></select>
</div>
</div>
</div>
</body>
change
menuItem.bind
to
$("#testMenu").bind
Edit :
function clickHandler(e) {
e.preventDefault();
alert($(this).val());
}
// i forgot to mentioned that for a "select menu" you should use "change" event instead of a "click"
$("#testMenu").on("change",
{testdata: "test"},
clickHandler);
});
Edit 2:
var i = 0;
function clickHandler(e) {
e.preventDefault();
$(":selected",$(this)).html(i).val(i).parent().selectmenu('refresh');
alert($(":selected",$(this)).val());
i++;
}
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css"/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" />
</head>
<body>
<script>
$(document).ready(function() {
function clickHandler(e) {
var listItem = $(":selected",$(this));
alert(listItem.data("test").first);
alert(listItem.data("test").second);
};
var int = 0;
for (int=0;int<=4;int=int+1)
{
var menuItem = $("<option id=''></option>");
menuItem.html("Item "+int);
menuItem.attr('id',int);
menuItem.data("test", { first: int, second: "hello" })
$("#testMenu").append(menuItem);
}
$("#testMenu").on("change",{testdata: "test"}, clickHandler);
$("#testMenu").selectmenu('refresh');
$("#testMenu").selectmenu('open');
});
</script>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none">
<select name="testMenu" id="testMenu" data-native-menu="false">
</select>
</div>