Category: javascript

Category Added in a WPeMatico Campaign

When I click the anchor tag, page re-direct to to another page. Then I need to load specific content using Java Script

In index.html page of my web site there are three buttons.

Three Buttons in the web site

After clicking these buttons, page re-direct to another page named productandservices.html. In their I show fishes for each selected category(when someone select Freshwater fish in index.html, it shows freshwater fishes in productandservices.html).

<a href="servicesAndProduct.html"><button class="menu-buttons">FRESHWATER FISH</button></a>
            <a href="servicesAndProduct.html"><button class="menu-buttons">MARINE FISH</button></a>
            <a href="servicesAndProduct.html"><button class="menu-buttons">AQUA PLANTS</button></a>

Above you can see the three buttons in index.html. But after clicking these buttons, they only re-directing page. But do not show the selected category. To achieve that, What I can do in Java Script?

What I want is when someone click on Marine fish index.html, I want to show them Marine fish category in servicesandproduct.html

Mongoose 3 to 6 and modelSchemas

I’m working on migrating an old project from mongoose 3 to 6 and can’t seem to find anything in the change docs about modelSchemas and how they’ve been superseded.. In some unit tests, I have this v3 code;

function clearModels(models) {
  models.forEach(model => {
    delete mongoose.models[model];
    delete mongoose.modelSchemas[model];
  });
}

This of course fails because mongoose.modelSchemas no longer exists — so the question is, how do I re-write this in a v6 compatible way?

Normalize Set of Data To Specified Sum Keeping as Integers Javascript [closed]

I have a set of data: var data = [312, 91, 53, 28, 22, 13, 13, 11, 5, 3]; with a sum of 551.

I want to “normalize” this data so that the sum equals a specified input smaller or larger than the original sum.

I know that I can do this simply by dividing each number in the set by 551 and then multiplying it by my target value but this results in floats when I want my answer to consist only of integers.

var data = [312, 91, 53, 28, 22, 13, 13, 11, 5, 3];
var dataNew = [];
var target = 541;
var sum = data.reduce((a, b) => a + b)


for (var point in data) {
    dataNew.push(data[point]/sum*target);
}

console.log(dataNew)

I know that this will mean that the relative weights of each data point will change slightly but that is something I can accept.

I also need to keep all original entries so no data point can be discarded during the process just set to the minimum value of 1.

Input Text Editable in Angular js

I have a problem of trying to make the input text field editable.

Currently, I am unable to make the input text box editable on click of add or edit button.

I have set the values statically in the state objects.

How can I edit the code below to make the input text box editable?

The sample code is as below
HTML

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<input type="text" input-disabled="editableInput"/>
<button type="submit" ng-click="editableInput = ! editableInput;" value="submit">Add</button>
<table>
<tr ng-repeat="x in records">
<td><h4>{{x}}</h4></td>
<td><button type="submit" ng-click="editableInput = ! editableInput;" value="submit">Edit</button></td>
</tr>
</table>

</body>
</html>

Script

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});
app.directive("inputDisabled", function(){
    return function(scope, element, attrs){
        scope.$watch(attrs.inputDisabled, function(val){
            if(val) {
                element.removeAttr("disbaled");
            } else {
                element.attr("disabled", "disabled");
            }
        });
    }
});

Any Help would be much appreciated.

How to set caret line number and position in contenteditable div

I am attempting to reset the caret to its original position in a contenteditable div after injecting HTML tags into the div’s innerHTML.

I’ve seen similar threads on here but have run into issues using code I found and struggle to debug because I don’t really understand selection or range objects. Would really appreciate some help.

Here is my current attempt:

const highlighting = () => {
  let sel = window.getSelection();
  let pos = sel.getRangeAt(0).startOffset
  code.innerHTML = code.innerText.replaceAll(/(d+)/g, `<number>$1</number>`);
  let range = document.createRange();
  range.setStart(code.childNodes[currentLineNumber - 1], pos);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
}

I think I found something that almost worked but didn’t work for multi-line editing or something.

Would really, really appreciate some help getting this right so I can focus on the actual syntax highlighting.

My goal is to be able to do something like moveCaret(lineNumber, position)

How to remove event listener from Vue Component

I have a vue2 component which contains an added eventListener i created on ‘mounted’. I was wondering how do i properly remove this listener when the component is destroyed?

<template>
    <div>
      ...
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
        window.addEventListener('click', (evt) => {
          this.handleClickEvent(evt)
        })
    },
    destroyed() {
      //   window.removeEventListener('click', ????);
    },
    methods: {
      handleClickEvent(evt) {
        // do stuff with (evt) 
      },
    },
  }
  </script>

I can’t seem to find whats wrong with my code

I am using xampp for the project,and this my php code for the registration side of things, if anyone can help i would appreciate it.

ERROR MESSAGE: Parse error: syntax error, unexpected ‘}’ in E:xampplitehtdocsProjetoPaphtml&phpincludessigned.inc.php on line 44

  <?php
if (isset($_POST["submit"])) {

  $username = $_POST["Username"];
  $email = $_POST["email"];
  $password = $_POST["Password"];
  $passwordrepeat = $_POST["passwordrepeat"];
  $dataNASCI = $_POST["dataNASCI"];
  $accept = $_POST["accept"];
require_ONCE 'DBH.inc.php';
require_ONCE 'functions.inc.php';

if (emptyinputsignup($username, $email, $password, $passwordrepeat,  $dataNASCI, $accept) !== false) {
    body("location: ../create_account.php?error=emptyinput");
    exit();
   }
if (invalidUsername($username) !== false) {
       body("location: ../create_account.php?error=emptyinput");
       exit();
   }
   if (invalidEmail($email) !== false) {
       body("location: ../create_account.php?error=emptyinput");
       exit();
      }
      if (invalidPassword($password) !== false) {
          body("location: ../create_account.php?error=emptyinput");
          exit();
         }
         if (passwordMatch($password, $passwordrepeat) !== false) {
             body("location: ../create_account.php?error=Passwordsnãocoincidem");
             exit();
            }
            if (invalidDataNASCI($dataNASCI) !== false) {
                body("location: ../create_account.php?error=emptyinput");
                exit();
               }
                if (emailExists($conn, $email, $username) !== false) {
                    body("location: ../create_account.php?error=Emailalreadyinuse");
                  exit();
                  }
  createuser($conn, $username, $email, $password, $dataNASCI);
}
else {
  body("location: ../create_account.php");
  exit();
}

