This question already has answers here:
Taking screenshot using javascript for chrome extensions
(5 answers)
How to access the webpage DOM/HTML from an extension popup or background script?
(2 answers)
Closed 2 years ago.
I have one issue, finally solve with browser tab screenshot capturing. But how save captured images in certain folder path, only with vanilla JS without back-end. For now, by default saves in download folder
const url = 'http://local.requestmapper.com/api/user/';
document.getElementById('logout').addEventListener("click", logout);
document.getElementById('takess').addEventListener("click", takess);
function takess() {
chrome.tabs.captureVisibleTab(null, {}, function (canvas) {
var filename = getFormattedTime();
const a = document.createElement("a");
document.body.appendChild(a);
a.href = canvas;
a.download = filename + ".jpg";
a.click();
document.body.removeChild(a);
});
}
function getFormattedTime() {
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;
var d = today.getDate();
var h = today.getHours();
var mi = today.getMinutes();
return y + "_" + m + d + "_" + h + mi;
}
user.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<script src="js/bootstrap.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/jspdf.min.js"></script>
<head>
<meta charset="UTF-8">
<title>User</title>
</head>
<body>
<div class="container">
<button type="submit" class="btn btn-danger" id="logout">Log Out</button>
<button type="submit" class="btn btn-info" id="takess">Take screenshot</button>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
</html>
Related
i am trying to make a javascript stopwatch here and i want to add time to div.circle and i don't know whats wrong in this code please help me!! thanks
<-- this is html code --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h1>Stopwatch</h1>
<div class="circle"></div>
<div class="buttons">
<button>Start</button>
<button>Stop</button>
<button>Reset</button>
</div>
</div>
</body>
<script>
<-- this is js code -->
let min = 0;
let sec = 0;
let mil = 0;
let time = document.getElementsByClassName("circle");
time = min + " : " + sec + " : " + mil ;
time.innerHTML = time;
console.log (time);
</script>
</html>
let time = document.getElementsByClassName("circle");
time = min + " : " + sec + " : " + mil;
time.innerHTML = time;
Those lines actually set the time variable as an element, but then break it and put it inside a string.
Should be like that:
const time = document.getElementsByClassName("circle");
time.innerHTML = min + " : " + sec + " : " + mil;
Your code has some very fundamental pieces missing. I have changed it a bit to show something on button click but it will require way more efforts than that. I will highly recommend you to go through some tutorial in HTML, CSS, JS for a day or two.
const button = document.getElementsByTagName("button")[0];
button.onclick=() => {
let min = 0;
let sec = 0;
let mil = 0;
let time = document.getElementsByClassName("circle")[0];
let timeString = min + " : " + sec + " : " + mil ;
time.innerHTML = timeString;
console.log(timeString);
}
<div class="box">
<h1>Stopwatch</h1>
<div class="circle"></div>
<div class="buttons">
<button>Start</button>
<button>Stop</button>
<button>Reset</button>
</div>
</div>
so I have written some code that will allow someone to enter their order date and will return expected printing and delivery dates.
Only issue is its splitting out MM/DD/YYYY. Any help to get this working is much appreciated.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script>
function myfunction() {
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getFullYear() + '-' + ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) + '-' + future.getDate();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future.getFullYear() + '-' + ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) + '-' + future2.getDate();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
I'm edited in date format on your code: var finalDate and var finalDate2. Because in the code make a format date in your jquery.
In code below will changed format date to DD/MM/YYYY
So I changed to this code:
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
Then will get output like this
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
<script>
function myfunction(){
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
UPDATE
For Changed Input Format to DD/MM/YYYY
Changed
$( "#datepicker" ).datepicker();
To
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
I do a weather app for Free code camp, but i don't know why my button don't change the temperature from celsius to fahrenheit.
I think it's a problem for the recuperation of the variable but i don't know where.
I try some change in my code but i just go around in circles.
This is my javascript :
$(document).ready(function(){
var long;
var lat;
var celsius;
var fahrenheit;
navigator.geolocation.getCurrentPosition(function(position){
long = position.coords.longitude;
lat = position.coords.latitude;
var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&lang=fr'+'&units=metric&appid=d475e2ed504ab40f4de6c1b3cba9ebcc';
$.getJSON(url, function(data){
var weatherType = data.weather[0].description;
var windSpeed = data.wind.speed;
var icon = data.weather[0].icon;
var city = data.name;
var country = data.sys.country;
var description = data.weather[0].description;
var celsius = data.main.temp;
var fahrenheit = celsius * 9/5 +32;
var Temp = celsius;
$('.card').html( city + '<br> Temp: '+Temp+' °C'+ '<br> Wind Speed:'+windSpeed+'M/s');
$('.icon').html('<img src="http://openweathermap.org/img/w/' + icon + '.png" /> ' + '<br>'+weatherType);
function change() {
if (Temp == 'fahrenheit') {
Temp = 'celsius';
} else if (Temp == 'celsius') {
Temp = 'fahrenheit';
}
$('.btn').on('click', function() { change (); })
console.log(city);
console.log(weatherType);
console.log(windSpeed);
console.log(icon);
};
})
})
});
and the HTML :
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<title>Weather App</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class='col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 weather' >
<div class="col-sm-6 text-center card">
</div>
<div class="col-sm-6 text-center text-uppercase icon">
</div>
<button type="button" class="btn degree">°C/°F</button>
</div>
</div>
</div>
<div class="text-center footer">by Mathieu Dupré-Fontana
</div>
<script src="js/app.js"></script>
Can somebody help me please?
Ps: Sorry for my bad English, i'm French .
celsius appears to be a number, not a string, when Temp is set to the value of celisus, Temp is set to a number, not a string
var celsius = data.main.temp;
var fahrenheit = celsius * 9/5 +32;
var Temp = celsius;
Temp would not be equal to "fahrenheit" or "celcius" within change function
function change() {
if (Temp == 'fahrenheit') {
Temp = 'celsius';
} else if (Temp == 'celsius') {
Temp = 'fahrenheit';
}
}
.html() should also be called within change() function, if the expected result is to toggle Celcius and Fahrenheit rendering at HTML on click at element.
I am working on web related applications.When i try to display sessionStorage item it returns "undefined".
IE settings also changed but still i am getting same.
Login.html page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var currentDate = new Date,
dformat = [(currentDate.getMonth() + 1),
currentDate.getDate(),
currentDate.getFullYear()].join('/') +
' ' +
[currentDate.getHours(),
currentDate.getMinutes(),
currentDate.getSeconds()].join(':');
function unicsession(length) {
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz";
var sess = "";
for (var x = 0; x < length; x++) {
var i = Math.floor(Math.random() * chars.length);
sess += chars.charAt(i);
}
return sess;
}
function generate() {
var intime = dformat;
sessionStorage.setItem("logintime", intime);
var username = document.getElementById("Username").value;
sessionStorage.setItem("username", username);
var unisession = unicsession(5);
sessionStorage.setItem("unisession", unisession);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input id="Username" type="text" />
</td>
</tr>
<tr>
<td>
Click here
</td>
</tr>
</table>
</body>
</html>
home.htm page code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var getid = sessionStorage.getItem("username");
var logintimes = sessionStorage.getItem("logintime");
var unicsessionid = sessionStorage.getItem("unisession");
var currentDate = new Date,
outformat = [(currentDate.getMonth() + 1),
currentDate.getDate(),
currentDate.getFullYear()].join('/') +
' ' +
[currentDate.getHours(),
currentDate.getMinutes(),
currentDate.getSeconds()].join(':');
function Getout() {
alert("Login Id: " + getid + " ; login Time: " + logintimes+" ; Unic Session-Id : "+unicsessionid+" ; Logout Time : "+outformat);
}
</script>
</head>
<body>
<input id="logout" type="button" value="Logout" onclick="Getout()"/>
</body>
</html>
When i click on login page it redirect to home page and after click on logout button in home page it displays undefined.
How can i resolve this issue.
Thanks in advance for help.
sessionStorage is not avialable from IE if you access your files via your local filesystem. Use any local server to serve your scripts as http
Below code works fine on http://jsfiddle.net/saQTw/2/
for some reason it doesnt work on my local machine, i am not sure where i am making the mistake. Need an expert eye to look what i am doing wrong in this code.
Code which i got from the stackoverflow is support to populate the select list with dates
but i cant make it work on my local machine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<link href="css.css" rel="stylesheet" type="text/css" />
<script>
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
date.setDate(date.getDate() + 1);
}
$('#ddDate').append(selectElement);
</script>
</head>
<body>
<div id="ddDate"> </div>
</body>
</html>
I tried jQuery version 1.6 also it does not work
Solution for the above problem:
<script>
$(function(){
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
date.setDate(date.getDate() + 1);
}
$('#ddDate').append(selectElement);
});
</script>
try wrapping the jquery in a document.ready()
<script>
jQuery(document).ready(function) {
You are accessing the #ddDate element before it exists. So either move the javascript part beneath the body OR wrap the code into $(document).ready(function() {...})
In JSFiddle you are using the onload event to run pad(n). You need to do the same here
Modify the <body> tag to <body onload="pad(2)">