Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
does anyone knows how to achieve this?
The idea is that each box expands on hover, showing more content and pushing the other boxes around, depending on the position of the expanded box, they rotate to one side or another.
Can this be accomplished somehow with HTML, CSS and JS (using maybe some library like Masonry or Isotope) ?
I have a controller method that includes:
const checkout = async (req, res) => {
...
const paymentData = await getPaymentData(varA, varB);
console.log(JSON.stringify(paymentData));
// this returns undefined
}
This uses a helper function that returns:
const getPaymentData = async (varA, varB) => {
....
console.log(payment.getCheckoutUrl()); //returns a url
console.log(payment.id) //returns a number
console.log(plan) //returns a json blob {...}
return {
checkoutUrl: payment.getCheckoutUrl(),
payment_id: payment.id,
plan: plan,
};
}
How can console.log(JSON.stringify(paymentData)) return undefined when the console.logs in getPaymentData confirm it returns correct values?
I’m trying to use CKFinder 3 in a very simple form like the one below, but when pressing “Browse server” button(s), the CKFinder appears briefly, then the page gets redirected to “save.php” like the submit button was clicked. If I remove <form> and </form> tags, CKFinder opens normally, but I can’t submit the form. What I’m missing here? Thanks!
...
<form action="save.php" method="post" >
<input id="ckfinder-input-1" type="text" >
<button id="ckfinder-modal-1">Browse Server</button>
<div style="height: 5px"></div>
<input id="ckfinder-input-2" type="text" >
<button id="ckfinder-modal-2">Browse Server</button>
<div style="height: 5px"></div>
<button type="submit">Save</button>
</form>
...
<script src="ckfinder/samples/js/sf.js"></script>
<script src="ckfinder/samples/js/tree-a.js"></script>
<script src="ckfinder/ckfinder.js"></script>
<script>
var button1 = document.getElementById( 'ckfinder-modal-1' );
var button2 = document.getElementById( 'ckfinder-modal-2' );
button1.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-2' );
};
function selectFileWithCKFinder( elementId ) {
CKFinder.modal( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( elementId );
output.value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var output = document.getElementById( elementId );
output.value = evt.data.resizedUrl;
} );
}
} );
}
</script>
I have an input field which is filtering a list of cards:
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
Here is an example of the cards it is filtering:
<div class="card-container" id="cards">
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li><a href="https://pals.piercecountywa.gov/palsonline/#/app/srs/issue" target="_blank">Vehicle on Private Property</a></li>
<li><a href="/1942/">Vehicle on Public Property with a license plate</a></li>
<li><a href="https://seeclickfix.com/web_portal/TKWgpFXYKgCQQaGg9fixGNSh/report/category/34998" target="_blnk">Vehicle on County roadway</a></li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
Here is my JavaScript function
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
let cards = cardContainer.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
let noResults = document.getElementById("no-results");
let title = cards[i].querySelector(".card-content div.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1) {
cards[i].classList.remove("display-none");
cards[i].classList.add("displaying");
noResults.style.display = "none";
} else {
cards[i].classList.add("display-none");
cards[i].classList.remove("displaying");
}
}
}I can’t seem to figure out how to display a message when all the div’s are assigned the class display-none. Is their a way to check if any of the div’s inside a parent div contain a class? Maybe I am approaching this incorrectly. Thanks for your help!
is there a way to make the ar drone 2.0 turn clockwise or counterclockwise in degrees? im coding with javascript and nodejs, i checked the javascript api refrence too but instead of giving it a degree you need to give it a speed (0 or 1): client is the ar drone: client.clockwise(speed)
this is how it works:
client
.after(500, function(){
this.clockwise(0.1);
});
so basically it works with milisecs. and so it rotates for that long. ofcourse i can add a function and then calculate some stuff to make the drone rotate to a sertain degree but the problem is i dont know how to do that and there arent that many good tutorials or sample codes out there so any help how i can calculate it?
this is the most info i could find online about the ar drone:
I am trying to see if there is a easier more dynamic method for the current script I am using. Here is the breakdown:
The php page has a while loop which adds a number to the end of the id using a counter++
The javascript currently is as follows:
jQuery(document).ready(function($) {
$(function() {
$('#id1').click(function() {
$('#secondId1').show();
$('#thirdId1').show();
});
$('#id2').click(function() {
$('#secondId2').show();
$('#thirdId2').show();
});
$('#id3').click(function() {
$('#secondId3').show();
$('#thirdId3').show();
});
$('#id4').click(function() {
$('#secondId4').show();
$('#thirdId4').show();
});
})
});
As you can see I have to add to the script each time I add a new element into the repeater doing it this way.
How can I get the same results as I am with this script but with out having to add each individual id?
I’d successfully obtain arbitrary numbers from an input field while utilizing a callback function on the HTML side which eventually passed the original numbers down to an Array constructor. Inside my function, I’ve reassigned the document.getElementById(“text1”).value that called the original numbers to a variable and a number representing a 0 index that leads to the first index within an Array constructor. The issue is, after pushing original numbers to arrayAbove (an empty array) I was not able to select the original numbers by index to reuse them later in a conditional statement. I’ve used a for loop to iterate the arrayAbove array and had no luck with this approach. I’m presuming the issue lies within the Array() constructor, the format inside the inspection tool displays an empty array with sequential indexs underneath the empty array, nothing I’ve observed before.
Any reason why? Hope this all makes sense.
index.html
bot.Js
var x = 0
var stopLoss = Array();
let arrayAbove = []
var arrName = new Array()
async function add_element_to_array(){
stopLoss[x] = document.getElementById("text1").value;
arrayAbove.push(parseFloat(stopLoss[x].replace(/[a-z]/i, '')))
alert("Element:" + stopLoss[x] + "Added at index" + x);
x++;
document.getElementById("stopLoss").value = "";
// console.log(tokenAmount)
}
function display_array() {
var e = "<hr/>";
for (var y = 0; y < stopLoss.length; y++) {
e += "Element" + y + " = " + stopLoss[y] + "<br/>"
}
document.getElementById("Result").innerHTML = e;
}
console.log(arrayAbove)
console.log(arrName)
I have created a table that I want to add edit and delete buttons to. I want to extend the borders from the table left past the table itself to add buttons into like so:
Since I’m using reactstrap, I am just using their built in formatting for the design part of the table; however, I am curious how I could extend the table borders without extending the table styling itself… Can I just fill each cell with a div that has some sort of styling? I’m thinking there is a more elegant way to do it.
I’m having trouble with upsert with meteor.js. I could update questions finely with the below codes but I won’t be able to insert new data.
file in client side
const onSave = () =>{
// there is more codes but omitted
questions.forEach(question => {
Meteor.call('modifyQuestion', question);
})
}
file in server side (collection file)
modifyQuestion(question) {
check(question, Object);
const questionId = Measures.findOne({questionId: question._id});
Measures.upsert(
{_id: questionId._id},
{
$set: {
title: question.text,
},
},
);
},
Got error saying…
Exception while simulating the effect of invoking 'modifyQuestion' TypeError: Cannot read properties of undefined (reading '_id')
I thought when {_id: questionId._id} got undefined, that’s the time upsert understand that there is no matching data found and insert one as new data into the database.
Is this wrong?
I switched $set to $setOnInsert, but still didn’t work…
Anyone know how I would create a horizontal scrolling thing
Example:
https://i.stack.imgur.com/DxjsE.png
Basically I need it as they scroll the value updates in real time in increments.
I have the JSON please see below and I need help to convert changing the format mentioned below. I want to move the data to different columns (format mentioned below)
JSON I have
const data =
[
{
"2":{
"value":1.2
},
"3":{
"values":{
"10.0":1.3
}
},
"4":{
"value":1.6
},
},
{
"2":{
"value":2.2
},
"3":{
"values":{
"10.0":1.2
}
},
"4":{
"value":5.6
},
},
]
I want to change the above to the below format:
Expected format
const data =
[
{
col1: "1.2"
col2: "1.3"
col3: "1.6"
},
{
col1: "2.2"
col2: "1.2"
col3: "5.6"
},
]
I’m writing a little proof of concept thing, which downloads all my HTML assets via fetch(). Currently, I query all the tags with a compatible asset and run it through a for loop for each asset type. What I need to do is run a callback function after all the requests in the loops have finished. I tried await but it downloads each asset one by one. How can I do this?
const scripts = document.querySelectorAll("script");
const links = document.querySelectorAll("link");
const images = document.querySelectorAll("img");
for (const script of scripts) {
(async (s) => {
const doIgnore = s.getAttribute("data-ignoreload");
if (doIgnore) return;
const src = s.getAttribute("data-src");
if (!src) {
console.error("Script does not have a data-src prop.");
return;
}
fetch(src)
.then(x => x.text())
.then(r => {
const newScript = document.createElement("script");
newScript.innerHTML = r;
document.body.appendChild(newScript);
})
.catch(err => {
console.error(`Error loading script with src ${src}: ${err}`);
});
})(script);
}
for (const link of links) {
(async (l) => {
const doIgnore = l.getAttribute("data-ignoreload");
if (doIgnore) return;
const rel = l.getAttribute("rel");
if (!(rel == "stylesheet")) {
return;
}
const href = l.getAttribute("data-href");
if (!href) {
console.error("Stylesheet does not have a data-href prop.");
return;
}
fetch(href)
.then(x => x.text())
.then(r => {
const newStyle = document.createElement("style");
newStyle.innerHTML = r;
document.head.append(newStyle);
})
.catch(err => {
console.error(`Error loading stylesheet with href ${href}: ${err}`);
});
})(link);
}
for (const image of images) {
(async (i) => {
const doIgnore = i.getAttribute("data-ignoreload");
if (doIgnore) return;
const src = i.getAttribute("data-src");
if (!src) {
console.error("Image does not have a data-src prop.");
return;
}
fetch(src)
.then(x => x.blob())
.then(r => {
const url = URL.createObjectURL(r);
i.setAttribute("src", url);
})
.catch(err => {
console.error(`Error loading image ${src}: ${err}`);
});
})(image);
}
Given the following object:
{
__proxy: {
state: {
count: 0
items: {
__proxy: {
state: {
amount: 0
}
}
}
}
}
}
I’d like to convert it to:
{
count: 0,
items: {
amount: 0
}
}
So, as you can see, I’m doing a few things:
__proxy and bringing its content upstate and bringing its content upI’ve tried something like the snippet below:
const removeKeys = (obj, keys) => obj !== Object(obj)
? obj
: Array.isArray(obj)
? obj.map((item) => removeKeys(item, keys))
: Object.fromEntries(Object.entries(obj).filter(([k]) => !keys.includes(k)));
removeKeys(myObj, ['__proxy', 'state'])
However, it completely removes __proxy and/or state – and I want to preserve their content.
That said, do you know any existing solution for that? A NPM library, perhaps? Or a lodash function?
Thanks!
Has anyone come across a method to update the shape and/or other options in a lathe mesh? Currently I’m just redrawing them, but every update called on it just creates a new one, and disposing it is not working.
What I want to do is basically just:
this.lathe.shape = pointArray;
But I don’t think there is any way to access it or set it.
I have tried this method of disposing and building a new mesh and it doesn’t work and is not ideal for what I’m trying to do:
this.lathe.dispose();
this.lathe = BABYLON.MeshBuilder.CreateLathe(...);
exported js helpers file
export const foo1 = async () => {
const url = "www.foo.com";
try {
response = await fetch(url, { method: 'POST'});
} catch (e) {
throw new Error(`return another error:${e}`);
}
if (response) {
const responseText = await response.text();
const blob = responseText.toBlob();
return blob;
}
}
main js file
If I import the foo1 function in here and put it in a try/catch:
try {
this.fooData = await foo1();
} catch(e) {
this.error = e
}
can I remove the try/catch from foo1‘s fetch? Is it now unncessary since I have one in the main function that is invoking foo1?