I trying to make this thing, for example, on the first section of FullPage.js website there is three slides. On the default settings there are control arrows on the right and left, and that’s okay. But, I want to make this arrows appear only on mobile version of website. For example, on the desktop there is no slides, just first one with all information, and on the mobile there is 3 slides so I can navigate with. How can I do this?
I know there is “controlArrows: false,” option, but I wanna disable controlArrows only on desktop!
Category: javascript
Category Added in a WPeMatico Campaign
Why does formData not work in axios 0.26.1 in react native Android emulator?
I have use expo-image-picker and axios 0.26.1. formData in axios version 0.26.1 isn’t work. when using formData, data is not sent to the api
downgrade axios to version 0.24.0 but I get this error when sending formData in Android emulator.
Error: Network Error
formData:
export const sendRequest = (url, response, method, formData) => {
return axios({
url,
method,
data: method !== "get" ? formData : null,
headers: {
Authorization: `Bearer ${response.data.access}`,
headers: { "Content-Type": "multipart/form-data" },
transformRequest: (data, headers) => {
return formData;
},
},
});
const formData = new FormData();
const imageUri = image.value.uri;
const newImageUri = "file:///" + imageUri.split("file:/").join("");
formData.append("photo", {
uri: newImageUri,
type: mime.getType(newImageUri),
name: newImageUri.split("/").pop(),
});
data.append("title", title);
can you help me please?
Display JavaScript function output on webpage using getElementByID
Hei.
I have made a JavaScript function that will convert input (UPPER CASE LETTERS) using ROT13. Problem is that the output will not show as a “paragraph” on the .html page when the letters are submittet to the function. All files is saved in the same folder and using XAMP for testing.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caesars Cipher Converter</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Caesars Cipher Converter (freeCodeCamp project for JavaScript)</h1>
<h3>Description</h3>
<p> <!-- Add an anchor/link to wikipedia in the description-->
Input letters into the input field and press submit. The JavaScript code that I have
made will convert the letters using <strong><a href="https://en.wikipedia.org/wiki/ROT13">ROT13.</a></strong>
</p>
<p>
NB: Only uppercase letters are allowed.
</p>
<form>
<label for="Input">Input</label>
<input type="text" id="input" required>
<!-- Adding the submit putton that activate the rot 13 converter javascript function when clicked -->
<button type="button" onclick="rot13()">Submit</button>
</form>
<p id="output"></p>
<!-- Here comes the external javascript import -->
<script src="ROT13_converter.js"></script>
</body>
</html>
JavaScript code:
var alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M'];
var oppAlph = ['N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function rot13() {
var str = document.getElementById("input").value;
var newStr = str.split("");
for (let i = 0; i < newStr.length; i++) {
for (let j = 0; j < alphabet.length; j++) {
if (newStr[i] === alphabet[j]) {
newStr[i] = oppAlph[j];
} else if (newStr[i] === oppAlph[j]) {
newStr[i] = alphabet[j];
}
}
}
document.getElementById("output").innerHTML = newStr.join("");
}
Here is a similar project i made just with roman number convertion (I want the same ouput):
Preview (Roman number convertion)
Update a obj list in js with a form and show it in HTML page
I have a HTML page with a form and a table.
In a js file I have a list of objects (JSON) and with this list I populate the table when the page loads.
The form should allow me to add an element to the list and then display it as a new row in the table.
This is my js file:
var data = [
{
"first_name": "John",
"last_name": "Smith",
"email": "[email protected]",
"job": "CEO",
"agree": true
},
{
"first_name": "Marie",
"last_name": "Curie",
"email": "[email protected]",
"job": "Researcher",
"agree": true
}];
populateTable();
function populateTable() {
var out = "<table><tr>"
+ "<th>First Name</th><th>Last Name</th>"
+ "<th>Email</th>"
+ "<th>Job</th><th>Agree</th></tr>";
var i;
for (i = 0; i < data.length; i++) {
out += '<tr><td>' + data[i].first_name + '</td><td>' + data[i].last_name + '</td><td>'
+ data[i].email + '</td><td>' + data[i].job + '</td><td>' + data[i].agree + '</td></tr>';
}
document.getElementById("showData").innerHTML = out;
};
function collectData(){
var TestName = document.getElementById("fname").value;
var TestSurname = document.getElementById("lname").value;
var TestEmail = document.getElementById("email").value;
var TestJob = document.getElementById("job").value;
var TestAgree = document.getElementById("agree_terms").value;
//insert this data on JSON file
var jsonObject = {
"first_name": TestName,
"last_name": TestSurname,
"email": TestEmail,
"job": TestJob,
"agree": TestAgree
};
data.push(jsonObject);
}
I tried to push the new element on the list but naturally the code reload the function populateTable() without considering this new element.
Ho can I resolve it?
how create loop with jquery
It is a Google web design code with custom function.
I need to delate moltiple image by mouse. When the user go out the image the first image need to be delate, when the user go again inside the document, he is able to delate the follow image.
My problem is that whe the user go out the document all the image are going to be delay..
- I need to select different image by Css ID –> WHR
- somethings don’t work. I’m looking for a different solution.
//var MAX = 3;
var i = 1;
gwd.image2 = function(e) {
var i = 1;
var whr = "#gwd-image_"+ i;
var whr2 = "#gwd-image_"+ (i+1);
$(document).mousemove(function(e) {
console.log(whr);
$(whr).css({
left: e.pageX - 150,
top: e.pageY - 125,
}, 10);
$(whr).css("-webkit-transform", "rotate(" + (e.pageX - 150) / 10 + "deg)");
$(document).mouseout(function(e) {
$(whr).animate({
left: (e.pageX - 150) * 3 + 'px'
}, "fast", function() {
gwd.actions.events.setInlineStyle('gwd-image_1', 'display: none;');
i = i+1;
})
})
})
}
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-taparea_image1', 'mousemove', gwd.image2, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-taparea_1', 'mousemove', gwd.auto_Gwd_taparea_1Touchenter, false);
gwd.actions.events.removeHandler('gwd-taparea_image1', 'mousemove', gwd.image2, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
```
In Body there are four image that I need to delate with mouse moviment.
```
<body>
...
<div class="gwd-page-content gwd-page-size">
<gwd-image id="gwd-image_3" source="assets/SO-91650-Solferino_Tamaro_01.03-30.03_300X250.jpg" scaling="stretch" class="gwd-image-1s8p"></gwd-image>
<gwd-image id="gwd-image_2" source="assets/SO-91650-Solferino_Panebianco_01.03-
<gwd-image id="gwd-image_1" source="assets/SO-91650-Solferino_Sinclair_05.03-05.04_300X250.jpg" scaling="stretch" class="gwd-image-on7n"></gwd-image>
<gwd-taparea id="gwd-taparea_image1" class="gwd-taparea-odyq" data-gwd-name="tap_image1"></gwd-taparea>
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-f0yc" data-gwd-name="first_interaction" data-gwd-tl-hidden=""></gwd-taparea>
</div>
---
</body>
```
React PropTypes – OR
For this code:
const FirstComponentPropTypes = {
foo: PropTypes.any,
};
const SecondComponentPropTypes = {
bar: PropTypes.any,
};
...
function MyComponent({ foo, bar }) { ... }
In order to set the propTypes of MyComponent, is it possible to do something like:
MyComponent.propTypes = FirstComponentPropTypes | SecondComponentPropTypes;
?
Transforming MediaStream in an ended state
I am trying to apply some transformations on the video frames of an ended MediaStreamTrack. I tried using the MediaStreamTrack Insertable Media Processing using Streams API:
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
stream.addEventListener(streamEndedEvent, async () => {
const videoTrack = stream.getVideoTracks()[0];
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });
const transformer = new TransformStream({
async transform(videoFrame, controller) {
const newFrame = await transform(videoFrame);
videoFrame.close();
controller.enqueue(newFrame);
}
});
trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);
// use the transformed stream here
});
I am getting an error when trying to construct the MediaStreamTrackProcessor object:
Uncaught (in promise) TypeError: Failed to construct 'MediaStreamTrackProcessor': Input track cannot be ended
If MediaStreamTrackProcessor cannot be used, is there some other API that would allow me to parse the constituent frames of a MediaStream, apply some transformation on them and create a new stream?
How to achieve tabbed code blocks in Gatsby and Asciidoctor.js?
I’m using Gatsby and Asciidoctor.js to develop a documentation web site,
I need to fetch same code samples for multiple languages (e.g. same code for both JAVA and Kotlin) and represent them as tabbed code blocks.
I have found this extension, but this is for AsciidoctorJ,
Is there any way that I can achieve this on Asciidocor.js or some how use mentioned Java plugin in Asciidoctor.js?
How to highlight date from column where date is same todays date in angular using directives?
written html as
<ng-container matColumnDef="AppointmentDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
<mat-cell *matCellDef="let row" appColordirective> {{row.appointmentDate|date: "yyyy-MM-dd"}} </mat-cell>
</ng-container>
I want to provide it green color when date matches with todays date. My directive code is ,
import { Directive, ElementRef,Input, OnInit } from '@angular/core';
@Directive({
selector: '[appColordirective]'
})
export class ColordirectiveDirective implements OnInit {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor ="green";
}
ngOnInit(): void {
}
}
```
any one please guide on this.
How to input amount and pass to server properly
Recently, I met a requirement. I need create an input to recive amount from user properly.
At first, I want input number because the backend used bigint as storage type. It’s quite troublesome to convert between String and Number. What’s more troublesome is that I need to convert the numbers into units. But I know the number of JS is based on IEEE754 basic 64-bit binary floating-point. So there must be an accuracy loss problem here. Beacuse I was under the impression that as long as it was expressed in floating point numbers, then there must be numbers that could not be expressed accurately.
I remembered the example I saw before. I tried in my Chrome’s console.
console.log(0.2 + 0.1)
// 0.30000000000000004
This means the number 0.3 cannot be represented accurately. So I then proceeded with the following attempt.
const num = 0.3;
console.log(num);
// 0.3
I was surprised to find that the printout was actually accurate. But then I immediately calmed down and decided that this number was stored inaccurately at the memory. Even through it can be stored accurately, what about passed by json?
So this is my first question. Am I correct in this opinion? And how to explain the accurate print of 0.3?
In the end, I used string as input and regex to validate the string is a valid number of money. Then pass the string to the backend and let th server to parse and store.
So this is my second question. Is the method correct? Or there may be some other way better? Please guide me.
Tamper monkey Cannot use import statement outside a module
I am getting the error Cannot use import statement outside a module when importing a script in tamper monkey that uses import in the code.
How can I keep using that script? is there a way to set tamper monkey to use modules?
like type="module" that we use in script tags?
Getting invalid hook call in react native
ExceptionsManager.js:179 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
Getting this error in Playbutton component
Playbutton.js
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
View,
Button,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
NativeModules,
} from "react-native";
var deviceHeight = Dimensions.get("window").height;
var deviceWidth = Dimensions.get("window").width;
import useAppleFunction from "../CustomHooks/useAppleFunction";
const PlayButton = () => {
useEffect(() => {
useAppleFunction();
}, []);
}
and here is the custom hook useApplefunction.js
import { StyleSheet, Text, View } from "react-native";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
const useAppleFunction = () => {
const Playlist = useSelector((state) => state);
console.log("reduxcheck=",Playlist);
useEffect(() => {
runtimer();
}, []);
const runtimer = () => {
console.log("reduxcheck=1",Playlist);
};
};
export default useAppleFunction;
const styles = StyleSheet.create({});
Object.defineProperty set is no trigger
i can watch getter but can’t watch setter and i can get page、watchFun。why？enter image description here
how to calender control click event effect in another text box in jquery
I have tried with mouse leave function in jquery with the following code
$(function () {
$("#<%=txt_FromDate.ClientID %>").mouseleave(function () {
// alert("Wow; Its Work!.")
var txt_FromDate = document.getElementById('txt_FromDate');
var txt_ToDate = document.getElementById('txt_ToDate');
txt_ToDate.value = txt_FromDate.value;
});
});
The above code is working fine when mouse leave from the text box. but i need the effect when clicking calender txt_FromDate(from date) and it effect the same date in txt_ToDate(to date).
My html code is given below
<td style="text-align: left;" class="auto-style1">
<asp:TextBox ID="txt_FromDate" runat="server" class="inputCalendar2_font14" Width="105px"
onfocus="showCalendarControl(this);" onkeypress="return false;" onpaste="return false;"
CssClass="inputCalendar2_font14"></asp:TextBox>
<asp:TextBox ID="txt_ToDate" runat="server" class="inputCalendar2_font14" Width="105px" OnTextChanged="txt_ToDate_TextChanged"
onfocus="showCalendarControl(this);" onkeypress="return false;" onpaste="return false;"
CssClass="inputCalendar2_font14"></asp:TextBox>
My reference is given below,
<script src="../jScript/BrowserCompatibility.js" type="text/javascript"></script>
<script src="../jScript/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../calenderCtr/CalendarControl.js" type="text/javascript" language="javascript"></script>
<link href="../calenderCtr/CalendarControl.css" rel="stylesheet" type="text/css" />
<script src="../jScript/Validator.js" type="text/javascript" language="javascript"></script>
<link href="../style/dsi_mig.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
next build throws error related to webpack
When i run next build i get following error:
./node_modules/leaflet/dist/images/layers-2x.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
> Build error occurred
Error: > Build failed because of webpack errors
at /app/node_modules/next/dist/build/index.js:397:19
at async Span.traceAsyncFn (/app/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (/app/node_modules/next/dist/build/index.js:77:25)
#
my next.config.js seems to be configured to process .png files. Project uses leaflet and react-leaflet libraries. Error says nothing about images that I put in /public/images
const { i18n } = require('./next-i18next.config');
const theme = require('./app/styles/antdoverrides');
module.exports = {
webpackDevMiddleware: (config) => {
config.watchOptions = {
poll: 800,
aggregateTimeout: 300,
};
return config;
},
module: {
loaders: [
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
}
};