Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
This part is js part and ı want to delete preloader from all my pages.How can I do that.
$(window).on('load', function () {
$('[data-loader="circle-side"]').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350);
$('#hero_in h1,#hero_in form').addClass('animated');
$('.hero_single, #hero_in').addClass('start_bg_zoom');
$(window).scroll();
});
I have following grid in vue.js. I wanna to change the grid header background and text color and hide the scrollbar according to these links:
https://docs.telerik.com/kendo-ui/knowledge-base/hide-scrollbar-when-not-needed
https://www.telerik.com/forums/styling-the-k-grid-header-(mvc)
But my custom css does’nt apply to grid header and content. How do I change default kendo grid css?
<template>
<div id="kgrid">
<kendo-datasource ref="datasource1"
:transport-read-url="url + 'mylist/all'"
:page-size="'10'"
:schema-data="'data'"
:schema-total="'total'"
:transport-read-type="'POST'"
:transport-read-data-type="'json'"
:transport-read-content-type="'application/json'"
:transport-parameter-map="parameterMap"
:request-start="onBeforeSend"
:error="onError"
:server-paging="true"
:server-filtering="true">
</kendo-datasource>
<kendo-grid
:height="400"
:data-source-ref="'datasource1'"
:data-items="data"
>
<kendo-grid-column :field="'text'"
title="text">
</kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
import {Grid, GridColumn} from '@progress/kendo-grid-vue-wrapper';
import {KendoDataSource} from '@progress/kendo-datasource-vue-wrapper';
export default {
components: {
'kendo-grid': Grid,
'kendo-grid-column': GridColumn,
'kendo-datasource': KendoDataSource
},
}
</script>
<style scoped>
#kgrid .no-scrollbar .k-grid-header
{
padding: 0 !important;
}
#kgrid .no-scrollbar .k-grid-content
{
overflow-y: visible;
}
#kgrid .k-grid-header .k-header
{
background-color: black;
color: white
}
</style>
I have two (or more) different export from our system in raw data. I would like to separete it by using regex without using IF foreach case.
Bellow are two examples:
In the first log I need to get only the Message. But in the othercase I need to get Object, Type, Client IP, Status, Message.
I expect that I need to use ? in regex, but I dont know how without using IF for every case.
Thank you, for your help.
<script>
console.log("script1:start");
setTimeout(()=>{
console.log("settimeout");
},1000)
new Promise((resolve)=>{
console.log("script1:promise1");
resolve()
}).then(()=>{
console.log("script1:then1");
})
console.log("script1:end");
</script>
<script>
console.log("script2:start");
new Promise((resolve)=>{
console.log("script2:promise2");
resolve()
}).then(()=>{
console.log("script2:then2");
})
console.log("script2:end");
</script>After performing the micro task in the first script tag, why not the macro task distributed by settimeout, but the macro task of the next script tag?
hello i am using react js, any advice and suggestions are hugely appreciated here. The sharedfields forEach loop does console.log the sharedFieldAlias value, if I console.log it outside of the loop it will not output the value. I need the sharedFieldAlias value to display in the span tag but it gives a reference error that sharedFieldAlias is not defined. How can I display the value in the span tag?
sharedfields.forEach((sharedField) => {
let sharedFieldAlias = sharedField.alias;
if(value.shared_field_uuid == sharedField.uuid) {
console.log(sharedFieldAlias);
}
});
const fullLabel = (
<div style={{ display: 'flex', alignItems: 'center' }}>
<InputLabel label={display_name} help={parameter.help?.header_id} />
{!isLinked ? (
<LinkOutlined onClick={linkField} style={{ color: blue.primary }} />
) : (
<div>
<CloseSquareOutlined
onClick={unlinkField}
style={{ color: yellow[7] }}
/>
<span className="ant-typography ant-typography-secondary" id="sharedFieldAlias" style={{ marginLeft: '5px', color: '#262626'}}>
{sharedFieldAlias}
</span>
</div>
)}
</div>
);
I have searchInput in my app to search between an array of objects.
I want to start searching when the user stops typing.
Where is better to clear the timeout? and how?
this is my searchInput:
<input
value={this.state.searchInput}
id="searchInput"
onChange={this.inputsChangedHandler}
/>
contacts is my main state.
searchedContact should display when the user stops typing.
inputsChangedHandler = (e) => {
let searched = this.state.contacts.filter((i) => {
return (
i.numbers.includes(e.target.value) ||
i.name.includes(e.target.value) ||
i.family.includes(e.target.value)
);
});
this.setState(
{
[e.target.id]: e.target.value,
},
() => {
setTimeout(() => {
this.setState({
searchedContact: searched,
});
}, 2000);
}
);
};
Here is my JavaScript code. I want to avoid resetting timer when the page is refreshed.
const startingMinutes = 1;
let time = startingMinutes * 60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountDown, 1000);
function updateCountDown() {
const minutes = Math.floor(time/60);
let seconds = time % 60;
countdownEl.innerHTML = `${minutes}: ${seconds}`;
if (time>0) {
time--;
}
}
I get undefined from fetch only on chrome, while it works on firefox.
// content script
async function fetchAPI(link, init = {}) {
let res = await chrome.runtime.sendMessage({
url: link,
config: init
})
return res;
}
fetchAPI(`some link`);
// background script
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log(request);
return new Promise((resolve) => {
fetch(request.url, request.config)
.then(res => {
res.json()
.then(value => {
resolve(value);
});
});
});
});
Sorry about the messy background script code. I don’t think I have much more to explain.
Hi i want to make the timer to stop when the user is just inactive or he switched the tab away and resume back when he is in the tab again
<script>//<![CDATA[
$("#Dbtn").click(function(){var e,n=document.getElementById("at-download"),t=document.getElementById("Dbtn"),a=(document.getElementById("at-download").href,31),l=document.createElement("span");n.parentNode.replaceChild(l,n),e=setInterval(function(){--a<0?(l.parentNode.replaceChild(n,l),clearInterval(e),n.style.display="block"):(l.innerHTML=" Please wait while your url is generating.. "+a.toString()+" ",t.style.display="none")},1e3)});
//]]>
</script>
<style type="text/css">
.D-overlay { display:none; transition: all .2s ease; } .adshtml{overflow: hidden; display:
block; position: relative; height: 250px; margin-right: 10px; margin-left: 10px; border:1px
dashed} .D-overlay__content { position: relative; top: 50%; left: 50%; padding: 20px; display:
flex; background: #fff; flex-direction: column; width: 80%; max-width: 500px;box-shadow: 0
10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); line-height: 30px; border-radius: 5px;
transform: translate(-50% , -12%) scale(0.97); overflow: hidden; box-sizing: border-box; } .d-
rom{display: flex; justify-content: center; align-content: center; gap: 12px; flex-direction:
column; margin: 12px 0 35px; text-align: center; justify-self: center;} .Box-Header{text-
lign: center; padding: 0 0 9px; border-bottom: 1px solid; margin: 0 0 23px; font-size:
19px;font-weight: 900;} .box-
content{align-items: center; justify-self: center; position: relative; display: flex; text-
align:
center; vertical-align: middle; justify-content: center;} .box__close { position: absolute;
top:
10px; right: 30px; color: #585858!important; font-size: 33px;cursor:pointer; text-decoration:
none!important; } @media only screen and (max-width: 480px){.D-
overlay__content{width:100%!important}}a.btn { width: 150px; display: block; margin: 0 auto;
padding: 1em 0; position: relative; font: 1.125em 'Arial', sans-serif; font-weight: 700; text-
align: center; text-decoration: none; color: #fff; border-radius: 5px; background: rgba(217,
67,
86, 1); }#at-download span { text-align: center; margin: 20px 0; width: 100% }.Download_btn{
padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem;color:
#fff!important;text-decoration: none!important; background-color: #007bff; border-color:
#007bff;display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; v
ertical-align: middle; } #at-download{display: inline-block; height: 37px; line-height: 30px;
width: 100%; text-align: center; background-color: #f3f2f2; color: #000; font-size: 15px;
order-
radius: 8px; text-transform: capitalize; border: 1px solid #212121!important; margin-
top:35px;text-decoration:none;}#at-download{line-height: 36px; }
</style>
<div class='Download_btn' onclick='document.getElementById("AT-Download5").style.display="block"' id='Dbtn'>Download</div> <div id="AT-Download5" class="D-overlay"> <div class="D-overlay__content"><div><div onclick='document.getElementById("AT-Download5").style.display="none"' class="box__close">×</div> </div> <div class="Box-Header"> <span> Download file </span> </div>
<!-- [ ADVERTISEMENT]-->
(adsbygoogle = window.adsbygoogle || []).push({});
Download file
I am currently working on a website and am having difficulty with some detail elements.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}h1, p , body > ul, ol{
text-align: center;
align-self: center;
background-color: rgba(255, 255, 255, 0.6);
width: 40%;
margin: 20px 29%;
padding: 5px 3%;
}
h1 {
font-family: 'Press Start 2P';
font-size: 40px;
}
p, ul, ol {
font-family: "Turret Road";
font-size: 20px;
}
.left-column {
width: 45%;
float: left;
margin: 0 2.5%;
padding: 0;
}
.right-column {
width: 45%;
float: right;
margin: 0 2.5%;
padding: 0;
}
.column > li {
width: 45%;
}
.classic {
background-image: url("classic.jpg"); /* aspect ratio is 3:2 */
background-size: 100%;
}
.futurunk {
background-image: url("futurunk.jpeg"); /* aspect ratio is 16:9 */
}
.eccojams {
background-image: url("eccojams.jpg"); /* aspect ratio is 1751:889 */
}
.mallsoft {
background-image: url("mallsoft.jpg"); /* aspect ratio is 125:83 */
}
.synthwave {
background-image: url("synthwave.png"); /* aspect ratio is 16:9 */
}
.latenight {
background-image: url("latenight.jpg"); /* aspect ratio is 16:9 */
}
.chillwave {
background-image: url("chillwave.jpg"); /* aspect ratio is 16:9 */
}<body>
<div>
<p>Each of the 8 stages revolve around a certain theme:</p>
<ul class="left-column" class="column">
<li><details class="classic">
<summary><h1>"Classic" vaporwave</h1></summary>
</details>
</li>
<li><details class="futurunk">
<summary><h1>Future Funk</h1></summary>
</details>
</li>
<li><details class="eccojams">
<summary><h1>Eccojams</h1></summary>
</details>
</li>
<li><details class="mallsoft">
<summary><h1>Mallsoft</h1></summary>
</details>
</li>
</ul>
<ul class="right-column" class="column">
<li><details class="synthwave">
<summary><h1>Synthwave</h1></summary>
</details>
</li>
<li><details class="latenight">
<summary><h1>Late Night LoFi</h1></summary>
</details>
</li>
<li><details class="chillwave">
<summary><h1>Chillwave</h1></summary>
</details>
</li>
<li><details class="vaportrap">
<summary><h1>Vaportrap</h1></summary>
</details>
</li>
</ul>
</div>
</body>I want the expandable elements to be both the same width and expand to the same aspect ratio as the images, but neither of these happen. Instead, the boxes are all different sizes and only expand a bit upon opening. How do I make the width consistent?
I have just been experimenting with JavaScript and was trying this code.
var elements = document.getElementsByTagName("p");
var n = elements.length; // Should be: 10
for (var i = 0; i < n; i++) {
elements[i].onclick = function () {
console.log("This is element #" + i);
};
}<p>Element: #1</p>
<p>Element: #2</p>
<p>Element: #3</p>
<p>Element: #4</p>
<p>Element: #5</p>However, when the code is run, something weird occurs. Basically, for example, if you click on element #1, it will say that you’ve clicked on element #5.
This is what I am curious to know:
This is how my App looks.
App.js
const Home = () => {
const [inputValues, setInputValues] = useState(...);
const word = generateRandomWord(); // how to make the word not changing
return (...)
generateRandowWord.js
export const generateRandomWord = () => {
// return a random word in string
}
Every time inputValues changes, the Home component will be re-render, and the value of word is different too. How can make the value of word remain unchanged?
I am new to React, and am trying to call a function which acts as a component, but returns two values, one called ‘render’ which just returns a component wrapped in a div, and another called sliderVal, which is an internal state value of that slider. Below is code from MySlider.js
function MySlider(props) {
const [sliderVal, setSliderVal] = useState(1);
return{
render:(
<div>
<Grid container justify = "center">
<Box sx={{ width: 250 }}>
<Typography id="input-slider" gutterBottom>
{props}
</Typography>
<Slider
defaultValue={1}
valueLabelDisplay="auto"
step={1}
value={sliderVal}
marks
min={1}
max={10}
onChange={(_, newValue) => setSliderVal(newValue)}
/>
</Box>
</Grid>
</div>
),
sliderVal
}
In my App.js, I am using the following code to render two sliders, and pass their values into another component.
var {render, sliderVal} = MySlider("Number of Paragraphs");
var {render1, sliderVal1} = MySlider("Number of Words");
The first one works just fine, I can use {render} to render the slider, and {sliderVal} to access its value and pass into another component. However the 2nd one does not work and nothing renders. When I console.log render1 and sliderVal1, they are both undefined. Any insight is greatly appreciated!
I’m working with Laravel 5.8 and Sweet Alert & I wanted to get some data from an input field:
$(document).on('click', '#discountbtn', function(e) {
e.preventDefault();
let form = $(this).parents('form');
swal({
title: "If you have discount code then write it down",
type: "warning",
allowEscapeKey: false,
allowOutsideClick: false,
showCancelButton: true,
animation: "slide-from-top",
confirmButtonColor: "#DD6B55",
confirmButtonText: "Submit",
cancelButtonText: "I dont have any",
showLoaderOnConfirm: true,
closeOnConfirm: false,
html: '<input id="swal-input2" class="swal2-input">',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#swal-input2').val()
])
})
},
onOpen: function () {
$('#swal-input1').focus()
}
}).then((isConfirm) => {
if (typeof isConfirm.value === 'undefined') {
swal("User pressed on Cancel Button")
}else{
// get result
}
});
});
So now this alert pop up on the screen and I want to get the result and do something with it:
But I don’t know how to get the result in this case!
Also if I try this, then I couldn’t find out user pressed on Cancel button (I Don’t have any) or “Submit” button:
.then(function (result) {
swal(result)
}).catch(swal.noop)
});
So how can I get result from user input if he clicks on Submit button?
I’m trying to access and console.log the the id params but keep getting an error saying that theyre undefined. Why is that? The page loads perfectly and I can see the users id in the url.But when I go to console.log it the webpage crashes and it says Cannot read properties of undefined (reading ‘params’)
export default class Profile extends Component {
constructor(props) {
super(props);
console.log(this.props.match.params.id)
this.state = {
redirect: null,
userReady: false,
userDetails: [],
activeItem: 'favourites'
};
}
This is where I send my id
const UserListComponent = (props) => {
const [loading, setLoading] = useState(true);
const [userList, setUserList] = useState([]);
const { username } = useParams();
const history = useHistory();
useEffect(() => {
Axios.get(`http://localhost:8080/api/search?username=${username}`, {
headers: authHeader(),
})
.then(({ data }) => {
console.log(data.users);
setUserList(data.users);
setTimeout(() => setLoading(false), 500);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
}, []);
return (
<UserListContainer
onClick={() => {
//history.push(`/films/${props.movieList.movie.id}`)
}}
>
{loading && <div>Loading...</div>}
{!loading &&
userList.map((user, i) => (
<Link key={i} to={`/user/${user._id}`}>
{user.username}
</Link>
))}
{!loading && userList.length === 0 && (
<div>No users exist with the paramters!</div>
)}
</UserListContainer>
);
};
export default UserListComponent;