The HTML looks like this.
<div class="mainClass">
<span>
<span class="profilePic" style="background-image: url("url of pic")></span>
</span>
</div>
I need to get the url in the span tag using Jquery
Category: javascript
Category Added in a WPeMatico Campaign
React Router v6 – not rendering
I’m learning React. I cannot understand why react router v6 is not rendering any component.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Customers, Invoices, Jobs, Login, Sales, } from './modules'
import './App.css';
import './index.css';
import App from './App';
const rootElement = document.getElementById("root");
ReactDOM.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="/jobs" element={<Jobs />} />
<Route path="customers" element={<Customers />} />
<Route path="invoices" element={<Invoices />} />
<Route path="sales" element={<Sales />} />
<Route
path="*"
element={
<main style={{ padding: "1rem" }}>
<p>There's nothing here!</p>
</main>
}
/>
</Route>
</Routes>
</BrowserRouter>,
rootElement
);
src/modules/invoices/Invoices.js
import { Link } from "react-router-dom";
import { getInvoices } from "../../data";
export default function Invoices() {
let invoices = getInvoices();
return (
<div style={{ display: "flex" }}>
<nav
style={{
borderRight: "solid 1px",
padding: "1rem",
}}
>
{invoices.map((invoice) => (
<Link
style={{ display: "block", margin: "1rem 0" }}
to={`/invoices/${invoice.number}`}
key={invoice.number}
>
{invoice.name}
</Link>
))}
</nav>
</div>
);
}
the data.js is taken from react-router docs https://reactrouter.com/docs/en/v6/getting-started/tutorial
What I’m doing wrong?
My modal is not getting the info of the car i want to show
i need help on a react JS situation :
(sorry for the english, it’s not my native language, hope it’s clear)
i created a modal who is supposed to get the infos of a car, so i map my data, i get all the items. Then i’d like to : on click one of the item, the modal open with the informations of the car i just clicked on. but instead it keeps the same info (the last car “maped”).
i tried to use the index key… or the id, but i can’y access what i want.
Any idea why ?
here my code
data.map((offer, index) => {
// console.log("offers map ---->", offer);
return (
<div key={offer.id}>
<div>
<p>{offer.headlines.description}</p>
</div>
<div>
<img
src={offer.images.small}
alt="picture"
onClick={() => {
setShowModal(true);
}}
/>
<ModalCar
title={offer.headlines.description}
configuration={offer.carGroupInfo}
image={offer.images}
onClose={() => {
setShowModal(false);
}}
show={showModal}
/>
</div>
here my modal
const ModalCar = (props) => {
console.log("props modal---->", props);
if (!props.show) {
return null;
}
return (
<div className="modal">
<div className="modal-content">
{/* <img src={image.large} alt="" /> */}
<div className="modal-header">
<h1 className="modal-title">{props.title}</h1>
</div>
<div className="modal-body">this is modal content</div>
<div className="modal-footer">
<button onClick={props.onClose} className="button-modal">
Close
</button>
</div>
</div>
</div>
);
};
export default ModalCar;
google map store locator, replacing ajax call with static list for testing
I’m trying to repurpose an old map feature from my previous personal site so that I can get it working on my new site. Quite simply, I will have a map search that scans the database and creates map markers as well as sidebar listings for any results.
My issue now is that I want to test this for basic functionality and style changes in a sandbox/jsfiddle but I need to replace the ajax call portion so that the search simply scans a static list (json, most likely) within the code.
In my current fiddle, my main issue lies in the root function on line 353 of the JS portion. The function is called with default params but it maxes an ajax post call and I want to just hit a list of static store listings here for testing.
https://jsfiddle.net/hgpoyvw1/
How would I replace the whole ajax portion with a static list of 2 or 3 stores?
jQuery(document).ready(function (){
// call the map function with default params
var defLat = 40.778259;
var defLng = -75.417931;
var defdis = 250;
var defdis1 = 999999999;
// reinitMap(defLat, defLng, defdis);
var directionsDisplay,
directionsService,
map; var markers = [];
jQuery('#rev_pro').on('change',function(){
var mfil1 = jQuery(this).val();
var mfil2 = jQuery('#prac_type').val();
var ss = jQuery('#ss').val().length>=3 ? jQuery('#ss').val() : '';
if(mfil1 != ''){
reinitMap(defLat, defLng, defdis1, mfil1, mfil2, ss);
}
})
jQuery('#prac_type').on('change',function(){
var mfil1 = jQuery(this).val();
var mfil2 = jQuery('#rev_pro').val();
var ss = jQuery('#ss').val().length>=3 ? jQuery('#ss').val() : '';
if(mfil1 != ''){
reinitMap(defLat, defLng, defdis1, mfil2, mfil1, ss);
}
})
jQuery('#mapSR').on('submit',function(e){
e.preventDefault();
var mfil1 = jQuery('#rev_pro').val();
var mfil2 = jQuery('#prac_type').val();
var ss = jQuery('#ss').val();
if(ss.length>=3){
reinitMap(defLat, defLng, defdis1, mfil1, mfil2, ss);
map.setZoom(2);
}else{
// code here
}
return false;
})
jQuery('#reset').click(function(){
jQuery('#ss,#prac_type,#rev_pro').val('');
reinitMap(defLat, defLng, defdis);
})
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var centerM = new google.maps.LatLng(defLat, defLng);
var mapOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: centerM, gestureHandling: 'greedy',
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true
});
var minit = 0;
map.addListener('idle', function() {
var newlat = map.getBounds().getCenter().lat().toFixed(6);
var newlng = map.getBounds().getCenter().lng().toFixed(6);
var newDis = (Math.pow(2,10-map.getZoom())*100);
console.log('zoom is: '+map.getZoom());
console.log('new dis: '+newDis);
var mfil1 = jQuery('#rev_pro').val();
var mfil2 = jQuery('#prac_type').val();
var ss = jQuery('#ss').val();
if(ss.length>=3){ ss = ss; }else{ ss = ''; }
setTimeout(function(){
if(minit==0){
reinitMap(defLat,defLng,defdis,mfil1,mfil2,'calif');
}else{
reinitMap(newlat,newlng,newDis,mfil1,mfil2,ss);
} minit = minit+1;
},3000);
});
function reloadMarkers() {
for (var i=0; i<markers.length; i++) {
markers[i].setMap(null);
} markers = [];
}
function setMarkers(pinz,centerLat,centerLng){
for(var i = 0; i < pinz.length; i++){
var myLatLng = new google.maps.LatLng(pinz[i]['lat'], pinz[i]['lon']);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
// animation: google.maps.Animation.DROP,
title: pinz[i]['ttle']
});
markers.push(marker);
var mtle = pinz[i]['ttle'];
content = mtle+'<a class="btn btn-marker" target="_blank" href="'+pinz[i]["link"]+'"><p>View Listing</p></a>';
var infw = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'spider_click',( function ( marker,content,infw ){
return function() {
infw.close();
infw.setContent(content);
infw.open(map,marker);
};
})(marker,content,infw));
oms.addMarker(marker);
}
}
function reinitMap(newlat,newlng,distance,mfil1='',mfil2='',ss=''){
jQuery('#maplist-area .map-message').show();
jQuery.ajax({
type: 'POST',
url: '<?php echo home_url(); ?>/wp-admin/admin-ajax.php',
data: {
mlat : newlat,
mlng : newlng,
dist : distance,
rev_pro: mfil1,
prac_type: mfil2,
search: ss,
action: 'sgtGetListings'
},
error: function(){
var mhtml ='';
mhtml += '<div id="noresultsList">'+
'<div id="noresultimg" data-bind="visible:zoom()<8" style="">'+
'<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/zoomedout.svg">'+
'</div>'+
'<div id="message">'+
'<div class="wrapper">'+
'<span class="title">No results match your search criteria</span>'+
'<span class="title">Try moving the map, searching another location or adjusting your filters to expand your search</span>'+
'</div>'+
'</div>'+
'</div>';
jQuery('#ajax_res').html(mhtml);
},
success: function (response) {
if(response === 'NO-DATA'){
// reloadMarkers();
var mhtml ='';
mhtml += '<div id="noresultsList">'+
'<div id="noresultimg" data-bind="visible:zoom()<8" style="">'+
'<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/zoomedout.svg">'+
'</div>'+
'<div id="message">'+
'<div class="wrapper">'+
'<span class="title">No results match your search criteria</span>'+
'<span class="title">Try moving the map, searching another location or adjusting your filters to expand your search</span>'+
'</div>'+
'</div>'+
'</div>';
jQuery('#ajax_res').html(mhtml);
}else{
var result = jQuery.parseJSON(response);
drawListings(result);
reloadMarkers();
setMarkers(result,newlat,newlng);
}
jQuery('#maplist-area .map-message').hide();
},
timeout: 20000 // sets timeout to 20 seconds
});
}
function drawListings(result){
var mhtml = '';
for (var i = 0; i < result.length; i++) {
var mcls = 'forest-col';
if(i%2==0){ mhtml += '<div class="mini-col">'; mcls = ''; }
mhtml += '<div class="mini-home-col '+mcls+'">'+
'<img src="'+result[i]["imgs"]+'" class="forest-img">'+
'<div class="mini-feature"><h6 class="feature-head practice-head">'+
'<a href="'+result[i]["link"]+'">'+result[i]["ttle"]+'</a></h6>'+
// '<span class="location-text">Location:Alabama</span>'+
'<span class="location-text date-text">Date: '+result[i]["date"]+'</span>'+
'<div class="location-text">Amount: $'+(result[i]["amnt"]).toFixed(2)+'</div>'+
'<p class="feature-text low-text">'+result[i]["desc"]+'</p></div></div>';
if(i%2!=0){ mhtml += '<br></div>'; }
}
jQuery('#ajax_res').html(mhtml);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="aprimary" class="large-12 columns content-area">
<main id="main" class="site-main" role="main">
<article class="page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content row">
<?php echo do_shortcode('[do_widget id=featured_ads_widget-8]'); ?>
<br><br><br>
<div class="row" id="main-cont">
<div class="large-6 columns" id="listing-ress">
<form class="mini-form">
</form><br>
<div class="home-div">
<div class="home-col" id="ajax_res">
<h4>Loading...</h4>
</div>
</div>
</div>
<div class="large-6 columns" id="maplist-area">
<form id="mapSR" class="home-form" method="post">
<input type="text" id="ss" name="search" placeholder="Type at-least 3 characters">
<button type="submit" id="search" style="font-size:14px;padding-left:7px 20px">Search</button>
</form><br>
<div id="map" style="height:720px;width:100%;"></div>
<div id="loadingtext" class="map-message">
<div class="message-content">
<div class="wrapper">
<div class="title">Loading...</div>
</div>
</div>
</div>
<br><br>
<!-- <button class="btn btn-primary" id="clk">CLICK</button> -->
</div>
</div>
</div>
</article>
</main><!-- #main -->
</div><!-- #primary -->
<script src="https://maps.googleapis.com/maps/api/js?key=test&v=3.exp&callback=initMap"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>Edit pdf form in a webapp [closed]
in my webapp (.NET/blazor stack but not matter the problem is general), i would like to allow my users to edit directly pdf (edit the form inside the pdf) stored on the server.
I allow this for word/excel file with webdav protocol and it work perfectly
For pdf forms, i found nothing similar. the built-in pdf viewer in chrome dont seem let me save the pdf directly on the server (precision, i target specifically chrome).
I tried also open the file directly on the server with adobe acrobat reader but kind of same, the save failed for write permission (which i can understand)
so I don’t know what can be my solutions now. I see many JS pdf editor library but there all look expensive and with a ton of feature i dont need. i would only like allow the user fill the forms through the webapp and save it on the server.
I wait for your suggestions
Thanks !
How to require image in react-native
I need to show images as carousel and I can’t require them properly. I tried to require them in json like this {“Image”: require(“$PATH”)} or in js file in ParalaxImage tag but nothing….
item creator
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={item.landscapeImage}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
</View>
);
}
JSON file
[
{
"name": "snydercut",
"image": "../../assets/moviePictures/snydercut.jpeg",
"landscapeImage": "../../assets/moviePictures/snydercutLandscape.jpeg"
},
{
"name": "batman",
"image": "../../assets/moviePictures/batman.jpeg",
"landscapeImage": "../../assets/moviePictures/batmanLandscape.jpeg"
},
{
"name": "avatar",
"image": "../../assets/moviePictures/avatar.jpeg",
"landscapeImage": "../../assets/moviePictures/avatarLandscape.jpeg"
}
]
and here is my carousel code
render () {
return (
<Carousel
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={moviePictures}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
);
}
Listen for global keypress in NodeJS
how do I detect a global keypress in NodeJS? With global i mean just in other windows (on Linux). The script i’m making is only for Linux. ioHook didn’t work for me, it just gave XKB Keyboard support is required. Anyone knows a good package for that?
Can I update an array of objects by modifiying a value return by array.find()?
I want to modify an object in an array by calling array.find() and then mutate the returned reference to indirectly mutate the array but that doesnt appear to work. I assumed from reading other articles that array.find() returns a reference to an object in the array on a successful match but that appears not the be the case.
In this codesandbox if I mutate the result from array.find() the array is not updated. I can update the array if I replace array.find() with array.findIndex() and modify the array elements by index, but the code is not as clean and I still dont understand why I cant update by reference.
Does array.find() return a reference to an object in the array or a copy? In the codesandbox provided it appears to behave as though its a copy.
Any advice is appreciated.
Scrape data from einforma.com
Can someone help me doing a simple web-scraper? I’m a comercial of a company and I want to take some data from a specific page scraping with python. I have an excel list with the companies I want to search for. The web page I want to scrape is https://www.einforma.com/.
My intention is to take the name of the company from the excel and put it in the search engine of the web page, to later extract the information that appears on the web page to an excel.
I don’t know if it is difficult or easy, but for me it is not easy. If someone can help me, I would really appreciate it.
These are the data I want to extract from the web page.
These are the data I want to extract from the web page.
Thanks in advance to anyone who can help me.
Password validation with class-validator
I am trying to use Nest.js with the class-validator package in order to make sure that an User-provided email field is not empty & that a User-given password has at least 8 characters.
I have a user-model-user.ts file where my User class exists with the decorators below:
import {IsNotEmpty, MinLength} from 'class-validator';
export class User {
@IsNotEmpty()
email: string;
@IsNotEmpty()
@MinLength(8)
password:string;
}
In my test file I have the tests
user-user.controller.spec.ts
it('when email is empty, then return error 400', (done) => {
const user = createUser();
user.email = '';
validate(user).catch((error) => {
expect(error.getResponse().statusCode).toEqual(400);
done();
});
});
it('when password is less than 8 characters, return error 400', (done) => {
const user = createUser();
user.password = '12345678';
validate(user).catch((error) => {
expect(error.getResponse().statusCode).toEqual(400);
done();
});
})
function createUser() {
return {
email: '[email protected]',
password: '1234567'
};
}
function validate(user:User) {
const validationPipe = new ValidatorPipe({transform: true});
return validationPipe.transform(user, {
type: 'body',
metatype: User
});
}
});
After looking online and at this code for a long time while fixing bracket placements, I am unable to find out why my tests are passing when the ’email’ field is empty in the first lines of my user.controller.spec.ts file. In the same test mentioned above, my password field is less than 8 characters and also passes as, when I really wanted it to fail since it is less than 8 characters.
However, I notice that in my second ‘it’ test, when the user.password field is 8 characters or more, the test for it fails. I see the reason for it failing is because of an “Exceeded timeout of 5000ms for a test” error when in reality I would like it to pass since it contains a minimum of 8 characters like I described in my model-user.ts file.
Does someone see what I’m doing wrong here?
The pieces are not swapping their position when i drop them?
I’m working in WordPress and I’m trying make it so when one of the draggable piece is dropped on the position of the other piece they swap places however everytime i drop a piece nothing happens. Below there is the css part, the js part and the html part.Each piece is a small picture with a hidden text also in div. If there’s any more information needed please ask them freely.
HTML
<div class="float-container" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id = 1 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:100px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_1.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/1.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/cum-id-fugiunt-re-eadem-defen/">Cum</a></h3>
</div>
<!--<br> -->
<div id = 2 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:200px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_2.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/2.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/pauca-mutat-vel-plura-sane-lo/">Pau</a></h3>
</div>
<!--<br> -->
<div id = 3 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:300px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_3.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/3.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/respondeat-totidem-verbis/">Res</a></h3>
</div>
<!--<br> -->
<div id = 4 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:400px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_4.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/4.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/tum-mihi-piso-quid-ergo/">Tum</a></h3>
</div>
<!--<br> -->
<div id = 5 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:500px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_5.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/5.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/neminem-videbis-ita-laudatum/">Nem</a></h3>
</div>
<!--<br> -->
<div id = 6 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:600px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_6.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/6.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/sin-laboramus-quis-est-qui-a/">Sin</a></h3>
</div>
<!--<br> -->
<div id = 7 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:700px; top:100px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_7.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/7.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/et-harum-quidem-rerum-facilis-est/">Et </a></h3>
</div>
<!--<br> -->
<div id = 8 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:100px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_8.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/8.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/nullus-est-igitur-cuiusquam-dies-n/">Nul</a></h3>
</div>
<!--<br> -->
<div id = 9 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:200px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_9.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/9.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/huius-lyco-oratione-locuples/">Hui</a></h3>
</div>
<!--<br> -->
<div id = 10 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:300px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_10.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/10.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/duo-reges-constructio-interre/">Duo</a></h3>
</div>
<!--<br> -->
<div id = 11 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:400px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_11.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/11.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/quaesita-enim-virtus-est/">Qua</a></h3>
</div>
<!--<br> -->
<div id = 12 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:500px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_12.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/12.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/idemne-potest-esse-dies-saepius/">Ide</a></h3>
</div>
<!--<br> -->
<div id = 13 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:600px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_13.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/13.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/hunc-vos-beatum-lorem-ipsum-do/">Hun</a></h3>
</div>
<!--<br> -->
<div id = 14 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:700px; top:200px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_14.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/14.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/nam-quibus-rebus-efficiunt/">Nam</a></h3>
</div>
<!--<br> -->
<div id = 15 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:100px; top:300px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_15.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/15.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/nunc-haec-primum-fortasse-audie/">Nun</a></h3>
</div>
<!--<br> -->
<div id = 16 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:200px; top:300px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_16.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/16.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/me-igitur-ipsum-ames-oporte/">Me </a></h3>
</div>
<!--<br> -->
<div id = 17 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:300px; top:300px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_17.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/17.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/test1/">tes</a></h3>
</div>
<!--<br> -->
<div id = 18 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:400px; top:300px">
<img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_18.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/18.png" draggable="true" ondragstart="dragWord(event)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/hello-world/">Hel</a></h3>
</div>
<!--<br> -->
<div id = 19 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:500px; top:300px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_19.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/19.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/quamquam-id-quidem-licebit-iis/">Qua</a></h3>
</div>
<!--<br> -->
<div id = 20 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:600px; top:300px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_20.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/20.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/hanc-quoque-iucunditatem-si-vis/">Han</a></h3>
</div>
<!--<br> -->
<div id = 21 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:700px; top:300px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_21.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/21.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/praetereo-multos-in-bis-doc/">Pra</a></h3>
</div>
<!--<br> -->
<div id = 22 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:100px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_22.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/22.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/negat-enim-summo-bono-afferre-in/">Neg</a></h3>
</div>
<!--<br> -->
<div id = 23 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:200px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_23.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/23.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/at-miser-si-in-flagitiosa-et/">At </a></h3>
</div>
<!--<br> -->
<div id = 24 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:300px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_24.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/24.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/omnes-enim-iucundum-motum-qu/">Omn</a></h3>
</div>
<!--<br> -->
<div id = 25 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:400px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_25.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/25.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/nam-si-amitti-vita-beata-pote/">Nam</a></h3>
</div>
<!--<br> -->
<div id = 26 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:500px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_26.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/26.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/transfer-idem-ad-modestiam-vel/">Tra</a></h3>
</div>
<!--<br> -->
<div id = 27 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:600px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_27.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/27.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/sed-nimis-multa-lorem-ip/">Sed</a></h3>
</div>
<!--<br> -->
<div id = 28 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:700px; top:400px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_28.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/28.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/quae-fere-omnia-appellantur-uno/">Qua</a></h3>
</div>
<!--<br> -->
<div id = 29 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:100px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_29.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/29.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/et-ais-si-una-littera-comm/">Et </a></h3>
</div>
<!--<br> -->
<div id = 30 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:200px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_30.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/30.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/quamquam-in-hac-divisione-rem/">Qua</a></h3>
</div>
<!--<br> -->
<div id = 31 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:300px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_31.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/31.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/illa-tamen-simplicia-vestra/">Ill</a></h3>
</div>
<!--<br> -->
<div id = 32 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:400px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_32.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/32.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/nihil-illinc-huc-pervenit/">Nih</a></h3>
</div>
<!--<br> -->
<div id = 33 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:500px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_33.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/33.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/itaque-ab-his-ordiamur-l/">Ita</a></h3>
</div>
<!--<br> -->
<div id = 34 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:600px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_34.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/34.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/proizvod2/">pro</a></h3>
</div>
<!--<br> -->
<div id = 35 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:700px; top:500px">
<img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_35.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/35.png" draggable="true" ondragstart="ondragstart(e)" >
<h3 style="display: none;"><a href="http://vjezbanje.local/product/proizvod1/">pro</a></h3>
</div>
<!--<br> -->
</div>
CSS
.right-sidebar .content-area{
width:98%;
}
.float-container{
width: 100%;
height:800px;
display: flex;
flex-wrap: wrap;
position:relative;
}
.float-child{
border: 1px solid black;
flex: 1 0 14%;
position:absolute;
height:100px;
width:100px;
}
Javascript
function dragWord(dragEvent){
dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}
function dropWord(dropEvent){
var dropData = dropEvent.dataTransfer.getData("text/html");
var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0];
dropEvent.preventDefault();
}
How to stream a data stream to client from Node.js server
My Node.js server receives a stream of data from an external API.
I serve my client after receiving the data completely. Like this,
async function getFile(req, res) {
const { id } = req.body;
const file = await get(process.env.FILE_API_URL + id);
res.send(file);
}
But instead of waiting to receive the whole stream, I would like to stream it to the client as soon as I have some data. Kind of like this,
function getFile(req, res) {
const { id } = req.body;
const stream = get(process.env.FILE_API_URL + id);
stream.on('data', (data) > {
res.write(data);
});
stream.on('end', res.end);
}
How can I implement this?
I am Not able to add components in the body of html
I am trying to make a simple social network website. I am using a top navigation panel and a side navbar.
The problem I am facing is that I am not able to add any components in the blank area that you are able to see in the image.
This is my HTML body with the CSS I am using:-
//css code for sidebar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #D96AA7;
--secondary-color: #422C73;
--complimentary-color: #88BFB5;
--contrast-color: #F2E527;
--light-color: #D2A9D9;
}
.container {
background: #191919;
min-height: 100vh;
font-family: Montserrat, sans-serif;
}
nav a {
font-size: 40px;
color: #fff;
text-decoration: none;
padding: 20px;
text-align: center;
}
nav {
position: fixed;
left: 0;
z-index: 50;
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background: var(--secondary-color);
}
section {
position: absolute;
top: 0;
height: 100vh;
width: 0;
opacity: 0;
transition: all ease-in .5s;
display: flex;
justify-content: center;
align-items: center;
}
/* Styles applied on trigger */
section:target {
opacity: 1;
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
section:target h1 {
opacity: 0;
animation: 2s fadeIn forwards .5s;
}
#first {
background:var(--primary-color);
}
#second {
background: var(--complimentary-color);
}
#third {
background: var(--contrast-color);
}
#fourth {
background: var(--light-color);
}
@keyframes fadeIn {
100% { opacity:1 }
}
//css code for top navigation
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}<body>
<style>
a {
text-decoration: none;
color: white;
}
</style>
<!--this is the top navigation bar-->
<div class="topnav" id="myTopnav">
<a href="/painting.jpg" class="active">Home</a>
<a href="/dancing.png">Chit-Chat</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--this is side navbar-->
<nav>
<a href="#first"
><abbr title="PROGRAMMING"
><img src="assets/programming.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#second"
><abbr title="SINGING"
><img src="assets/singing.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#third"
><abbr title="DANCING"
><img src="assets/dancing.png" height="100" ,width="100" /></abbr
></a>
<a href="#fourth"
><abbr title="PAINTING"
><img src="assets/painting.jpg" height="100" ,width="100" /></abbr
></a>
</nav>
<div class="container">
<section id="first">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
<section id="second">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
<section id="third">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
<section id="fourth">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
</div>
</body>my side navbar opens a div with a close button for now in it as you might be able to see
but I don’t understand where I should put the code I want in the blank space.
if I am adding it after my side navbar code it is displaying it in a space under the blank area.
I am using the code for the side navbar from the internet, that is why i am not able to figure it out
pls help
How to create a Facebook like Cover Photo Responsive UI
How to create a responsive Facebook like cover photo where the image should always maintain the top position, not stretched and being cut? I tried to inspect the codes of Facebook Cover Photo but I still can’t understand how it works.
Blockchain Service Wallet V3 API Error – Wrong captcha
I’m using Blockchain’s API (https://github.com/blockchain/service-my-wallet-v3)
I’ve begun to receive this error, when I try to create new wallet using api/v2/create ({“success”:false,”message”:”Wrong captcha“}).
Everything was working before then it just randomly started giving me this error out of nowhere. I am running node service and sending my requests to it – Service v0.26.3, Node v6.4.0
I have tried asking Blockchain for assistance multiple times over the past 2 months but have not heard back from them.
Does anyone know how to resolve this issue? They did some kind of new update not long ago and it seemed to have affected the API somehow.