Can’t copy text from webpage?

Sometimes I come upon a website that I cannot copy text from a HTML web page. Simply cannot click and highlight the lines I try to select for copying. I thought that my browser/mouse was not working. But I go to other sites, I am able to highlight/copy normally. They must’ve done something on that page probably to prevent content from being lifted of the page easily?

Why is this and how do they do it? Is this a javascript in the page that prevents me from copying?


Could be a script on the webpage. I’m certain that can be done or already been done through Javascript before.

I know that the same effect can be achieved via CSS alone. It is easier, cleaner and does not add to another Javascript messing up or slowing down a site. I prefer this method over the other.

Below are the CSS lines that does what you want. Different ones for different browsers. It is vendor specific for some, but does the same exact thing.

   user-select: none; /* Supported by Chrome, Firefox & Opera */
  -moz-user-select: none; /* Firefox (older) */
  -ms-user-select: none; /* Edge */
  -khtml-user-select: none; /* Konqueror */
  -webkit-touch-callout: none; /* Safari for iOS */
  -webkit-user-select: none; /* Safari for Mac */

Try it out. You can make it for entire page/site.

* {
     /* CSS lines go here */

Or you can make it so only targeted content will have it using Class or ID selectors.

#text-no-select {
     /* ID selector -  CSS lines go here */

.text-no-select {
     /* Class selector -  CSS lines go here */

Be aware this does not totally prevent anyone from copying content on a website. There are many other ways to go around this or even with a Javascript impementation. It is a minor roadblock.

Digital Signature for PDF files through Web Application

We are developing a Web Application for manage dental clinics.
The app can generate PDF files through the PHP backend (for example invoices, quotes etc.).

Each of those PDF file needs to be digitally signed by both the app user (the clinician) and the patient.
The sign we are looking for is the Legally Signature European Standard (which requires biometrical parameters or a certificate issued by a trusted provider such as Infocert (but we are not 100% sure how to then use such certificate)).

On average, in our country, each patient signs 5-10 documents and because of this we ruled out third party services such as Docusign, Pandadoc, Eversign.. because the average cost of those api services would be excessive for our needs (and country economy).

Another solution we did think about is to use the signature pads (such as Wacom’s) that are capable to collect biometrical parameters, but we have no idea how to integrate such devices with our Javascript frontend (assuming it is even possible to interface those devices through the web browser).

Assuming our backend displays the PDF already generated to the client, what would it be the best approach to apply a digital signature to it through the client (which would then send back the signed PDF to the server for storage) ?
Is there a way to interact with signature pads devices through the browser (to extract the biometrical parameters together with the visual signature) ?


Go to Source
Author: Nite

Generate a custom nested layout by tinymce editor button

I create a new button in TinyMCE editor. And i want that new button of TinyMCE editor will show this below structure as dummy content while I press that button.

<div class="table-of-contents-container">
    <section class="table-of-contents">
        <ul class="items">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Controls</a>
                    <li><a href="#">Core Custom Controls</a></li>
            <li><a href="#">Sections</a></li>
            <li><a href="#">Panels</a></li>
            <li><a href="#">Custom Controls, Sections, and Panels</a>
                    <li><a href="#">Customizer UI Standards</a></li>
            <li><a href="#">Custom Setting Types</a>
    </section><!-- .table-of-contents -->

In .js file how i join this whole html tag’s, class and id and output it. My wordPress version is 5.5.1. Please help me.

Go to Source
Author: Zahid Hossain

Correct way to implement a heatmap in the browser?

I have a list of AQI data for multiple stations in my country. I want to create a heatmap for the entire country using that data. The heatmap would be a gradient from green(low AQI) to red(high AQI). Any ideas how to implement this?. I am using react.js and was thinking of using mapbox-gl but I can’t find anything for this in the documentation.

A rough idea of what I am trying to implement:

Go to Source
Author: Dani

Javascript(Typescript) Generic Api Call Service

I’m building a SSR application with React and Next js and this application will communicate with with the Rest service already created. Application must send request to Rest service on both client side and server side. So I have to create one ApiCall service works both client side and server side. I tried build something but I think its not good.


export function apiCall<T extends BaseQuery>(
 query: T,
 options?: UseQueryOptions<T>,
 ctx?: GetServerSidePropsContext
): QueryResult<T> {
    const [data, setData] = GState()(null);
    const [error, setError] = GState()(null);
    const [loading, setLoading] = GState()<Boolean>(true);

    const headersWithToken = headers(TOKEN.get(ctx.req));
    const variables: any = options.variables;

    const queryP = query(variables, headersWithToken)
    .then((respData) => {
       return respData;
    .catch((e) => {

    return {
       data: data,
       error: error,
       loading: loading,
       query: queryP,

GState.ts Closure

const GState = function () {
   let _val;

   function useState<T>(initialValue: T) {
     _val = _val || initialValue;

     function setState(newVal: T) {
        _val = newVal;

     function getState(): T {
       return _val;
     return [getState, setState];
return useState;

export default GState;

Api endpoints

const getCredit = (headers: {}) => Promise<ICreditResponse> = (headers) => {
  return ApiService.setHeaders(headers).getReq({
    route: "/credits/my",
    isPrivate: true,

const healthCheckReq = (headers: {}) => Promise<string> = (headers) => {
  const apis = ApiService;
  return apis.getReq({ route: `/health`, isPrivate: false });

const getMerchantShippingDays = (
  s: {
    merchantId: string;
  headers: {}
) => Promise<IShippingDaysResponse> = ({ merchantId }, headers) =>
      route: `/shippingDays/merchant/${merchantId}`,
      isPrivate: true,

Example Usage :

export default function Health({ health }: HealthProps) {

  const { data: getHealthData, loading: getHealthLoading } = apiCall(
     { variables: { id: "1" } }

  const __ = (
        <Container fluid>
           {!getHealthLoading() && getHealthData().map(data => 

  return __;

export const getServerSideProps: GetServerSideProps = async (
  ctx: GetServerSidePropsContext
  ) => {
     const { data: healthData, loading: healthLoading, query } = apiCall(
       { variables: { id: "1" } },

    await query;

    return { props: { health: healthData } };

I need advice for that api service. How can I improve that or if I don’t need this service how can I do request to rest service with generic functions

Go to Source
Author: zblash

What framework to use with excel for data frame in javascript like pandas?

I am trying to create a website that displays values from a .csv file that matches a certain criteria similar to how you can filter data from a dataframe in the pandas framework in python. I am not sure if there is anything similar in javascript. If not, what framework should I use to do this using python for web development?

Go to Source
Author: chibiw3n

Doing a validation check on a AJAX post and returning the error message

I have an AJAX post that does this

                    type: "POST",
                    url: "@MyWebSite.Url/myController/myView",
                    contentType: "application/json; charset=utf-8",
                    JSON.stringify({ myModel: myData }),
                    dataType: "json",
                    traditional: true,
                    success: function () {
                    error: function () {
                        alert('Error! ');

My controller does the validation check but it is not correctly returning the error message.
This is what my controller looks like

 if (totalQty < part.QtyInItem)
                        //ModelState.AddModelError("", "There is " + part.QtyInItem + " of Part " + part.PartName + " used in item " + part.ItemID + " but you only handled " + totalQty + ". Please verify you are handling all parts used in the item.");
                        //RedirectToAction("myControler", myModel);
                        return this.Json(new { success = false, message = "There is " + part.QtyInItem + " of Part " + part.PartName + " used in item " + part.ItemID + " but you only handled " + totalQty + ". Please verify you are handling all parts used in the item." });

When I tried adding an error to the model state it just returned “ERROR!” and not the error message I had associated with it. And when I try doing the this.JSON return it returns “success” to the view and not the error message.

How can I do this validation check for my AJAX post

Go to Source
Author: ryan

js files occasionally failing to load

We have a newly configured php7 16cpu 32gb RAM Linux server.
Plenty of power for what we need.

We have a basic form on a page that requires a login.

However, sometimes when a user lands on the page, the js files fail to load which in turn prevents them from logging in.

This doesn’t happen every time, but often enough to where we cannot use the newly configured server.

KeepAlive is enabled, as seen by this curl command:

Content-Type: text/html; charset=UTF-8 Content-Length: 0 Connection: keep-alive

I have attached an image of what we’re seeing.

Could this have anything to do with server/Apache configuration, as we notice the js files always fail at the 10 second mark.


enter image description here

Go to Source
Author: mcs

jquery: adding rows at the bottom of a table make table y-scroll jump into to start position

I’ve created a “log viewer” method that contains a table with a fixed header; initially this method loads 200 lines into the table, and will load more lines on demand. If you scroll down (until certain y-scroll % ) method will do a request to server asking for a further 100 lines from bottom, then will catch these lines and append them at bottom of this table…

Similar behaviour is for the top if y-scroll reach certain % of table ‘y-scroll’ and the top line is not the initial line, it will request 100 (or the number of lines to the top if less than 100) and insert those lines into the top.

This is working perfectly so I’m very satisfied with it; as it is what I wanted.

All rows are kept in a “<tbody>” block

Now Here is my problem: in some occasions when method is adding new lines at the bottom of the table, the table ‘y-scroll’ jump from its position to start position which is not what I want, as it makes experience very annoying…

Expected behaviour will be: table y-scroll will move slightly up while is appending new rows into the bottom of the table.

This happens if you try to scroll yourself picking the scroll bar with the mouse and dragging it yourself, or pressing PgDown key, or pressing DownArrow Key…

Here is the code of this method:

          "logfile_hash_key": logfile_hash_key,
          "initial_line":  initial_line,
          "requested_rows": requested_rows,
          "web_request": true

              // I need to reverse the array to start inserting on the table, because otherwise inserted
              // lines will be reversed
              // If request is from top...
              if (requested_rows < 0) {
                    new_initial = initial_line + requested_rows
                    if (new_initial < 0){
                        initial_line = 1
                    sinitial_line.value = new_initial
                    starting_row = 0
              else { // if Request is from bottom...
                    new_final = initial_line + requested_rows
                    if (new_final > file_line_count) {
                         new_final = file_line_count
                last_row_on_table=document.getElementsByClassName("tb-Log-Viewer")[0].rows.length - 1

                starting_row = -1

                sfinal_line.value = new_final


              $.each(data, function(key,value) {
                    row = table.insertRow(starting_row)
                    for(cell_n=0; cell_n < value.length; cell_n++){
                        cell[cell_n] = row.insertCell(cell_n)
                        // verify cell has a "String" value
                        if (data[key][cell_n].__proto__ == "".__proto__) {
                            cell[cell_n].innerHTML = data[key][cell_n]
                            if (cell_n == 0) {
                               cell[cell_n].style = "text-align:center"
                               cell[cell_n].className = "Line"
                        // Check value for given cell is an array
                        if (data[key][cell_n].__proto__ == [].__proto__) {
                            cell[cell_n].innerHTML = data[key][cell_n][1]
                            attributes = data[key][cell_n][0].replace("style=","").replace(/'/g,"").trim().replace(" ",";")
                            cell[cell_n].style = attributes.replace("bgcolor=","background-color:")

Here is the HTML portion of this that define the table (All this is being generated by a python code):

<table class="logviewer" width="85%" border=1 cellpadding=10 cellspacing=0>
<thead class="th-Log-Viewer">
.Line {
   width: 70px;

.Timestamp {
   width: 170px;

.Severity {
   width: 80px;

.Message {
   width: 1800px;


<tr class="tr-Log-Viewer">
<th  class="header-Line">Line</th>
<th  class="header-Timestamp">Timestamp</th>
<th  class="header-Severity">Severity</th>
<th  class="header-Message">Message<div class="rows-data"><table><tr><td><span id="scroll-action"></span></td><td><span id="top-row"></span></td><td><span id="bottom-row"></span></td></tr></table></div></th>
<tbody class="tb-Log-Viewer" onscroll="Log_Viewer(this)">

<td class="Line" style='text-align:center'><a id='1'>1</a></td>
<td class="Timestamp" style='text-align:center'>2020-07-07 08:19:48</td>
<td class="Severity" style='text-align:center' bgcolor=#3cb371>INFO</td>
<td class="Message" style='text-align:left'>[INFO ] 2020-07-07T08:19:48,516Z [main] cliutils.CliWrapperBase. - Application Args: generate-node-info</td>


So what could be causing this table y-scrolling jump into starting position???

Thank you.

I’ve asked this question on StackOverflow but it has couple of weeks and no answer…

Go to Source
Author: Larry

Fade-in Fade-out doesn’t work in WordPress

I have back-to-top script with an arrow icon which appears when scrolling down and disappears when the page content is on top. Works perfect, but when I insert the script in WordPress the scrollTop part of the script works but not the fade-in and fade-out effect.

Any solution?

jQuery('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
var amountScrolled = 300;
$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
    } else {

$('a.back-to-top, a.simple-back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
body {background:#FEF1D4; height:1000px}

.back-to-top {
    display: none;
    width: 4.75rem;
    height: 4.75rem;
    text-indent: -9999px;
    position: fixed;
    z-index: 1500;
    left: 0.5rem;
    bottom: 1rem;
    background: url( no-repeat center 43%;
    background-size: contain;
<script src=""></script>

This is the WordPress result:

enter image description here

Go to Source
Author: Danielillo

Trying to install background geolocation, what am I doing wrong?

I installed the plugin with cordova plugin add @mauron85/cordova-plugin-background-geolocation, ensured all the sdk tools were downloaded, added <plugin name="@mauron85/cordova-plugin-background-geolocation"/> to my config.xml. I believe I did everything correctly, but I get this error:

[ng] chunk {cordova} cordova.js, (cordova) 63.5 kB [entry] [rendered]
[ng] chunk {main} main.js, (main) 2 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, (polyfills) 127 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, (runtime) 6.15 kB [entry] [rendered]
[ng] chunk {styles} styles.js, (styles) 99.3 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, (vendor) 340 kB [initial] [rendered]
[ng] Date: 2020-07-29T15:28:31.810Z - Hash: 23193db15d135b0fd128 - Time: 8740ms
[ng] ERROR in node_modules/@ionic-native/background-geolocation/index.d.ts:2:10 - error TS2305: Module '"../../../../../../../Users/Josh/Documents/GoWith/node_modules/rxjs/Observable"' has no exported member 'Observable'.
[ng] 2 import { Observable } from 'rxjs/Observable';
[ng]            ~~~~~~~~~~
[ng] node_modules/rxjs/Observable.d.ts:1:15 - error TS2307: Cannot find module 'rxjs-compat/Observable'.
[ng] 1 export * from 'rxjs-compat/Observable';
[ng]                 ~~~~~~~~~~~~~~~~~~~~~~~~
2020-07-29T15:28:31.816Z ionic:lib:serve awaiting TCP connection to localhost:8100

[INFO] Development server running!
       Local: http://localhost:8100
       Use Ctrl+C to quit this process

Building and deploying app
2020-07-29T15:28:31.826Z ionic:lib:events No process.send, not emitting event serve:ready
2020-07-29T15:28:31.826Z ionic:lib:serve serve details: {
  custom: false,
  protocol: 'http',
  localAddress: 'localhost',
  externalAddress: 'localhost',
  externalNetworkInterfaces: [],
  port: 8100,
  externallyAccessible: false
> cordova.cmd build android --device --verbose
No scripts found for hook "before_build".
No scripts found for hook "before_prepare".
Checking config.xml and package.json for saved platforms that haven't been added to the project
Calling plugman.install on plugin "C:UsersJoshDocumentsGoWithpluginscordova-plugin-background-geolocation" for platform "android
Installing "cordova-plugin-background-geolocation" for android
Running command: C:UsersJoshDocumentsGoWithplatformsandroidcordovaversion 
Command finished with error code 0: C:UsersJoshDocumentsGoWithplatformsandroidcordovaversion 
Running command: C:UsersJoshDocumentsGoWithplatformsandroidcordovaversion 
Command finished with error code 0: C:UsersJoshDocumentsGoWithplatformsandroidcordovaversion 
Finding scripts for "before_plugin_install" hook from plugin cordova-plugin-background-geolocation on android platform only.
No scripts found for hook "before_plugin_install".
Install start for "cordova-plugin-background-geolocation" on android.
Beginning processing of action stack for android project...
Error during processing of action! Attempting to revert...
Failed to install 'cordova-plugin-background-geolocation': CordovaError: Uh oh!
"" already exists!
    at copyNewFile (C:UsersJoshDocumentsGoWithplatformsandroidcordovalibpluginHandlers.js:234:45)
    at install (C:UsersJoshDocumentsGoWithplatformsandroidcordovalibpluginHandlers.js:34:17)
    at ActionStack.process (C:UsersJoshDocumentsGoWithnode_modulescordova-commonsrcActionStack.js:56:25)
    at PluginManager.doOperation (C:UsersJoshDocumentsGoWithnode_modulescordova-commonsrcPluginManager.js:114:20)
    at PluginManager.addPlugin (C:UsersJoshDocumentsGoWithnode_modulescordova-commonsrcPluginManager.js:144:17)
    at C:UsersJoshDocumentsGoWithplatformsandroidcordovaApi.js:210:74
    at _fulfilled (C:UsersJoshDocumentsGoWithnode_modulesqq.js:854:54)
    at C:UsersJoshDocumentsGoWithnode_modulesqq.js:883:30
    at Promise.promise.promiseDispatch (C:UsersJoshDocumentsGoWithnode_modulesqq.js:816:13)
    at C:UsersJoshDocumentsGoWithnode_modulesqq.js:877:14

I have yet to overlook and ensure the support libraries needed are installed. Could that be the issue here? I am unsure how to proceed, can somebody help me interpret these errors?

Go to Source
Author: Josh Voytek

Should child nodes have a reference to their parents?

Let’s say you are engineering a chat room software.

let client = new Client();
let room = rooms.FindRoom();

This room (parent) now has a client (child).

client.on('message', (event) => {
   // With the above code, room must be found
   let room = rooms.FindClientsRoom(client);

Or we have a child that knows about its parent

let client = new Client();
let room = rooms.FindRoom();

client.on('message', (event) => {
   let room = client.getRoom();

This is incredibly fast compared to looking for a client within 1000s of rooms. But is there something wrong with the design pattern? In any system, such as XML, do child nodes know about their parents? Should they?

Go to Source
Author: de-playable

Timer refresh page in a function

In my function I have a page refresh at the end to actually update the table, however the refresh is faster than the database.

Anyone have an idea how I can change this?

echo '<script>                                                                          ';
echo 'function updateId(id) {                                                             ';
echo 'var xmlhttp = new XMLHttpRequest();                                               ';
echo '    xmlhttp.onreadystatechange = function() {                                     ';
echo '        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)                     ';
echo '        {                                                                         ';
//echo '            alert(xmlhttp.responseText);                                          ';
echo '        }                                                                         ';
echo '    };                                                                            ';
echo '"GET", "update.php?id=" +id, true);                              ';
echo '    xmlhttp.send();                                                               ';
echo 'location.reload(true);                                                                ';

echo '}                                                                                 ';
echo '</script>                                                                         ';

Go to Source
Author: Tjerk Peters

How can I add a custom Javascript snippet to display my feedback in footer?

I have the following Javascript snippet:

<script type="text/javascript" src="<script type="text/javascript" src="//"></script><div id="auction-nudge-feedback" class="auction-nudge"></div>

Which should dynamically display my eBay feedback like this:

How can I add this to my wordpress site? I tried installing the ‘ Header and Footer Scripts ‘ plugin to no avail. I’m sure it’s simple but I’m a beginner when it comes to anything web dev related.

It doesn’t need to be displayed in the footer. It can be within the body. I’ve asked around and I couldn’t find anyone that could help so I thought I’d try here. Thanks.

Go to Source
Author: Chrome123