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

When attempting to select an option from the dropdown menu, I encounter an issue where the

My code is not behaving as expected. Whenever I click on the child elements, the dropdown changes to display: none. I am encountering an error when clicking on the input frame and displaying:none. How can I resolve this issue? I would like to be able to ...

javascripthtml

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

Adjust index starting from 0 in JavaScript

Struggling with setting a consistently unique index that increments by one. Here is an example of my array: const originalArr = [ { name: 'first parent array', childArray: [ { name: '1 / first child' }, ...

javascriptarraysjavascript-objectsincrementunique-index

Date range within a conditional statement

I have encountered this code snippet: function auto_select_param_call_time() { if (today() == date("02.01.2017") || today() == date("03.01.2017")) { auto_click_param("call_time", "Non-working day"); } else { //Do something else ...

javascriptdateif-statement

Is there a way to determine the model name programmatically within a Sails.js lifecycle callback?

Two models are present, with one model extending from the other. For all sub-models to inherit a lifecycle callback defined in BaseObject, I need a way to retrieve the name of the model being acted upon within the callback. This information is crucial for ...

javascriptnode.js

Utilizing the SmartSuggest jQuery plugin for seamless integration of JSON data

Recently, I acquired the jquery plugin named smart suggest and I am interested in feeding a json array as opposed to just an array. The existing data file, 'sample-data.php', displays: <?php $fruits = '{...}'; $vegetables = '{ ...

phpjqueryarraysjson

Select a Button to randomly choose another Button

I am currently developing a dynamic Bootstrap OnePage-Website using HTML, CSS, and JavaScript. The highlight of this website is the Team section where users can book appointments with one of three team members by clicking on a corresponding button beneat ...

javascriptjquerybuttonbootstrap-4

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

Employing jQuery to populate information into an input field, yet encountering an issue where the data is not being successfully transmitted to

On my page, there is a form with an input box <input name="bid_price" id="bid_price" class="form-control"> If I manually enter a value, it gets posted successfully But when I try to insert a value using jQuery, it doesn't get posted, even tho ...

javascriptphpjquery

Tips for transforming JSON data from a specified URL, which requires authorization, into an HTML table or list using PHP

I am attempting to retrieve JSON data from this source: They have provided a 'how to' guide here: I have successfully connected with Authorization and received the raw JSON, but I am unable to format it into a table. This is the code I have wr ...

phphtmljsonxml

Allow only specific inner divs to dictate the width of the outer div

I'm working with the following HTML structure: <div id="container"> <div id="block1"> <img src="someimage/path" /> </div> <div id="block2"> Some Text </div> <div id="block3"&g ...

htmlcss

Having issues with the onclick() function not functioning properly with Jquery?

Yesterday, I successfully integrated some Jquery code into my website. However, when I attempted to add more code today for a new feature, everything seemed to stop working. Even the code that was functioning perfectly yesterday has now ceased to work. The ...

javascriptphpjqueryajax

Tips for transferring JSON data to a CodeIgniter view

I have a query regarding how to replace a specific section of my webpage with data returned from the controller. Currently, I have a page that displays movie details directly fetched from the database. My goal is to only display movies of a particular genr ...

javascriptphpjqueryajaxcodeigniter

Leveraging a Static HTML landing page template within an Angular 6 application

I currently have an Angular 6 app hosted on example.com, with the dist folder being served on port 5000. Additionally, I have a separate landing page folder with its HTML, CSS, and JS files being served on port 6000 at example.com/welcome. Is there a way ...

htmlnode.jsangularexpressnginx

Adding a promise to an array using Javascript

I am facing an issue while attempting to create an array of promises and then calling them using Promise.all. The problem lies in correctly pushing the functions into the array. It seems like they are getting executed instead of being inserted and waiting ...

javascriptarraysfunctiones6-promise

What's the issue with my jQuery AJAX script?

I am experiencing an issue with my ajax pages using jQuery to retrieve content. Only one page seems to be working properly, even though I have multiple pages set up. How can I resolve this problem? $(document).ready(function() { $('.lazy_content& ...

javascriptjqueryhtmlajax

The Fusion of Ember.js and Socket.io: Revolutionizing Web

I have been trying to incorporate a basic Ember application into the view of my node application. I have verified that Ember is properly set up and my sockets are functioning correctly. However, I am encountering an issue where the data is not being displa ...

javascriptnode.jssocketsember.jsejs

What's the best way to stack two input fields vertically and combine them into a single unit?

My goal is to have two inputs placed inside a container, one above the other with no space in between and without separate borders for each input. I am using Bootstrap, but so far my attempts with vertical alignment have been unsuccessful. Here is the code ...

htmlcssinputbootstrap-4alignment

What steps can I take to trigger a 404 error instead of a cast error?

My route is defined as /mysafe/idofthemodel. When the idofthemodel is not found, it throws a cast error Cast to ObjectId failed for value "something" (type string) at path "_id" for model "modelname". Instead of this error, I ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to have an image fill the remaining space within a 100vh container automatically?

I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...

htmlcss