?>

Cannot read properties of undefined (reading ‘bannable’)

    message.mentions.members.forEach(men => {
      let member = message.mentions.members.get(men)

      if (!member.bannable) return message.reply(not_bannable)
    
      const reason = args.slice(1).join(" ");
      member.ban({reason: reason || "no reason"}).then((member) => {
        message.channel.send(member + " banned by " + message.author.id)
      }).catch(err => console.log(err))
  })

I’m trying to build a ban command that allows you to ban multiple users at once. Unfortunately, an error occurs when I execute it.

I work with discord v13

Why does this error occur?

Cannot read properties of undefined (reading 'bannable')

query load page go instantly to div

i have problem with scroll. Its working fine, but i want to make it instantly without any animation, just then page refreshing be the same place as before without scrolling to the place.

my js code.

<script type = "text/javascript">
    $(function() {
        $(window).scrollTop( $("#col-6").offset().top)

    });
</script>

My project structure for example.

First including css and html

    <?php 

    include(html/css.php);
    some code....
     <div class=col-6> 
     some code....
    </div>
    include(footer.php);
    ?>

so in footer php after

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5fbb5e690d.js" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

i use my js code.

And after page load its scrolling to col-6 div. But, i want instantly without any animation or scrolling be in what place.

What i try

<script>
    $(window).on('beforeunload', function() {
        $('body').hide();
        $(window).( $("#col-6").offset().top)
    });
</script>

any1 have solution for it ?

How to copy all images from a src folder to a dist folder recursively using copy files npm module?

Using the copy files command, how can I copy images (.png, .jpg) from a “src” folder to the “dist” folder, while preserving the same filepaths internally. Should also work recursively.

https://www.npmjs.com/package/copyfiles

I have this

copyfiles(["src/**/*.png", "dist"], {u:2}, (err) => {
    if (err) {
        console.log("Error occurred while copying", err);
    }
    console.log("folder(s) copied to destination");
});

But it doesn’t seem to work. It creates the src folder inside dist folder.

Thanks

How can you make the bounding box of text in an HTML5 canvas account for transformations such as panning and scaling?

I’ve been playing with a Javascript program which is composed of an HTML5 Canvas that can be panned and zoomed. Text can also be added and a bounding box is initially generated for it. I’ve got the program to account for the panning transformations, but I’m unable to get the bounding box to account for the scaling/zooming in and out. The initial bounding box is also not perfect, although it works when you try to click and drag the text, it is off by quite a bit.

Please help me figure out how to fix these issues.

Here is the program: https://jsfiddle.net/HappyAcorn77/hekagmb2/2/

/* I use this code to account for panning transformations for the bounding box on line   
   362 

   The Zooming/Scaling function can be found on line 372 which is what I am unable to 
   adjust the bounding box for.

*/
  • Click and hold to drag the text
  • Left click to default to inital display transformation values

requerir faker y nuestra error module not fou [closed]

este error me da cuando ejecuto el comando node index.js

mm@MadMacBook-Pro src % node index.js
internal/modules/cjs/loader.js:329
      throw err;
      ^

Error: Cannot find module '/Users/mm/Desktop/ddd/node_modules/faker/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (internal/modules/cjs/loader.js:321:19)
    at Function.Module._findPath (internal/modules/cjs/loader.js:534:18)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/Users/mm/Desktop/ddd/src/index.js:1:15)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/mm/Desktop/ddd/node_modules/faker/package.json',
  requestPath: 'faker'
}

enter image description here

How to make a dropdown menu transition with CSS?

I have created a responsive navigation-bar/menu but I want it to appear with a sliding animation from the top to the bottom when the needed button is presed. The menu does appear on itself but it completely ignores the transitioni have set it to execute. I tried multiple methods – using webkit library, using the change in height method, etc. It appears that none of them work with my code. If anyone can help, please reach to me.

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})
body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}



.nav a {
  color: #747d8c;
  text-align: center;
  padding: 27px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}

.dot_a {
  padding: 25px 10px;
  font-size: 17px;
  text-align: center;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 25px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;

    
    
  }
  .dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  .nav {
    width: 90%;
    
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }


  .nav-list{  
    display: none;
    overflow: hidden;
  

  }

  .nav-list.active {
    display: block;
    overflow: visible;
    margin: 0;
    padding: 0; 
    -webkit-transition:max-height 500ms ease-in;
    -moz-transition:max-height 500ms ease;
    -o-transition:max-height 500ms ease;
    transition:max-height 500ms ease;

  
  }

}
<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
</head>
<body>
<center>
<nav class="nav">
    <div class="dot_a">
      <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
      <span class="dot" style="background-color: #ff4757;"></span>
      <span class="dot" style="background-color: #ffa502"></span>
      <span class="dot" style="background-color: #2ed573;"></span>
    </div>
    <span class="nav-list">
      <a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a>
      <a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a>
      <a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>
      <a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a>
      <a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> 
    </span>
  </nav>
</center>
  <script src="ResponsiveMenu.js" ></script>
</body>
</html>