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

execute a setTimeout function in ReactJs to render a component after a specified amount of time

Is there a way to render a component inside my App.Js after a certain amount of time using setTimeout? I've tried, but nothing seems to be happening... This is my code: function App() { return ( <Router> <GlobalStyle /> ...

javascriptreactjssettimeout

Determining the browser width's pixel value to enhance responsiveness in design

Lately, I've been delving into the world of responsive design and trying to grasp the most effective strategies. From what I've gathered, focusing on content-driven breakpoints rather than device-specific ones is key. One thing that would greatl ...

javascripthtmlcssresponsive-design

"Implementing a random color generator using jQuery for each individual

Currently, I am facing an issue with a function where I am attempting to assign random predefined colors to my divs and keep track of how many times each color has been used. Below is the HTML code: <div class="change_color2" id="rand_1"></div&g ...

jquery

If the condition is true, apply a class with ng-class when ng-click is triggered

I am facing a situation similar to toggling where I am adding the class col-xs-6 to divide the page into two views. Initially, when I click, I set a variable value as true and in ng-class, I check for a condition to append the col-xs-6 class. Below is the ...

javascriptangularjs

What are the best techniques for streamlining nested objects with Zod.js?

As a newcomer to zod.js, I have found that the DataSchema function is extremely helpful in verifying API data types and simplifying the API response easily. However, I'm curious if there is a way to streamline the data transformation process for myEx ...

javascripttypescriptzod

Instead of loading JSON contents using jQuery AJAX at page load, consider loading it dynamically while typing in the search box

It's odd that there is an XHR request for search results as soon as my page loads. Even though it's hidden from the user, a substantial amount of json data is being loaded. Take a look at my code: $.ajax({ type: "POST", url: "http://localho ...

phpjqueryajaxjsoncodeigniter

Guide to setting a default child route in react-router and updating the URL as needed

Currently, I am utilizing react-router v3 and have a segment of my routing code as follows: ... <Route path='dashboard' component={Dashboard}> <Route path='overview' component={Overview}/> <Route path='scan&apo ...

javascriptreactjsreact-router

Is it possible to save the project by generating incremental JSON diffs?

In the process of developing a web-based paint program, I have implemented a system where the user's artwork state is saved as a json object. Each time an addition is made to the client's undo stack (which consists of json objects describing the ...

javascriptdjangojson

Mastering the placement of lights in ThreeJS

Struggling for nearly half an hour now, attempting to place a pointlight at the base of my model, but achieving dismal outcomes. Not sure of the dimensions of my model, and consistently failing to accurately pinpoint the light within the scene. Thought ab ...

javascriptthree.js

Error: Syntax error - V token not recognized

Although this question is quite common, I am interested in understanding the theoretical reason behind it. I am attempting to send two encrypted values to my service. Javascript var encryptedlogin = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(Ema ...

javascriptangularjsjson

What can you do with a 2D array and getElementsByTagName?

My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...

javascripthtmlgetelementsbytagname

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T ...

javascripttypescriptvue.js

Using EJS to Render a Function Expression?

Has anyone been able to successfully render a function call in express using EJS? Here's what I've tried so far: res.render("page", { test: test() }); Can someone confirm if this is possible, or provide guidance on how to call a function fr ...

javascriptnode.jsexpressejsserver-side-rendering

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this: const products = [ { product: 'prod_aaa', name: 'Starter' }, { product: 'prod_bbb&apos ...

javascripttypescript

What are some different methods for avoiding the default submission behavior of a form?

As someone with some experience in PHP, I am interested in learning Ajax jQuery. I have been exploring various tutorials on how to submit a form without refreshing the page. I've noticed that different techniques are used to prevent the form from subm ...

phpjqueryajaxforms

Using Lightmaps with Three.js

Is it true that lightmaps function independently of other textures? It seems like I need to establish a second set of UVs. I've exported my JSON object with a second set of UVs and included the following code snippet: geometry.faceVertexUvs[0] = ge ...

javascriptthree.js

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

I'm currently grappling with understanding Angular (2+), the HttpClient, and Observables. I'm familiar with promises and async/await, and I'm trying to achieve a similar functionality in Angular. //(...) Here's some example code showca ...

javascriptangulartypescriptpromiseobservable

Leaflet.js obscuring visibility of SVG control

I am currently working with Leaflet 0.7.1 and I am looking to create a radial menu (similar to openstreetmap's iD editor) using d3 and display it on top of the map. I have come across some examples that use Leaflet's overlayPane to append the svg ...

javascriptleaflet

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: Initially, everything seemed fine. However, upon viewin ...

csstextresponsive-designstylingtext-alignment

Ways to retrieve the scroll position of content within an iframe

I have a webpage with an iframe that loads another webpage. <iframe id="siteframe" style="width: 400px; height: 400px;" src="http://www.cnn.com"></iframe> I am looking to retrieve the scroll position of the content inside the iframe using Jav ...

javascriptjqueryhtmliframescroll