How to refer to a part of the html block in reactjs - javascript

So, I want to refer to a particular part of a page, in react js
as we do using a Link .
But when I do it using an <a> anchor tag, the page is getting reloaded.
I dont want the page to reload and scroll down to that required part of the page.
For example, open reactjs documentation. : ReactDocs
and scroll down, There you see a Try React Heading, just as we hover on it, we do see a link icon , and clicking on it, we just scroll down and Try React Heading is the top part of the Page now.
Is there a way we can achieve that using the <Link>from React-Router-Dom </Link>
I want that feature, in react without reloading the page.
thanks in advance :)

Related

Tailwind styling not working after navigating from another page in Next.js

I am building a site using Next.JS and tailwind.
On the homepage, the content in the wrapping divs in the project section displays in the centre.
However, when I navigate to my about page using the navbar link, and then return to the homepage, the content in the divs no longer displays in the centre (it displays to the left). This issue is not solved unless I refresh the page.
Any ideas how I can solve this issue please?
Thanks very much
When changing routes to your about page and back, the class of the child element under projects changes from col-span-3 content-center place-items-center md:mx-40 to ProjectSection_proj1Left__CTWEv. I guess that is why it breaks. So check if you set this somewhere (maybe even by accident).

React.js see tab name only after tab is clicked?

in my React.js project I am using react-helmet to manage tab names. Also I got a table with different page names. When I right click on those pages and open them in a new tab, I cannot see tab name until tab is clicked (see the pic below). So I need to see tab names right after right click and open in a new tab menu. Could anyone advice what is the reason for this and how this can be fixed? Thank you.
Helmet internally uses requestAnimationFrame which doesn't run for background tabs, so unless you focus on the tab the title won't change
However helmet provides a defer prop which if you set to false, the requestAnimationFrame will be skipped
use it like
<Helmer defer={false}>
{/* Your data */}
</Helmet>
Linked github issue

JavaScript Image Slider in Oracle_ADF 12.2.1

I am trying to implement an animated Image Slider(using HTML) on my website homepage using Oracle-ADF 12.2.1 . The javascript I am using renders the properties in the initial page load but when I navigate back to the page the animation disappears. Could anyone please help me with this?
"when I navigate back to the page the animation disappears”
Presumly you are using an “af:button” to navigate back to your page.
Try adding partialSubmit=“false” to that button. It will reload the entire page, therfore it will act as if you open the page for the first time.

Javascript href link not working outside of the menu

I'm editing a website and I can't get it to work properly. I'm using a responsive menu to go between pages (stays in the same page but changes out the page elements). The code for it is here.
Now I'm trying to include a link in the text of the page (as opposed to just in the menu)
Here is the code for that plus the menu.
The link won't work at all. What am I doing wrong?

Slidemenu won't load the first time in JQuery Mobile App

I have a Jquery Mobile app with a slidemenu in the global page, and it appears with the press of a button or a swipe on the screen, facebook style. My problem is that the first time the app loads, the menu never pops out, even if you press the button a thousand times. You have to refresh the page and then in works in all the pages of the app for the lifetime of the session. If you logout and enter again, you need to refresh.
You can see a example here: http://cic-team.no-ip.biz:9090/apex/f?p=112:2 User: Demo Passw: 1234abc
The menu it's in an "After Header" region as a "List: Menu" type with this custom template: http://i236.photobucket.com/albums/ff289/Best1989/template.png
The button has the following attributes:
data-slidemenu="#slidemenu" data-slideopen="false" style="margin-left:0px !important;"
Maybe the Javascript or the CSS are not loading correctly the first time, but inserting the menu in other region has not worked for me. I'll gladly read your suggestions and comments.
I'm using Apex 4.2.0.
Thanks in advance.
With some research I found the answer to my question, please check this:
http://www.gajotres.net/how-jquery-mobile-page-handling-affects-javascript-executions/
The problem was that I wasn't loading the menu classes at the Login page (which is the first of all) and when you actually got to the page where the button and menu is displayed, it didn't load the classes.
Solved the problem loading the components in the first page but keeping them hidden.

Categories