Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
When I on a form and the focus is on the phone number field, iPhone will sometime suggest my phone number just above the keyboard. Like in the image below.
I am trying to implement this functionality via inputmode and type=tel,
<input type="tel" inputmode="tel" />
but my phone number doesn’t show up above the keyboard. Where as on other websites, it sometimes does.
Is there an attribute or css rule that enables this functionality?
I want to make a trigger an adding score effect when user’s score changing.
Here is the code I currently have:
let speed = 200;
let div = document.querySelector('div')
let olddiv = parseFloat(div.textContent)
let interval;
function change(increase){
let add = increase/speed
interval = setInterval(function(){
div.textContent = parseFloat(div.textContent) +add;
if(div.textContent > olddiv + increase){
div.textContent = olddiv+ increase
window.clearInterval(interval)
}
},1)
}
change(5000)<div>1000</div>The code works fine but I add 25 (increase/speed value) per milliseconds.
I want to make the score adding 1 every times. I tried to use for loop, but for loop will not shows the adding effect.
Also, since the setInterval doesn’t accept milliseconds lower than 1, I can’t use this code as well (this code will execute 1 ms every time which is too slow.
let speed = 200;
let div = document.querySelector('div')
let olddiv = parseFloat(div.textContent)
let interval;
function change(increase){
let addspeed = speed/increase;
interval = setInterval(function(){
div.textContent = parseFloat(div.textContent) +1;
if(div.textContent > olddiv + increase){
div.textContent = olddiv+ increase
window.clearInterval(interval)
}
},addspeed)
}
change(5000)<div>1000</div>Could anyone give me any solution of solving this problem?
Thanks for any responds!
I spend a day and half trying to solve this .Im trying to get a screenshot of my whole webpage and add it in to a pdf file using jspdf. How can i align it in a way that it looks in a similar manner like we get when use the default print option in the browser. Neat and clean. However in jspdf i dont understand how to extend my data to next page in pdf also . This is what i have tried:
function setScreenshot() {
html2canvas(document.body).then(
function (canvas) {
var extra_canvas = document.createElement("canvas");
let height = $('body').height();
let width = $('body').width();
extra_canvas.setAttribute('width', width);
extra_canvas.setAttribute('height', height);
var ctx = extra_canvas.getContext('2d');
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
var dataURL = extra_canvas.toDataURL();
var img = $(document.createElement('img'));
doc = new jsPDF({
unit: 'px',
});
let docWidth = doc.internal.pageSize.width
let docHeight = doc.internal.pageSize.height
let widthRatio = docWidth / canvas.width
let heightRatio = docHeight / canvas.height
doc.addImage(dataURL, 'JPEG', 0, 0, width, height * heightRatio);
doc.save('ExportFile.pdf');
$('#screenShot').attr('download', 'Test file.png');
$('#screenShot')[0].click();
})
}
I have also tried changing the canvas size to the that of an a4 sheet like following :
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 793, 1122);
But again it doesnt work for smaller devices as the image gets stretched out.Any solution to this will be real helpful . Thank you guys .Also suggest if there is an alternate method or library using which i can achieve the same .
im trying to use speech recognition with node and I stumbled upon speaktome, I followed the simple instructions but glitch didn’t like requiring it, here what I did:
opened package.json
clicked add package
searched speaktome-node
clicked it
typed “const speech = require(“speaktome-node”)”
glitch gave an error
please let me know on anything thanks!
I’m trying to add a new input on button click in one of my React components.
What’s the most elegant way to do it?
This is an abstraction of my code:
const addDivs = (type) => { ??? }
export default function Form() {
handleSubmit(e) {...}
return (
<form onSubmit={handleSubmit}>
<div><textarea rows="4" placeholder="Write about something here..." /></div>
//New divs should go here
//Adds a textarea
<button onClick={() => addDivs(textarea)}>Add textarea</button>
//Adds an upload field
<button onClick={() => addDivs(upload)}>Add image</button>
<input type="submit" value="Submit" /> </form> );
}
I want to keep the buttons underneath the inputs.
How’s the best way to do this?
I try to write (sorry for my bad english)
HTML
<div>
<input type="tel" id="id" class="form-control" required="" placeholder="Masukkan UserID" oninput="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(..*)./g, '$1'); myFunction()" name="id"></div>
<input type="tel" id="server" class="form-control" required="" placeholder="Masukkan Server" oninput="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(..*)./g, '$1'); myFunction()" maxlength="5" name="server">
</div>
<div form-control" id="getnick"></div>
<div><button class="btn btn-outline-warning text-light" id="submit" name="submit" type="button" style="padding: 0;padding-top: 10px;padding-bottom: 10px;font-weight: bold;" data-bs-target="#summary" data-bs-toggle="modal">Beli Sekarang</button></div>
<div class="modal fade" role="dialog" tabindex="-1" id="summary">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" style="border-width: 0px;background: var(--bs-gray-dark);">
<h4 class="modal-title" style="color: var(--bs-white);">Detail Pemesanan</h4>
</div>
<div class="modal-body" style="background: var(--bs-gray);">
<div id="text-info"></div>
<div class="form-control">
<div>
<table class="table table-borderless">
<tbody>
<tr style="border-bottom-width: 1px;border-bottom-color: var(--bs-gray-500);">
<td>ID (Server)</td>
<td width="3px">:</td>
<td id="info-1"></td>
</tr>
<tr style="border-bottom-width: 1px;border-bottom-color: var(--bs-gray-500);">
<td>Nickname</td>
<td width="3px">:</td>
<td id="info-2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JSON result from API https://xxxx.com/trueid/mobilelegends/?id=document.getElementById(“id”).value;&zone=document.getElementById(“server”).value;&token=yyyyy
{
"result": {
"status": "200",
"Author": "Nguyen Thu Wan"
},
"nickname": "Yepe vs Everybody",
"userid": "105740419"
}
JS
$("#submit").click(function () {
var id = $("#id").val();
var server = $("#server").val();
var nick = $("#getnick").val();
var str1 = id + " ( " + server + " ) ";
var str2 = nick;
$("#info-1").html(str1);
$("#info-2").html(str2);
});
So, first..
i want to complete API’s url with input form #id and #server when it write to form.
second,
i want to display response of API “nickname” value on div #getnick
third
when submit button clicked, will appear modal that contain id, server, and nickname from API response
Thanks before
I using a Macbook Pro M1 and decided to do start developing mobile app using Meteorjs framework, since I’ve used the framework for web development. I’ve followed a tutorial online on how to get that going but currently facing a problem:
Status of the individual requirements:
✓ Java JDK
✓ Android SDK
✗ Android target: Command failed with exit code 1: avdmanager list target
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:520)
... 5 more
✓ Gradle
It seems that there’s only one requirement that failed, and I’ve searched for the solution but couldn’t find anything that resembles a similar problem that I’m facing. Hoping for you to help point me to the right direction.
I have installed the Android Studio, uninstalled and reinstalled the Android SDK Build-Tools 32, Android SDK Command-line Tools, Android SDK Platform-Tools, and Android Emulator.
Currently, my ~/.bashrc file setup is like this:
export ANDROID_HOME=$HOME/Android/Sdk
export ANDROID_SDK_ROOT=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
…and my ~/.bash_profile:
export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=$JAVA_HOME/bin:$PATH
export CLASS_PATH=$JAVA_HOME/lib
and I’ve got Gradle working just fine. Tested building a generic Android app using one of the samples in Android Studio. The build was successful.
But I can’t get the meteor add-platform android to pass the checks. Anyone?
I have declared some private methods in my Javascript class. When I use that piece of code on my machine it is working fine, but whenever some of my user use the same code It throws reference error.
I use MongoDB+Mongoose with Node.js. The question I’m facing is… If the person who set some kind of product into the cart, deleted the project for some reason, and the buyer who applied this item to the cart before the item was deleted comes to the cart, the program fails because the cart array is corrupted since there is no such product anymore…
My idea and it might be a bad idea, but nevertheless, was when the buyer click to the link to the cart page, node.js in the backend checks all products, matches it with the products in the cart, and each time it finds match pushes this match into array and then this array we match with the request. It might be a horrible idea, because the time of the request so far was quite long, and besides I cannot finish my asynchronous method… So far I done this…:
mongo db object structure for product:
{"_id":{"$oid":"61cc5e20ace8b042b739e8e3"},
"title":"fhgfjhgfjhj",
"price":12,"description":"hgfjhfjhfjhf",
"imageUrl":"images\20211229T130952.jpg",
"userId":{"$oid":"61cc5df4ace8b042b739e8d9"},"__v":0}
mongodb structure for the user which includes the cart:
{"_id":{"$oid":"61cc5df4ace8b042b739e8d9"},
"email":"[email protected]",
"password":"$2a$12$FUrAK/E8AtSvadX5m45BNu086/5MVasOAsdvwjdwv6KClpxgHJHh.",
"cart":{"items":[{"productId":{"$oid":"61cc5e20ace8b042b739e8e3"},"quantity":3,"_id":{"$oid":"61cc62c9ce1642aea120dacd"}},{"productId":{"$oid":"61cc642af0886f1e3086ff3e"},"quantity":1,"_id":{"$oid":"61cc88b19101f6fbde25c1e7"}}]},"__v":5}
exports.getCart = (req, res, next) => {
const unchecked_products = req.user.cart.items;
const checked_cart = [];
Product.find()
.then((products) => {
products.forEach((product) => {
unchecked_products.forEach((unchecked_product) => {
if (
unchecked_product.productId.toString() === product._id.toString()
) {
checked_cart.push(unchecked_products);
}
});
});
return (req.user.cart.items = checked_cart);
})
.then((result) => {
req.user
.populate("cart.items.productId")
.then((user) => {
const products = user.cart.items;
res.render("shop/cart", {
pageTitle: "Your Cart",
path: "/cart",
products: products, //cartProducts
});
})
.catch((err) => {
console.error(err);
const error = new Error(err);
error.httpStatusCode = 500;
return next(error);
});
});
I make raw mistake somehow. I tried to match and form new array for the cart… req.user.cart and checked_cart after I pushed there objects, they are one to one match structurally to each other, so I think and it suppose to work like this I will just equal them so I renew req.user.cart to the new data which is not corrupted. (All object which are deleted from products are ignored and not pushed to the new array of objects)…
And then I would do: req.user.populate(‘cart.items.productId’)… But something happens at this point and I lose my array and data becomes empty…
I use async with then blocks… And I tried to set req.user… inside and outside then block, but nothing good happens… I’m studying node.js and obviously I don’t see some mistake I made…
I want to intercept all XHR requests being sent, and change their URL and headers before the request gets sent.
Found this similar question but there are no answers there.
I tried hooking XMLHttpRequest.prototype.open (and send), But it only gives me access to the response:
(function () {
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function () {
console.log(arguments);
console.log(this);
this.addEventListener('load', function () {
console.log('request completed!');
});
origOpen.apply(this, arguments);
};
})();
Also tried hooking XMLHttpRequest.prototype.setRequestHeader, but it only gives me access to each header value being set, one by one, and I can’t associate it to the URL of the request:
(function () {
var origSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
console.log("header", header);
console.log("value", value);
origSetRequestHeader.apply(this, arguments);
};
})();
How can I accomplish this?
I know that executeScript() function of JavascriptExecutor interface in selenium requires no signalling mechanism and it executes javascript inside it as synchronous(single threaded).
While executeAsyncScript() function of JavascriptExecutor interface requires signalling mechanism in the form of callback i.e. arguments[arguments.length-1] and it executes javascript inside it as asynchronously(multithreaded) without blocking main selenium code.
This means that if there is sleep in executeScript() javascript code then it will wait for that sleep time then execute further selenium statements. While if there is sleep in executeAsyncScript(), it will execute main selenium code in parallel to that sleep without blocking main code.
Now consider following code:
public static void main(String args[]) {
WebDriverManager.chromedriver().setup();
WebDriver driver=new ChromeDriver();
JavascriptExecutor js=(JavascriptExecutor)driver;
System.out.println("1");
String javascript="var callback=arguments[arguments.length-1]; window.setTimeout(callback,15000);"; //callback has no problem here. Statement:1
js.executeScript(javascript); //Statement:2
System.out.println("2");
driver.quit();
}
Now when I execute this code it does not wait for 15 sec sleep and immediately prints 2 and quit the browser while ideally it should behave synchronously i.e. it should block the main thread for 15 sec and after that it should print the 2 and quit the browser.
Now if I replace the statements 1 and 2 in above code with:
String javascript="var callback=arguments[arguments.length-1]; window.setTimeout(callback,15000);";
js.executeAsyncScript(javascript);
as:
public static void main(String args[]) {
WebDriverManager.chromedriver().setup();
WebDriver driver=new ChromeDriver();
JavascriptExecutor js=(JavascriptExecutor)driver;
System.out.println("1");
String javascript="var callback=arguments[arguments.length-1]; window.setTimeout(callback,15000);";
js.executeAsyncScript(javascript);
System.out.println("2");
driver.quit();
}
If I run above code it waits for 15 sec sleep and print 2 after 15 sec and quit the browser after printing 2 after that 15 sec sleep.
Why they are behaving oppositely?
I have 2 select lists in html, place to enter a number and second place to show the result. It works like a conversion, so when you choose milimeters from the first list and meters from the second it will show you number you entered x 0.001. There is no problem with small numbers (up to 9 digits – I can round these), but when I’m trying to do 1 milimeter to 1 yoctometer (1.0 × 10-21 millimeters) sometimes it is correct, sometimes not. If I add zeros to yoctometer sometimes it will show something like 0.1 + 0.2 = 0.30000000000000004. The problem is I can’t round it, because someone can enter like 1000 yoctometers and it won’t work. Is there a way to fix this? (look at milimeters -> centimeters, Math.pow)
const config = {
"milimeters": {
"milimeters": v => v * 1,
/* this is only an example */
"centimeters": v => v * Math.pow(10, -21),
"decimeters": v => v * 0.01,
"meters": v => v * 0.001,
"dekameters": v => v * 0.0001,
"hectometers": v => v * 0.00001,
"kilometers": v => v * 0.000001,
"inches": v => v * 0.0393700787,
"feet": v => v * 0.0032808399,
"yards": v => v * 0.0010936133,
"miles": v => v * 0.000000621371192,
},
}
function calculate() {
const listFromV = document.getElementById("listFrom").value;
const listToV = document.getElementById("listTo").value;
const inputPlace = parseFloat(document.getElementById("inputPlace").value);
const fn = config[listFromV][listToV];
document.getElementById("resultPlace").innerHTML = fn(inputPlace);
if (document.getElementById("inputPlace").value == "") {
document.getElementById("resultPlace").innerHTML = "0.00";
}
};
I use a Bootstrap modal to create a popup and when it closes, all the click events of my documents are deleted, included the one I have just clicked.
Could you help me, please?
To activate the modal, I click on a button with the id “btnAddPortfolio”.
function initBtnPortfolioMainContentAddPortfolio(){
let btnAddPortfolio = document.getElementById("btnAddPortfolio");
btnAddPortfolio.addEventListener("click", () => {
displayPopUpLoadFileCreatePortfolio();
});
}
function displayPopUpLoadFileCreatePortfolio(){
let root = document.getElementById("root");
let html = [];
if (document.getElementById("PopUpLoadFileCreatePortfolio") === null){
html.push('<div id="PopUpLoadFileCreatePortfolio" class="modal" tabindex="-1">',
'<div class="modal-dialog modal-dialog-centered">',
'<div class="modal-content">',
'<div class="modal-header bg-info">',
'<h5 class="modal-title">Créer un nouveau portefeuille</h5>',
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
'</div>',
'<div class="modal-body">',
'<div class="mb-3">',
'<label for="formFile" class="form-label">Sélectionner le fichier à importer:</label>',
'<input class="form-control" type="file" id="formFile">',
'</div>',
'</div>',
'<div class="modal-footer">',
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>',
'<button type="button" class="btn btn-primary">Valider</button>',
'</div>',
'</div>',
'</div>',
'</div>',
);
strHTML = html.join('n');
root.innerHTML += strHTML;
}
let PopUp = new bootstrap.Modal(document.getElementById('PopUpLoadFileCreatePortfolio'), {
keyboard: false
});
PopUp.show();
}I’m working on an e-book shopping website and what I’m trying to do now is when someone chooses the books he wants to buy than goes into the shopping cart to validate his purchase by clicking on a buy button , a receipt with his information shows up for him to either print it or save it .
the receipt contains his address , the books he chose with amount and price , and a total price. how can I make that dynamic .
I’m stuck in the beginning , I have no clue how to do it . I don’t know how to look for what I’m trying to do online so I created this thread so maybe someone could link stack overflow threads that tackle this
I want the button inside the .container to be clickable, even though it has the pointer-events:none property.
The context is this: in my real code, I must prevent that a parent div (something to the style of the div that has the class .container) cannot be dragged, or click pressed and dragged somewhere.
I think if there is a way to solve this, my problem is solved.
this is my code:
function myFunction(){
alert("click")
}.container{
width:30vh;
height:30vw;
background:red;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}<div class="container">
<button onclick="myFunction()">click</button>
</div>