React horizontal Scrolling Menu? - javascript

I am building a nextjs application. In my project I am not using TypeScript. I am using Javascript. I need a horizontal scroll on mouse wheel and also on touch. I haven't find any react packages. But I find one react package - react-horizontal-scrolling-menu. I see all demo. It perfect for my project. But I am facing one problem. Al of it's example create in TypeScript. But I am not using typeScript. If I copy the code, Then I get many error?
https://codesandbox.io/s/no-scrollbar-and-buttons-position-c3kn5?file=/src/index.tsx
In this situation, What I have to do. I am not understanding?
Please can anyone help me. I am facing this issue over 10 days. Please do not dislike or close my questions.

Converted to JavaScript. You only needed to remove types and change tsx, ts to jsx, js.
https://codesandbox.io/s/no-scrollbar-and-buttons-on-bottom-forked-m2wci

You just need to get rid of every type definition of typescript. Every type in TypeScript is written after the variable name behind ":". So, in the codesandbox example, remove things like ": number" or ": void" at the end of functions.
Edit: im on mobile now, so i can't send you the Javascript code. The things you should look for are on line 17, 20 and 57. Hope the helps you.

I am using also the component for my project which not typescript. As someone suggested I just removed the type definitons in the Arrow function.

Related

How to enabling Tool tips or my react library?

My Project: A React JS library (Not Typescript) created with create-react-library.
The library works as expected.
My Question: How do I get the tooltips/hints in the editor where my packages is used?
Currently: If I import one of my components e.g
<Notice color='red' text='Warning'/>
When I hover over over Notice the tooltip shows
(alias) function Notice(_ref: any): any
import Notice
What I am looking for is a tooltip to show info along the lines of Notice (color, text)...
A few ideas I had was some kinda JS docs? or possibly I need typescript and it isn't possible with JS (but this doesn't seem right)?
While I'm usually an expert googler, I don't know enough about the issue and all I can seem to arrive at are 'JS tooltip turorials'. Any direction at all is appreciated. :)

How to display svg generated by javascript file as a component in Angular 2?

So, I need to display a svg generated by this script. http://bl.ocks.org/andredumas/27c4a333b0e0813e093d .
However I want to use it as a component in Angular 2. I couldn't find any solutions or any examples. Is this possible?
Also I'll need to talk with server and other components.
Thanks for the help in advance.
The script your are referring to is using D3.
A good starting point for D3 and Angular 4 is:
https://github.com/swimlane/ngx-charts
Since every D3 chart is somewhat unique, it's hard to answer your question with an exact implementation, but the above framework should help you with the interaction between angular and D3.
I hope this points you in the right direction.

multiple eqneditor of ckeditor not showing math overlay

I am using equation editor(for math function) plugin with ck-editor. In a single page where i am using multiple editor. when i am hover on math symbols it showing all function for only one editor but not multiple.
Please help how to show all functions for all editor in a single page.
Thanks
I don't know if this topic is still open to discussion, but I felt at the same problem this week, and I've developed a solution.
https://github.com/ygorlazaro/eqneditorfix
It's just a .JS file you need to add at your project, and I'll fix this error.

Plnkr - How to add curly brackets?

Basically I just got started using plnkr.co.
However every time I try to insert a "}" my HTML section gets crammed together as shown in the picture:
I simply click shift+alt+0 and it gets crammed together.
Anyone used to plnkr who can tell me what's happening here?
EDIT: Seems like there's no way to change this.
Conclusion: The developers behind Plnkr are morons.
Conclusion: The developers behind Plnkr are morons.
There is no they, there is only me and I don't typically think of myself as a moron. If you found yourself on Plunker it is likely because there is a body of people who find it useful and worthwhile, warts and all. If this is the attitude you bring to the community then you may find more fertile ground elsewhere.
Have you considered that SHIFT-ALT-0 might seem like a very unlikely key combination to be used by someone who programs and closes braces quite often? If that is the setup you choose then I'm sorry that I have not considered your particular situation. As runTarm pointed out, SHIFT-ALT-0 is bound to the collapse command by default in the ace editor.
Perhaps a better conclusion would be that configurable keybindings would be a great feature.
The Alt+0 is a default shortcut for fold all in the Ace editor.
Ace editor: Default Keyboard Shortcuts
And Plunker borrow the key-binding from Ace as a default too, so all the html tags are folded.
You could try changing the key-binding option to see if it help, it is under the Editor Options panel, the cog icon on the right
Hope this helps.
Sometimes I've experienced Plunker to be a bit laggy, but overall it could easily be one of my favorite JS online editors (ability to add files!).. except for this curly problem.
I'm using a danish keyboard, and unfortunately the curly braces are located on CTRL+ALT+7: { and CTRL+ALT+ 0: }. This means that whenever I make a }, everything collapses.
I'm using these online editors mostly for testing AngularJS, which means that there's a LOT of {{directives}} everywhere.
Switching between either ACE, EMACS or VIM didn't seem to solve the problem.

Image editor component in Flex / JavaScript

I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/

Categories

Resources