I have tried to use React scroll parallax to get the famous scrolling effect on a couple of images which works perfectly fine in chrome, but in safari and I should say on a small screen looks jittery and give the user a bad experience.
here is a sample project created in stackBitz: https://stackblitz.com/edit/react-ybdmbn.
please guide me on how I can improve it or what I am doing wrong.
I fix the issue by removing the: speed={-10} property from the <Parallax> tag.
Parallax gets a couple of property which the speed and the translateY are basically the same thing.
<Parallax translateY={[20, -70]} >
<img src="https://picsum.photos/200/300" />
</Parallax>
<Parallax translateY={[30, -90]} >
<img src="https://picsum.photos/seed/picsum/200/300" />
</Parallax>
</div>
<div className={styles.Bottom}>
<Parallax translateY={[20, -80]} >
<img src="https://picsum.photos/200/300?grayscale" />
</Parallax>
<Parallax translateY={[40, -80]} >
<img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" />
</Parallax>
</div>
Related
I have a React Gatsby web app and I have a component that renders answer cards with an image on each card. I know there is a known issue with windows 10 and chrome which is fixed by disabling hardware acceleration, but my site is the only one that I have such bad flickering. I have tried to refactor everything to have the best performance but the issue persists.
I know that this Google Chrome Flicker Unable to Find Cause
solves the issue, but users will not do this since even for me this is the only site that this happens.
My components look something like this.
<div className="flex flex-wrap justify-center py-10 px-8">
{answers.map((e) => (
<Field key={e.id} type="radio" name={id} value={e.answerId}>
{() => {
return (
<div
onClick={onClick}
className="flex flex-col justify-around w-32 h-44 2k:w-48 2k:h-72 shadow-3xl rounded-md mx-2 my-3 cursor-pointer transform transition-transform"
>
<div className="flex-1" />
<div className="inline-block px-2 m-3">
<img src="https://w7.pngwing.com/pngs/247/929/png-transparent-potato-food-anime-potato-food-manga-cartoon.png" />
</div>
</div>
);
}}
</Field>
))}
</div>
I have tried almost everything. Removing flex does not fix the issue. If I remove the image the issue is fixed. Any help appreciated.
Found it. Although in general the flickering issue with Chrome + Windows is fixed, it seems that there are cases where hardware acceleration is still struggling.
In my case I had a div element with filter grayscale CSS and both box-shadow applied (for the card unselected state above). Probably chrome renderer had issues applying the filter to the box-shadow element so that caused the flickering. I moved the filter to the inside image element (which makes more sense either way) and the issue was fixed.
I'm trying to do the infamous center operation both vertical and horizontal and have sorta succeeded in doing so.
I'm trying to render a simple react component on my page that will show a 404 message. I want this message to be centered. The way I managed to do this some whitespace is leftover resulting in vertical scroll bars showing up. Ofc I could get rid of them using something like overflow-hidden, but surely there must be a way to center this message perfectly just using a better structure or certain bootstrap classes.
Here is my component:
const NotFoundPage = () => {
return (
<div>
<NavbarComp />
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
<div>
<h3 className="m-4">
<Badge variant="primary">404</Badge> Page not found...
</h3>
<Link to="/">
<Button variant="secondary">Go to main page</Button>
</Link>
</div>
</div>
</div>
);
};
In the end, I don't care that the scrollbars appear but it bothers me that this positional issue keeps occurring for me in some form or another and I wanna learn to put an end to this :)
You have already figured out how to center your "Not Found" message. What's messing it up for you is the Navbar, which you can test by taking it out. You will notice that the scroll bars disappear.
This class min-vh-100 gives the flex box below the Navbar the height of 100% of the viewport, which avoids adding any scrolls bars. The issue is that Navbar barges in and throw the page off blalance by attaching itself to the top. So the amount of srolling is exactly the height of the Navbar and since it's empty, there is very little scrolling.
An intutitive solution is to put your Navbar INSIDE the flex box. But that won't work in your case, because of how your flex box adjusts items. So I will give you a simpler solution, which should be viewed as more of a work-around.
Bootstrap does not come with classes such as min-vh-95 or min-vh-80, but luckily they are super easy to create. You can add this class to your custom CSS:
.not-found-container {
min-height: 95vh !important;
}
(or you could just stick to the naming convention and name it min-vh-95 for example)
And then change the flex box classes from:
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
to
<div className="d-flex align-items-center justify-content-center text-center not-found-container">
Here is a Sandbox to illustrate the idea: https://codesandbox.io/s/peaceful-sanne-e3m9w?file=/src/App.js
Obviously the min-height value would need to be adjusted based on the height if your Navbar.
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I want to display images from sdcard in my Ionic application , But I got problem to show images with img tag.
View Code For My Application
<ion-content ng-controller="DigitalCatCtrl">
<div>
<img ng-src="{{myimg}}" />
<img src="{{myimgs}}" />
</div>
</ion-content>
Controller Code For My Application
.controller('DigitalCatCtrl', function($scope,$cordovaFile) {
$scope.myimg=cordova.file.externalRootDirectory + ".DigitalCatlog/ic_developmentworks.png";
$scope.myimgs="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png";
});
If I have pass the image path directly to img tag like following way, Image will show.
<img src="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png" />
Please suggest me what I did wrong or any other solution.
use
<img data-ng-src="{{myimgs}}" />
instead
<img src="{{myimgs}}" />
I have started using the Foundation 3 from zurb but my slider has slides with text on the left hand side and an image on the right (instead of just an image and a label on top of it).
When I decrease the size of the browser window it all fits except that the height of the slider.
What we need is to make the slider higher when on a small browser (it needs to be the same slider - not an alternative).
I know there's the fluid option in fluid slider and I suspect that if I change it, it will be enough to solve this problem.
How do I achieve that?
The following is my slider HTML code:
<div class="row">
<div class="twelve columns">
<div id="slider">
<!-- *** This is the slider that needs to fit smaller browsers ***-->
<div class="row" style="background-color:White;">
<div class="six columns">
<h2>Title</h2>
<div class="summary">
This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
Learn more
</div>
<div class="some-thumbnails">
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
</div>
</div>
<div class="six columns">
<img src="http://placehold.it/550x250&text=[img 1]" />
</div>
</div>
<img src="http://placehold.it/1000x400&text=[img 1]" />
</div>
</div>
<hr />
The orbit is controlled by an image generated by some plugin used by the orbit plugin. What I did was to change the plugin to get the height of the left and right part of the highest slide (when changed to phone view) and then set the data-src to "holder.js/[width]x[height]" and call the Holder.run() method.