Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
For hours I have been trying to get this piece of code to work.
— I tried not async as well btw.
getSentenceNouns(){
wordpos.getNouns(this.sentence, async (result) => {
let nouns = await result;
return nouns;
})};
However the return value is undefinied, but if I console log inside the getNouns method I get the desired output… I tried it all, nausea kicked in, plz help.
I’ve tried to define custom mode for highlight custom markdown syntax with easyMDE like this:
CodeMirror.defineMode("mymode", function () {
return {
token: function (stream, state) {
if (stream.match("aaa")) {
return "style1";
} else if (stream.match("bbb")) {
return "style2";
} else {
stream.next();
return null;
}
},
};
});
window.easyMDE = new EasyMDE({
element: $('#textarea')[0],
parsingConfig: {
allowAtxHeaderWithoutSpace: true,
},
overlayMode: {
mode: CodeMirror.modes.mymode(),
combine: true,
},
});
Actually, CodeMirror don’t return mymode by CodeMirror.getMode('mymode') so may be there mistake in declaration by CodeMirror.defineMode in my code.
I’m using JavaScript Fetch to access an API and I want to show a loader while the fetch is in progress. I’m using the following code…
async function fetchStates() {
showLoader();
await fetch('https://localhost:7123/locations/states?token=@{@HttpContext.Session.GetString("sessionToken")}')
.then(response => response.json())
.then(states => {
for (let i = 0;i < states.length;i++){
let option = document.createElement('option');
option.text = states[i].name;
option.value = states[i].id;
ddlCAStates.appendChild(option)
}
/*hideLoader(1);
scrollToTop(1);*/
})
.catch(error => {
divErrors.style.display = "block";
let errorName = GetHttpErrorName(error.toString());
txtErrors.textContent = 'The server responded with error: ' + error + ' ' + errorName;
/*hideLoader(2);
scrollToTop(2);*/
})
.finally(() => {
hideLoader();
scrollToTop();
});
}
function showLoader() {
document.getElementById('loader').style.display = 'block';
}
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
function scrollToTop() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
The loader displays for a split second and then hides way before the fetch is completed. The loader should be visible until either the fetch successfully loads data or it fails for any reason. What I’m doing wrong here?
I facing a situation which i can’t traverse the dom inside iframe. My code is as follows. When i am trying to accessing childNodes of body tag, console will show there are no childNodes inside the body tag.
<!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>Document</title>
</head>
<body>
<iframe id="container"
src="./resources/c07.xhtml"
frameborder="0"></iframe>
<style>
#container {
width: 100%;
height: 800px;
}
</style>
<script src="index.js"></script>
</body>
</html>
c07.xhtml
<!DOCTYPE html>
<html>
<body>
<h1>The section element</h1>
<section>
<h2>History</h2>
<p>The World Wide Fund for Nature (WWF)</p>
</section>
<section>
<h2>Symbol</h2>
<p>The Panda has become the symbol of WWF.</p>
</section>
</body>
</html>
//index.js
const parentNode = document.querySelector("#container");
const iframeBody = iframeRef(parentNode);
console.log(element.childNodes[0].getElementsByTagName('section')); //prints HTMLCollection[] and length is 0
function iframeRef( frameRef ) {
return frameRef.contentWindow
? frameRef.contentWindow.document
: frameRef.contentDocument
}
How can i resolve this?
I want to make smooth animation of appearing and disappearing a block of text. It appears smoothly but disappears very fast. How can I make it smooth?
Here is the CSS code:
.question-header > * {
margin-bottom: 15px;
}
.question-header > * {
margin-top: 20px;
}
.question-header {
position: relative;
border-bottom: 1px solid #e0e0e0;
}
.question-header.add-padding {
padding-bottom: 30px;
}
.add-padding {
padding-bottom: 30px;
}
.question-header h3 {
width: 701px;
font-weight: 600;
font-size: 25px;
line-height: 130%;
color: #101828;
}
.plus-sign {
position: absolute;
right: 0;
top: -20px;
cursor: pointer;
}
.answer-to-questions.display {
max-width: 630px;
position: sticky;
opacity: 1;
transform: translateY(5%);
}
.answer-to-questions {
position: absolute;
opacity: 0;
transform: translateY(-20%);
transition: all 0.2s ease-in;
}const answer = document.querySelector(".answer-to-questions");
const plusSign = document.querySelector(".plus-sign");
const questionHeader = document.querySelector(".question-header");
// plusSign.forEach((item)=>{
// // item.addEventListener('click',()=>{
// // answer.classList.toggle('display');
// // })
// })
plusSign.addEventListener("click", () => {
answer.classList.toggle("display");
questionHeader.classList.add("add-padding");
if (answer.classList.contains("display")) {
plusSign.src = "../images/plus-close.svg";
} else {
plusSign.src = "../images/plus.svg";
questionHeader.classList.remove("add-padding");
}
});And my 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" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="question-header">
<h3>Have you built an App similar to mine?</h3>
<img class="plus-sign" src="./images/plus.svg" alt="" srcset="" />
<div class="answer-to-questions">
<p>
Since 2010, we've successfully implemented 160+ projects for
industries like E-Commerce, the Internet of Things, Digital music
distribution, E-Learning, and many more. Since 2010, we've
successfully implemented 160+ projects for industries like E-Commerce,
the Internet of Things, Digital music distribution, E-Learning, and
many more.
</p>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>Here is the link to code sandbox https://codesandbox.io/s/cocky-monad-se1m22?file=/index.html:0-1010 .
Hopefully, I made this clear. Thank you everyone in advance!
I am trying to get and show my data from the firebase database to the HTML page in a table form, but no output showing. I attached a screenshot of my database below. I have been trying for like days and can’t solve it. Can someone help me to point out what my problem is? For security purposes, I erased the details of my firebase configuration there.
<body>
<table>
<thead>
<th>Sno</th>
<th>First Name</th>
<th>Second Name</th>
<th>Email</th>
<th>LastLogin</th>
<th>Confirm Password</th>
</thead>
<tbody id="tbody1">
</tbody>
</table>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>
<script id="MainScript">
var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
//---------------------GET ALL DATA-------------------------------//
function SelectAllData(){
firebase.database().ref('admins').once('value',
function(AllRecords){
AllRecords.forEach(
function(CurrentRecord){
var firstName = CurrentRecord.val().first_name;
var secondName = CurrentRecord.val().second_name;
var email= CurrentRecord.val().email;
var lastLogin = CurrentRecord.val().last_login;
var conpassword = CurrentRecord.val().confirm_password;
AddItemsToTable(firstName,secondName,email,lastLogin,conpassword);
}
);
});
}
window.onload = SelectAllData;
//------------------filling the table-------------------//
var stdNo = 0;
function AddItemsToTable(firstName,secondName,email,lastLogin,conpassword){
var tbody = document.getElementById('tbody1');
var trow = document.createElementById('tr');
var td1 = document.createElementById('td');
var td2 = document.createElementById('td');
var td3 = document.createElementById('td');
var td4 = document.createElementById('td');
var td5 = document.createElementById('td');
var td6 = document.createElementById('td');
td1.innerHTML= ++stdNo;
td2.innerHTML= firstName;
td3.innerHTML= secondName;
td4.innerHTML= email;
td5.innerHTML= lastLogin;
td6.innerHTML= conpassword;
trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(td3);
trow.appendChild(td4);
trow.appendChild(td5);
trow.appendChild(td6);
tbody.appendChild(trow);
}
</script>
</body>
The way I pushed the data into database
// Set up our register function
function register () {
// Get all our input fields
email = document.getElementById('email').value
password = document.getElementById('password').value
first_name = document.getElementById('first_name').value
second_name = document.getElementById('second_name').value
confirm_password = document.getElementById('confirm_password').value
// Validate input fields
if (validate_email(email) == false || validate_password(password) == false) {
alert('Email or Password is Outta Line!!')
return
// Don't continue running the code
}
if (validate_field(first_name) == false || validate_field(second_name) == false || validate_field(confirm_password) == false) {
alert('One or More Extra Fields is Outta Line!!')
return
}
// Move on with Auth
auth.createUserWithEmailAndPassword(email, password)
.then(function() {
// Declare admin variable
var user = auth.currentUser
// Add this admin to Firebase Database
var database_ref = database.ref()
// Create Admin data
var user_data = {
email : email,
first_name : first_name,
second_name : second_name,
confirm_password : confirm_password,
last_login : Date.now()
}
// Push to Firebase Database
database_ref.child('admins/' + user.uid).set(user_data)
// DOne
alert('Admin Account Created!!')
window.location = "login.html";
})
.catch(function(error) {
// Firebase will use this to alert of its errors
var error_code = error.code
var error_message = error.message
alert(error_message)
});
}
It seems like document.execCommand('paste') is disabled for security purposes in Chrome. Is there a way to use it in the developer console for some debug/test purposes?
Right now I can run things like
document.execCommand('insertText', false, 'asdf')
or
document.execCommand('insertHTML', false, 'asdf')
but not
document.execCommand('paste');
I have a TextField inside a FormControl inside a Styled Control (Paper) that looks like this:
const StyledPaper = styled(Paper)(({ theme }) => ({
backgroundColor: "#99d6ff",
width: '90%',
justify: 'center',
textAlign: 'center'
}));
...
<StyledPaper square={false} >
<FormControl variant="filled" fullWidth>
<TextField
id="loginInput"
label="Login"
InputLabelProps={{ shrink: true }}
value={login}
onChange={() => handleInputChange("loginInput")} />
</FormControl>
</StyledPaper>
The problem I’m having here is that when you select the TextField and fill it with an autocomplete, the background changes to white (the color of the autocomplete background). If I just type and don’t use the autocomplete the background remains as I intended from the StyledPaper. How can I prevent the background color change?
I want to make signature pad with fix background Image, and save the image to the public folder in laravel.
i use this code to make signaturepad : https://www.itsolutionstuff.com/post/laravel-signature-pad-example-tutorialexample.html
I am trying to save an API payload to a dictionary. The API data model has the attributes “category”, “id” and “name”.
let apiPayload = [];
(async () => {
let fetchValue = await
fetch('https://asia-southeast1-citric-pager-319712.cloudfunctions.net/gcp-simple-api').then(response => {
if (response.ok) {
return response.json();
}
throw response;
}).then(data => {
return data;
}).catch(error => console.log(error));
console.log('fetchValue', fetchValue);
let dictionary = Object.assign({}, ...fetchValue.map((x) => ({
[x.category]: [x]
})));
console.log('dictionary', dictionary);
})();
How do I append new category object in my dictionary so that it is sorted by category with category objects, e.g.
HTML: [{
category: "HTML",
id: "blog-post",
name: "Blog Post"
}, {...}, {...}],
JavaScript: [{
category: "JavaScript",
id: "curry",
name: "Curry"}, {...}, {...}]
this is simple subscriber form submit with jQuery Ajax, everything is working fine but alert response show only one time until page refresh.
Please Help me how to fix it.
Here is my view code
$(document).ready(function () {
$(“#ssubmit”).click(function (e) {
e.preventDefault();
let subscriber = $("#subscriber").val()
subscriberdata = {subscriber: subscriber,}
$.ajax({
type: "POST",
url: "form-process.php",
data: JSON.stringify(subscriberdata),
success: function (response) {
subscribersucess = "<div class='alert alert-success text-center mt-3'>" + response + "</div>";
$("#alerts").html(subscribersucess);
setTimeout(function(){
$('#alerts').fadeOut("slow");
},5000)
$("#subscriberform")[0].reset();
}
});
})
});
GOAL: Create a script that disables other dropdown select lists using the same class (“selectClass”) if an item is selected from one of the dropdowns selects. Or, if the item is unselected, then all dropdown selects became selectable again to allow for people who change their minds/didn’t understand at first what would happen.
The goal is to allow a user to only be able to select one item (total) from X amount of lists possible – you can have apples, or oranges, or pairs, but you can only have one type of fruit (for this example)
PROBLEM: I am unable to get the list to be selectable again after a selection has been made even if the default no value option is selected.
EFFORTS: I’ve put a few hours into this script and have gotten as far as I can it seems. I’ve looked through Stack, Googled, and searched other forums and bulletin boards, and Reddit. I’ve found some things I hoped would help me reach my goal, but I wasn’t able to understand them due to my newb-ness, or they weren’t applicable enough to help me reach my goal. I have run the script through javascript validators to make sure I’ve got the syntax correct, etc. I’ve managed to get pretty far towards my goal (goal was just deactivating the other dropdowns), but I’d like to make the user experience top-notch, and to me that means allowing for a sure to change their mind without needing to reload a page and lose all their unsubmitted data.
THE ASK: I am hoping for help and guidance to make everything re-selectable again by unselecting the selected item from the list that disabled the other dropdown selects; The lists will be generated dynamically.
THE CODE:
<select class="selectClass">
<option value="">Apples</option>
<option value="1">1 Apple</option>
<option value="2">2 Apple</option>
<option value="3">3 Apple</option>
</select>
<select class="selectClass">
<option value="">Oranges</option>
<option value="1">1 Orange</option>
<option value="2">2 Orange</option>
<option value="3">3 Orange</option>
</select>
<select class="selectClass">
<option value="" >Pears</option>
<option value="1">1 Pears</option>
<option value="2">2 Pears</option>
<option value="3">3 Pears</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$(".selectClass").on('change', function () {
$(".selectClass").not($(this)).prop("disabled", "disabled")
})
})
</script>
I was hoping some example of how to use dropdown cell, because currently the select wont open if I click on it, It does not make sense for open/close behaviour be controlled from the outside. I am using this @silevis/reactgrid library to create my datasheet/spreadsheet
This is how I create my rows
const rows = useMemo<Row<DefaultCellTypes | AutocompleteCell>[]>(() => {
const headerRow: Row = {
rowId: "header",
cells: [
{ type: "header", text: "Display Name" },
{ type: "header", text: "Reports To" },
{ type: "header", text: "Job Title" }
]
};
return [
headerRow,
...members.map<Row[]>((member, idx) => ({
rowId: idx,
cells: [
{ type: "text", text: member.display_name || "-" },
{
type: "dropdown",
values: members
.filter(inner => inner.parent_id !== member.id)
.map(inner => ({ label: inner.display_name, value: inner.id })),
selectedValue: member.parent_id || "-"
},
{ type: "text", text: member.job_title || "-" }
]
}))
];
}, [members]);
I have several HTML file I am dynamically inserting into the DOM with JS. However, all 3 work 50% while 1, 2 or all three randomly fail with a “TypeError: Cannot set properties of null (setting ‘innerHTML’)”.
Ideas?
loadComponent("targetDiv1","htmlFile1.html)
loadComponent("targetDiv2","htmlFile2.html)
loadComponent("targetDiv3","htmlFile3.html)
function loadComponent(targetElementID, htmlFile) {
fetch(htmlFile)
.then((response) => {
return response.text();
})
.then((response) => {
document.querySelector("#" + targetElementID).innerHTML = response;
return response;
})
.catch((error) => {
console.log(error, targetElementID, htmlFile);
});
}
It acts as if the target div ID is not retrieved in time to write the html contents to it.
How do I go about passing data from JavaScript code to PHP?
I have researched and found some ways like passing Session, Cookie or Ajax, but I don’t want to do it in those ways. Is there any other solution?