How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app.

<section class='todoapp'>
  <header id='header'>
    <img src="../assets/logo2.png" />
    {{input type='text'
            class='new-todo'
            placeholder='What else is in your wallet?'
            value=newTitle
            enter='createTodo'}}
  </header>

My objective is to place an image next to the placeholder text before a user interacts with the input field. I'm assuming I can't include it within the 'value' attribute, so would I need to manipulate the .new-todo class in CSS to insert the image?

javascriptcssember.js

Answer №1

Utilize CSS to customize your backgrounds:

background: url('[image-url]') no-repeat; background-position: 10px;

You can adjust the position of the background by altering the pixels.

If you wish to hide the image when the element is focused, use :focus pseudo-class in CSS and set background: none;:

.element-class:hover { background: none; }

Additionally, you have the option to create a div with contenteditable attribute in HTML. By doing this, you can implement a custom placeholder function using JavaScript to add images to the placeholder within the editable element.

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

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

What is the difference in behavior of v-for when using numbers versus template literals? Consider the following scenario: new Vue({ el: "#app", }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div i ...

javascripthtmlvue.jstemplate-literals

Utilizing reference memory to enable communication between two controllers

Within my Angular application, I have implemented a service to facilitate communication between 2 controllers and allow them to share the input variable from the search box. I am using kickSearch.box to reference memory...obj.property. However, there seem ...

javascriptangularjs

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: https://i.sstatic.net/UoMs ...

cssreactjsmaterial-uiflexboxstyled-components

ESLint and Prettier are butting heads when trying to run their commands consecutively

My package.json file includes two commands: "format": "prettier --write \"{src,{tests,mocks}}/**/*.{js,ts,vue}\"", "lint": "eslint . -c .eslintrc.js --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue ...

javascripttypescriptvue.jseslintprettier

Tips for avoiding the display of concealed forms on a webpage

Hey there, I'm just starting out with html forms and currently experimenting with Jquery to hide forms upon loading the page. However, I've encountered an issue where some forms briefly appear before hiding after the page finishes loading. Here& ...

javascriptjqueryhtml

utilizing Javascript to insert a class with a pseudo-element

Witness the mesmerizing shining effect crafted solely with CSS: html, body{ width: 100%; height: 100%; margin: 0px; display: table; background: #2f2f2f; } .body-inner{ display: table-cell; width: 100%; height: 100%; ...

javascripthtmlcss

ReactJS: The function .useSelector() is not defined

I've been following a tutorial for a while and hit a roadblock trying to understand this. Both metaphorically and literally. On the Dashboard page, I attempted to use useSelector() to access the state of the goalSlice component. This component is ver ...

javascriptnode.jsreactjsredux

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

htmlcss

Maximizing Server Performance with Query Data Caching

I am currently developing an Express app that involves transferring data from views to a database. However, the majority of the data needs to be linked to other data within different tables in the database. For instance, there is a "choose student name" d ...

javascriptnode.jsdatabaseexpressmemcached

Real-time updates for UI data in Next.js Firestore are not being reflected

I'm currently working on implementing real-time changes using nextjs and Firebase Firestore. However, I've noticed that I still need to refresh the page in order for the updates to be visible. const [getUsers, setUsers] = useState(""); const che ...

javascriptfirebasegoogle-cloud-firestorenext.js

Modify the database once authorized by the administrator

`I have a webpage that showcases testimonials. I am looking to only display the testimonials with a "status" of "1" in my database. How can I quickly update the "status" column from "0" to "1" right after the admin clicks on update? I am also incorporati ...

javascriptphpjquerymysqlajax

After fetching an HTML snippet using the $.get() method, Font Awesome icons are no longer visible

Experimenting with creating a seamless 'single-page' experience, I've managed to achieve this by implementing an event listener in jQuery for menu link clicks. This triggers the replacement of the existing content in my main div with an HTML ...

jqueryhtmlcssfont-awesome

Tips for avoiding background color interference with raycaster

In my current three js scene, I have a ground, sky, and various objects. I want specific objects to change color to red when the mouse hovers over them, but not all objects should do this. Currently, everything I touch turns red, which is not what I want. ...

javascriptthree.jsraycasting

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

How can I apply the bold attribute to the currently selected nav bar item? <ul class="nav"> <li role="presentation" ng-repeate="item in items" ng-class="{'active':navLink == item.header}"> </li> &l ...

javascripthtmltwitter-bootstrapcss

Is it possible to utilize CSS alone to change the color of a certain image to white against a black background?

I specialize in crafting dark theme versions of popular websites using CSS. One challenge I often face is dealing with images like the ones below: Websites typically use background-image to showcase these images. However, when I use filter: invert(1) to ...

cssimageuser-interfacefirefoxcolors

Check the validity of your JavaScript files with our convenient online tool!

Is there a website or online tool available to validate the syntax of JavaScript code in a file? I am experiencing problems with Internet Explorer 7 while running JavaScript, so I want to make sure my JavaScript file is valid. ...

javascript

There was a syntax error found in the JSON input when $.ajax() was utilized, resulting in

I'm currently working on a website that requires implementing a chat feature. The project is running locally, but I've encountered an error: SyntaxError: Unexpected end of JSON input Despite searching online for a solution, nothing seems to w ...

javascriptjqueryjsonajax

Display title upon hovering over image linked to mysql with php

Is there a way to display the image title when hovering over images connected to MySQL using PHP? Below is the code I have been using: <div class="galleryko"> <?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?> <div clas ...

phpjavascriptmysqllightbox

A div positioned to the left is placed beneath another div

I am faced with a design challenge involving two divs. The first div is floated left, while the second div is floated right. In order to achieve a responsive layout, I need the first div to go under the second div when the viewport changes. Both divs conta ...

csshtml

Trigger an event when hovering over a disabled item in React using material-ui's tooltip feature

I've been trying to figure out how to hover over a disabled item with a tooltip, but it seems that disabled items don't trigger any events. I attempted wrapping my elements in another div as a workaround, but unfortunately, it didn't work. I ...

javascriptreactjsmaterial-uitooltip