Looking for a solution to add "data-hover" to menu items on Wordpress, like:
Wanting to insert:
data-hover="ABOUT US"
into
<a href="#">ABOUT US</a>
without manually editing the link's HTML to make it:
<a href="#" data-hover="ABOUT US">ABOUT US</a>
Struggling with Wordpress's complexity and can't find a way to do this without using javascript. Any suggestions or ideas would be greatly appreciated!
$(document).ready(function() {
$('a').each(function() {
$(this).attr('data-hover', $(this).text());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">ABOUT US</a>
<a href="#">FOO BAR</a>However, I strongly advise making changes to the actual presentation rather than resorting to this makeshift solution.
For an easy solution, simply insert the following code snippet into your functions.php file within your theme:
add_filter( 'nav_menu_link_attributes', 'add_custom_data_atts_to_nav', 10, 4 );
function add_custom_data_atts_to_nav( $atts, $item, $args ) {
$atts['data-hover'] = $item->title;
return $atts;}
Give this a try and hopefully it resolves your issue!
I have integrated a div tag into my contact form to contain the captcha elements. If the user is unable to read the captcha image, I want to provide them with an option to refresh that specific section without reloading the entire page. I have tried variou ...
Assuming function( arg1, arg2 ), is it true that arg1 will always evaluate before arg2 (unlike traditional C)? Is there a way to create a function where arguments are not evaluated immediately, but only on demand? For instance, in if( cond1 || cond2 ), c ...
I'm currently trying to design a page layout that includes three fieldsets. My goal is to have the first one span across 100% of the width, with the other two positioned side by side below it at 50% width each. However, I am struggling to achieve thi ...
Currently, I am facing a challenge while working on an application that contains nested Iframes within the user interface. Some of these Iframes undergo refreshing during the test execution process. Is there any approach that allows us to simulate the refr ...
I'm facing a simple problem in JavaScript that I can't seem to crack. Admittedly, I am new to working with JavaScript. My issue lies with sorting a dropdown list in alphabetical order while also keeping the selected value at the top. Whenever a ...
In my HTML file, I have included all the necessary JS and CSS files. Then I load a content page within it. Some of these content pages contain Usernames where I want to implement a tooltip feature. Here is an example of how they are structured: <user ...
For my jQuery code, I wanted it to run immediately after the template view was loaded and the DOM was modified. To achieve this, I initially used the $viewContentLoaded event in my controller. $scope.$on('$viewContentLoaded', function(){ // ...
So here's the situation: I've managed to insert and delete records from a form using jQuery and PHP scripts to interact with a MYSQL database. However, I'm facing a challenge when it comes to updating data that has been retrieved from the da ...
It's interesting to note that the response time from the database might be causing a browser to crash after 10 minutes. In the ajax call, all data from a specific table is being requested and then parsed into a div. The database table isn't very ...
Looking to extract data from a form and store it in FormData: const handleSubmit = (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); const formData = new FormData(e.target as HTMLFormElement); const value = formData.get(' ...
I recently created a customized navbar using a script to add a hover effect to the menu links. You can find the script I used here: https://github.com/shadeed/underliner. Although I was able to get it partially working, there are still some issues. The we ...
Need a solution to only accept numbers that do not start with zero, but can contain zeros after the first digit. Currently using var.replace(/[^1-9]/g, ''); which prevents input of 0 altogether. Examples of valid inputs: 10 9990 Examples of in ...
Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...
I am trying to create a method where I can provide a DOM as a parameter and retrieve data from image_preview. The goal is to make image_preview reusable instead of hardcoding it inside the function. Additionally, I want to separate image_preview.model() an ...
I am currently working on implementing inline CRUD operations in MVC 5. When a user clicks a specific button to add new records, it should create a dynamic table row. Below is the JavaScript code I am using: function tblnewrow() { var newrow = ' ...
I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...
Currently, I am utilizing Material UI to create a theme that is functioning correctly. However, upon adding <CssBaseline/> to the App.js file, it unexpectedly changes the background color to white instead of the intended #1f262a specified in the inde ...
TL;DR I encountered an issue with the native Node.js Readline module. Once a question is asked using rl.question(query[, options], callback), it seems there is no straightforward way to cancel the question if it's pending an answer. Is there a clean ...
Currently, I'm in the process of developing an interactive map with specific functionalities. Essentially, the user will click on a year (stored as var currentyear) and then select a country (its name stored as var thenameonly). Subsequently, an AJAX ...
I'm facing an issue where the Backbone/Marionette Controller and Collection are not fetching properly. define(["jquery", "backbone","models/Poi"], function($, Backbone, Poi) { // Creating a new instance of Backbone Poi class object ...