I am using mPDF and other library for generating PDF/ Image from HTML code or file. below I have mentioned my HTML code from which need to generate .JPG or .PNG or .PDF
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://codeclippers.xyz/320x50/app.min.css" />
</head>
<body>
<div id="addsp320x50"></div>
</body>
<script src="http://codeclippers.xyz/320x50/app.min.js"></script>
<script type="text/javascript">
var availbleTitles = ["title1", "title2", "title3", "title"];
var availableVsprite =["https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b40d48_1602501995.jpeg", "https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b7e2b0_1602501995.jpeg"];
var availableVicons = [""];
var availbleBasicOptions = [""];
var availbleDescription = [""];
var selectedVsprite = availableVsprite[Math.floor(Math.random() * availableVsprite.length)];
var selectedVicons = availableVicons[Math.floor(Math.random() * availableVicons.length)];
var selectedTitles = availbleTitles[Math.floor(Math.random() * availbleTitles.length)];
var selectedDescription = availbleDescription[Math.floor(Math.random() * availbleDescription.length)];
var selectedBasicOpt = availbleBasicOptions[Math.floor(Math.random() * availbleBasicOptions.length)];
cOptions.isAnimated = true;
cOptions.animatedVariation = "vinfinite-scroll";
cOptions.titleText = selectedTitles;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].backgroundSpriteURL = selectedVsprite;
if(selectedVicons != "") {
cOptions.animationOptions[0].verticalInfiniteAnimation[0].showIcon = true;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].actionIconImage = selectedVicons;
}
cOptions.descrptionText = selectedDescription;
for(const [key, value] of Object.entries(selectedBasicOpt)) {
if(typeof value === 'boolean') {
cOptions[key] = value;
} else {
cOptions[key] = value.replace(/"/g, "").trim()
}
}
renderCreative();
</script>
</html>
Thanks in advance
Related
I'm a university student and I'm working with JsPsych on a Jatos server. Doing an excercise I receive an error about my jspointer.
Exactly the error is:
Uncaught ReferenceError: jsonpointer is not defined at jatos.batchSession.get (jatos.js:774:13) at start:33:25
I really don't know how to solve it, cause with this kind of error I cannot retrieve my Batch Session's data to make my experiment work.
I'll show you also there my code to help you understand (it's just the specific exercise code, cause the hole set of excercises is really more vast and complex):
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title> BENVENUTO </title>
<script src="jatos.js"></script>
<script src="https://unpkg.com/jspsych#7.2.3"></script>
<script src="https://unpkg.com/#jspsych/plugin-html-keyboard-response#1.1.1"></script>
<link href="https://unpkg.com/jspsych#7.2.3/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style>
body {
background-color: white;
}
</style>
</body>
<script>
var jsPsych = initJsPsych ({
override_safe_mode: true,
on_finish: function(){
jatos.startComponentByPos(nextComponentPosition[componentCounter], data, JSON.stringify(data));
}
});
if (jatos.batchSession.get("level_attenzione") <= 1){
var attenzione = jsPsych.randomization.shuffle(jatos.studyInput.attenzione_1).slice(0,3)
};
if (jatos.batchSession.get("level_attenzione") == 2){
var attenzione = jsPsych.randomization.shuffle(jatos.studyInput.attenzione_2).slice(0,3)
};
if (jatos.batchSession.get("level_attenzione") > 2){
var attenzione = jsPsych.randomization.shuffle(jatos.studyInput.attenzione_3).slice(0,3)
};
if (jatos.batchSession.get("level_linguaggio") <= 1){
var linguaggio = jsPsych.randomization.shuffle(jatos.studyInput.linguaggio_1).slice(0,3)
};
if (jatos.batchSession.get("level_linguaggio") == 2){
var linguaggio = jsPsych.randomization.shuffle(jatos.studyInput.linguaggio_2).slice(0,3)
};
if (jatos.batchSession.get("level_linguaggio") > 2){
var linguaggio = jsPsych.randomization.shuffle(jatos.studyInput.linguaggio_3).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_verbale") <= 1){
var memoria_verbale = jsPsych.randomization.shuffle(jatos.studyInput.memoria_verbale_1).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_verbale") == 2){
var memoria_verbale = jsPsych.randomization.shuffle(jatos.studyInput.memoria_verbale_2).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_verbale") > 2){
var memoria_verbale = jsPsych.randomization.shuffle(jatos.studyInput.memoria_verbale_3).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_visiva") <= 1){
var memoria_visiva = jsPsych.randomization.shuffle(jatos.studyInput.memoria_visiva_1).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_visiva") == 2){
var memoria_visiva = jsPsych.randomization.shuffle(jatos.studyInput.memoria_visiva_2).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_visiva") > 2){
var memoria_visiva = jsPsych.randomization.shuffle(jatos.studyInput.memoria_visiva_3).slice(0,3)
};
var componentCounter = 0;
var nextComponentPosition = attenzione.concat(linguaggio).concat(memoria_verbale).concat(memoria_visiva)
nextComponentPosition = jsPsych.randomization.shuffle(nextComponentPosition)
nextComponentPosition.splice(nextComponentPosition.length/2, 0, 2)
nextComponentPosition = nextComponentPosition.concat(3);
var data = {
level_attenzione: BatchSession["level_attenzione"],
level_linguaggio: BatchSession["level_linguaggio"],
level_memoria_verbale: BatchSession["level_memoria_verbale"],
level_memoria_visiva: BatchSession["level_memoria_visiva"],
level_gradimento: BatchSession["level_gradimento"]
};
var empty = [];
sessionStorage.setItem("nextComponentPosition", nextComponentPosition);
sessionStorage.setItem("componentCounter", componentCounter);
sessionStorage.setItem('attenzione', empty);
sessionStorage.setItem('linguaggio', empty);
sessionStorage.setItem('memoria_verbale', empty);
sessionStorage.setItem('memoria_visiva', empty);
var instructions = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<h2 style="text-align-center"> Prema il tasto INVIO per proseguire </h2>',
choices: ['Enter'],
};
var timeline = [instructions];
jsPsych.run(timeline);
</script>
</html>
I've tryed to access to the JSONfile to understand where is the error about the missing jsonpointer, but what I obtained is just:
* Getter for a field in the batch session data. Takes a name
* and returns the matching value. Works only on the first
* level of the object tree. For all other levels use
* jatos.batchSession.find. Gets the object from the
* locally stored copy of the session and does not call
* the server.
* #param {string} name - name of the field
* #return {object}
*/
jatos.batchSession.get = function (name) {
var obj = jsonpointer.get(batchSessionData, "/" + name);
return cloneJsonObj(obj);
};
I'm creating something similar to a to-do-list project, but whenever I refresh the page I lose all the added items, I've tried using:
`
window.onbeforeunload = function () {
localStorage.setItem("list", $("#listItem").val());
};
window.onload = function () {
var name = localStorage.getItem("list");
if (name !== null) $("#listItem").val("list");
};
`
but still it doesn't work, I may have used it in the wrong place or wrong way. any help please?
here is my full code:
HTML:
`
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>To Do List</title>
</head>
<body>
<section class="section-center">
<form class="todolist-form">
<h3>To Do List!</h3>
<div class="input-button">
<input type="text" id="items-input" placeholder="e.g. eggs" />
<input
type="button"
class="submit-btn"
onclick="addItems()"
value="Submit"
/>
</div>
<div class="added-items">
<ul id="faves"></ul>
</div>
</form>
</section>
<script src="main.js"></script>
</body>
</html>
`
Javascript:
`
function addItems() {
var li = document.createElement("LI");
li.setAttribute("id", "listItem");
var input = document.getElementById("items-input");
li.innerHTML = input.value;
input.value = "";
document.getElementById("faves").appendChild(li);
var deleteBtn = document.createElement("button");
deleteBtn.classList.add("delete-btn");
deleteBtn.innerHTML = "Delete";
deleteBtn.type = "button";
document.getElementById("faves").appendChild(deleteBtn);
var hrzBreak = document.createElement("br");
document.getElementById("faves").appendChild(hrzBreak);
/*********/
window.onbeforeunload = function () {
localStorage.setItem("list", $("#listItem").val());
};
window.onload = function () {
var name = localStorage.getItem("list");
if (name !== null) $("#listItem").val("list");
};
}
`
What am I doing wrong? I've included jQuery's CDN too, but still it doesn't work.
var texts = [];
function addItems() {
var input = document.getElementById("items-input");
createElement(input.value)
input.value = "";
}
function createElement(value) {
var li = document.createElement("LI");
li.setAttribute("id", "listItem");
li.innerHTML = value;
document.getElementById("faves").appendChild(li);
var deleteBtn = document.createElement("button");
deleteBtn.classList.add("delete-btn");
deleteBtn.innerHTML = "Delete";
deleteBtn.type = "button";
document.getElementById("faves").appendChild(deleteBtn);
var hrzBreak = document.createElement("br");
document.getElementById("faves").appendChild(hrzBreak);
texts.push(value)
}
window.onbeforeunload = function () {
// Store text array in storage
localStorage.setItem("list", JSON.stringify(texts));
};
window.onload = function () {
// get list grom storage
var list = localStorage.getItem("list");
if (list !== null) {
list = JSON.parse(list)
for (let index = 0; index < list.length; index++) {
const element = list[index];
// create your dom element
createElement(element)
}
}
};
Using an Array to manage the data flow. This will do the job but still a mess.
Try adding event listeners once and outside of your function
window.onbeforeunload = function () {
localStorage.setItem("list", $("#listItem").val());
};
window.onload = function () {
var name = localStorage.getItem("list");
if (name !== null) $("#listItem").val("list")
};
function addItems() {
...
}
Assuming that $("#listItem").val() will return the data you want, place below block outsite of the addItems() function
window.onbeforeunload = function () {
localStorage.setItem("list", $("#listItem").val());
};
window.onload = function () {
var name = localStorage.getItem("list");
if (name !== null) $("#listItem").val("list");
};
I have some basic html below, and for some reason it's not recognizing the js file I linked in the script tag. Am I linking it incorrectly in some way?:
<html>
<head>
<link rel="stylesheet" src="/index.css">
<script src="/index.js"></script>
</head>
<body>
<div id="board">
<svg id="svg"></svg>
</div>
</body>
</html>
Below is the respective index.js:
const grid = [
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{color: "red"},{color:"black"},{},{}],
];
const render = () =>{
console.info("rendering?")
const svg = document.getElementById("svg");
let doc = ``;
for (var i=0; i<grid.length; i++) {
var row = grid[i];
for (var j=0; j<row.length; j++){
const square = grid[i][j];
const color = square && square.color || 'gray';
doc = doc + `<circle onclick="clickSquare(${i}, ${j})" fill = '${color}' r='30px' cx='${j * 70 + 50}px' cy='${i * 70 + 50}px'> </circle>`;
}
}
svg.innerHTML = doc;
}
window.clickSquare = (x, y) => {
console.log("You clicked square ", x, y);
}
You don't need the / before it. Call render in your script and move it to the bottom of the dom.
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="board">
<svg id="svg"></svg>
</div>
<script src="index.js"></script>
</body>
</html>
JS Below
const grid = [
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{color: "red"},{color:"black"},{},{}],
];
const render = () =>{
console.info("rendering?")
const svg = document.getElementById("svg");
let doc = ``;
for (var i=0; i<grid.length; i++) {
var row = grid[i];
for (var j=0; j<row.length; j++){
const square = grid[i][j];
const color = square && square.color || 'gray';
doc = doc + `<circle onclick="clickSquare(${i}, ${j})" fill = '${color}' r='30px' cx='${j * 70 + 50}px' cy='${i * 70 + 50}px'> </circle>`;
}
}
svg.innerHTML = doc;
}
render()
window.clickSquare = (x, y) => {
console.log("You clicked square ", x, y);
}
First remove the / (slash) before the filename,
and also when you link a java-script file add the type as application/javascript when it put it recognize the file type is java-script.
<html>
<head>
<link rel="stylesheet" src="index.css">
<script type="application/javascript" src="index.js"></script>
</head>
</html>
i have a problem where for some reason my .js file is not loaded to browser, when other files are. The problem is that the file that should be loaded is important for my "site" to work. Heres code:
var viewModel = new PeopleTableViewModel({
// uncaught reference error Peopetable view model is not defined
pageSize: 25,
current: data.length,
context: document.getElementById('table')
});
var comparator = new Comparators();
function init() {
viewModel.next();
}
Heres my HTML :
<div id="table"></div>
<button onclick="viewModel.prev()">PREV</button>
<button onclick="viewModel.next()">NEXT</button>
<script type="application/javascript" src="scripts/DATA.js"></script>
<script type="application/javascript" src="scripts/Comparators.js"></script>
<script type="application/javascript" scr="scripts/PeopleTableViewModel.js"></script>
<script type="application/javascript" src="scripts/ListOfPeople.js"></script>
<script type="application/javascript" src="scripts/scripts.js"></script>
<script type="application/javascript" src="scripts/Person.js"></script>
</body>
And PeopleTableViewModel.js:
function PeopleTableViewModel(config) {
var self = this;
self.people = new ListOfPeople();
self.currentPage = 0;
self.pageSize = config.pageSize;
self.context = config.context;
self.next = function() {
//alert('kliknąłeś następny');
self.people.clear();
var begin = (self.currentPage) * self.pageSize;
var end = (self.currentPage + 1) * self.pageSize;
getData(begin, end);
self.currentPage++;
self.context.innerHTML = self.people.toTable();
}
self.prev = function() {
//alert('kliknąłeś poprzedi');
self.people.clear();
if (self.currentPage - 1 >= 0) {
self.currentPage--;
}
var begin = (self.currentPage) * self.pageSize;
var end = (self.currentPage + 1) * self.pageSize;
getData(begin, end);
self.context.innerHTML = self.people.toTable();
}
self.sort = function(comparer) {
data.sort(comparer);
self.currentPage = 0;
self.next();
}
var getData = function(begin, end) {
if (end > data.length) {
end = data.length;
}
if (begin < 0) {
begin = 0;
}
for (var i = begin; i < end; i += 1) {
self.people.addPerson(data[i]);
}
}
}
Thank you for taking time on my issue !
You made a mistake in the html markup.
<script type="application/javascript" scr="scripts/PeopleTableViewModel.js"></script>
instead of
<script type="application/javascript" src="scripts/PeopleTableViewModel.js"></script>
I am trying to get the name from input file type to display the name in a p tag, below is my code, advance thanx to all.
<script type="text/javascript">
var path = document.getElementById("photo").value;
var filename = path.substring(path.lastIndexOf("/") + 1);
document.getElementById("log").innerHTML = filename;
</script>
<input type="file" id="photo"/>
<p id="log"></p>
Try below code...
Demo Fiddle
var input = document.getElementById("photo");
input.onclick = function () {
this.value = null;
};
input.onchange = function () {
var path = input.value;
var filename = "";
if(path.lastIndexOf("\\") != -1)
filename = path.substring(path.lastIndexOf("\\") + 1,path.length);
else
filename = path.substring(path.lastIndexOf("/") + 1,path.length);
document.getElementById("log").innerHTML = filename;
};
I assume that you's trying to get the name of the file. Below is the code of doing that:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function showfile()
{
var path = document.getElementById("photo").value;
var filename = path.substring(path.lastIndexOf("\\") + 1);
document.getElementById("log").innerHTML = filename;
}
</script>
</head>
<body>
<input type="file" id="photo" onchange="showfile()"/>
<p id="log"></p>
</body>
</html>