I'm building a react based web app using some html/css styles from one of the free "flat file" templates provided by bootstrap.
the template uses scrollspy to change the correct menu item hover colour to the section the user has scrolled to.
This effect is achieved using this code in one of the javascript files
$('body').scrollspy({
target: '#nameHere'
});
in my react component, I am trying to do this
document.body.scrollspy({ target: '#nameHere' })
but when I run the application I am getting a "document.body.scrollspy is not a function" error.
Is there something painfully obvious I am doing wrong here?
Hmmm... I think, the problem is that the document.body element has no property scrollspy.
Ok I found a few ways to get this working.
A more robust way is to use the React Scroll component mentioned by Valentin above, but this involves taking a dependency on another module and because of some other stuff in my situation I wasn't able to get this working.
A quicker, more hacky way is to add
data-spy="scroll" data-target="#namehere" data-offset="56"
to the body tag of index.html
Related
The site now I am developing has a collapsable source code view panel.
And I have no idea how to implement a React component to do the exactly the same thing and I am really sorry that I can only afford an example what I want.
There is a code view panel on this site and I want exactly same panel like the one on this site.
https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts
On the solidity source code view panel there is a collapse function and I am not sure how to implement this function.
Is there any module that can parse solidity code or do I have to make a new logic to parse code?
To summarize my questions;
Make a React Component that can view source code.
How to add collapse function to that component?
Additionally, I am currently using material-ui 4.12.3 and React version is 17.0.2
It looks like they are using the Ace editor.
There are multiple React implementations of the Ace editor on npmjs. I recommend you look into one of those. (Then you'll also get expand/collapse in the code editor "for free".)
I'm creating a react-based app that will function within a Wordpress page. The app is self-contained for the most part, but I'd like to be able to show/hide a div element on the page that is not part of the react app. If I were doing this with jQuery I could just do:
jQuery(".image_column").css("display","none");
But since I want to call this from a function at a certain point in the react app I'm getting tripped up. It seems like a straightforward thing to do but I'm stumped. Thanks for the help!
I think this is what you need:
document.querySelector(".image_column").style.display = "none"
This was a silly one on my part. The answer was to add "window." Once I did that everything worked. I'll leave this question up in case someone else has a temporary issue of seeing the simple answer!
In my case, with Wordpress, I needed to reference jQuery and not $. So it looks like:
window.jQuery(".entry-content").css("display","none");
Background
I am trying to create a blog using Angular (5). I am using markdown and storing that data outside the application. It downloads the markdown, parses it into an html string, then binds to the innerHTML of a div.
I understand that I am working against the grain, but I would really like to be able to create an elegant solution here.
Problem
Having the ability to use custom components gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup components, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.
Custom components are not detected from the innerHTML string. Which doesn't allow it. It seems like DynamicComponentLoader used to provide a solution for this, but not anymore.
Clarity
I am not trying to render only the html, or only a single component. I want to render the html and all components included.
I also don't care that it's bound to the innerHTML property, it just seemed to get me the furthest. I can/will use a resolver if that would help.
Example
https://stackblitz.com/edit/angular-wylp55
As you can see the hello component renders in the html, but not the component itself.
Any help would be appreciated.
So I finally figured this out and did a write up.
Here's the link to the updated stack blitz.
https://stackblitz.com/edit/angular-dynamic-html.
I also did a full write up on my company blog. https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html.
I would like to convert websites from PSD prototype to HTML/CSS/Bootstrap and then move on to JavaScript development and using React.js and some JavaScript coding.
Is it possible to use pure Bootstrap with React.js without using React-Bootstrap?
Also is it possible HTML/CSS Freelancer to do React-Bootstrap as a mockup only and then find a JavaScript developer to do the advance work like React.js and JS development?
I would like to develop app for Desktop using Electron and Hybrid App using same code base as possible.
In theory, yes. Since ReactComponent render themselves as html, you can just put the right css classes and there you go. That's totally fine for the css part of bootstrap.
BUT, all the javascript stuff done by the bootstrap library that modify the DOM will be in "conflict" with the virtual DOM of React.
One way to avoid that is to never rerender a react component for which its inner html is modified by bootstrap (by setting shouldComponentUpdate() { return false }).
Doing this way, you can think of React as just a template library to generate some HTML markup, and letting bootstrap actively modify this markup for you but's it's not what React is made for.
The whole point of React is the ability to see your UI as a function of your state : view = f(state) at any given moment.
That's why react-bootstrap reimplements all DOM modifications in a React way.
For sure you can. I will include the bootstrap css as a CDN and go with the normal development.
Related Topic
So in the link above is a topic related to what I am trying to figure out. but I'm not sure.
Here is whats going on, my index template is being rendered but visually I can't see anything. I don't have any JS errors and it works just fine. When I inspect it all the code shows up but FOR some reason i cant see(visually see the code thats rendered) it. the only thing that shows is the navigation. which is not part of the template.
So I though well take the whole thing out and call the {{outlet}} last...NOPE still saw nothing but the navigation.
I'm trying not to be vague Im new to ember and stackoverflow. Not sure if the link to the actual problem is enough. let me know if any further explanation is needed
There seems to be a problem with the http://www.redberryapp.com/phonegap/css/redberry.css
please have a look at the example below,
http://emberjs.jsbin.com/kanobobe/1/edit
it has been created from the code/files found in www.redberryapp.com and it seems to display the content if
<link rel="stylesheet" href="http://www.redberryapp.com/phonegap/css/redberry.css">
stays commented out. The template always gets rendered, but it is not displayed if the specific stylesheet is active.
Thank you i thought i deleted my question i did discover it was my css more specifically I had to set a style on [id*='ember'] {} so that when the app started it would play well with my framework