I'm building a test website (https://test.collegemate.app/), it's working on Chrome and Firefox but when I try to open the website in Safari, the scroll (fullpage.js) does not works at all. I try to debug using safari inspector, but not specific error message I notice.
This is my first web development project so this is the first time I encounter this type of issue. Please help me with this issue.
Thank you for your time!
Here is the code that related to the scroll function in webpage.
IndexWrapper.tsx
/* eslint-disable */
// @ts-nocheck
import * as React from 'react';
import { Fullpage, Slide, HorizontalSlider } from 'fullpage-react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faChevronRight,
faChevronLeft,
} from '@fortawesome/free-solid-svg-icons';
import styled from 'styled-components';
// Pages
import FirstPage from './FirstPage';
import Feature from './Features';
import About from './About';
import LastPage from './LastPage';
import FooterModal from './Modal/FooterModal';
import FoundingTeam from './About/FoundingTeam';
const { changeFullpageSlide, changeHorizontalSlide } = Fullpage;
interface FeaturesData {
title: string;
comment: string;
image: string;
}
/**
* IndexWrapper class component.
*/
class IndexWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
active: {
Fullpage: 0,
features: 0,
},
isAboutModalOpen: false,
isFooterModalOpen: false, // For Footermodal open Handling
isService: true, // For tracking Footer modal information
};
this.onSlideChangeStart = this.onSlideChangeStart.bind(this);
this.onSlideChangeEnd = this.onSlideChangeEnd.bind(this);
this.setIsAboutModalOpen = this.setIsAboutModalOpen.bind(this);
this.setIsFooterModalOpen = this.setIsFooterModalOpen.bind(this);
this.setIsService = this.setIsService.bind(this);
}
/**
* Handle the slide change start event.
* @param {string} name - The name of the slide.
* @param {object} props - The props object.
* @param {object} state - The state object.
* @param {object} newState - The new state object.
*/
onSlideChangeStart(name, props, state, newState) {
if (!this.horizontalNav) {
this.horizontalNav = document.getElementById('horizontal-nav');
}
if (name === 'features') {
scrollNavStart(this.horizontalNav);
}
}
/**
* Handle the slide change end event.
* @param {string} name - The name of the slide.
* @param {object} props - The props object.
* @param {object} state - The state object.
* @param {object} newState - The new state object.
*/
onSlideChangeEnd(name, props, state, newState) {
if (name === 'features') {
scrollNavEnd(this.horizontalNav);
}
const oldActive = this.state.active;
const sliderState = {
[name]: newState.activeSlide,
};
const updatedState = Object.assign(oldActive, sliderState);
this.setState(updatedState);
}
setIsAboutModalOpen(boo0) {
this.setState({ isAboutModalOpen: boo0 });
}
setIsFooterModalOpen(boo1) {
this.setState({ isFooterModalOpen: boo1 });
}
setIsService(boo2) {
this.setState({ isService: boo2 });
}
render() {
const { active } = this.state;
const currentActive = active.Fullpage;
const goSlide1 = changeFullpageSlide.bind(null, 0);
const goSlide2 = changeFullpageSlide.bind(null, 1);
const goSlide3 = changeFullpageSlide.bind(null, 2);
const goSlide4 = changeFullpageSlide.bind(null, 3);
const horizontalSliderName = 'features';
const horizontalActive = this.state.active[horizontalSliderName];
// const horizontalActive = this.state.features;
const prevHorizontalSlide = changeHorizontalSlide.bind(
null,
horizontalSliderName,
horizontalActive - 1
);
const nextHorizontalSlide = changeHorizontalSlide.bind(
null,
horizontalSliderName,
horizontalActive + 1
);
// Properly retrieve data and edit Feature component
// TODO: Seperate Data from Code (Use Gatsby's GraphQL)
const data = [
{
title: 'Customize Schedule',
comment:
"Customize your schedule effortlessly with CollegeMate - real-time data from UW's" +
' database at your fingertips. CollegeMate updates for you.',
image: 'thumbnail_Feature1.png',
},
{
title: 'Share Schedule With Friends',
comment:
'Eliminate the "What\'s your schedule?" dilemma. CollegeMate simplifies viewing friends\' ' +
'timetables. No back-and-forth. Stay connected in a snap.',
image: 'thumbnail_Feature2.png',
},
{
title: 'Set Schedule as Wallpaper',
comment:
"Download your timetable to perfectly fit your phone's screen. Say goodbye to screenshots." +
' Access your schedule whenever and wherever.',
image: 'thumbnail_Feature3.png',
},
];
const featureSlides = data.map((feature: FeaturesData) => (
<Slide>
<Feature data={feature} />
</Slide>
));
const horizontalSliderProps = {
name: 'features',
infinite: true,
};
horizontalSliderProps.slides = featureSlides;
const fullpageOptions = {
scrollSensitivity: 5,
touchSensitivity: 5,
scrollSpeed: 500,
hideScrollBars: true,
scrollOverflow: true,
resetSlides: true,
};
const isAboutModalOpen = this.state.isAboutModalOpen;
const isFooterModalOpen = this.state.isFooterModalOpen;
const isService = this.state.isService;
const modalInfo = { isFooterModalOpen, isService };
return (
<>
{isAboutModalOpen && (
<div
style={{
zIndex: 20,
position: 'absolute',
top: '200%',
height: '100vh',
width: '100vw',
}}
>
<FoundingTeam setIsAboutModalOpen={this.setIsAboutModalOpen} />
</div>
)}
{isFooterModalOpen && (
<div
style={{
zIndex: 20,
position: 'absolute',
top: '300%',
height: '100vh',
width: '100vw',
}}
>
<FooterModal
data={modalInfo}
setIsFooterModalOpen={this.setIsFooterModalOpen}
/>
</div>
)}
{/* ^ open modal when isFooterModalOpen is true. Give data and function that are needed for opening modal with proper information */}
<Fullpage
onSlideChangeStart={this.onSlideChangeStart}
onSlideChangeEnd={this.onSlideChangeEnd}
{...fullpageOptions}
slides={[
<Slide>
<FirstPage />
</Slide>,
<HorizontalSlider {...horizontalSliderProps}>
<div id="horizontal-nav" style={horizontalNavStyle}>
<Div>
<div
style={{
height: '7vh',
width: '53px',
}}
>
{horizontalActive == 0 ? (
<span onClick={prevHorizontalSlide} style={hidden}>
<FontAwesomeIcon
icon={faChevronLeft}
size="5x"
style={horizontalArrowStyle}
/>
</span>
) : (
<span onClick={prevHorizontalSlide}>
<FontAwesomeIcon
icon={faChevronLeft}
size="5x"
style={horizontalArrowStyle}
/>
</span>
)}
</div>
<div>
<EmptyBox />
</div>
<div
style={{
height: '7vh',
width: '53px',
}}
>
{horizontalActive == 2 ? (
<span style={hidden} onClick={nextHorizontalSlide}>
<FontAwesomeIcon
icon={faChevronRight}
size="5x"
style={horizontalArrowStyle}
/>
</span>
) : (
<span
// style={{ position: 'absolute', right: '0' }}
onClick={nextHorizontalSlide}
>
<FontAwesomeIcon
icon={faChevronRight}
size="5x"
style={horizontalArrowStyle}
/>
</span>
)}
</div>
</Div>{' '}
</div>
</HorizontalSlider>,
<Slide>
<About setIsAboutModalOpen={this.setIsAboutModalOpen} />
</Slide>,
<Slide>
<LastPage
data={modalInfo}
setIsFooterModalOpen={this.setIsFooterModalOpen}
setIsService={this.setIsService}
/>
</Slide>,
]}
>
<div style={slideNavStyle}>
<ul>
<span onClick={goSlide1}>
<li style={slideNavStyle.liStyle}>
{currentActive == 0 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
<span onClick={goSlide2}>
<li style={slideNavStyle.liStyle}>
{currentActive == 1 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
<span onClick={goSlide3}>
<li style={slideNavStyle.liStyle}>
{currentActive == 2 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
<span onClick={goSlide4}>
<li style={slideNavStyle.liStyle}>
{currentActive == 3 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
</ul>
</div>
</Fullpage>
</>
);
}
}
/**
*
* @param nav
*/
function scrollNavStart(nav) {
// make the nav fixed when we start scrolling horizontally
nav.style.position = 'fixed';
}
/**
*
* @param nav
*/
function scrollNavEnd(nav) {
// make the nav absolute when scroll finishes
nav.style.position = 'absolute';
}
const slideNavStyle = {
listStyleType: 'none',
zIndex: 15,
position: 'fixed',
right: '3%',
top: '40%',
margin: 'auto',
display: 'block',
input: {
display: 'none',
},
liStyle: {
listStyleType: 'none',
margin: '4vh',
},
circle1: {
cursor: 'pointer',
alignItems: 'center',
height: '2vh',
width: '2vh',
borderRadius: '50%',
marginRight: '-20px',
display: 'block',
transition: 'all 0.3s ease',
backgroundColor: '#DEE3E5',
},
circle2: {
cursor: 'pointer',
alignItems: 'center',
height: '2vh',
width: '2vh',
borderRadius: '50%',
marginRight: '-20px',
display: 'block',
transition: 'all 0.3s ease',
backgroundColor: '#B20000',
},
};
const horizontalArrowStyle = {
height: '7vh',
width: '53px',
cursor: 'pointer',
color: '#DEE3E5',
transition: 'linear all 0.3s',
};
const horizontalNavStyle = {
position: 'absolute',
width: '100vw',
height: '50vh',
display: 'flex',
top: '25vh',
zIndex: 14,
};
const EmptyBox = styled.div`
width: 70vw;
height: 7vh;
/* Thin Mobile */
@media only screen and (max-width: 400px) {
width: calc(100vw - 106px);
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1223px) {
width: calc(100vw - 150px);
}
/* Mobile Landscape */
@media only screen and (orientation: landscape) and (max-height: 768px) {
top: 40vh;
width: calc(100vw - 130px);
}
`;
const Div = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-right: auto;
margin-left: auto;
width: 100vw;
position: relative;
/* Tablet */
@media (min-width: 768px) and (max-width: 1223px) {
top: 40vh;
}
/* Mobile */
@media only screen and (min-width: 400px) and (max-width: 768px) {
top: 40vh;
}
/* Thin Mobile */
@media only screen and (max-width: 400px) {
top: 40vh;
}
/* Mobile Landscape */
@media only screen and (orientation: landscape) and (max-height: 768px) {
top: 40vh;
}
`;
const hidden = {
opacity: 0,
display: 'none',
color: '#DEE3E5',
transition: 'linear all 0.3s',
};
export default IndexWrapper;
I am suspecting that there is some issue in the code below (which is part of the code above) since it is related to the four buttons on the right side of the website.
render() {
const { active } = this.state;
const currentActive = active.Fullpage;
const goSlide1 = changeFullpageSlide.bind(null, 0);
const goSlide2 = changeFullpageSlide.bind(null, 1);
const goSlide3 = changeFullpageSlide.bind(null, 2);
const goSlide4 = changeFullpageSlide.bind(null, 3);
type <div style={slideNavStyle}>
<ul>
<span onClick={goSlide1}>
<li style={slideNavStyle.liStyle}>
{currentActive == 0 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
<span onClick={goSlide2}>
<li style={slideNavStyle.liStyle}>
{currentActive == 1 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
<span onClick={goSlide3}>
<li style={slideNavStyle.liStyle}>
{currentActive == 2 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
<span onClick={goSlide4}>
<li style={slideNavStyle.liStyle}>
{currentActive == 3 ? (
<label style={slideNavStyle.circle2} />
) : (
<label style={slideNavStyle.circle1} />
)}
</li>
</span>
</ul>
</div>```