Problem with image title in jQuery mobile

My code seems to be having an issue where the title does not display completely when hovering over it. For example, if the title is set as "The Value", only "The" is shown and not "The Value". Can anyone help me identify the mistake? Thank you in advance.

var str1 = "The Value";
var str;
if (str1.length > 10) {
                        str = str1.substring(0, 10);
                        str = str + "...";
                    }

<li><div id=' + itemId + ' class="append_content" title=' + str1 + '><div class="append_pic"><img style="width:54px; height:54px;" src='+icon+'></div><div class="append_text">' + str + '</div></li>
javascriptjqueryhtmlcssjquery-mobile

Answer №1

Your attribute definitions are missing the proper encapsulation. It is crucial to use ="'+ value+'" when the value has spaces in it. Take a look at the following example: 

name=' + var1 +'

should be 

name="'+ var1 +'"

Make sure to apply this format to all attributes in your code.

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

Using CSS Classes with PHP Variables in Conditionals: A Handy Guide

I have limited experience in programming and I'm attempting to edit a .php file within a Wordpress theme. Please keep this in mind as I explain my issue. Within the theme, there is code that calculates the average score from 1 to 10 and then displays ...

phpcsswordpress

Styling Options for Material-UI Tables: Enhancing the Look of Your Table Components

I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the tab ...

htmlcssmaterial-ui

Is it possible to turn off wrapping behavior within a div using CSS3 or Bootstrap?

Currently, I am working with code that utilizes Bootstrap 2. <div class="row-fluid"> <div class="span4">Some text 1</div> <div class="span4">Some text 2</div> <div class="span4 ...

htmlcsstwitter-bootstrap

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

javascriptjquerycssbootstrap-4

Explore the wonders of generating number permutations using JavaScript recursion!

After providing the input of 85 to this function, I noticed that it only returns 85. I am confused as to why it is not recursively calling itself again with 5 as the first number. console.log(PermutationStep(85)); function PermutationStep(num) { var ...

javascriptrecursionpermutation

Navigating post upload using Laravel 5.1 and ajax

I've been experimenting with Laravel for a few days and I'm attempting to create an upload form that doesn't redirect the user to a different page upon file submission. Instead, I want a message like "Success" to be displayed on the same pag ...

phpjqueryajaxlaravelfile-upload

A handy hack for eluding XSS attacks

Recently, I found out that my html/php website is susceptible to XSS attacks. Is there a method to clean my data other than having to manually include `htmlspecialchars` for every variable sent to the webpage (there's a chance of missing some and stil ...

phphtmlxss

Shared Vue configuration settings carrying over to Jest spec files

For my unit testing of components using VueJS and Jest, I'm incorporating the Bootstrap Vue library for styling. To address console warnings regarding unknown plugins, I've set up a configuration file: import { createLocalVue } from '@vue/t ...

javascriptunit-testingvue.jsjestjsvue-test-utils

Revamping the Bootstrap framework in a major project

Currently, I am undertaking a project that involves the use of bootstrap 2.3.2 stylesheets along with bootstrap 3.0.0 .js scripts. The client side technology is significantly outdated and my primary objective is to update the bootstrap files to leverage th ...

csstwitter-bootstrapbootstrap-4

"Fill the designated area on the webpage with data retrieved from an external script

In my current project, I am utilizing Angular and JQuery to enhance re-usability by setting the header and footer as partials. However, I encountered an issue where I needed certain javascript functions to be executed within the footer upon loading - a tas ...

javascriptjqueryangularjs

Sending arrays in JSON format using Node.js Express (res.json)

I have a code snippet like this: app.get('/orders/:pizzeriaID/:status', async (req, res) => { try { const requestedOrderByPizzeriaID = req.params['pizzeriaID']; const requestedOrderByStatus = req.params['status']; ...

javascriptnode.jspostgresqlexpress

Looking to set up an event handler for the browser's back button in next.js?

When my modal opens, it adds a hash to the URL like example.com/#modal. I want to be able to recognize when the back button is clicked in the browser so I can toggle the state of the modal. The challenge is that since I am using next.js (server-side rend ...

javascriptnode.jsreactjsnext.js

Transform the v-model value from numerical to textual representation

Currently, I am using the <q-select> component and populating it with options fetched from an API. The issue arises when setting the value as the ID of the object, which is a number while the component expects a string, resulting in an error. <s- ...

javascriptvue.js

Create a dynamic feature on a JSP page that allows users to click a button and instantly see changes

How can I create a button on an HTML or JSP page that, when clicked, will dynamically add content to the same page? For example, imagine I have a JSP page called Prescription.jsp with input forms like: ID name select commodity weight tolerance ...

htmljsp

Programmatically control the opening and closing of a React Material UI Snackbar component

Currently, I am facing some challenges while working on programming a Single Page Application (SPA) using React and Material-UI. In my project, I have created a modal login box that gets triggered by a button on the navigation bar. Upon clicking submit, I ...

javascriptreactjsmaterial-ui

Remove the JSON key from all array elements while preserving their child elements

I have an array of JSON objects that looks like this: var array_json = [{"my":{"id":144,"price":12500000}}, {"my":{"id":145,"price":13500000}},{"my":{"id":146,"price":13450000}}, {"my":{"id":147,"price":11500000}},{"my":{"id":148,"price":15560000}}] My g ...

javascriptarraysjson

The 'in' operand is invalid

I am encountering a JavaScript error: "[object Object]" TypeError: invalid 'in' operand a whenever I attempt to perform an AJAX request using the following code: .data("ui-autocomplete")._renderItem = function( ul, item ) { return $( " ...

javascriptajax

What benefits does JavaScript offer with the strategy of storing functions within variables?

Lately I've come across some code where functions are being stored inside variables and then called in the typical way. For example: var myFunctionName = function() { Code Here... } myFunctionName(); I'm aware that there may be numerous b ...

javascriptfunctionvariables

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

javascriptcssreactjsmaterial-uimakestyles

What could be causing Nextjs13 to fail in recognizing an authentication route, resulting in a 404 error?

I have been working on a project utilizing NextJs v13 with Strapi v4 as the backend. My project includes separate layouts for the site, login, and dashboard. While working on the login section, I implemented NextAuth for authentication. However, upon submi ...

javascriptauthenticationnext.jsbackendstrapi