I've been checking on the internet how to do a long scroll with split screen in reactjs. I would like to do something like THIS SITE.
Is there any component or way to do it? I've found a lot of jquery examples, but any with React.
To add some extra information I'm running react with react-bootstrap, babel(ES6), gulp, browserify, sass and hot load.
Thanks for your help!
Ruffeng
I found the answer with react-onepage-scroll.
https://www.npmjs.com/package/react-onepage-scroll
Simple and clean. If sbdy know how to apply a split screen I'll appreciate it.
Related
I'm kinda stuck. I have to create a portfolio and I have to mostly use html5 and css3, with a bit of js, jquery and stuff if I really want to. I'm not very good at web development but I still wanted to experiment and do a professional and nice site. The thing is, implementing a simple scroll effect on your whole website seems to force you to write the html code on one single index. Does anyone know if this is really the case? Are there other solutions?
Thanks in advance. I know that it is not the smartest question but I'm really not good at it, so sorry in advance. Bye!
(I didn't really try anything yet except from the classic class "scroll-container", which is my main problem : I still want to have several html pages to separate things so that it is clear in my mind. Putting everything on a single webpage will definitely lose me)
use an external library or plugin, such as fullPage.js or Scrollify, which can enable a scroll effect across multiple pages.
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.
Issue: I have problems with this page: http://kivusandcamera.com/blog/ The page loads with a proper layout, but then the two blog entries "jump" to the left behind the navigation bar. I have spent a good bit of time trying work through the various CSS, inspecting it with developer tools, etc..., but I have reached a point where I feel like I need some help. Any advice would be appreciated.
Background: This is just a basic Wordpress theme that I am trying to customize for a website, so I am not 100% sure how
Additional Information: Though I am passingly familiar with CSS, I have done hardly any work involving responsive design, media queries, etc... Basically, I am saying (1) I would not be surprised if it is something really simple that I am missing, and (2) if something could be done a better way, please feel free to let me know.
UPDATE - It looks like this issue might be Javascript or JQuery related. Basically, a style attribute is getting injected into one of the div tags. The style attribute used an absolute position, with a certain width, and I have no idea how to modify it.
UPDATE #2 - It appears the issue happens with any pages I set in the theme to "Full Width" (see also the http://kivusandcamera.com/about page.) I think those pages must get processed differently by JS layout framework that is used. Again, I still haven't figured out how that is all happening.
Turns out there were two separate issues:
(1) The JQuery auto-layout framework was resizing the various page columns with the assumption that the navigation bar was the same size as the individual columns of blog entries. That caused an issue that had to be solved.
(2) The full page CSS had to be updated to reflect the lack of a resizing navigation bar.
Ultimately, these issues were very specific to the this particular Wordpress theme, so I doubt full description of the solution would provide much of a benefit to the community. Thank you to everyone who helped lead me to the solution.
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
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/