Why doesn’t this javascript code for a basic canvas operation work?

Why does the following code not display a black box on the screen. It titles the page Chatroom so at least the beginning part works…

<html>
<head>
<title>Chatroom</title>
</head>
<body>
<canvas id=“chatroom” width=“240 height=“400”></canvas>

const canvas= document.getElementById('chatroom');
const context=canvas.getContext('2d');

context.fillStyle ='#000';
context.fillRect(0,0,canvas.width,canvas.height);

</body>
</html>

Thank you!


Source: stackoverflow-javascript

vsCode gives a warning on apparently valid code from vue.js docs

following vue.js guide for lazi-loading , when i’m writing this line of code:

import Vue from 'vue'
import Router from 'vue-router'
const Health = () => import('@/components/health')

vscode throws the following problems:

file: 'file:///c%3A/projects/vue-lazy-loading/src/router/index.js'
severity: 'Error'
message: 'Expression expected.'
at: '3,22'
source: 'js'

file: 'file:///c%3A/projects/vue-lazy-loading/src/router/index.js'
severity: 'Error'
message: 'Variable declaration expected.'
at: '3,28'
source: 'js'

visually, that’s how it looks:
enter image description here

is there something wrong with the code, or with VS-code?
what is the correct way to write it?


Source: stackoverflow-javascript

callback not working in self-repeating function

Currently I am writing a user-script which aims to insert a trailer video into the webpage. In the script I wrote a function to filter the real source for the video as the url has few kinds of format, but the callback within the function just won’t work.

function test_url(preview,list,callback) {
if (list.length) {
    preview.src = list[0][0];
}
preview.onerror = function() {
    if (list.length) {
        test_url(preview,list);   // the function will be re-executed until the passed list is empty
    }
    else {
        console.log('No more url available!');
        if (callback && typeof(callback) === "function") { callback(); }
        else {console.log('callback is : '+ typeof callback);}
        return;
    }
};
if (!list[0].length) {
    list.splice(0,1);
}
else {
    list[0].shift();
}}

test_url(Preview,URLs,function() {console.log('This is a callback.')})

The callback above won’t work and it shows that callback is undefined.

The list passed in is like

[
    ['www.example1.com','www.example2.com'],
    ['www.example3.com','www.example4.com'],
    ['www.example5.com','www.example6.com']
]

I really don’t know where the problem is as I am still a newbie to JavaScript. Any advice would be greatly appreciated.


Source: stackoverflow-javascript

Why Ext.webKitVersion = 0 on Safari 10.11.1 and Google Chrome 59 and Firefox 54.0?

I am using Ext JS 6.5 . I am reading: http://docs.sencha.com/extjs/6.5.0/modern/Ext.html#property-webKitVersion

When I use script

console.log(Ext.isWebKit);

Result on Google Chrome, Safari is true. Result on Firefox is false.

I use script

console.log(Ext.webKitVersion);

The result is 0. Is it means Safari, Chrome, Firefox doesn’t use WebKit?

Question: Why Ext.webKitVersion = 0 on Safari 10.11.1 and Google Chrome 59 and Firefox 54.0? Is it a bug?


Source: stackoverflow-javascript

Reverse CSS @keyframes animation, WITHOUT JavaScript. At all. Possible?

What is annoying me is that when you define @keyframes, to do the opposite/reverse you have declare the thing twice!

Sure, transitions reverse themselves but then you have the problem with initial state.

See this example:

.class {
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
   animation-fill-mode: both;
   animation-name: slideInLeft;
}

.class:hover, .class.hide {
  // F*****G reverse and retrigger the keyframe animation
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0%, 0%);

    }
    to {
        transform: translate3d(0%, 0%, 0%);
    }
}

Rather than also being forced to do:

@keyframes slideOutLeft {
    from {
        transform: translate3d(0%, 0%, 0%);
    }
    to {
        transform: translate3d(-100%, 0%, 0%);
    }
}

I would like to say that on:

.class:hover, .class.hide { 
       // REVERSE THE slideInLeft animation without using slideOutLeft: 

       animation-name: slideOutLeft;

       // Rather I would like to say

      animation-name:slideInLeft ; // the same as .class really

      // but 
      animation-direction:reverse; 
      animation-fill-mode:backwards; 

      // do not work because they don't retrigger the animation if it has the same name. Only if I change the name and declare a totally new keyframe can I do what I want. 
}

Meaning I’m not interested in repeating the declaration, which is just the opposite of slideInLeft.

For complex animations, this is extremely annoying to do.


Source: stackoverflow-javascript

After posting unable to get to comments section

