Scroll is skipping header and starting from body - javascript

When site is loading, page starts from body and I have to scroll up to see styled header.
(But this problem does not appear on all browsers)
I want to start scrolling with the Header.
Here is the live site: http://pavlorishko228-001-site1.btempurl.com/
Code:
import React from "react";
import { Link } from 'react-router-dom';
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import Logo from '../../public/SmokeyWayLogo.svg';
const StyledLogo = styled("img")<{isScrolled: boolean}>`
filter: ${props => props.isScrolled ? "invert(1)" : "drop-shadow(2px 4px 3px black)"};
height: 80px;
padding-left: 0;
float: left;
`;
const StyledLink = styled("div")<{isScrolled: boolean}>`
padding: 20px;
margin: 10px;
display: inline-block;
border-radius: 5px;
&:hover {
box-shadow: 0px 0px 15px 2px ${props => props.isScrolled ? "white" : "black"};
color: black;
}
a {
text-decoration: inherit;
color: ${props => props.isScrolled ? "white" : "black"};
}
`;
const StyledNav = styled("div")<{isScrolled: boolean}>`
position: fixed;
width: 100%;
background-color: ${props => props.isScrolled ? "transparent " : "white"};
`;
function Header(){
const _isScrolled = ScrollHandler();
return(
<header>
<StyledNav isScrolled={_isScrolled}>
<StyledLogo isScrolled={_isScrolled} src={Logo}></StyledLogo>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Smokey Way</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Головна</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Меню</Link>
</StyledLink>
</StyledNav>
</header>
)
}
export default Header;

I used chrome on my device and was fine, I mean i saw your header after loading the page.
Your problem is not normal and its kinda weird for me, But i suggest you JS (in this code before loading page it makes you to be sure that you are at the top of the current page) and give me the feedback:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

Related

Second component not rendering below first one - REACT JS

I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.

React onClick not responding

I am a newbie in react. I am not so sure why this onClick event is not responding. I am trying render a modal when icon is clicked for some reasons I am the onClick event is not responding. I have tried it in 2 ways
onClick = {()=> {handleEdit()}
onClick = {handleEdit}
I am using this NoteWidget in another component called customerProfile is I dont know if that is creating any issue.
import React from 'react'
import './Notewidget.scss'
import AddCircleIcon from '#mui/icons-material/AddCircle';
import {List, Skeleton,Divider,Modal,Input} from 'antd';
import InfinteScroll from 'react-infinite-scroll-component';
import {useState} from 'react';
const Notewidget = () => {
const [isEditing,setIsEditing] = useState(false);
const handleEdit = () => {
console.log('button clicked');
setIsEditing(true);
}
return (
<div className='notes'>
<div className='heading'>
<h3 className='title'>NOTES</h3>
<div className='icon'><AddCircleIcon onClick={() => {handleEdit()}}/></div>
</div>
<div className='list'
style={{
overflow:'auto',
padding:'0px px',
width:400,
height:543
}}
>
<InfinteScroll
dataLength={data.length}
next={data}
size='large'
hasMore={data.length < 5}
loader={
<Skeleton
avatar
paragraph={{
rows:1,
}}
active
/>
}
endMessage={<Divider plain>Add Note</Divider>}>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={(item)=>(
<List.Item>
<List.Item.Meta
title={item.title}
description={item.description}
/>
</List.Item>
)}
/>
</InfinteScroll>
</div>
<Modal
visible={isEditing}>
</Modal>
</div>
)
}
export default Notewidget
when I am clicking on the border next to notes it is working the modal is popping up
#import "antd/dist/antd.css";
.notes{
flex:1;
margin-right: 20px;
gap: 20px;
padding: 10px;
justify-content: space-between;
height: 650px;
-webkit-box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.47);
box-shadow: 2px 4px 10px 1px rgba(201,201,201,0.47);
background-color: white;
.heading{
display: flex;
justify-content: space-between;
h3{
padding: 20px;
.title{
font-size: 14px;
font-weight:bolder;
line-height: 1.2;
text-transform: uppercase;
color: rgb(50, 51, 50);
margin: 0px 0px 20px;
}
}
.icon{
padding-top: 16px;
padding-left: 265px;
}
}
.list{
padding: 10px;
}
}
There are couple of things -
did you check the console log in developer mode?
Yes, the way you have told to invoke the functions are connect but there is more to it. for time-being if you are not passing any parameters to function then you should use the 2nd way [ onClick = {handleEdit}]
3.since you have attached your handler to mui Icon, that might be the reason. try putting the onClick to parent of icon i.e div like this -
<div className='icon' onClick={handleEdit}><AddCircleIcon/></div>
4.please try put some playground link (JS fiddle/codeSandbox) so that anyone can try doing changes in code.

How can I use className in component from styled-components in React?

