I have a page with an embedded iframe script I am using with the Next-script tag.
script-page.tsx
import Script from 'next/script';
import Layout from '~/common/layout/Layout';
const ScriptPage = () => {
return (
<Layout>
<div className="m-0 md:m-12">
<div id="embedded-pressroom" data-publisher="212312" />
<Script
type="text/javascript"
src="my-link"
/>
</div>
</Layout>
);
};
export default ScriptPage;
It is showing the content if I go directly into the href, i.e localhost:3000/p/script-page/ but it is not showing if I go into localhost:3000/p/home-page/ and navigate back to the script page.
This is my navbar:
import Link from 'next/link';
const Navbar = () => {
return (
<div className="px-6 md:pr-0 navbar-content">
<h2>Navigation</h2>
<ul>
<li>
<Link href="/home-page">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/script-page">
<a>Script</a>
</Link>
</li>
</ul>
</div>
);
};
export default Navbar;
What is happening, why do I have to refresh the script-page in order for the content to be shown when navigating internally with Next-Link. It shows if I directly go in to the script page, but if I do:
Script Page
Navigate to Home Page
Go back to Script Page
I get "[iFrameSizer][Host page: embedded-pressroom-iframe] [Window focus] IFrame(embedded-pressroom-iframe) not found" in the console.
What can I do to fix this?
Related
I have onClick events in my html that calls a function to get the alt value of each list item (so getting the movie name). I want the next step to simply get the single value that the function got and insert it into a separate webpage. How would I go about doing it? I gave it a try but I'm still very new to react, so I'm aware this doesn't work.
My html:
<div class="now-showing">
<ul class="movie-items">
<li>
<img src="/images/movie-a.jpg" alt="Movie A">
<button>BOOK</button>
</li>
<li>
<img src="/images/movie-b.jpg" alt="Movie B">
<button>BOOK</button>
</li>
<li>
<img src="/images/movie-c.jpg" alt="Movie C">
<button>BOOK</button>
</li>
</ul>
</div>
Script:
// getting movie name for movie bookings
let filmTitle = [];
function getMovieName(e) {
let link = e.target;
let img = link.closest("li").querySelector("img");
let item = img.alt;
filmTitle.push(item);
};
// input movie title to schedule page
function AddTitle() {
return (
<div className="schedule-heading">
<h2>Step 1: Select screening for {filmTitle}</h2>
</div>
)
}
ReactDOM.render(<AddTitle />, document.querySelector('.screenings'));
So far on my second webpage, I'm only getting "Step 1: Select screening for". What changes or additions would I need to make?
there what's wrong with your code:
first: u can't make img alt that saved by function exist when page reloading. so use ReactRouter instead if u wants to move to another page without reloading.
and make everything in pure react.
otherwise the img alt need to be stored in cookie or your server side.
second: react won't rerender without calling useState hook. so for react filmTitle will always blank. or u can also store it in another library for managing react state data like redux or mobx.
note this code snippet doesnt run properly because stackoverflow blocked it.
so u need to run it in your own project.
const {
BrowserRouter, Routes, Route, Outlet,Link,useNavigate} = ReactRouterDOM
function MyMovie(props){
let navigate = useNavigate();
const [data,setData] = React.useState([
{imgsrc:"/images/movie-a.jpg",imgalt:"Movie A",href:"/bookticket"},
{imgsrc:"/images/movie-b.jpg",imgalt:"Movie B",href:"/bookticket"},
{imgsrc:"/images/movie-c.jpg",imgalt:"Movie C",href:"/bookticket"}])
const bookMovie=(v)=>{
props.setFilmTitle(v.imgalt)
navigate(v.href)
}
return <div className="now-showing">
<ul className="movie-items">
{data.map(v=>
<li key={v.imgalt}>
<img src={v.imgsrc} alt={v.imgalt}/>
<button onClick={()=>bookMovie(v)}>BOOK</button>
</li>)}
</ul>
</div>
}
// input movie title to schedule page
function AddTitle(props) {
return ( <div className = "schedule-heading" >
<h2 > Step 1: Select screening for {props.filmTitle} < /h2>
</div>
)
}
function Page(){
return <div>
Welcome!
<Outlet/>
</div>
}
function App(){
const [filmTitle,setFilmTitle] = React.useState([])
return <BrowserRouter>
<Routes>
<Route path="/" element={<Page />}>
<Route index element={ <MyMovie filmTitle={filmTitle} setFilmTitle={setFilmTitle}/>} />
<Route path="bookticket" element={ <AddTitle filmTitle={filmTitle}/>}/>
</Route>
</Routes>
</BrowserRouter>
}
ReactDOM.render( <App /> , document.querySelector('.screenings'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/history#5/umd/history.development.js" crossorigin></script>
<script src="https://unpkg.com/react-router#6/umd/react-router.development.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom#6/umd/react-router-dom.development.js" crossorigin></script>
<div class="screenings">
</div>
I have following code:
// App.js
useEffect(() => {
ReactTooltip.rebuild()
}, [])
// index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="tooltip" data-for="tooltipStep" data-tip="tooltipStep_1"></div>
<div id="root"></div>
</body>
// MyTooltip.js
import ReactTooltip from "react-tooltip";
import ReactDOM from "react-dom";
import React from "react";
import classes from './MyTooltip.module.css';
const MyTooltip = (props) =>
<React.Fragment>
{
ReactDOM.createPortal(
<div>
<div className={classes.backdrop} />
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>
</div>
,
document.getElementById("tooltip")
)}
</React.Fragment>
export default MyTooltip;
The problem is that when I unmaximize the browser window, tooltip disappears when cursor is positioned beyond the browser window. Also tooltip disappears if scrolling occurs. I have to point cursor to the navigation bar and then back to the webapp for tooltip to show up again after scrolling.
How could I make react-tooltip always visible no matter what?
Thanks in advance.
React tooltip comes with different attribute that includes scrollHide (default is true) and resizeHide (default is true).
You can just set them to false;
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
scrollHide={false}
resizeHide={false}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>
I have a popover menu in my header displaying products. When clicking on the first one, regardless of which one on the list, it navigates correctly to the path "products/some-product". But if I'm on one of the product pages already, and I'm trying to navigate to another product it adds the "products/" again in the URL. E.g. "products/products/some-product".
I'm using Next.js 11 and Link.
Below is part of my code handling the list of products with navigation:
<div>
{products.map((item) => (
<Link href={`products/${item.href}`}>
<a
key={item.name}
>
<div>
<item.icon
aria-hidden="true"
/>
</div>
<div>
<p>
{item.name}
</p>
<p>
{item.description}
</p>
</div>
</a>
</Link>
))}
</div>
I have a menuData.jsx component to keep track of all my products, which I then import to the file above. Here is an example from the menuData.jsx file:
export const products = [
{
name: "some-product",
description:
"Some description",
icon: CheckIcon,
},
]
Can you spot what I'm doing wrong? :)
Just add a / in front of products in the href:
<Link href={`/products/${item.href}`}>
You are linking to relative paths, which, when you are on /products, will be /products/products:
import React from 'react';
import '../styles/animation.css';
const Animation = ({ name, gif, description, link }) => {
return (
<div className="block">
<div className="naslov-link">
<h3>{name}</h3>
<span className="animation-link-header">
Visit
</span>
</div>
<img src={require(gif)} alt={name}/>
<p>{description}</p>
</div>
);
}
export default Animation;
gif is location of the image that is taken from database, I tried logging it and it works, but image
can't be loaded. I get:
Error: Cannot find module '../images/placeholder.jfif'
on line :
<img src={require(gif)} alt={name}/>
also tried
<img src={gif} alt={name}/>
Then I don't get error but image can't be loaded, I get the alt text
So I'm trying to create a navigation for my single page app that will smooth scroll down to the section of the page.
I want to have my navigation at the top of the page with links that when a user clicks, will smooth scroll them down to the section of the page. I'd also like it so if the user goes directly to the link website.com/about for example, it will smooth scroll to the section the same way as if you clicked about on the navigation component.
I understand how the react-router-dom works for routing pages, but I'm confused on how to make it work for this particular purpose.
Could this be achieved with HashRouter?
Here's the code I currently have:
function Header() {
return (
<>
<Link to="/">Hero</Link>
<Link to="/">About</Link>
<Link to="/">Contact</Link>
</>
);
}
function Hero() {
return (
<section>
<h1>Hero Section</h1>
</section>
);
}
function About() {
return (
<section>
<h1>About Section</h1>
</section>
);
}
function Contact() {
return (
<section>
<h1>Contact Section</h1>
</section>
);
}
export default function App() {
return (
<div className="App">
<BrowserRouter>
<Header />
<Hero />
<About />
<Contact />
</BrowserRouter>
</div>
);
}
I'm also providing a CodeSandBox, forks are appretiated! :)
What you could do is use an anchor tag instead of Link from react-router-dom and have an id on the sections. when the anchor tag is clicked scroll to the corresponding section
<a
href="/"
onClick={e => {
let hero = document.getElementById("hero");
e.preventDefault(); // Stop Page Reloading
hero && hero.scrollIntoView();
}}
>
Hero
</a>
// Rest of Code
function Hero() {
return (
<section id="hero">
<h1>Hero Section</h1>
</section>
);
}
and to scroll to a section using a url path you would have to get the extract the path from url and scroll to the section that has that specific path as an id
useEffect(() => {
let url = window.location.href.split("/");
let target = url[url.length - 1].toLowerCase();
let element = document.getElementById(target);
element && element.scrollIntoView({ behavior: "smooth", block: "start"});
}, []);
CodeSandbox here
Hope This Helps
To allow the link to update in the address bar, use the answer from #Abdullah Abid but change the <a> tags to <link> and the href to to.
See my ammendment to Abdullah's Sandbox Here