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
Related
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 :)
When we are using keyboard only and tab through the website, the first anchor link for "Skip to a content" is shown to skip the navigation and focus to the main content which makes the web page accessible. It is easy to add such a feature on multi-page website where there is full page reload and the focus for the page resets. I am looking similar behavior on the React. How can we implement such behavior on a Single page application built on React?
I disagree with Graham that you shouldn't need a skip to content link. In a SPA, when the user navigates to a new "page," the focus remains on the link that was pressed. Every time your user wants to navigate, they're going to have to go through the remaining nav menu to get at the content.
You could either move focus to the beginning of the document so they hit your 'skip to content' link each time (has its merits because it's most like multi-page apps which they're likely to be familiar with) or move it to the content body itself and save them a click (seems more streamlined to me, but might be unfamiliar to your users).
componentDidMount() {
setTimeout(() => document.getElementById('your-element-of-choice').focus(), 0)
}
I'm leaning toward the latter, but this will work either way you decide to implement it. Don't forget to set the tab index on the element you want to focus on to -1 as well.
You shouldn't need a skip to content link on a SPA other than the one you already have (for first time load for return visitors).
Skip to content is for when you click a link to a new page, it helps avoid having to listen to the menu every time you navigate.
With a SPA that isn't an issue as everything is done via AJAX, when I click a link a region on the page will get updated with new content.
All you need to do is move focus to the region that is being updated from the menu item.
Certain screen readers will need explicit ARIA Live Regions in order to register the new content so make sure you test it with a screen reader.
Where you will run into accessibility problems pretty fast in SPAs are when you start thinking about delays.
What happens if I click that link and the page takes 3 seconds to load?
What happens if the page doesn't load at all?
Those are your bigger challenges with a SPA.
I'm trying to build an Android & iOS app using Nativescript core (Javascript). Here in app-root.xml I've a tabview in which I've 3 tabs. Each of the tabs data are related with one another. Example in first tab I show a list of products with 'Favourite' option for each items, if I favourite a product it should show in the second tab. But in my app since the Tabs are loaded while the app is opened the changes are not reflecting when the tabs are selected. But If I close and open the application the changes are shown in the Tabs. Please tell me How I could re-load the tab each and every time when it is selected.
Thanks in advance. Apologies for my poor language.
Generally with web apps you will have a single container and a tab like view above / below container, tapping on specific tab will load correspondent tab item within the container.
But with mobile apps the TabView component loads all tabs on its own container, so it won't have to reload tab when you switch between tabs. That's totally the expected behaviour.
You may use services / BehaviorSubject etc., to hold the dependent data, so when you change it form one tab, the other tab gets updated too.
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.
JQuery UI tabs are implemented by named anchors in an unordered list. When you hover over one of the tabs you can see this in the link shown at the foot of the browser:
http://mysite/product/3/#orders
Above would be the "orders" tab for example. JQuery obviously intercepts the click to this anchor and opens the tab instead.
However if I bookmark the link above or link to it from elsewhere in the site the page does not open on the specific tab.
In the tab initialisation block I was considering putting in some code that looks for a named anchor in the URL and, if it finds one, does an index lookup of the tabs and calls the select on it. This would mean it will still work with JS switched off.
But is there an easier/nicer/better way?
Found this example here:
if(document.location.hash!='') {
//get the index from URL hash
tabSelect = document.location.hash.substr(1,document.location.hash.length);
$("#my-tabs").tabs('select',tabSelect-1);
}
As of version 1.8 jQuery UI supports this functionality. See example here:
Second tab active by default
Third tab active by default
In versions of jQuery UI prior to 1.8 (not inclusive) that's pretty much the way you would have to do it. The tab extension (AFAIK) doesn't know to switch based on which anchor it is initialized with (when the page loads) so you have to do that bit manually (in the ready event, of course).
As another answer indicates, the new version of the tabs in jQuery UI 1.8 supports bookmarking out of the box.
I use the Session plugin to accomplish this in a custom tab class