Issues with Weglot link hooks not functioning properly within the sticky header

I have integrated Weglot for translations on my website, aigle.ca. Due to issues with their widget, I am using link hooks instead. You can find more information about link hooks at: weglot.com link-hooks

However, when scrolling down the page and the menu becomes sticky, the links stop working properly as they only anchor to the top of the page (due to being hashtags). Additionally, the active language indicator does not display correctly during scroll.

I attempted using e.preventDefault(); to prevent this issue but it did not resolve the problem. It is perplexing why a sticky header would disrupt the functionality of the Weglot plugin.

If anyone has insights into what might be causing this or suggestions for a solution, please let me know.

javascript

Answer №1

It appears that your sticky header is generated dynamically, causing it to remove the event listener on the Weglot button.

Could you please update the link from #Weglot-xx to javascript:Weglot.switchTo('xx')

Regarding the styling, you can apply a rule like this:

html.fr a.top_link[data-dropdown-rel='fr'] { text-decoration: underline }

Kind regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring jQuery Mobile: Uncovering the Power of clientX, clientY, and taphold Event

In my current project, I am implementing the taphold event and require the coordinates of the tapped point by the user. However, I have encountered an issue where event.clientX and event.clientY are returning as undefined (you can see the example here: her ...

javascriptjqueryjquery-mobile

The script ceases to function once the page is loaded from a JSON file

I'm facing an issue on my shopping website where the items and products are loaded from a JSON file. The problem is that once the page has loaded, the script fails to work properly. If the items take a little longer to load on the page, the script doe ...

javascriptjqueryjsonweb

Jquery auto-suggest form validator

I have implemented a search dropdown menu using jQuery. Everything is working fine, and the 'not match' message displays properly when entering data that does not match any items. However, if I select an item from the dropdown and then modify it ...

javascriptjquery

Nuxt - Dynamically manage routes while utilizing server-side rendering functionality

Hello! I have a question for you: I have: a Nuxt app set up with target: 'server' in the nuxt.config.js an API that provides me with a template associated with a given path (for example, /person/maxime will return template: PersonsSingle) a vue ...

javascriptvue.jsnuxt.js

Tips for displaying an object's key/value pairs on a webpage

I'm attempting to use jQuery's .each() function to write the key/value pairs from an object onto the page. However, I am only able to get it to display the last key/value pair. If you want to check out a code example and demo, here is the link: ...

javascriptjquery

Is it possible to refresh data efficiently using web scraping tools, similar to how it

While researching web scraping in Python, I consistently found references to BeautifulSoup and Selenium as the primary tools for retrieving HTML and JavaScript content from websites. One thing that has eluded me is finding a method to automatically update ...

javascriptpythonseleniumbeautifulsoupscreen-scraping

What is the process for uploading files with just node.js?

My dilemma involves a webpage featuring a form with a file input field. Upon submitting the form, I wish for the server to write the file on the server side. Despite numerous attempts to upload various test images using this form, each results in a plain ...

javascriptnode.js

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

javascriptjqueryhtmlreactjs

Regular Expression to Replace Characters Not Matching

I am struggling with a coding issue that involves manipulating a string. The original string I have is "Hello This is world This". Here is the code snippet I have tried: var patt = 'Hello This is world This' var res = patt.constructor; alert( ...

javascriptregex

Encountered an error with the post request in expess.js: TypeError - Unable to access the property 'fullName' as it is undefined

Hey everyone, I'm new to Express and having trouble posting data from Postman. The error message I'm getting is "TypeError: Cannot read property 'fullName' of undefined". Does anyone have any suggestions on how to fix this? Thank you! ...

javascriptnode.jsmongodbexpress

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...

javascripthtmlcssvalidationbrowser

Trouble persisting values with Heroku due to variable issues

Here is a concise example: let value = null; const getValues = () => { fetch('/third-party-api') .then(res => res.json()) .then(data => { value = data; }) } getValues(); app.get("/values", async (req, res) ...

javascriptnode.jsexpressheroku

Labeling src library files with namespaces

I have developed a ReactJS website that interacts with a library called analyzejs which was created in another programming language. While I am able to call functions from this library, I do not have much flexibility to modify its contents. Up until now, ...

javascriptreactjstypescriptnamespacestype-declaration

Issues with AJAX junk appearing after the document element in Firefox are causing disruption

Currently, I am utilizing a page fetch script to dynamically insert a web page into a div element on my site. Let's take a look at the code. By the way, I am running this on Firefox with Kubuntu. function fetchContent(URL, divId) { req = wind ...

javascriptajaxxmlhttprequestinnerhtml

Why does jQuery val() function fail to clear readonly input date in Firefox but succeed in Chrome?

When using JQuery.val(''), I noticed a difference in behavior between Firefox and Chrome. You can see the issue demonstrated in this jsfiddle: https://jsfiddle.net/mdqfbj/d4eovkg8/3/ A JS function triggered by a radio button is supposed to clea ...

javascriptjquerygoogle-chromefirefoxreadonly-attribute

Combine angular ui router templates using grunt into a single file

Currently, I am working on an angular-ui-router project that consists of 150 files scattered all over. My goal is to create a grunt task that will merge all these files into a single index.html file structured like this: <script type="text/ng-template" ...

javascriptnode.jsangularjsgruntjs

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

javascripthtmlangularjs

Error: ajax is not defined and needs to be declared (repeated twice)

Currently, I have a form that requires processing using Ajax. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="column1"> <form class="form box" action="javascript:networkCheck();" ...

javascriptphpjqueryhtmlajax

Dealing with errors using Javascript and Node.js (then/catch)

Suppose I have the following pseudocode in my routes.js file: var pkg = require('random-package'); app.post('/aroute', function(req, res) { pkg.impl_func(data, function (err, result) { myFunction(entity).then(user=>{ ...

javascriptnode.jsexpresserror-handlingtry-catch

Utilize setState in a ReactJS function within an if statement towards the end

Help needed! I'm facing issues trying to use the function setState within an if statement inside another function. Specifically, I'm working on creating a series of Tab components with inline styles that determine their visibility. Before returni ...

javascriptreactjsmaterial-ui