Hi I am stuck at adding animated background to React app which is also interactive.
I've looked through few similar problems and this page https://reactjs.org/docs/integrating-with-other-libraries.html but I can't find solution to my problem.
Script is written in Java and translated to JavaScript and I've bough it. There are documentation but it not mentions React. The author of the script says he doesn't know React and cannot help me. It is working fine in normal website but I would like to adopt it to React.
The code in HTML looks like:
<script src="js/libs/jsband-min.js" type="text/javascript"></script>
<script src="js/anim-min.js" type="text/javascript"></script>
<div id="DV_ID">
<script type="text/javascript">
var anim = new Anim("DIV_ID", {
//some settings
MOUSE_IMPACT_FACTOR: 50
ETC...
}
</script>
</div>
React is just a library to generate the view (content) of a website. You should be able to use that library you want in React, but your question needs more focus/information I think. Though I'll try my best to help.
It sounds like a requirement is loading those 2 scripts. Did you already make sure to load them into your react app, and verify via the network tools both are being loaded? If the answer to that is no, this article may be of help:
https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
Once you made sure both scripts are loaded by your react app, you should ask whoever made the library you are using how it works/selects the element to inject the background. As a wild guess, I'm guessing that DIV_ID is the ID of the element to inject the background with. Did you already make sure that element exists at the time the code runs? You can verify this by debugging the code, and running document.getElementById with that ID in the console and verifying it exists. If not, this could be another reason.
The last thing that could likely be, is the element may exist, but it may not have dimensions. You could probably figure this out with the DOM inspector.
Overall, I'd recommend you read the posting guidelines before your next question, since this question lacks a lot of the thing people need to help you:
https://stackoverflow.com/help/how-to-ask
Related
I am trying to automate UI testing of the extension for VS Code that has certain actions brought out into the SideBarView section as webview, self-written HTML that I want to access via Selenium webdriver (I use vscode-extension-tester package that provides almost every API necessary and is fantastically helpful, btw).
There's no problem accessing html from VS Code's DevTools, for example a button is exposed as "vscode-button" tag inside a webview's "iframe" tag, so I assume finding it by xpath might work:
let webElement = await driver.findElement(By.xpath('//vscode-button[contains(#onclick, "loadMarkers")]'));
But when I run Extension host for testing, its DOM does not contain webview code, so findElement() returns "undefined". If I understand correctly, it only has a reference to the webview tag with the pointer to vscode extension that handles webview content, so I have to switch to that webview somehow. Page source shows only "div" with webview link inside an "iframe":
<div id="webview-<id>"...
<iframe name="<id>" class="webview ready"... src="vscode-webview...;extensionId=<id>...;purpose=webviewView"...></iframe>
Haven't found anything in VS Code API document, currently reading about Electron webview API to understand if there are any other suggestions.
Vscode-extension-tester API provides switching to webview context from a different object, however. So I wondered if there is a generic way to do so.
https://github.com/redhat-developer/vscode-extension-tester/wiki/WebView
p.s. I began working on automated testing just a while ago, so I may miss something obvious (that would be great to have a solution at hand), but it looks like there are no easy ways to solve my problem at the moment. Would appreciate any help you can provide.
I am working on some POC or code where in I am trying to integrate Pl upload to my react application.
I found very good example -
This one is very good, wrapper for listening all the events from Pl upload library.
https://github.com/lemonCMS/react-plupload
I could integrate it fine, however I noticed linking of Pl upload happened in the index.html file (Which is not ideal way.).
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.2/plupload.full.min.js' async></script>
Need some input, how can I link same library coping inside my project directory.
So here basically I am expecting window.plupload should be initialized fine on load.
Another example I really liked is, as this will maintain state in the redux store and I hope I can navigate accross application with upload stays in progress.
https://www.npmjs.com/package/redux-plupload
However for second example as well, need some input about linking.
Also, please suggest if i am missing anything.
Thank you all.
I have figured out, I had to install, below package.
https://www.npmjs.com/package/plupload
This is not latest version, but will solve my purpose.
Thank you!
I have searched but couldn't find an answer so I'm sure other Angular developers experience the same pain.
PhpStorm doesn't recognize the html tags inside a <script type="text/ng-template" id="editnode"> template and therefore I cant collapse anything inside it which can make life difficult for long pages.
Anybody know how to fix this?
Here's a screenshot:
Code folding doesn't currently work in script templates; please follow WEB-12164 for updates
I am using Abp boilerplate http://aspnetboilerplate.com/
I am not able to find any documentation related to client side translation.
I tried doing it in angular way, but as the language is saved in xml in abp boilerplate template, so not sure how to perform.
Any help is very appreciated, I wasted hell lot of time in googling :(
Use
abp.localization.localize('your_key', 'your_localize')
For further info see abp.js in the [Your_project_name].Web\Abp\Framework\scripts\abp.js
Usually, 'your_localize' is equals to [Your_project_name]
there's documentation for client localization. click here for javascript localization >
Basically the steps to localize in client-side
If your page does not have included below script, you need to add the script to your html
<script src="/AbpScripts/GetScripts"
type="text/javascript"></script>
Then you can use it like this
var source = abp.localization.getSource('SimpleTaskSystem');
var s1 = source('NewTask');
I am trying to create the polling app described in this tutorial here.
I have step 2 finished, and I am about to start step 3(once my application is running properly) which is to incorporate the DB portion. My application is not behaving like the application listed in the tutorial currently though.
I have scanned my code numerous times and debugged it and still cant seem to catch what is throwing it off. When I run the application it runs fine, but none of my partials are being displayed only what is provided in the inital index.html view, so it is simply showing my blank navbar.
I have provided my git repository. If anyone has a moment and can take a look at it. Thank you for your time in advance.
Some of the key things I fixed in my pull request:
You need to include angular-route.js as a separate file now, and have your module depend on ngRoute.
You were missing quotes around the first $routeProvider in the following line:
.config(['$routeProvider',function($routeProvider){
You now need to register controllers using a name (string) with the module, rather than using global functions.
app.controller('ControllerName', function ($scope, ...) { ... });
You also forgot to actually reference a few of the JS files you need in index.html using <script> tags.
There are other small things, but see the PR for the full details. I also changed the way bower components are done.