Category: javascript

The button has to show modal with some data send through javascrip (onClick). Looking for hidden inputs, it seems to be correct. Each value input are feed. But the text inputs doesn’t work. I don’t understand why.

    <form id="AdmForm" name="AdmForm" method="post" enctype="multipart/form-data">
        <button type="button" class="modifScedule btn btn-lg gold" onclick="              
            document.forms['formAddSchedule'].noSchedule.value='1';
            document.forms['formAddSchedule'].noEvent.value='1';
            document.forms['formAddSchedule'].ACTION.value='modif';
    
            document.forms['formAddSchedule'].adr.value='123 palm lane';
            document.forms['formAddSchedule'].typPres.value='visio';"
            <span class="glyphicon glyphicon-edit"></span>
        </button>
    </form>

Html modal form code. The problem is …

These input fields get feed without problem : noSchedule, noEvent and ACTION
But looking for the input fields, they stay blank : adr and typPres. So i would like to understand why ?

    <div class="row">
        <div class="col-sm-12">
            <div class="form-content-AddSchedule" id="form-content-AddSchedule" style="display:none;">
                <form class="form" role="form" name="formAddSchedule" id="formAddSchedule" action='index.php' method="post">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="adr"><h5>Site address</h5></label>
                                <input type="text" class="form-control" id="adr" name="adr" placeholder="Saisissez l'adresse du lieu" value="" >
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="adr"><h5>Presentation type</h5></label>
                                <input type="text" class="form-control" id="typPres" name="typPres" value="" >
                            </div>
                        </div>
                    </div>
                                
                    <input type="hidden" name="noEvent" value="">
                    <input type="hidden" name="noSchedule" value="">
                    <input type="hidden" name="ACTION" value="">
                </form>
            </div>
        </div>
    </div>

Bootbox JQuery Code

    <script>
        $(document).ready(function() {
            $(".modifScedule").on("click", function(event) {
                var modal = bootbox.dialog({
                    message: $(".form-content-AddSchedule").html(),
                    title: "A title",
                    buttons: [
                    {
                        label: "Modify",
                        className: "btn btn-primary pull-left",
                        callback: function() {
                            $(".error").remove()
                            var proceed = true;
                                
                            if (proceed == true) {
                                document.forms["formAddSchedule"].adr.value = $('#adr', '.bootbox').val();
                                document.forms["formAddSchedule"].typPres.value = $('#typPres', '.bootbox').val();
                                    
                                document.forms["formModifSchedule"].submit();
                            }
        
                            return false;
                        }
                    },
                    {
                        label: "Cancel",
                        className: "btn btn-default pull-left",
                        callback: function() {
                        }
                    }],
                    show: false,
                        onEscape: function() {
                        modal.modal("hide");
                        }
                })
                  
                modal.modal("show");
            });
        });
    </script>

I’m in the process of converting my portfolio site to use Nuxt.js, which I have hosted on Netlify. I’m having issues with my CSS taking longer than usual to load in. I don’t notice this issue when developing locally, but on my live site, I can briefly see the page without any styling at all.

I have my CSS separated by their components in a folder called assets. I do also have some styling in my index.vue file, such as css variables. Below, I’ve also included my nuxt.config.js. Does anyone have any thoughts as to why this might be happening?

export default {
  target: "static",
  components: true,
  buildModules: [
    [
      "@nuxt/image",
      {
        provider: "static",
      },
    ],
  ],
  head: {
    title: "my title",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
    ],
    link: [
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap",
      },
      {
        rel: "stylesheet",
        href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css",
      },
      {
        rel: "stylesheet",
        href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
      },
    ],
  },
  plugins: [
    {
      src: "./plugins/analytics.js",
      mode: "client",
    },
  ],
};

I’m under the impression that the whole point of using SSR in Next.js is to have instant DOM render while react and other scripts are bootstrapped. However, when I throttle my connection, the page is just blank/white until the JS completes loading.

Here you can see the network preview (while throttling) shows the simple <div>LOADING</div> in the preview pane:

