Using a Jquery function to modify CSS if the image fails to load

I am in need of creating a function that will remove padding from my image-holder element if an image fails to load.

$("img").error(function(){
        $(this).css({padding-right:"0px"});
});
.image-holder {
  height: 100px;
  width: auto;
  display: block;
  float: left;
  top: -4px;
  position: relative;
  clear: both;
  padding-right: 25px;
}

img {
  height: 100px;
  width: auto;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-title">
              <div class="image-holder"><img src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" alt="">
              </div>


              <div class="cfp-heading">
                <p class="cfp-title">Journal Of Network Theory In Finance</p>

                <p class="cfp-subtitle">Call for papers</p>
              </div>
            </div>

Here is the code I have created to address this issue, but it seems to be causing errors. My goal is simply to...

If the image does not load, remove the right-padding (or add padding-right: 0px;). Any assistance would be greatly appreciated

Answer №1

This code is functioning perfectly for my needs:

$(function(){
    $("img").error(function(){
        $(this).parent(".image-holder").css({"padding-right":"0px"});
    });
})

Answer №2

$(this).css("padding-right","0");

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

What causes Ajax to consistently redirect to a different page following a successful response or error?

I'm new to working with AJAX and I want to utilize it to update data on my page without reloading while also displaying error or success messages. However, when I attempt to submit the form, it redirects me to another page showing validation errors/su ...

Unable to concentrate on text field within jQuery UI button while using Internet Explorer

I am developing a single-page application where users can drag "items" from one container to another and arrange them. Some items will have static text labels, while others will include text input boxes. To enable the dragging, dropping, and sorting funct ...

Enhance the efficiency of DataTable by optimizing cell class modifications

I have been very pleased with the performance of jquery DataTables, but I have encountered a situation where I need to optimize it further. Specifically, I am updating the class of a cell based on its data. Currently, I am achieving this by using the ren ...

What is the best way to switch out src="name1" with src="name2"?

Hey everyone! I had this idea, but I'm struggling with how to bring it to life. Is there a way to ensure that when you press ctrl + shift + i or f12, a specific part of the html code changes? For example: changing SRC="video.MP4" to SRC="error.MP4" ...

Retrieve the post ID from the existing URL via AJAX in order to fetch data associated with that particular ID

Currently, I am facing an issue while trying to pass the id from the current URL to the select.php page. The error displayed is 'id not defined' and as a result, no data is being fetched. My goal is to retrieve data for the suporder index from th ...

Vue JS: Extracting both the unique ID and value from an array of input simultaneously

I am new to Vue and currently exploring its capabilities. I am experimenting with the Element UI for Vue's user interface. Specifically, I am working with the Input Number Component, to manage an array of data. Let's assume my data is structured ...

Create a page turning effect in React that simulates scrolling a certain amount at a time

Is there a way to disable default scrolling and have the page automatically scroll to the next item? For example, if I have element2 below element1, how can I set it up so that when I scroll down once, the page scrolls directly to the position of element2 ...

Reach the underlying DOM element <input>...</input> using styled-components

I am struggling to make changes to the styling of an <input /> wrapped in a React component using styled components. The style I want to override is visible in Dev Tools here: .ui.input input {...} I believe the wrapping component needs to pass th ...

Tips for aligning and merging table headers in HTML

Is it possible to center and span the "MyTable" heading using both HTML (the center tag) and CSS? I've tried adjusting text-align, positioning, and more but haven't been able to achieve the desired result. <!DOCTYPE html> <html> ...

What are some effective ways to propose horizontal lines as useful breaks for web page layout?

I'm currently working on enhancing the print layout of my web pages using CSS. One issue I've encountered is figuring out how to properly handle page breaks. I have managed to avoid breaks in the middle of images and text blocks that should stay ...

Issues with font face rendering on Android Chrome and Firefox devices

I'm currently encountering an issue with the font face in CSS3. The code I have been using is as follows: @font-face { font-family: James Fajardo; src: url('https://www.twoseven.nl/kurkorganicwines/wp- content/themes/kurk/fonts/James_Fajardo.t ...

Looking for assistance with CSS coding for an XML table

Struggling with styling an XML file into a table using CSS. Despite multiple attempts, I just can't seem to achieve the desired look. Provided below is my XML code. Seeking assistance from anyone who can offer a solution to this perplexing issue. &l ...

What is the best way to create a dropdown menu that smoothly slides in from the bottom of the screen?

Is it possible to create dropdown menus in the navigation bar that slide in from the bottom with a smooth transition effect, similar to this example: Although I am working on building my own template, so my code may differ from the original theme. Here is ...

Having trouble sending a JavaScript variable to PHP via AJAX

I am attempting to pass a JavaScript variable (a value obtained when a user chooses a random option from a select dropdown menu) into a PHP variable in order to check the attributes of the selected option in my database. The option corresponds to the name ...

Tips for obtaining and sending the items chosen in your shopping cart

Is it possible to retrieve and submit the selected item(s) in a shopping cart? In the demo below, I have two questions: 1. Currently, I can only manually retrieve one item. How can I retrieve all selected items? 2. If nothing is selected, I would like ...

The Same Origin Policy issue rears its head again, this time

Currently, I am in the process of developing both the front-end (HTML-jQuery) and back-end (PHP) of a Web Service. Working on my localhost using XAMPP (Apache), I decided to keep my front-end and back-end in separate projects in Eclipse for organizational ...

What could be causing the first bar in Chart.js to appear smaller or not show up at all?

Hey there, I'm currently working on displaying some bar charts using Charts js. However, I've run into an issue with the first column not showing up correctly. Here is my code snippet: var options = { scales: { yAxes: [{ display: tru ...

extracting a HTML element from a website using BeautifulSoup

Image description is: https://i.sstatic.net/m4gxX.png Tag is: https://i.sstatic.net/skHQc.png I attempted to extract data from the stock dropdown menu but encountered a problem while trying to access the information. I identified the tag in the source ...

Change the shadow of the text to the rear side

I'm attempting to give some text a 3D effect by applying a shadow, but I am struggling to position the shadow behind the text. No matter how I adjust it, the shadow ends up either on top or completely distorted. Here is a link to a JS Fiddle with my c ...

Node.js - Error: Undefined:0 SyntaxEncountered an unexpected end of input syntax error

Exploring Node.js and Backbone.js for the first time. Using the book "Backbone Blueprints" but encountering issues with the provided code to set up the webserver. Node.js is installed and running fine. Here's the package.json code: { "name": "simp ...