Ways to incorporate additional CSS after an image has been uploaded

Question

Ways to incorporate additional CSS after an image has been uploaded

I'm having an issue with the text box not completely staying inside the gray area when I upload an image. Is there a way to automatically expand the gray area where the text box is located when an image is uploaded? Thank you!

Check out the code on Jsfiddle

let cssProps = {
  'font-weight': '',
  'font-style': '',
  'text-decoration': ''
}

$('input[name="textStyle"]').change(function() {
  const val = $(this).val()
  if ($(this).is(':checked')) {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = 'bold';
        break;
      case 'italic':
        cssProps['font-style'] = 'italic';
        break;
      case 'underline':
        cssProps['text-decoration'] = 'underline';
        break;
    }
  } else {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = '';
        break;
      case 'italic':
        cssProps['font-style'] = '';
        break;
      case 'underline':
        cssProps['text-decoration'] = '';
        break;

    }
  }
  $('textarea[name="styledText"]').css(cssProps)
});
var loadFile = function(event) {
   var image = document.getElementById('output');
   image.src = URL.createObjectURL(event.target.files[0]);
};

javascript html jquery css

Answer 1

Answer №1

To achieve this, you can utilize a `load` event listener and then add a specific class to the element in order to style it accordingly:

image.addEventListener('load', () => {
  image.classList.add('loaded');
});

For example, consider the following implementation:

const url = 'https://cdn.pixabay.com/photo/2021/04/02/23/33/annas-hummingbird-6146187_960_720.jpg';
const image = document.getElementById('image');
image.addEventListener('load', () => {
  image.classList.add('loaded');
})
image.src = url;

img.loaded {
  border: 5px solid red;
}

<img id='image' width='200'/>

Answer 2

To achieve this, you can utilize a `load` event listener and then add a specific class to the element in order to style it accordingly:

image.addEventListener('load', () => {
  image.classList.add('loaded');
});

For example, consider the following implementation:

const url = 'https://cdn.pixabay.com/photo/2021/04/02/23/33/annas-hummingbird-6146187_960_720.jpg';
const image = document.getElementById('image');
image.addEventListener('load', () => {
  image.classList.add('loaded');
})
image.src = url;

img.loaded {
  border: 5px solid red;
}

<img id='image' width='200'/>

Ways to incorporate additional CSS after an image has been uploaded

Answer №1

Similar questions

Animated CSS sidemenu (utilized as a filtering panel for a table)

Tips for utilizing comment tags efficiently

The PurgeCSS CLI does not generate CSS files beyond the command line interface

What is the best way to retrieve data from a child component using v-if in Vue.js?

Using XSLT to convert HTML into the desired text format

Align the child element to the baseline and have it aligned to the right within an `<li>` list item

Enable the expansion of a div by dragging and dropping an image onto it

No response received from Node server following successful data insertion into MongoDB

Mistakes in serializing arrays for javascript in an ajax request

Ready to learn how to capture user input from a form and then send that data via email using an ajax request

Employing an odd/even toggle for assigning class names

Using ASP.net MVC 4 to Implement Validation with Bootstrap Modal and PartialView

What is the best way to replicate text in ReactJS?

Adding a query parameter to a dynamic route in NextJS

What is the best way to properly format letters with accents (such as French letters)?

Is it possible to use require() to read a .json file from a dependent library?

The previous callback function is behaving strangely

Execute JavaScript code once all the AngularJS template directives are fully loaded

Is there a way to properly structure the json data displayed in my network tab on Chrome?

Having trouble retrieving input data from a modal pop up with Angular.js