NavStyles.js
import styled from 'styled-components';
export const Nav = styled.navwidth: 100%; ;
export const NavMenuMobile = styled.ul`
height: 80px;
.navbar_list_class {
font-size: 2rem;
background-color: red;
}
${props => props.navbar_list_props && `
font-size: 2rem;
background-color: gray;
`}
`;
Navbar.js
import React from 'react'
import {Nav, NavMenuMobile} from "./NavStyles";
const Navbar = () => {
return (
<Nav>
{/* work no problem */}
<NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>
{/* not work How to use..? */}
<NavMenuMobile className="navbar_list_class">Nav Bar class</NavMenuMobile>
</Nav>
)
}
export default Navbar
<Nav>
<NavMenuMobile className={navbar_list_props}>Nav Bar props</NavMenuMobile>
</Nav>
Try This
Looks like you are setting styles for the children within NavMenuMobile with the class "navbar_list_class".
Should work with &.navbar_list_class
export const NavMenuMobile = styled.ul`
height: 80px;
&.navbar_list_class {
font-size: 2rem;
background-color: red;
}
`;

onDoubleClick is not working on react to call a function

I'm following this React tutorial here: https://ibaslogic.com/how-to-edit-todos-items-in-react/ to build a simple TO DO app.
I've also reviewed Why onDoubleClick event is not working in React.js? but there's no onclick event to worry about in my example.
My onDoubleClick event should call a function handleEditing but nothing happens when I double click a list item.
I'm unsure of why it does not work (the web browser does not seem to register a double click event.
Below is my example:
import React from "react";
import styles from "./TodoItem.module.css";
class TodoItem extends React.Component {
state = {
editing: false,
};
handleEditing = () => {
console.log("doubleClick")
this.setState({
editing: true,
});
};
render() {
const completedStyle = {
fontStyle: "italic",
color: "#595959",
opacity: 0.4,
textDecoration: "line-through",
};
const { completed, id, title } = this.props.todo;
let viewMode = {}
let editMode = {}
if (this.state.editing) {
viewMode.display = "none"
} else {
editMode.display = "none"
}
return (
<li className={styles.item}>
<div onDoubleClick={this.handleEditing} style={viewMode}>
<input
type="checkbox"
className={styles.checkbox}
checked={completed}
onChange={() => this.props.handleChangeProps(id)}
/>
<button onClick={() => this.props.deleteTodoProps(id)}>Delete</button>
<span style={completed ? completedStyle : null}>{title}</span>
</div>
<input type="text" style={editMode} className={styles.textInput} />
</li>
);
}
}
export default TodoItem;
I don't think this is relevant, but here is my css:
.item {
font-size: 1.2rem;
list-style-type: none;
padding: 17px 0px;
border-bottom: 1px solid #eaeaea;
}
.checkbox {
margin-right: 15px;
}
.item button {
font-size: 13px;
background: #f1f3f4;
border: none;
cursor: pointer;
float: right;
outline: none;
border-radius: 100px;
height: 50px;
width: 50px;
margin: -10px 0 0 10px;
}
.textInput {
width: 100%;
padding: 10px;
border: 1px solid #dfdfdf;
}
onDoubleClick works when your dev tool is not opened
Updated answer:
As found out in the comments, the problem was a combination of OS and Browser. Windows / Chrome in this example.
Old answer:
I haven't read into much detail, but the first difference I can spot is that in your code the handleEditing is not bound. Which should not prevent the output of your console.log. Does it appear?
onDoubleClick={this.handleEditing.bind(this)}
Hope this helps in your case.

React.js child component not updating styling derived from props, why? (styled-components)

I am new to react.js and I am trying to get my head around conditional styling depending on props passed down from parent components.
I'm trying to make a button that has styling differences depending on whether the 'disabled' prop is true or false. If the button is disabled (true) it should appear grey, otherwise, it's blue.
This is the code I have so far, although it is not working and I'm not sure why.
Parent component
import React from 'react';
import { storiesOf } from '#storybook/react';
import { action } from '#storybook/addon-actions';
import { linkTo } from '#storybook/addon-links';
import { Welcome } from '#storybook/react/demo';
// Buttons
import Primary from '../components/ButtonPrimary'
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Buttons')
.add('Primary', () => <Primary label="Default" disabled="false"></Primary>)
Child component
import React from "react";
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.disabled ? '#EDEDED' : '#0076C0'};
border: ${props => props.disabled ? '1px solid #DADADA' : 'none'};
color: ${props => props.disabled ? '#818181' : '#FFFFFF'};
cursor: ${props => props.disabled ? 'unset' : 'pointer'};
border-radius: 2px;
font-family: Roboto-Regular;
font-size: 16px;
padding: 6px 32px;
font-family: roboto, helvetica, sans-serif;
font-size: 18px;
&:focus {
outline: none;
}
&:hover {
box-shadow: ${props => props.disabled ? 'unset' : '0px 1px 2px 1px #b3b3b3'};
}
&:active {
box-shadow: ${props => props.disabled ? 'unset' : 'inset 0 0 10px #2f2f2f80'};
}
`;
export default class ButtonPrimary extends React.Component {
render() {
return (
<div>
<Button disabled={this.props.disabled}>{this.props.label}</Button>
</div>
)
}
}
Does anyone have any idea why?
In your parent component, you need to change disabled to be a boolean instead of a string.
storiesOf('Buttons')
.add('Primary', () => <Primary label="Default" disabled={false} ></Primary>)
Or in case if you need to use it as a string you need to specify your conditional
${props => props.disabled === 'true' ? '#EDEDED' : '#0076C0'};

Categories