Following a tutorial on thinkster on building a simple page where you can post titles and links and comment on your posts.

After clicking post my title is posted with a comments link. However when I click on the comments link nothing happens.

Here is my index.html:

<html>
<head>
  <title>Flapper News</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
  http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js
  http://app.js
  <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
  
</div>
{{post.upvotes}} {{post.title}} {{post.title}} Comments

Add a new post

{{comment.upvotes}} - by {{comment.author}} {{comment.body}}

Add a new comment

</body> </html>

And here is my app.js page:

var app = angular.module('flapperNews', ['ui.router']); 

app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    })

    .state('posts',{
      url: '/posts{id}',
      templateUrl: '/posts.html',
      controller: 'PostsCtrl'
    });

  $urlRouterProvider.otherwise('home');
}])

app.factory('posts', [function(){
  var o = {
    posts:[]
  };
  return o;
}])

app.controller('MainCtrl', [    
'$scope',
'posts',
function($scope, posts){
  $scope.test = 'Hello world!';

  $scope.posts = posts.posts;

 $scope.addPost = function(){
  if(!$scope.title || $scope.title === '') { return; }
  $scope.posts.push({
    title: $scope.title, 
    link: $scope.link,
    upvotes: 0,
    comments: [
    {author: 'Joe', body: 'Cool post!', upvotes: 0},
    {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
    ]
  });
  $scope.title = '';
  $scope.link = '';
 }

 $scope.incrementUpvotes = function(post) {
  post.upvotes += 1;
 }
}])

app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
  $scope.post = posts.posts[$stateParams.id];

  $scope.addComment = function(){
  if($scope.body === '') { return; }
  $scope.posts.push({
    body: $scope.body,
    author: 'user',
    upvotes: 0
  });
  $scope.body = '';
  }
}]);


Source: stackoverflow-javascript

Onclick function is not called in JavaScript

I spent significant time on solving one issue in JavaScript. The code snippet is as bellow. The details of other part of html, Form and Table is omitted in this post.

<input id="btn" type="button" value="Save Customer" onclick="SaveData" />



function BindData(Data)
{
    $("#status").text("Loading......");
    //This removes all other rows except first
    tbl.find("tr:gt(0)").remove();
    //More logic is there to fill a table
 }

function SaveData()
{
    $("#status").text("Adding data. Please wait......");
    var frm = $("#frmCustomer").serialize();
    $.post("Submit", frm, BindData);
}



Source: stackoverflow-javascript

Is it possible to specify a cache validator for a PHP file that serves JS content?

I’ve tried various methods and so far have the following in .htaccess:

ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresDefault "access plus 1 month"

# 1 month exp
ExpiresActive On
<filesMatch ".(gpdf|PDF|gif|ico|jpg|jpeg|png|GIF|ICO|JPG|JPEG|PNG|css|js|woff|CSS|JS|WOFF|ttf|TTF|txt|TXT|html|HTML)$">
  Header unset Set-Cookie
  Header set Cache-Control "max-age=2592000"
  Header unset ETag
  FileETag None
</filesMatch>

And the PHP file that serves the JS content has the following headers:

header('Content-type: application/javascript');
header("Cache-control: max-age=2592000, must-revalidate");

When I go to do a speed-test it still shows “specify a cache validator for js.php”

Is what I’m doing even possible or am I just missing something?


Source: stackoverflow-php

Write json file to Firebase with Node.js?

I have a third party API that I need to call every 5 seconds. I get JSON as response, and I’d like to write the JSON content to a Firebase node using Node.js. Based on Firebase examples I could import data with this code:

var usersRef = ref.child("users");
usersRef.set({
  alanisawesome: {
    date_of_birth: "June 23, 1912",
    full_name: "Alan Turing"
  },
  gracehop: {
    date_of_birth: "December 9, 1906",
    full_name: "Grace Hopper"
  }
});

Curl examples worked too. But what I really wanted to do is to import a third party API response directly to my Firebase database using the API endpoint. How can i do it with Node.js?


Source: stackoverflow-javascript

Find and replace <?php & ?> in string

I have a large string of valid HTML code that will be inserted into the DOM, the string also contains PHP code. I want the php code to be displayed as plain text, Chrome automatically comments out the PHP code. Obviously the PHP code is wrapped in <?php ... ?> so my question is:

How can I replace the open <?php with a <span> tag, and replace the ?> with a </span> to close the open <span> tag so that the PHP code is within the <span> tags and therefor visible as plain text?

EDIT: I will be wrapping the PHP code back in <?php ?> by replacing the span, so escaping the characters will make that more difficult.


Source: stackoverflow-javascript