But the browser sees nothing until scripts finish loading. It has the same behavior even if we render _app.tsx content (with router, lazy-loaded components etc). CURL to same address shows the desired HTML.

Here’s the minimal _document.tsx that’s used:

import { GetStaticPaths, GetStaticProps } from 'next';
import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  static getStaticProps: GetStaticProps = async () => {
    return { props: {} };
  };
  
  render() {
    return (
      <Html lang="en">
        <Head />
        <body className="bg-gray-100">
          <span style={{color: 'black', display: 'block', visibility: 'visible !important'}}>LOADING</span>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Is something hiding the body’s elements while scripts load? Am I not understanding how _document works?

I want to display a collapsed div in a cell of my table.

<td>
    <a class="text-decoration-none" data-bs-toggle="collapse" href="{{ '#collapseMsg' ~ message.id }}" role="button" aria-expanded="false" aria-controls="{{ 'collapseMsg' ~ message.id }}">
        <span class="text-dark fw-bold">{{ message.title }}</span>
    </a>
    <div class"collapse mt-2" id="{{ 'collapseMsg' ~ message.id }}">
        <div class="card card-body">
            {{ message.content }}
        </div>
    </div>
</td>

My code display the collapsed div and the button doesn’t hide it, but it is supposed to be hidden by default with .collapse class. I included bootstrap.min.css and bootstrap.js

I have a pretty common issue accessing data while the page is loading, however, I cannot figure this out.

My code is as follows:

    computed: {

       nowPlaying() {
               if(this.$store.state.radio && !this.loading) {
            
        let meta = Object.values(this.apollo).filter(el => el.channel === this.activeChannel)
          this.title = meta[0].title,
          this.artist = meta[0].artist
            }  
        },

Hot reload works as expected but page reload returns an undefined error for both title & artist:

TypeError: Cannot read properties of undefined (reading ‘title’)
at VueComponent.nowPlaying (Player.vue?7cf3:45:1)

This happens only if I try to access an element in the meta array using [].

I have a Flask application that creates a form which is then manipulated by html and JQuery. For a particular set of multi-select fields in the form, I’m attempting to make the dropdowns searchable using selectize.js. The order of the user’s selections are important and the “drag and drop” plug in from selectize.js is exactly what I’m looking for. However, when I try implementing this logic, I’m not able to get the desired behavior in these form fields. The fields are not populating with the options, meaning there is no dropdown. Here is the relevant code snippet –

if (tableMetadata.length > 0) {
     document.getElementById('displayErrorProd').innerHTML = "";
     const options = tableMetadata; //can confirm this produces an array of the desired options
     const items = options.map(x => x[0]);  //can confirm this produces an array of the desired options


     $("#prod_join_key").selectize({
         plugins: ["drag_drop"],
         options: options,
         items: items,
         valueField: options[0],
         labelField: options[0],
         delimiter: ",",
         persist: false,
         sortField: 'text',
         create: function (input) {
            return {
               value: input,
               text: input,
            };
         },
       });

}

Please let me know if any other info is needed in order to debug this. Thanks for our help!

I’ve been developing a website with a simple book generator and I was even able to make two versions, one with a side list of books and one with a separate page (this one was much easier). I want to put more details for each book like a book it was published, genre, specifics, author etc. The problem is that my code already has like 50 list items and I have an idea for a function in JS that adds the CSS class display:none upon clicking and here’s my question. Is there to do this without writing individual Ids for every separate list items and then creating 25 different functions?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rain's book chooser</title>
    <link rel="stylesheet" href="book generator sidebar.css">
</head>
<body>

<div class="page_gen">

    <div id="toggleMenu" class="sidebar-list-toggle" onclick="toggleMenu()">Open The Menu</div>
    <nav id="menu" class="navbar">
        <ul id="nav_bookside" class="nav_books"> 
            <li class="nav-item">'Beze mnie jesteś nikim. Przemoc w polskich domach' by Jacek Hołób (2021) [nonfiction/difficult], <br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Jacek Hołób </li>
                </ul>
            <li class="nav-item">Frankenstein' by Mary Wollstonecraft Shelley (1818) [classics/dark],<br></li>
            <ul class="nav_books_sub" id="nav_bookside_sub">
                <li>Written in 1818 by Mary Wollstonecraft</li>
            </ul>
            <li class="nav-item">The house on the Mango Street' by Sandra Cisneros (1984) [feminism/emotional]
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 1984 by Sandra Cisneros </li>
                </ul>
            <li class="nav-item">These Ghosts Are Family' by Maisy Card (2020) [historical fiction/challenging
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2020 by Maisy Card</li>
                </ul>
            <li class="nav-item">'The Catcher in the Rye' by J.D Salinger (1951) [classics/reflective],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 1951 by J.D Salinger</li>
                </ul>
            <li class="nav-item">'Norwegian Wood' by Haruki Murakami (1987) [literary fiction/emotional],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 1987 by Haruki Murakami</li>
                </ul>
            <li class="nav-item">'Winter in Sokcho' by Elisa Shua Dusapin (2016) [literary fiction/emotional],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2016 by Elisa Shua Dusapin</li>
                </ul>
            <li class="nav-item">'Belonging: Remembering Ourselves Home' by Toko-Pa Turner (2017) [self-help/emotional]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2017 by Toko-Pa Turner</li>
                </ul>
            <li class="nav-item">'Strange Bedfellows' by Ina Park (2021) [science/challenging],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Ina Park</li>
                </ul>
            <li class="nav-item">'Circe' by Madeline Miller (2018) [historical fantasy/adventurous],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2018 by Madeline Miller</li>
                </ul>
            <li class="nav-item">'Red, White & Royal Blue' by Casey McQuiston (2019) [lgbtqia+/funny],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2019 by Casey McQuiston</li>
                </ul>
            <li class="nav-item">'Kim Jiyoung, Born 1982' by Cho Nam-Joo (2016) [feminism/informative],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2016 by Cho Nam-Joo</li>
                </ul>
            <li class="nav-item">'Aristotle 1' by Benjamin Alire Saenz (2012) [lgbtqia+/hopeful],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2012 by Benjamin Alire Saenz</li>
                </ul>
            <li class="nav-item">'They Both Die at the End' by Adam Silvera (2017) [lgbtqia+/emotional],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2017 by Adam Silvera </li>
                </ul>
            <li class="nav-item">'Ucieczka od bezradnosci' by Tomasz Stawiszyński (2021) [nonfiction/anticapitalism]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Tomasz Stawiszyński</li>
                </ul>
            <li class="nav-item">'Grown Ups' by Marie Gronbrog Aubert (2019) [fiction/funny],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2019 by Marie Gronborg Aubert</li>
                </ul>
            <li class="nav-item">'Men Explain Things to Me' by Rebecca Solnit (2013) [essays/reflective]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2013 by Rebecca Solnit</li>
                </ul>
            <li class="nav-item">'Klara and the Sun' by Kazuo Ishiguro (2021) [dystopian/emotional],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Kazuo Ishiguro</li>
                </ul>
            <li class="nav-item">'Komodo' by David Vann (2022) [fiction/contemporary],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2022 by David Vann</li>
                </ul>
            <li class="nav-item">'The Mind of a Murderer' by Richard Taylor (2021) [nonfiction/true crime]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Richard Taylor</li>
                </ul>
            <li class="nav-item">'Czula przewodniczka' by Natalia de Barbaro (2021) [self-help/medium pace]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Natalia de Barbaro</li>
                </ul>
            <li class="nav-item">'Whats mine and yours' by Naima Coster (2021) [fiction/emotional],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Naima Coster</li>
                </ul>
            <li class="nav-item">'The Japanese Devil' by Robert Rankin (2010) [fantasy-scifi/funny],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2010 by Robert Rankin</li>
                </ul>
            <li class="nav-item">'The 7 Husbands of Evelynn Hugo' by Taylor Jenkins Reid (2017) [historical]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2017 by Taylor Jenkins Reid</li>
                </ul>
            <li class="nav-item">'Normal People' by Sally Rooney (2018) [fiction/emotional],<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2018 by Salley Rooney</li>
                </ul>
            <li class="nav-item">'The House in the Cerulean Sea' by Tj Klune (2020) [fantasy/adventurous]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2020 by Tj Klune</li>
                </ul>
            <li class="nav-item">'Before the Coffee Gets Cold' by Toshikazu Kawaguchi (2015) [magical realism]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2015 by Toshikazu Kawaguchi</li>
                </ul>
            <li class="nav-item">'The Housekeeper and the Professor' by Yoko Ogawa (2003) [literal/emotional]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2003 by Yoko Ogawa</li>
                </ul>
            <li class="nav-item">'A Manual for Being Human' by Dr Soph (2021) [nonfiction/reflective]<br></li>
                <ul class="nav_books_sub" id="nav_bookside_sub">
                    <li>Written in 2021 by Dr Soph</li>
                </ul>
    </ul>
    </nav>


    <div class="introduction">
        <h1 class="headline">Rain's book chooser</h1>
            <p class="text_cute">Your goal is to read 40 books this year! (I couldn't be more proud)</p>
            <p class="text_cute1">It's a big number and I wanted to help you overcome your undecisiveness!</p>
                <button class="button" onclick="pickBook()" type="button">Get yourself a new read ❤️ </button>
                <div class="the_book"id="theBook"></div>
            </div>

            <script src="book generator working.js"></script>

            <script>
                document.querySelector('.navbar').classList.add('is-hidden')
                var toggleStatus = 0
                function toggleMenu(){
                    if (toggleStatus == 0){
                        document.getElementById("menu").style.left =  "-1000px";
                        document.getElementById('toggleMenu').innerText = 'Open The Menu';
                        document.querySelector('.navbar').classList.remove('is-hidden')
                        toggleStatus = 1; 
                    } else if (toggleStatus == 1) {
                        document.getElementById("menu").style.left =  "0";
                        document.getElementById('toggleMenu').innerText = 'Close The Menu';
                        toggleStatus = 0;
                    }
                }
            </script>


            
</div>

</body>
</html>

I am aware that its messy but Ive been only coding for a couple of weeks 🙂

Tasks

1. Registered User Can Earn Points By Viewing Posts.
2. Under the posts, there is a automatic countdown timer (30 Sec) start from opening the posts.
3. After 30 seconds reach 0, A claim button appeared for registered user.
4. When registered user/unique user click on claim button 10 points added to their account through mycred plugins points system.
5. After on click claiming points, button will be hide for two (2) hours & auto appeared after 2 hours for that unique user who clicked it to claim 10 points.
6. Claim button should remain hide/disabled even after refresh/reload the page.
7. For non registered user – if someone click to claim points, button will redirect the user on signup page/login page to add the points of viewing posts.
8. After signup/login the points should added to their wallet/accounts.

NB- Site is under construction (WordPress).
Thanks in Advance, If Someone help me to figure it out.

I just want to programmatically create a gif from a very simple mo.js animation like this:

const burst = new mojs.Burst({
    radius: {0:300},
    children: {
        shape: 'rect',
        duration: 3000
    }
});

Thanks for the help

may i ask you to help me understanding why the transition animation for the sliding in an amp-carousel 0.2 is not working on Safari?

How do we reproduce the issue?

Example in playground

open the link in Safari
change “https://cdn.ampproject.org/v0/amp-carousel-0.1.js” to “https://cdn.ampproject.org/v0/amp-carousel-0.2.js”
click the transition button of the example
What browsers are affected?

Seen in Safari on Mac OS

I have read Google’s documentation and a number of similar questions, and am not having any success adapting the answers to my issue. I am working with Google App Engine in a Node.js Standard Environment and already have much of my app working and correctly configured.

Now I am trying to use npm modules as library code for BOTH my server-side app, and a client-side javascript app I am serving as a static directory. For this example, consider the widely used jquery module, of course available in npm

I believe the issue is in my app.yaml file, distilled to the part relevant to this question:

handlers:
### THIS ROUTE IS NOT WORKING
- url: /client/shared/lib/jquery.js$
  static_files: node_modules/jquery/dist/jquery.js
  upload: node_modules/jquery/dist/jquery.js$
  mime_type: text/javascript
### CLIENT-SIDE STATIC ROUTES ARE WORKING
- url: /client/shared
  static_dir: shared
- url: /client.*$
  static_dir: client
- url: /.*$
  redirect_http_response_code: 301
  script: auto

Of course, I have already run $ npm install jquery.
For example, from the “server-side” (my app.js file & friends), the following works perfectly:

import $ from "./node_modules/jquery/dist/jquery.js

Importing from my own “shared” code also works from both client and server via:

import { whatever } from "../shared/<module>.js"

But when I deploy and browse to https://<myapp>/client/shared/lib/jquery.js, I get a 404 error..

The goal is to be to get jquery from my “client-side” static javascript files with:

import $ from "../shared/lib/jquery.js"

(Or an equivalent relative path for deeper modules in the directory tree.)

Jquery is perhaps not the best example, but I intend to use plenty of other npm distributions of js libraries and share them between my “client-side” statically served javascript files and my “server-side” code imported/pointed to from script: routes in app.yaml and/or imports from app.js

I am tryting to make an application to transformate (distort) an JPG or PNG image. I’ve started with ImageMagick PHP…. but it was a kind of slow for what I wanted to do.

After continue searching I’ve found some Javascript Canvas… Pretty awesome.

I’ve been doing some tutorials, wrote code, copy paste.. but I cant figure out to reach what I want.

Please help

• Anyone know how I can do this with minimal code?
• I cant remove the grid from my example
• I prefer ES instead of jQuery
• and uff 🙁 I have some issues with the (node) control points.

var controls = [];
var canvas;
var context;
var image;
var triangles = [];
var dirtyTriangles = true;

// dom ready
$(document).ready(function() {

  // create new img tags
  //forground
  img1 = new Image();
  $(img1).attr('src', 'https://cke.nl/cache/dag-van-de-amateurkunst_6373/dag-van-de-amateurkunst-800-600.jpg');


  // Empty Canvas
  canvas = document.getElementById('result');
  ctx = canvas.getContext('2d');



  $(img1).load(function() {
    setInterval(draw, 100);
  });



  for (var i = 0; i < 4; ++i) {

    // create four points
    // inside #controls
    var control = document.createElement('div');

    $(control).addClass('node');
    $('#controls').append(control);
    controls.push(control);
  }


  // put each point on its location.
  $(controls[0]).css('left', 10);
  $(controls[0]).css('top', 10);

  $(controls[1]).css('left', 500);
  $(controls[1]).css('top', 10);

  $(controls[2]).css('left', 500);
  $(controls[2]).css('top', 500);

  $(controls[3]).css('left', 10);
  $(controls[3]).css('top', 500);


  // Mouse down for drag function
  $('body').mousedown(function(e) {
    if ($(e.target).hasClass('node')) {
      var node = e.target;

      $('body').mousemove(function(e) {
        var x = e.pageX;
        var y = e.pageY;
        $(node).css('left', x);
        $(node).css('top', y);
        dirtyTriangles = true;
      });

      $('body').mouseup(function(e) {
        $('body').off("mousemove");
        $('body').off("mouseup");
      });
    }
  });


});




var draw = function() {

  context = ctx;
  image = img1;

  context.clearRect(0, 0, 1200, 1200);



  var render = function(image, tri) {

    if (image) {
      drawTriangle(context, image, tri.p0.x, tri.p0.y, tri.p1.x, tri.p1.y, tri.p2.x, tri.p2.y, tri.t0.u, tri.t0.v, tri.t1.u, tri.t1.v, tri.t2.u, tri.t2.v);
    }
  }

  if (dirtyTriangles) {
    dirtyTriangles = false;
    calculateGeometry();
  }

  for (triangle of triangles) {
    render(image, triangle);
  }
}





var calculateGeometry = function() {
  // clear triangles out
  triangles = [];

  // generate subdivision
  var subs = 20; // vertical subdivisions
  var divs = 20; // horizontal subdivisions

  var p1 = new Point(parseInt($(controls[0]).css('left')) + 6, parseInt($(controls[0]).css('top')) + 6);
  var p2 = new Point(parseInt($(controls[1]).css('left')) + 6, parseInt($(controls[1]).css('top')) + 6);
  var p3 = new Point(parseInt($(controls[2]).css('left')) + 6, parseInt($(controls[2]).css('top')) + 6);
  var p4 = new Point(parseInt($(controls[3]).css('left')) + 6, parseInt($(controls[3]).css('top')) + 6);

  var dx1 = p4.x - p1.x;
  var dy1 = p4.y - p1.y;
  var dx2 = p3.x - p2.x;
  var dy2 = p3.y - p2.y;

  var imgW = image.naturalWidth;
  var imgH = image.naturalHeight;

  for (var sub = 0; sub < subs; ++sub) {
    var curRow = sub / subs;
    var nextRow = (sub + 1) / subs;

    var curRowX1 = p1.x + dx1 * curRow;
    var curRowY1 = p1.y + dy1 * curRow;

    var curRowX2 = p2.x + dx2 * curRow;
    var curRowY2 = p2.y + dy2 * curRow;

    var nextRowX1 = p1.x + dx1 * nextRow;
    var nextRowY1 = p1.y + dy1 * nextRow;

    var nextRowX2 = p2.x + dx2 * nextRow;
    var nextRowY2 = p2.y + dy2 * nextRow;

    for (var div = 0; div < divs; ++div) {
      var curCol = div / divs;
      var nextCol = (div + 1) / divs;

      var dCurX = curRowX2 - curRowX1;
      var dCurY = curRowY2 - curRowY1;
      var dNextX = nextRowX2 - nextRowX1;
      var dNextY = nextRowY2 - nextRowY1;

      var p1x = curRowX1 + dCurX * curCol;
      var p1y = curRowY1 + dCurY * curCol;

      var p2x = curRowX1 + (curRowX2 - curRowX1) * nextCol;
      var p2y = curRowY1 + (curRowY2 - curRowY1) * nextCol;

      var p3x = nextRowX1 + dNextX * nextCol;
      var p3y = nextRowY1 + dNextY * nextCol;

      var p4x = nextRowX1 + dNextX * curCol;
      var p4y = nextRowY1 + dNextY * curCol;

      var u1 = curCol * imgW;
      var u2 = nextCol * imgW;
      var v1 = curRow * imgH;
      var v2 = nextRow * imgH;

      var triangle1 = new Triangle(
        new Point(p1x, p1y),
        new Point(p3x, p3y),
        new Point(p4x, p4y),
        new TextCoord(u1, v1),
        new TextCoord(u2, v2),
        new TextCoord(u1, v2)
      );

      var triangle2 = new Triangle(
        new Point(p1x, p1y),
        new Point(p2x, p2y),
        new Point(p3x, p3y),
        new TextCoord(u1, v1),
        new TextCoord(u2, v1),
        new TextCoord(u2, v2)
      );

      triangles.push(triangle1);
      triangles.push(triangle2);
    }
  }
}

// from http://tulrich.com/geekstuff/canvas/jsgl.js
var drawTriangle = function(ctx, im, x0, y0, x1, y1, x2, y2, sx0, sy0, sx1, sy1, sx2, sy2) {
  ctx.save();

  // Clip the output to the on-screen triangle boundaries.
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.closePath();
  //ctx.stroke();//xxxxxxx for wireframe
  ctx.clip();

  // TODO: eliminate common subexpressions.
  var denom = sx0 * (sy2 - sy1) - sx1 * sy2 + sx2 * sy1 + (sx1 - sx2) * sy0;
  if (denom == 0) {
    return;
  }
  var m11 = -(sy0 * (x2 - x1) - sy1 * x2 + sy2 * x1 + (sy1 - sy2) * x0) / denom;
  var m12 = (sy1 * y2 + sy0 * (y1 - y2) - sy2 * y1 + (sy2 - sy1) * y0) / denom;
  var m21 = (sx0 * (x2 - x1) - sx1 * x2 + sx2 * x1 + (sx1 - sx2) * x0) / denom;
  var m22 = -(sx1 * y2 + sx0 * (y1 - y2) - sx2 * y1 + (sx2 - sx1) * y0) / denom;
  var dx = (sx0 * (sy2 * x1 - sy1 * x2) + sy0 * (sx1 * x2 - sx2 * x1) + (sx2 * sy1 - sx1 * sy2) * x0) / denom;
  var dy = (sx0 * (sy2 * y1 - sy1 * y2) + sy0 * (sx1 * y2 - sx2 * y1) + (sx2 * sy1 - sx1 * sy2) * y0) / denom;

  ctx.transform(m11, m12, m21, m22, dx, dy);

  // Draw the whole image.  Transform and clip will map it onto the
  // correct output triangle.
  //
  // TODO: figure out if drawImage goes faster if we specify the rectangle that
  // bounds the source coords.
  ctx.drawImage(im, 0, 0);
  ctx.restore();
};

// point class

var Point = function(x, y) {
  this.x = x ? x : 0;
  this.y = y ? y : 0;
}

var p = Point.prototype;

p.length = function(point) {
  point = point ? point : new Point();
  var xs = 0,
    ys = 0;
  xs = point.x - this.x;
  xs = xs * xs;

  ys = point.y - this.y;
  ys = ys * ys;
  return Math.sqrt(xs + ys);
}

var TextCoord = function(u, v) {
  this.u = u ? u : 0;
  this.v = v ? v : 0;
}

var Triangle = function(p0, p1, p2, t0, t1, t2) {
  this.p0 = p0;
  this.p1 = p1;
  this.p2 = p2;

  this.t0 = t0;
  this.t1 = t1;
  this.t2 = t2;
}

html,
body {
  margin: 0;
  padding: 0;
}

#controls {
  position: absolute;
  height: 600px;
  width: 800px;
}

canvas {
  background: #eee;
}

.node {
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: rgba(210, 0, 0, 0.2);
  outline: 1px solid rgba(225, 0, 0, 0.8);
  transform: translate(-50%, -50%);
  transform-origin: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<div id="controls" height="600px" width="800px">
  <canvas id="result" height="600px" width="800px"></canvas>
</div>

I don’t know how to put the number of visitors to the site directly

I’m working on a Vue2 app.

It consists of a base template (App.vue) that looks like this:

<template>
  <v-app>
    <div id="app">
      <NavigationBar></NavigationBar>
      ...
    </div>
  </v-app>
</template>

And various components (i.e., Home.vue, Login.vue, Navigation.vue etc…)

Being part of the main template, the NavigationBar is displayed in each component.

I would love to remove the NavigationBar only in the Login.vue component.

What could be the best way to achieve this?

Thanks

I have a Node JS application (Node v14.4.0) with a basic html file that references a single external Javascript file.

File structure:

- root
   - server.js
   - package.json
  |
   public 
     - js
        |
           - index.js
  |
   dist
     - index.html

server.js

const fs = require('fs');
const url = require('url');   
const protocol = 'http';
const indexPage = fs.readFileSync(`dist/index.html`);


http.createServer(function(request, response) {
     if(request.url.indexOf('.js') != -1) {
        var file = fs.createReadStream(request.url);
        file.pipe(response);
        response.writeHead(200, {'Content-Type': 'text/javascript'});
     } else {
        // Return the contents of the index page
        respond(response, 200, 'text/html', indexPage);
     }
    
}).listen(8080);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

  <title>My Index Page</title>

  <script type="text/javascript" src="/js/index.js"></script>
  
</head>
<body>
   <!-- js file will populate -->
</body>
</html>

But rather than load the js file and populate the document, the page is redirected to the the js file itself:

https://localhost:8080/js/index.js

But, cannot be reached – the js file is not accessible to the browser.

How do I serve the html page and the javascript file so they work as
it would normally be served – where the javascript file is downloaded
to browser for processing, but the html page is loaded in the browser
window?