The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article.

When using the plugin, this code is transformed: 

<pre class="arrows-and-boxes"> (Src) > (Target) </pre>

into this format: Src --> Target

The issue I am facing is that if I call this code before the onload function, it works perfectly fine. However, when called after or within the onload function, the formatting is not applied.

$("#canvas").append("<pre class=\"arrows-and-boxes\"> (Src) > (Target) </pre>");

I have also posted the same question here.

javascriptjquerycsspre

Answer №1

The new plugin introduces a jQuery function known as .arrows_and_boxes(). By applying this function to the recently created element, you should see desired results:

var $newElement = $("<pre class=\"arrows-and-boxes\"> (User) > (Admin) </pre>");
$("#canvas").append($newElement)
$newElement.arrows_and_boxes();

Check it out on Fiddle: http://jsfiddle.net/1p7hz799/3/

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

Update to the viewport meta tag in iOS 7

Anyone experiencing problems with the viewport tag after updating to iOS7? I've noticed a white margin on the right side of some sites. Adjusting the initial scale to 0.1 fixed it for iPhone but made it tiny on iPad 3, which is expected due to the low ...

javascripthtmlioscssmobile-safari

Unleashing the power of async/await in React: A comprehensive guide

Looking to simplify my code, I am interested in implementing async and await for the following code snippet. However, I am unsure of how to proceed. Any examples would be greatly appreciated. deletePost = (post) => { var post_id = post; try { ...

javascriptreactjs

Using JQuery to fill an HTML dropdown menu with data from a JSON file

I've been struggling with this issue for a while and despite reading through other posts, I still can't seem to get it to work. My problem lies in populating a drop down menu with JSON data. Although the drop down menu appears on my HTML page, i ...

javascriptjqueryhtmljsonajax

Utilizing a Frozen Tensorflow Model with NodeJS for High-Performance Computing

I am new to tensorflowjs and js in general, but I have a trained model that I need to run on it. I have converted the model to json format, but I am having trouble feeding data into it: const tf = require('@tensorflow/tfjs') const tfn = require( ...

javascriptpythonnode.jstensorflowtensorflow.js

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

Using promises and the fetch function to connect to a database

I am attempting to utilize promises with the fetch() function in order to access MongoDB from the front-end, but I am encountering some issues. var Promise = () => ( new Promise((resolve, reject) => { //perform certain actions, make requests ...

javascriptmongodbexpresspromisefetch

Include IE-specific stylesheet code in your Angular application (version 1.2)

I would like to implement conditional IE CSS for IE8 and IE9 in my Angular application. The approach I took was to add the specific CSS files directly in the index file as shown below: <!-- Application main stylesheet --> <link href="styles/them ...

cssangularjsinternet-explorergruntjs

Utilize the composition API in Vue.js 3 to call a function and pass in a parameter

I'm having trouble calling a function from another component. When I click on a button in my parent component, formTelemarketing(), it should send data to my other component nAsignedCalls() and call the function getCalls(param) in that component. Thi ...

javascriptvue.jsvuejs3

Enhance the functionality of Map.set by automatically storing the new entry on the disk as well

This code is intended for development purposes only, to resume work from where I left off when restarting the local server. I aim to avoid modifying the production code in any way. My goal is to save new entries to disk when using map.set(...). Below is a ...

javascriptnode.jscachingpersistence

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Greetings. I am working on creating a simple responsive HTML layout as described below: HTML: <div id="header"></div> <div id="content"></div> <div id="footer"></div> CSS: #header{ wi ...

htmlcssresponsive-design

Refresh directive for concealing elements post authentication

Hey everyone, I'm facing a situation where I need to display certain UI elements based on whether a session is active or not. I initially tried using a directive for this purpose, and while it worked well, I encountered an issue where the directives ...

javascriptangularjsangularjs-directive

How can CSS be used to change the text color of input placeholder in Edge Browser?

While using Edge Browser, I encountered an issue where I was unable to change the input placeholder color. The :-ms-input-placeholder selector was not working on Edge, although it functioned properly on IE 10 and IE 11. input:-ms-input-placeholder { ...

htmlcssplaceholdermicrosoft-edge

Vue: Implement out-in transition where the incoming element appears before the outgoing element has completely disappeared

Check out my code on Codepen: here In this scenario, I have set up two div elements: Block 1 and Block 2. The functionality I am looking for is when a button is clicked, Block 1 smoothly translates to the left until it goes out of view. Once that happens ...

javascriptcssvue.jsvuejs3

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing

Upon receiving the response registryReportSettings from the server: this.getRegistrySettings(registry.Id).subscribe((registryReportSettings: { extended: ReportPropertiesRequest }) => { const { objectProperties, reportProperties, textProperties } = reg ...

javascripttypescriptdestructuring

The CORS Policy error message "The 'Access-Control-Allow-Origin' header is missing on the requested resource" in Next.js

Encountered an issue with CORS Policy error while attempting to redirect to a different domain outside of the project. For example, trying to navigate to https://www.google.com through a button click or before certain pages load. The redirection was handl ...

javascriptnode.jsreactjsnext.jscors

Click the button to access the provided link

I need to add a link for redirection to some buttons. Here is an example of the button code: <Tooltip title="Open New Ticket"> <IconButton aria-label="filter list"> <AddTwoToneIcon /> </IconButton> </T ...

javascriptreactjsmaterial-ui

Automatically press a button that appears on the webpage

I am looking to automate the clicking of a button that appears on a website. How can I accomplish this using Python? I have no experience in JavaScript and am fairly new to programming. Here is the outer HTML code for the button: <button type="button" ...

javascriptpythonhtmlautomationwebautomation

Is it possible to incorporate several modules into nodeJS simultaneously?

I'm a beginner when it comes to NodeJS. I was wondering if it's possible for me to call 2 different JavaScript files using NodeJS and ExpressJS. The idea is to split the work, where I can focus on one file while my partner works on another. So, I ...

javascriptnode.jsapirestexpress

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

How can I retrieve all the elements from a Listbox when a Button Click event triggers an ajax call? I have created a function that successfully returns all the elements from the Listbox. However, when I try to bind it with the ajax call, it doesn't w ...

javascriptjqueryjquery-uikendo-uijquery-ajaxq

Vue: Develop a master component capable of displaying a sub-component

Is there a way to design a main component that is able to accept and display a subcomponent? Take the following scenario for instance: <Container> <Item/> <Item/> <SubMenu/> <Btn/> </Container> ...

javascriptvue.js