Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’m a student of 5th semester of BS Software Engineering, I need professional’s view on learning which technology (html,css, JavaScript/ flutter/ or anything else) according to market? Which will be long go and strong grounding?
Which technology should I learn?
To send an email, I use action which is required to send data via fetch.
And it works by sending mail, but I always get the error:
VM65:1 Uncaught (in promise)
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
I guess the problem is in body:
body: new FormData(Email.current)
What could be the error?
const [EmailUserData, setEmailUserData] = useState({DataOne: '', DataTwo: ''});
const FormEmail = useRef();
const SendEmail = (event) => {
event.preventDefault()
fetch("https://submit.jotform.com/submit/XXXXXXXXXXXXX", {
method: 'POST',
body: new FormData(FormEmail.current)
})
.then(res => res.json())
.then(data => {
console.log(data)
})
}
<form method="post" ref="{FormEmail}" onSubmit="{SendEmail}">
<input type="text" name="data_1" onChange={event => setEmailUserData({...EmailUserData, DataOne: event.target.value}) } value={EmailUserData.DataOne || ''} />
<input type="email" name="data_2" onChange={event => setEmailUserData({...EmailUserData, DataTwo: event.target.value}) } value={EmailUserData.DataTwo || ''} />
<button type="submit">Submit</button>
</form>
In this code, a Three.js 3D scene is created with a perspective camera positioned above the scene, allowing for an immersive view of the objects. A WebGL renderer is initialized to display the graphics on the webpage, and the renderer’s canvas is appended directly to the body for visibility. A Computer class instance is used to render HTML content, including a button and a paragraph, on a CSS3D screen, which is positioned at the center of the scene. Additionally, a green cube is added to the scene as a 3D object. To enhance user interaction, OrbitControls are implemented, enabling the camera to orbit around the scene based on mouse movements, with damping for smoother transitions. An animation loop continuously updates the controls and renders the scene, providing a dynamic and interactive 3D experience.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Example</title>
<style>
body {
margin: 0;
user-select: none; /* Prevents text selection */
overflow: hidden; /* Prevents scrolling */
}
#container {
position: relative;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="module" src="script.js"></script>
</body>
</html>
script.js :
import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
import Computer from './computer.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 10);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const container = document.getElementById('container');
container.style.position = 'relative';
container.appendChild(renderer.domElement);
const htmlCode = `
<button> Hello </button>
<p>Hello</p>
`;
const computer = new Computer(container);
const screen = new Computer.Screen(htmlCode, 1);
screen.position.set(0, 0, 0);
scene.add(screen);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Set up OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true; // Allow zooming
controls.enablePan = true; // Allow panning
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;
function animate() {
requestAnimationFrame(animate);
controls.update(); // Update controls
renderer.render(scene, camera);
computer.render(scene, camera);
}
animate();
// Handle window resizing
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
computer.js :
import { CSS3DRenderer, CSS3DObject } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/renderers/CSS3DRenderer.js';
class Screen extends CSS3DObject {
constructor(htmlContent, scale) {
scale = scale / 50;
const div = document.createElement('div');
div.innerHTML = htmlContent;
div.style.width = '800px';
div.style.height = '450px';
div.style.fontSize = '16px';
div.style.background = 'rgba(255, 255, 255, 0.8)';
div.style.border = '1px solid #000';
div.style.padding = '10px';
div.style.boxSizing = 'border-box';
super(div);
this.scale.set(scale, scale, scale);
}
}
class Computer {
constructor(rendererDomElement) {
this.cssRenderer = new CSS3DRenderer();
this.cssRenderer.setSize(window.innerWidth, window.innerHeight);
this.cssRenderer.domElement.style.position = 'absolute';
this.cssRenderer.domElement.style.top = 0;
rendererDomElement.appendChild(this.cssRenderer.domElement);
}
render(scene, camera) {
this.cssRenderer.render(scene, camera);
}
static Screen = Screen;
}
export default Computer;
Also is the scaling correct. I want the Screen to be smaller. But doing it does not affect its chilldren. So i did the overall scaling by still making it look sense. so I divided it by 50
First i create a root class as COmputer which i used to import Screen. It includes css3render and others to render html content inside threejs. But when i tried to check if both the screen and cube are rendering as I wish using OrbitControls. But it is not working. FIrst I thought it was caused by selection, I solved it and still the cotrols is not working.
I think there is some problem rendering or others.
I am using Highcharts library to display my chart.
I am going to use an icon to make my chart fullscreen. This icon will be placed outside of the chart container to open the container.
To achieve it I have used an onClick event listener on the icon to call a method with following “chartRef?.current?.chart?.fullscreen?.open();”
The icon to close my chart should be at the top right corner. Hence, I have specified IconX and IconY as mentioned below.
Following is my chart option configuration
events: {
// fullscreenOpen: function () {
// const chart = this;
// let iconX = chart.plotLeft + chart.plotWidth - 10,
// // iconY = chart.plotTop - 20,
// iconY = chart.plotTop,
// iconPath = CloseIcon,
// iconSize = 20;
// if (!chartIconRef.current) {
// chartIconRef.current = chart.renderer
// .image(iconPath, iconX, iconY, iconSize, iconSize)
// .css({
// cursor: "pointer",
// })
// .on("click", function () {
// chartFullScreenClose();
// })
// .add();
// }
// },
// fullscreenClose: function () {
// const chart = this;
// if (chartIconRef.current) {
// chartIconRef.current.destroy();
// chartIconRef.current = null;
// }
// },
render: function () {
const chart = this;
let iconX = chart.plotLeft + chart.plotWidth - 20,
// iconY = chart.plotTop - 20,
iconY = chart.plotTop - 20,
iconPath = CloseIcon,
iconSize = 20;
if (!chartIconRef.current && chart.isOpen) {
chartIconRef.current = chart.renderer
.image(iconPath, iconX, iconY, iconSize, iconSize)
.css({
cursor: "pointer",
})
.on("click", function () {
chartFullScreenClose();
})
.add();
}
if(chartIconRef.current){
chartIconRef.current.destroy();
chartIconRef.current = null;
}
},
},
Now, my problem is as follows:
When using fullScreenOpen and fullScreenClose event the icon button is rendered at incorrect position, meaning that the icon does not appear at the new top right after chart re-renders. It stays at the original position. The close and open work correctly as the icon button is added and destroyed according to chart event. However, the position remains amiss due to the plotWidth not getting the new width after fullscreen.
To mitigate this problem, I tried using render method to obtain the latest plot value. My chart now renders the icon correctly, but i have no way of knowing that the chart is not in fullscreen.
I need to know this information to remove the button if the chart has changed back to its original size.
I went through this docbut isOpen on chart object is coming out to be undefined.
Kindly help in either placing the icon button correctly in fullscreenopen event or help me determine if the chart is in fullscreen mode.
I found this other answer here but the author has keep it in bottom left, it will hence not need new coordinates as that position is independent of the chart width height.
I have used it to write my own solution but I cannot figure out how to determine if the current screen is chart fullscreen or not to accordingly handle button visibility.
If in the above solution i can keep the icon at the top right and add condition that if the chart is fullscreen then i render an icon to allow user to exit fullscreen, or find a way to determine if the chart is in fullscreen or exited full screen inside the render method to update my code. Then it will be the solution.
I’m making a dashboard on a website, where users will be able to interact with the database. The pages are made in PHP, so are the tables. And when a user clicks on a row, he can edit the data of the current row. This is handled by Javascript (code a bit further down) and it works as a charm.
BUT, since it may not be clear that people need to click on a row to edit it, I added a column with an SVG so people can click it. And when they click exactly on the svg, the data isn’t retrieved. It should be, since I get the data from clicking on the whole <tr>. Note that if the user clicks anywhere else on the <tr>, it still works.
Here’s the PHP code for the table :
<table class="table table-sm table-bordered table-striped table-hover">
<thead class="configure-array">
<?php
$tableHead = "<tr>";
foreach (array_keys($seals[0]) as $keys) {
$tableHead .= "<th>$keys</th>";
}
$userPermissions['MODIFY_OPTION'] ? $tableHead .= '<th>Edit</th>' : '';
$tableHead .= "</tr>";
echo $tableHead;
?>
</thead>
<tbody>
<?php
$tableBody = "";
foreach ($seals as $seal) {
if ($userPermissions['MODIFY_OPTION']) {
$tableBody .= '<tr class="data-seals">';
} else {
$tableBody .= "<tr>";
}
foreach ($seal as $key => $value) {
$tableBody .= "<td>$value</td>";
};
if ($userPermissions['MODIFY_OPTION']) {
$tableBody .= "<td><img style='user-select: none' src='ressources/edit-svgrepo-com.svg' alt='edit' width='20' /></td>";
};
$tableBody .= "</tr>";
}
echo $tableBody;
?>
</tbody>
</table>
And here’s the JS script :
document.addEventListener("DOMContentLoaded", (e) => {
const sealRows = document.querySelectorAll('.data-seals');
const deleteSealBtn = document.querySelector('#delete-seal-btn');
sealRows.forEach(element => {
element.addEventListener('click', (e) => {
let dataSeal = Array.from(e.target.parentElement.childNodes).map((sealValues) => {
return sealValues.innerHTML;
});
togglePopUp('update-seal-popup');
// ID mise en input hidden pour le récupérer en $_POST
document.querySelector('#update-seal-id').value = dataSeal[0];
// Nom en placeholder
document.querySelector('#update-seal-matiere').placeholder = dataSeal[1];
// Remise en placeholder
document.querySelector('#update-seal-type').placeholder = dataSeal[2];
// Attribut formaction pour diriger l'utilisateur vers la suppresion
deleteSealBtn.setAttribute('formaction', `deleteSeal.php?id=${dataSeal[0]}`)
})
});
});
Basically, when one clicks on a row, a popup appear and fill the inputs with the data of the clicked row. But when I click precisely on the image, the popup opens and the data is not there.
As you can see in the code, I tried to set the user-select: none in the image. I thought it could have been the cause of my problem, but it’s not.
I also tried to replace the image with some text, and it works fine. But I want to put the image.
Nous désirons mettre en place des messages de réponses automatique sur Gmail lors des absences au bureau. Départ suivant le jour de la semaine par Ex. à 18h00 et éteinte du script à 7h.
Pour cela nous avons fait un script mais nous n’arrivons pas à le faire fonctionner avec les déclencheurs.
voici notre script:
function setOutOfOfficeReply() {
var now = new Date();
var day = now.getDay();
// Horaires de déclenchement et d'enclenchement pour les jours de semaine et le samedi
var weekdayStartTime = new Date();
weekdayStartTime.setHours(18, 0, 0); // Lundi à vendredi à 18h00
var saturdayStartTime = new Date();
saturdayStartTime.setHours(16, 30, 0); // Samedi à 16h30
var disableTime = new Date();
disableTime.setHours(7, 0, 0); // Lundi à samedi à 7h00
// Message d'absence
var message = "Bonjour,nnMerci de nous avoir contactés !nnNous accusons réception de votre e-mail et souhaitons vous informer que nous répondons aux messages aux horaires suivants :nnDu lundi au vendredi : de 7h00 à 18h30nLe samedi : de 14h00 à 17h00nEn dehors de ces horaires, votre commande ne sera pas prise en compte. Nous vous répondrons dans les plus brefs délais pendant ces périodes.nnMerci pour votre compréhension et votre patience.nnSalutations gourmandes,nnL'équipe de la Boulangerie Saudan";
var isWeekday = day >= 1 && day <= 5;
var isSaturday = day === 6;
if ((isWeekday && now >= weekdayStartTime) || (isSaturday && now >= saturdayStartTime)) {
GmailApp.setVacationResponder('Réponse automatique', message);
} else if (now <= disableTime) {
GmailApp.setVacationResponder('', ''); // Désactiver le répondeur automatique
}
}
function disableOutOfOfficeReply() {
GmailApp.setVacationResponder('', ''); // Désactiver le répondeur automatique
}
I am working in an existing network of docker containers. And to make communication between containers easier we have chosen to give network-aliases to each container. Now the problem I am having is that a URL might look like this: http://boefje:8000 and then when I do a request with node-fetch I will get an TypeError [ERR_INVALID_URL] error because an url like this should not exist.
I do know that this request would work because when I do execSync(`curl --request GET --url ${input_url} -s`) (execSync is from the library child-process) it runs successfully.
I have tried using axios and http/https and I am getting the same issue. I am tempted to use execSync with curl but this looks too hacky.
Is there a better solution available for me without having to switch languages?
I’m losing my mind over this a bit. Why does this render on firefox, but on other browsers such as chrome and edge it doesn’t?
<div className="row" style={{ position: "relative", display: "flex" }}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 20"
preserveAspectRatio="none"
style={{ position: "relative", zIndex: "2" }}
>
<image
href="link/border-top.svg"
width="100%"
height="auto"
/>
<image
href="link/linear-element-1.svg"
width="100%"
height="auto"
y="-12"
/>
</svg>
</div>
And here is how one of the svg files looks like:
<svg width="1996" height="161" viewBox="0 0 1996 161" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1807.17 102.812C1929 104.058 1983.51 29.3382 1995.53 8.7169e-05L0.0853286 0L0 73.5005C156 -16.4995 376.036 -23.7386 461 57.282C545.964 138.303 728.558 170.689 901 158.282C1099.5 144 1179.39 52.2167 1402.48 37.0962C1625.58 21.9758 1654.89 101.255 1807.17 102.812Z" fill="black"/>
</svg>
Is there a way to make it work while keeping the format? The idea was to have two svgs stacked together kind of and this is how I achieved it, but turns out it’s not rendered. Help appreciated!
I have several webapps that uses the presentation-api to display and update page on secondary display. All worked perfectly well.
I haven’t used them in a while. Now all of them crashes the browser when I connect to another display on MS Edge. In Chrome it works 100%.
It does exatly the same on Presentation Receiver API Sample that I found through a previous answer by Wolfgang Fahl. When I start the connection, the browser asks for the display (see popup image). When I select a display, the display opens fullscreen white background, and then the browser crashes so I cannot see console logs.
I know that according to MDN Web Doc the presentation-api is experimental technology.
Are there any flags that needs to be set in Edge that I am not aware of that might have been reset during a Edge update or something?.
In one cypress test I just want to check if the server side generated HTML is correct, so I just want to compare it with my expected HTML:
I can do it like this which works fine:
cy.get("table").eq(0).should("have.html",
"<tbody>"
+ "<tr><td><b>Minimale Punktzahl</b>"
+ "</td><td>3</td></tr>"
+ "<tr><td><b>Maximale Punktzahl</b></td><td>10</td></tr>"
+ "</tbody>"
);
But i would rather like to compare it logically and not as a byte sequence.
This should work too, but it doesn’t:
cy.get(".ktable").eq(0).should("have.html",
`<tbody>
<tr>
<td><b>Minimale Punktzahl</b></td>
<td>3</td>
</tr>
<tr>
<td><b>Maximale Punktzahl</b></td>
<td>10</td>
</tr>
</tbody>`);
It doesn’t work because of the whitespace which the server side removes.
I searched for some library which just normalizes the HTML before comparison, but I havn’t found anything.
There must be a JS Lib for comparing two HTML snippets logically.
Running into a tiny hiccup.
On this page I have a Google map built with ACF that connects via the Google API.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIdDn1wrUrexbGza-tOeMEn65lql82yHM&loading=async&callback=Function.prototype" async></script>
What I’ve noticed is that sometimes I get a Google not defined error on the map which causes it not to load. This happens sometimes on Chrome, but always on Safari. I have tried multiple things including:
If you view the page on Safari it breaks, on Chrome it works fine most of the time.
Any help would be of guidance. You can see the JS code in the inspector on the page. Thank you in advance.
I’m embedding an iFrame in my webpage, and I want to hide the scrollbar while still allowing the content within the iFrame to be scrollable. I’ve tried several approaches but haven’t had success. Here is my current code:
<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe width="100%" height="100%"
src="https://hostingpillar.com/tools/"
frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0">
</iframe>
</div>
What I Tried and What I Expected:
Using CSS to hide the scrollbar:
iframe {
overflow: hidden;
}
Expectation: This would hide the scrollbar but still allow the content to be scrollable.
Result: The scrollbar was hidden, but the content was not scrollable.
Applying CSS directly to the content within the iFrame:
body {
overflow: hidden;
}
Expectation: This would hide the scrollbar inside the iFrame but still allow the content to be scrollable.
Result: No visible changes; the scrollbar remained visible.
Attempting to use JavaScript to manipulate the scrollbar visibility:
var iframe = document.getElementById('myIframe');
iframe.contentWindow.document.body.style.overflow = 'hidden';
Expectation: This would programmatically hide the scrollbar but still allow the content to be scrollable.
Result: The JavaScript approach didn’t work, possibly due to cross-origin restrictions.
Additional Information:
Despite these attempts, I can’t achieve the desired behavior. The scrollbar either remains visible or the content is not scrollable.
Could anyone provide a solution or point out what I’m doing wrong? I’m open to using JavaScript or CSS to achieve this.
Any help would be greatly appreciated!
I am using v5 of fabric.js
I can see from the docs how to make groups but no guidance on when this is done via the UI. In my case, the user will use their mouse to create a group (holding shift/cmd) and clicking on canvas elements, which creates an outer box/group, and then all items can be moved/scaled proportionally
eg
I can see examples in GitHub issues about using targets or sub targets but I don’t know the syntax for this, no do I find any examples.
This is what I’ve tried
const canvas = new fabric.Canvas("myId");
canvas.on("object:modified", hasBeenModified);
function hasBeenModified(evt) {
try {
var z = evt.target.canvas.get('targets'); //always returns an empty array
var ab = evt.target.canvas.get('subgroups'); //undefined
var tg = evt.target.canvas.get('group'); //undefined
//var bz = evt.get('targets'); //throws exception
var az = evt.target.canvas.targets; //empty array
var aazz = canvas.groups(); //undefined
}
catch (e) { }
}
This approach works great when a single object is moved and I can use the following syntax.
console.log(“original width: ” + evt.target.get(‘width’));
However, I’m expecting to get an array out of fabric.js so I can iterate over each item that moved and get the latest properties
After a user groups multiple items within the canvas (by using their keyboard/mouse), modifies them (scales/drags), how do I find the new size/location (or any other property) of each item
When i open a new window (with window.open) i can’t close it. I try window.close, history.back nothing happened.
Notice that the same code, running in the browser (Firefox) works perfectly.
I am using firefox to render the PWA on android tablet. In my case the usage of firefox is mandatory.
I want to close the opened tabs and go back to my main pwa screen
i am adding a layer to map , and upon zoomout removing the layer , the layer is removing but residues are coming , which are removed upon interaction with map , so i thought may be tilebuffering is issue but innvalidatesize is also not working
this is my code to do this :
$(function(){
map.on('zoomend', function (){
setTimeout(function(){
if (search_port_flag){
global_port_marker.fire('click')
search_port_flag=false
}
if (storm_labels)
{
for (let atcf_id in storm_labels)
{
if($(`.typhoons[atcf_id="${atcf_id}"]`).prop('checked'))
{
storm_labels[atcf_id]['labels'].forEach((label) =>{
if (map.getZoom() > 5)
{
map.addLayer(label)
}
else
{
map.removeLayer(label)
map.invalidateSize();
}
})
}
}
}
},500)
});
})