Uncaught Error: no element is specified to initialize PerfectScrollbar - javascript

The error detailed Uncaught Error: no element is specified to initialize PerfectScrollbar
version: perfect-scrollbar v1.5.3
Error from my web browser console
pscroll.js
(function ($) {
"use strict";
*const ps = new PerfectScrollbar(".app-sidebar", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
const ps1 = new PerfectScrollbar(".header-dropdown-list", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
const ps2 = new PerfectScrollbar(".notifications-menu", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
const ps3 = new PerfectScrollbar(".message-menu-scroll", {
useBothWheelAxes: true,
suppressScrollX: true,
suppressScrollY: false,
});
//P-scrolling
*})(jQuery);
pscroll-1.js
(function($) {
"use strict";
*const ps11 = new PerfectScrollbar('.sidebar-right', {
useBothWheelAxes: true,
suppressScrollX: true,
});
*})(jQuery);
I marked the error line into *.

After you posted the html, the only class I could find within the document was app-sidebar. Can you confirm you are not missing these classes within the html?
header-dropdown-list
notifications-menu
message-menu-scroll
sidebar-right

Related

Javascript require() is not defined [duplicate]

This question already has answers here:
JavaScript require() on client side
(14 answers)
Closed 7 months ago.
I am trying to follow this guide: https://github.com/javascript-obfuscator/javascript-obfuscator
Because I want to obfuscate my javascript.
I tried this but it returns an error: require() is not defined
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
var JavaScriptObfuscator = require('javascript-obfuscator');
var obfuscationResult = JavaScriptObfuscator.obfuscate(
`
function hi() {
console.log("Hello World!");
}
hi();
`,
{
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
}
);
console.log(obfuscationResult.getObfuscatedCode());
</script>
I also tried this but it also returns an error: obfuscate() is not defined
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
var obfuscationResult = obfuscate(
`
function hi() {
console.log("Hello World!");
}
hi();
`,
{
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
}
);
console.log(obfuscationResult.getObfuscatedCode());
</script>
Does anyone know how to fix this, please? Thanks
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
const obfuscationResult = JavaScriptObfuscator.obfuscate( // Change 'obfuscate' to 'JavaScriptObfuscator.obfuscate'
`
function hi() {
console.log("Hello World!");
}
hi();
`, {
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1,
}
)
console.log(obfuscationResult.getObfuscatedCode())
</script>

Electron, calling dialog.showMessageBox in renderer process

Trying to get my head around getting a dialog.showMessageBox() in the render process using preload. I'm trying const {dialog} = require( 'electron') but it's returning undefined. What am I missing?
main.js:
const consoleWindow = new BrowserWindow({
title: 'TakServer | Console',
width: DEBUG ? 1000 : 800,
height: 600,
resizable: true,
alwaysOnTop: true,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true, n
enableRemoteModule: false,
preload: path.join(__dirname, "preload.js")
}
})
preload.js:
const { contextBridge, dialog } = require("electron");
console.log( "dialog", dialog ) // !! undefined
contextBridge.exposeInMainWorld( 'api',
{
test: ( x ) => {
const {fs} = require( 'fs' )
console.log( "gubbmins", fs )
dialog.showMessageBox( {
type: "info",
message: "stuff"
})
}
}
)

How to implement code mirror to show hint without CTRL+SPACE

JavaScript :
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
extraKeys: {
"Ctrl-Space": "autocomplete"
},
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
This is my JS file, the ctrl-space works fine but I need, to implement autocomplete without any key bindings.
I have even tried this :
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
/* CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};*/
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
/*extraKeys: {
"Ctrl-Space": "autocomplete"
},*/
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ';' || input.text[0] === ' ') {
return;
}
CodeMirror.commands.autocomplete = function(editor) {
editor.showHint({
hint: CodeMirror.hint.auto
});
};
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
But this is not working.
Is there something I am missing here? How can I show live completion hints with codemirror?
I have used show-hints.js , and have modified it a bit to work for "." too.
Please help.
Use this function to autocomplete codeMirror without CTRL + Space.
Set completeSingle to false in the show-hint.js
editor.on("inputRead", function(instance) {
if (instance.state.completionActive) {
return;
}
var cur = instance.getCursor();
var token = instance.getTokenAt(cur);
if (token.type && token.type != "comment") {
CodeMirror.commands.autocomplete(instance);
}
});
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
/*CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};*/
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
extraKeys: {
".": function(editor) {
setTimeout(function() {
editor.execCommand("autocomplete");
}, 100);
throw CodeMirror.Pass; // tell CodeMirror we didn't handle the key
}
},
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ';' || input.text[0] === ' ') {
return;
}
//CodeMirror.commands.autocomplete = function(editor) {
editor.showHint({
hint: CodeMirror.hint.auto
});
//};
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
This works, but after entering ".", it does gives methods of that particular variable but after entering few more matching words it again starts showing hints from original set of words.
for eg: isBatch and isAbort are two methods of System class.
When I start typing Sy... System comes up, then I type ".", them the two methods shows up isBatch and isAbort, but when I type isA instead of showing isAbort it starts showing hints from full list of words again.
Is there a way to avoid this too?

access angular 2 variables in jquery

Following the example of Asad in this related question, I do not know how to refer to the object this of the javascript itself and angular varibale.
// Original code, the angular variable don't work
$.FroalaEditor.RegisterCommand('insert', {
title: 'Insert Read More',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('<span class="readMore">'+this.angularVariable+' </span>');
}
});
// using fat arrows, the angular variable works but this.html.insert fails
$.FroalaEditor.RegisterCommand('insert', {
title: 'Insert Read More',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: () => {
this.html.insert('<span class="readMore">'+this.angularVariable+' </span>');
}
});

get event on scrollstart and scrollend - iscroll

I am using iScroll v5.1.1, and I want event when user started and ended scrolling activity on the page.
Here is my javascript,
myScroll = new IScroll('#scrollinginside', {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: false,
checkDOMChanges: true,
onScrollStart: function () {
console.log('scrolling is started');
},
onScrollEnd: function () {
console.log('scrolling stopped');
}
});
But when I tried to scroll across the page no event is registred. Whats wrong with my javascript ? Am I missing something ?
Resolved this problem by using ,
myScroll = new IScroll('#scrollinginside', {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: false,
checkDOMChanges: true
});
myScroll.on ('scrollStart', function () {
console.log('Started');
});
myScroll.on ('scrollEnd', function () {
console.log('Ended');
});

Categories

Resources