Revamp the current webpage to display attribute values in textual format

As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness.

The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the title as a tooltip. With 50 movies displayed per page, it can be quite tedious to view all the ratings this way.

I attempted to modify the page using the Chrome plugin Stylebot, but unfortunately, my efforts were unsuccessful. (I even reached out to the website owner for assistance...)

Is there a technique to have the tooltip display at all times? Placing it right after the image would be ideal – there is ample space for the additional text.

Here's the code snippet:

<div class="showtitle">
    <a target="_blank" href="htts://www.imdb.com/title/tt1254207/">
        <img src="imdb.png" style="" title="Rating: 6.7/10 (1573 votes)">
    </a>
</div>
javascripthtmlcssattributesstylebot

Answer №1

Just set up the RWeb Chrome Plugin, allowing custom JavaScript coding.

This code snippet is functional, but any suggestions for improvement would be appreciated – not very experienced with JavaScript yet ;)

ready(function() {
var showtitleList = document.getElementsByClassName("showtitle");
for (var i=0; i<showtitleList.length; i++) {
  var elementAList = showtitleList[i].getElementsByTagName("a");
  if(elementAList.length>0){
    var aImgElement = elementAList[0].getElementsByTagName("img");
    if(aImgElement.length>0){
      var imdbRating = aImgElement[0].title;
      elementAList[0].innerHTML = imdbRating;
    }
  }
}

});

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

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all ...

javascriptjqueryhtmlcssajax

What is the process for creating a global variable in JavaScript?

Having trouble changing the value of "invocation_num" within a loop? I attempted to modify it as follows, but ended up with an undefined value. Any help would be greatly appreciated. $(document).on("click", '.favoret', function(){ document ...

javascriptjqueryhtmlcss

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize

unable to retrieve value from JSON object

It appears that I'm having trouble accessing my object variables, most likely due to a silly mistake on my part. When I console.log my array of objects (pResult), they all look very similar with the first object expanded: [Object, Object, Object, Obj ...

javascriptjsonobject

How to access a controller function within a recursive directive template in Angular version 1.3?

In my parent directive, I am able to access controller functions using the $parent operator. However, this method does not work in recursive child directives. Here is a shortened example of the issue: // Sample controller code (using controllerAs):--- va ...

javascriptangularjsweb-applicationsangularjs-directivefrontend

"Responding to an Ajax request with a .NET Core server by sending an xlsx

My web application exclusively supports .xlsx files. I have implemented a function in my controller that converts .xls files to .xlsx format successfully. When trying to open a .xls file, I send it via an Ajax request. However, the converted .xlsx file do ...

javascriptexcelajaxasp.net-core.net-core

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Issue with automatic form submission

What is the best way to automatically submit my form once the timer runs out and also when the refresh button is clicked? I have encountered an issue where every time I try to refresh the page, it prompts for user confirmation. If I click cancel, it stay ...

phpjavascript

Using AngularJS to Send Elements to Scripts and Selectors

When I use the following template: <div id="container"> <textarea name="message"></textarea> <button value="send" ng-click="testMethod($parent)"> </div> In the JavaScript code: $scope.testMethod = function(element) ...

javascriptangularjs

Is it possible for the original object to be altered when passing it as a parameter to a function in a different file?

When you update an object passed as a parameter, will the updates be reflected "upwards" if the method receiving the parameter is in a different file? Or will the object retain its own context despite being passed down? ...

javascript

Framer Motion's AnimatePresence feature fails to trigger animations when switching between pages

I'm running into issues with the Framer Motion library, specifically with the AnimatePresence transition. I've managed to make it work in normal situations, but when I encapsulate my Routes within a custom implementation, the exit animation fails ...

javascriptreactjstypescriptframer-motion

Is it recommended to update my peer dependencies when upgrading my RN version?

Recently, I took on the task of updating my old project from RN 0.61.x to 0.70.x and react 16 to react 18. During this process, I encountered a challenge with dependencies that were tied to older versions of React Native in their peer dependencies. This is ...

javascriptnode.jsreactjsreact-nativenpm

Incorporating Javascript jQuery functionalities from an external file

I have encountered an issue when trying to run my index.html file with the control.js file that I outsourced. It seems like they are not working together properly: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.c ...

javascriptjqueryhtml

Issue with Struts 2 tag causing malfunction in validating the collection

When iterating through a list in a JSP file using Struts 2 tags, the code below is used: <%@ taglib prefix="s" uri="/struts-tags"%> <head> ... The issue arises with date validation. The following line of code does not work: <td><s:d ...

javascriptjquerystruts2

Challenges arise with CSS alignment when adding d3.js charts to a webpage

I'm puzzled by the empty space that appears between the left column (highlighted in the image) and the header. This peculiar gap only seems to occur when the middle column is filled with a chart. I've scrutinized the code using Chrome Developer t ...

javascripthtmlcssd3.js

Tips for concealing a dynamic table element in Angular 9

I have dynamically generated columns and rows in a table. Here is my HTML for the table component: <table id="tabella" class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th *ngFor="let header of _ob ...

javascripthtmlangularfrontend

Tips for altering the label color of an md-input-container after text has been entered

Is there a way to dynamically change the color of an md-input-container label after certain input is added? The default grey color gives the impression that the field is disabled. I specifically want to modify the color of the label "Description" when the ...

cssangularjs

From Google Assistant to Python Results

Is there a way to control a Bitcraze Crazyflie drone using Google Home? I'm looking to give the command "Drone fly to x3 y4" which will be processed through Firebase and result in the Google Assistant Output: "Flying to x3 y4". Additionally, I need an ...

javascriptpythonnode.jsgoogle-assistant-sdk

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

htmlcssreactjsmobiletailwind-css

Retrieve the attributes of DOM elements following a successful AJAX request

Is there a way to retrieve the video duration using video.duration following my ajax video upload? Despite achieving ajax success, this function continues to return NaN. I have attempted methods such as $.when().then or $.when.done() but with no success. ...

javascriptjqueryajax