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

Efficiently encode and decode JSON data between PHP and JavaScript

I am attempting to convert my array results into JSON format and then transmit them to an AJAX success event using JavaScript. PHP $results = array( "time1" => 1, "time2" => 2, ); echo json_encode($results); JAVASCRIPT ...

phpjavascriptjqueryajaxjson

Sending information to a subpage through props using a query in the URL triggers a 431 Request Header Fields Too Large error

I have a page called campaigns, and I am facing an issue on the index page where I want to pass data to my dynamic page [campaignId].tsx. Although I can see the data on my dynamic page, the URL links are becoming too long, leading to an HTTP Status code 4 ...

javascriptreactjsnext.js

Form submission requires a checkbox to be checked

I have been searching for a way to make checkboxes required. Is there a method similar to using required="required"? Currently, I generate my checkboxes in the following manner and would really appreciate any guidance on this topic. It's crucial for m ...

javascriptjqueryhtml

Guide: Previewing uploaded images with HTML and jQuery, including file names

Any constructive criticism and alternative methods for accomplishing this task are welcomed. I am currently working on writing jQuery code that will allow users to preview file(s) without reloading the DOM. To achieve this, I have been using .append() to ...

javascriptjqueryhtmlcss

Is it possible to refrain from using the object variable name in an ng-repeat loop?

When utilizing an ng-repeat directive to loop through an array, the syntax requires ng-repeat="friend in friends". Inside the template, you can then use the interpolation operator like this {{friend.name}}. Is there a way to directly assign properties to ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Concealing empty rows within a vertical v-data-table using Vue

Below is the code that can be run to showcase my issue. Design: <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" hide-default-header ...

javascriptvue.jsvuetify.jsvue-data-tables

Issue with iframe's size not displaying correctly

<body> <script> document.write("<iframe id='theframe' src='http://www.website.com?testvr=" + testvr + " height='900' width='500'></iframe>"); </script> </body> The iframe is added, but ...

javascripthtmliframe

How can I make the input box TextField in Material UI with React expand to full width when selected?

I am currently customizing a Material UI form where the input box (Text Field) starts off at a width of 200px. My goal is to have the input box expand to 100% width only when it is selected or clicked on. ... <FormGroup sx={{ maxWidth: "200px" ...

javascriptreactjsformsmaterial-ui

Navigate through each of the pictures within the folder and encode them into base64

I'm currently working on a project where I need to convert images in a folder to base64 and then store them in MongoDB. At first, I successfully converted a single image: var filename = '1500.jpg'; var binarydata = fs.readFileSync(filename ...

javascriptnode.jsexpressbase64

Enhancing Nextjs performance for mobile devices

Greetings everyone, I am currently experiencing performance issues on mobile devices. Can anyone provide suggestions on how to enhance the following aspects? https://i.stack.imgur.com/bEmln.png ...

javascriptnode.jscdn

Retrieve the date for the chosen time slot by utilizing the fullCalendar feature

I've been experiencing issues with a piece of code that is supposed to retrieve the date corresponding to a user-selected slot. Here's what I've tried so far: $('.fc-agenda-axis.fc-widget-header').on('mousedown', functio ...

javascriptjqueryfullcalendar

Error: The function 'myAppController' is not defined and is therefore not a valid argument

I am trying to incorporate my service into my controller and print a message to the console (in the Auth Service), but I keep encountering this error: Argument 'myAppController' is not a function, got undefined. Can you help me figure out what I& ...

javascriptangularjsdependency-injection

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

I have a PHP-generated HTML button and I'm having trouble calling the mybtn3() function when it is clicked. The button code looks like this: echo"<td width=14% align=center><input type=button value=Export onclick=mybtn3() /></td>"; ...

javascriptphphtml

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...

javascriptjsonnode.jsoracletypescript

Is there a way to connect a Button to a different page in VUE.JS?

I currently have a button that needs to be linked to another page. This is the code I am working with at the moment. How can we write this login functionality in vue.js? It should direct users to the page "/shop/customer/login" <div class="space-x ...

javascriptvue.js

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

javascripthtmlcssblogs

What is the best way to retrieve the chosen option when clicking or changing using jQuery?

CSS <form name='category_filter' action='/jobseek/search_jobs/' method='get'> <select id="id_category" class="" name="category"> <option value="" selected="selected">All</option> <option v ...

javascriptjqueryjquery-events

Error message: "When using selenium-webdriver in JavaScript, the findElement method for <a> tags cannot be used as a function."&

Seeking the website URL for brand information from this website, I attempted to retrieve it using JavaScript in the console: document.getElementById('phone_number').getElementsByTagName('a')[1].getAttribute('href') However, ...

javascriptseleniumselenium-webdriver

Issues with displaying images in Fancybox

I've integrated FancyBox into my website, but I'm experiencing a minor issue. While the FancyBox works perfectly in Dreamweaver, it seems to malfunction in various browsers. As someone who is not well-versed in programming, I'm struggling t ...

javascriptjqueryfancyboxfancybox-2

Position the div in the center and enhance the function to dynamically adjust when the user attempts to resize the window

var windowHeight = $(window).height(); var windowWidth = $(window).width(); var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max( ...

javascriptjquerycss