How to insert hyperlinking anchors throughout an OJS 3.1.2 site (system links inclusive)?

What specific page are you looking at, and what theme are you using when you don’t see the breadcrumbs on the search page?

The search/ URI and the search/search/ URI both show the breadcrumbs for me in the Default theme.

The locale key “about.editorialTeam” is specific to this page and is used in the navigation menu and page title. If you are OK with this being changed to “Editors”, you can update the translation(s). If you only want to change the page title and to leave the menu entry as-is, you would need to edit the key and create a new Remote Menu Item with the old phrase, or edit the source files to use a new key.

Neither search nor search/search show the breadcrumb in Bootstrap 3 theme after its latest (May) update. To be honest, I’m not sure if it used to show it before the update.

How do we update translations?

By the way, whenever I create or update a Navigation Menu’s added item its title disappears in both backend and frontend. You then have to manually re-enter the title in the Title field of the added item’s form. Is there a quick fix for this bug?

Another bug: whenever accessing Settings->Website the sidebar blocks get shuffled so their order is changed. You then have to reorder them by dragging into desired positions. This is annoying. Is there a fix for that bug?

Let’s keep this topic related to the navigation menu anchors and breadcrumbs.

For the Navigation Menu title issue, see this thread:

For information on updating translations, see:
https://docs.pkp.sfu.ca/translating-guide/en/2-3-editing-existing#using-the-translation-plugin-tool

For the bug on sidebar blocks, can you open a new thread in the forum, describing exact steps to reproduce the issue?

1 Like

Duly noted, but you replied to all other issues from my last post except the one about breadcrumbs (on search pages).

The fix you provided for Navigation Menu’s added items/custom pages losing title upon creation or edit has worked. Thanks!

As for translation, your link is about installing a new plugin. But that seems too much of a burden on our OJS installation just for translating one term (two words). Can you please answer a previous question: is it generally possible to change/translate a single output string in OJS using a filtering function in config.inc.php, like it can be done in WordPress and other platforms?

There’s no steps to recreate, you simply access Settings->Website and the sidebar blocks are reordered.

1 Like

The bootstrap theme doesn’t have the breadcrumbs in the template:

Please do create the other threads and feel free to tag me in them for the new translation and block ordering questions.

2 Likes

I was able to translate the page heading and breadcrumb of the EditorialTeam page in Bootstrap3 to the desired string (“Editors”), thanks. The only problem is the browser’s tab not taking the edit of the call to header.tpl correctly and displaying ##Editors## instead of “Editors” (without quotation marks)? As a temporary solution then, I just kept the call part so that the browser tab only displays journal name:

{include file="frontend/components/header.tpl"}

So is the browser tab somehow related to the actual file name and so it can’t be cheated like this (so that it too display just “Editors” (without quotation marks))? If so, then the above temporary solution would become a permanent one, as I don’t want to play with the file structure.

Here’s the new thread about the block re-ordering.

1 Like

The parameter here will be a translation key, not a translated string. The hash marks surrounding the string indicate that this “key” is untranslated.

Additional details on this, including how to directly edit the locale XML files without the Translator plugin is found in the Translation Guide (per the earlier link). To discuss translations in more detail, please open a new thread dedicated to the subject.

Thanks but translation for this seems like too much work for little gain.

One more thing @ ctgraham if I may: is there a quick (ready-made) way in OJS3 to make the Navigation Menu sticky (fixed at the top upon scrolling for the 1+ height of the screen down)? I tried pretty much all solutions from around the Internet, but to no avail. It seems there’s some confusion with classes, much like that backend alert color that wouldn’t be changed easily.

I don’t have a ready-made suggestion here, but this would be a function of CSS. You would want to style the nav class with a fixed position and manual assignement of the left and top. For example (in the default theme):

nav.pkp_navigation_primary_row {
  position: fixed;
  left: 0;
  top: 0;
}

This will depend substantially on the theme used. Ideally, to avoid any class confusion, this would target an id instead of a class. You would need to add that id manually into the template(s), if desired.

