Showing information from the data text option

I'm having trouble displaying text below the cube. The code works fine in a standalone fiddle, but it doesn't work when I incorporate it into my project. Can someone help me figure out how to show the value of data-text="Cube1"?

Code that works: http://jsfiddle.net/PKwDp/4/

Code that's not working: http://jsfiddle.net/rajkumart08/EDKkg/1/

  $('document').ready(function () {
            window.setTimeout(function () {
                $('.cubeCell').each(function () {
                    var htmlText = $(this).attr('data-text');
                    $(this).append('<div class="cubeTextStyle">'+htmlText+'</div>');
                });
            }, 600);
            
        });


<div  data-text="Cube1" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">testing</div>
javascriptjquerycssjquery-uijquery-events

Answer №1

The issue with the example provided is that the element with the data-text attribute does not contain a cubeCell class.

This snippet shows the HTML from the jsFiddle:

<div  data-text="Cube1" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">testing</div>

UPDATE:

Following changes on the jsFiddle, the text is now being inserted correctly. However, it remains hidden behind the cube itself due to a CSS discrepancy. The CSS code differs significantly in the non-working version compared to the functional one.

UPDATE 2:

The CSS for div.cubeTextStyle is absent. The correct styling should resemble this in the functional example:

div.cubeTextStyle {
  position: relative;
  top: 105px;
  background: none !important;
  color: #333 !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

Answer №2

I think the proper way to access data attributes is by doing something along these lines:

$(this).data('text').val()

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

Learn how to showcase specific row information in a vuetify data table on Vue.js by implementing icon clicks

I am currently working on a Vuetify data table that showcases order information, with an option for users to cancel their orders by clicking on the cancel icon. Upon clicking the cancel icon, a confirmation overlay pops up displaying the specific order id. ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Retrieve information in JSON format from a document

I'm trying to extract data from a JSON file without knowing the exact location of the data. Here is an example JSON: var names= [ { "category":"category1" , "name1":"david", "name2":"jhon", "name3":"peter" }, { "category":"catego ...

javascriptjson

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

javascriptreactjsnext.js

Create a circular shape using CSS that dynamically adjusts its size to match the width

Can you help me with a CSS challenge? I need to create circles around elements on a webpage, but my code is not working perfectly. The width of the circle is off and I can't seem to center it properly. The width does not match the content (it is alw ...

htmlcss

Error Encountered with Google Authentication in Localhost:3001 - Warning of 'Blocked Access'

Encountering a Next-auth Google authentication issue on my localhost development setup. Admin side (localhost:3000) and client side (localhost:3001) of e-commerce website are separate instances. Error message "access blocked" when trying Google authentica ...

javascriptnext.jsgoogle-oauthnext-auth

Error occurs despite successful 200 response from Ajax delete request

I've been working on setting up a simple API for my project and encountered an issue. When I send a DELETE request using jQuery Ajax, the request goes through successfully, deletes the specified entry in the database, returns a status of 200, but trig ...

javascriptphpjqueryajaxhttp-delete

Accessing a JSON string correctly using JavascriptSerializer in JavaScript

When working with JavaScript, I encountered an issue where the data retrieved from a data table and converted to javascriptSerializer was not refreshing correctly when changing dataset selection parameters. The problem occurred when trying to populate a ne ...

javascriptvb.netjsonserialization

Disabling and enabling a link before and after an AJAX call using jQuery

I have been trying to disable a link before making an ajax call and then re-enable it right after receiving the response. However, my current approach doesn't seem to be working as expected: jQuery(this).prop('disabled', false); Here is my ...

javascriptjqueryajax

Drag and drop non-event elements onto events using jQuery FullCalendar

I'm facing a challenge with dragging and dropping an employee name onto an event using jQuery UI draggable/droppable. I want to drag an employee (as shown in the picture) onto an event, but the 'employee' is not an event itself. <script& ...

javascriptjqueryjquery-uifullcalendar

Every time I click a button, I am trying to add JSON objects into an array and then show the outcomes

Currently, my goal is to create a random selection feature from an array that users can contribute to by clicking a button. I am a bit unsure about how to proceed with this task. The application is developed in React and it utilizes the movieDB's API ...

javascriptreactjs

Tips for avoiding automatic updates to .js scripts after pressing F5

Is there a method to stop a JavaScript script from resetting when the user refreshes the page? For instance, if I have a picture slider that is constantly changing images, I would like the script to continue where it left off instead of starting over wit ...

javascriptjquery

When using React-hook-form, you need to tap twice to delete the last character in the input field, and double tap to enter the first

I have been using React Hook Form to validate my form with multiple inputs. Everything works perfectly, except I noticed one issue where I have to press the backspace key twice to delete the last character and also twice to enter the first character. For e ...

javascriptreactjsreact-hook-form

When attempting to initiate a new session, Webdriver.io receives an HTML response from selenium

Currently, I am attempting to execute my selenium tests using webdriver.io. However, the test runner is encountering failure when attempting to establish a session: [18:12:36] COMMAND POST "/session" [18:12:36] DATA {"desiredCapab ...

javascriptseleniumwebdriver-io

Is Your Website Sluggish because of an Excessive Amount of JavaScript on Page

After finally resolving some of the Javascript issues I was facing, I have streamlined my code to utilize just one library now, which is a huge improvement from how chaotic it was before. However, I have noticed a slight delay in the page load time, and I ...

javascriptjqueryhtmlaudiolightbox

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Struggling with linking my Angular Controller with my View and experiencing difficulty establishing a connection

I'm encountering an issue while attempting to link a controller to my view. The error I keep receiving is as follows: Error: ng:areq Bad Argument Argument 'TestAppCtrl' isn't a function, received undefined Here's the content ...

javascriptangularjsviewcontroller

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

This is the given Object: [ { "id": "1709408412689", "name": "WB1", "children": [ { "id": "1709408412690", "n ...

javascriptnode.jsarraysobject

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

htmlcss

Guide on resolving a "res is not defined" issue in Node.js

I've been struggling to test the controller logic for a user validation module, but I keep encountering an error that says "res is not defined" even after trying to define it. How can I properly define it so that it runs through the condition statemen ...

javascriptnode.jsexpressmongoose-schema

Use joi to validate the entire request object

In order to ensure the validity of request input before calling the controller logic, I developed a middleware for that purpose. Let's suppose we have a route for "getting user by id". const usersController = require('../controllers/users.js&ap ...

javascriptnode.jsexpressjoi