Thanks @ ctgraham, I’m aware of that solution but it just forces the navigation bar to stick at all times. (By the way, the controlling class for this in Bootrstrap3 is .navbar.navbar-default, and the ID is headerNavigationContainer - so either will do your trick.)

What I need though is a solution that will stick the navigation bar only after the user scrolls down for 1 or more screens. So it is a combination of CSS and JS, like in this example. However, nothing seems to work on OJS3 with Bootstrap3, regardless if the script is entered in the top or the bottom panel of Custom Headers Plugin.

What specific code did you try, and what was the result?

I modified CSS in that example by replacing .content class with .pkp_structure_page (the main content class in Bootstrap3):

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .pkp_structure_page {
  padding-top: 60px;
}

.pkp_structure_page {
	padding: 16px;
}

And the JS remains the same:

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

But when I apply the above, nothing happens: no visible changes. Really confusing is the navbar ID in the script - is this the ID we’re supposed to assign to the site’s <body> tag? Also, I sense based on your example above, that class .sticky is actually the .navbar class of Bootrstrap3 and that .navbar should be modified as such (without introducing the new .sticky class at all)?

The general idea of this script is that everytime the window moves (window.onscroll = function()) , we’re going to check to see if the window has scrolled past the top of the navbar ( if (window.pageYOffset >= sticky) {). If so, we apply the “sticky” class, which fixes the position at the viewport’s 0. If not, we remove the “sticky” class, allowing the navbar to flow normally.

The navbar is identified by an id, also “navbar” (var navbar = document.getElementById("navbar");).

This code should work if you target the id of the navigation in the Bootstrap theme, which based on your previous comment would be:

var navbar = document.getElementById("headerNavigationContainer");

That worked, thanks @ctgraham! While implementing this, I noticed that the content in Bootstrap3 is not controlled by pkp_structure_page class, but by .pkp_structure_content.container class instead. I also had to assign some z-index to prevent other objects overlaying the sticky bar. Here is my code now:

.sticky {
	position: fixed;
	top: 25px;
	width: 100%;
	z-index: 1;
}

.sticky + .pkp_structure_content.container {
	padding-top: 100px;
}

with JS going into the bottom panel of the Custom Header Plugin:

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("headerNavigationContainer");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

The values of top and padding-top in the above CSS code should be adjusted according to different scenarios. The above values worked for our site.

There’s just one slight problem though: now the internal tags to the #nav-menu anchor don’t work, for example the famous “Top of page” link that is often seen at the bottom of long (most often: bootstrap) sites, is now a dead link, meaning clicking on it results in no action because the anchor is now already (always!) present on the (top of the) screen you’re at. I fixed this by simply prepending the hyperlinking anchor with a ? like so:

?#nav-menu

But there’s another issue I wasn’t able to solve, of the old navbar disappearing a bit sooner than the sticky takes over, so there’s appearance of a sudden jump of the sticky into the position. Any idea how to avoid this, and to make the transition from navbar to sticky seemingly smooth?

This will be a function of your .sticky class’s top attribute in combination with the #headerNavigationContainer id’s offsetTop value. The top attribute repositions the navbar, and the offsetTop identifies when that occurs. Given that you have moved the top down 25px, you probably need to do the same to the calculation logic:

  if (window.pageYOffset + 25 >= sticky) {

Where do you put that?

That came from the javascript snippet.

I see, thanks. However, that made things worse.

I forgot to mention that the major cause of the jump is in mouse-wheel scrolling. When I use focus-scrolling, or when I drag the sidebar to scroll, the transition to sticky is smooth (but not any more after I insert your “+ 25” offset).

I’m pretty much guessing as to the cause of the issue based on your code snippets above. I still think this will be related to the interaction of the .sticky element’s top attribute, the #headerNavigationContainer element’s offsetTop value, and the javascript comparison which determines at what point to apply the sticky class. You also seem to be experiencing a javascript UI or timing interaction. Sorry I can’t help more than that.

But I narrowed the problem down to the mouse-wheel scrolling only. Isn’t that type of scrolling related to browser/CSS, not JS?