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

Send information to a different tab using ajax

My goal is to send data from order.php to print.php when a user clicks a button. I have attempted to do this using jQuery AJAX, but keep receiving a 500 Internal Server Error. Can someone please help me troubleshoot? This is my latest code attempt: $.aja ...

jqueryajax

Avoid adding any empty entries to the list using jQuery

I have implemented a code to prevent any blank entries from being added to my list, and it seems to be working fine. However, I can't shake the feeling that there might be a better way to achieve this. Even though it functions correctly, it doesn&apos ...

javascriptjquery

efficiency of this algorithm

function checkSubset(array1, array2) { const set1 = new Set(array1); const set2 = new Set(array2); for (const element of set2) { if (!set1.has(element)) { return false; } } return true; } Can we consid ...

javascriptbig-o

Utilizing AJAX to dynamically load a jQuery Background Slider

I have a challenge of creating a website that updates internal links without refreshing the page. The navigation will remain consistent while the content is loaded using jQuery .load(). Everything seems to be working well except for the issue with loading ...

jqueryajax

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...

javascriptjqueryhtmlcss

Retrieve a single instance of every element within an array using JavaScript

I have an array of player objects, each containing properties such as "position" and "player_name". With 8 unique positions available for players, I aim to extract the first player for each position and transfer them to a new array. This way, the new array ...

javascriptnode.js

The gradual vanishing of principles

Below you will find text fields that I am populating with values that are later utilized in a JavaScript function. These fields are all contained within a form. The issue I am encountering is that when I submit the form, I initially get the correct value ...

javascripthtml

List the attributes that have different values

One of the functions I currently have incorporates lodash to compare two objects and determine if they are identical. private checkForChanges(): boolean { if (_.isEqual(this.definitionDetails, this.originalDetails) === true) { return false; ...

javascriptangulartypescriptlodash

Refreshing the Span Element using Ajax and php

Hello there, Stack Overflow community! I have a basic PHP script (countsomething.php) that retrieves a number and displays it using echo. How can I use AJAX to automatically update a simple span element on my HTML page? I've attempted to trigger th ...

javascriptphphtmlajax

Exploring the issue of why the scroll event handler is not functioning properly within the useEffect hook

After creating a custom hook to retrieve the scroll state of an element, I noticed that the scrollHandler only triggers once. Here's my code: import { MutableRefObject, useEffect, useState } from "react" export const useScrollState = <TE ...

javascriptreactjs

Getting dynamic props from a clicked element in React involves accessing the target element's properties and

I am currently working with a React "tree" menu component that has main links with submenus generated dynamically through a JSON GET call. Upon inspecting the tree in the React Inspector, I noticed that each element has multiple props associated with it. H ...

javascriptreactjs

Employing negative margin to connect div1 to the left side of div2

Is there a way to attach a dismiss button to the left of a contact in a sidebar? I am trying to achieve a layout similar to the one shown in this image: I attempted using margin-left: -50px; or left: -50px;, but the dismiss div seems to disappear. Even th ...

htmlcssmargin

Encountering a problem while trying to scrape using cheeriojs

While attempting to scrape article links from a website, I encountered an issue where only one link was successfully scraped and the other elements were not being looped over. My current setup involves using nodejs in conjunction with the cheerio and req ...

javascriptnode.jscheerio

The variation in CSS output between Google Chrome on Windows and Ubuntu

My code includes a div tag: <a href="#"><div class="field btn half green" id="register-btn">Register</div></a> Here is the CSS code for the tag: .field { position: absolute; width: 205px; left: 22px; color: #eaeae ...

htmlcsswindowsgoogle-chromeubuntu

JavaScript - Transforming Name:ItemName/Value:ItemValue Pairs into Standard ItemName:ItemValue JSON Format

Looking to reformat JSON data? [{"name":"age","value":31}, {"name":"height (inches)","value":62}, {"name":"location","value":"Boston, MA"}, {"name":"gender","value":"male"}] If you want it to be in a different format: [{"age": 31}, {"height (inches)": 6 ...

javascriptjqueryjson

Retrieve data points from ol.layer.Vector using OpenLayers 4

Having recently started using OpenLayers, I find myself in a state of confusion. I'm attempting to retrieve all features from a kml vector layer, but have been unsuccessful thus far. It perplexes me as to what mistake I might be making. Below is the ...

javascriptopenlayers

What are some methods for submitting an HTML form to a CSV file?

I've been racking my brain for the past few days trying to find a viable solution to this problem. My project requires 100 individuals to take turns sitting at a computer and filling out a form I created. Each time someone submits their information, ...

javascriptphphtmlcss

Remove any overlapping datetime values from a JavaScript array of objects

Is there a way to efficiently remove any overlaps between the start and end times (moment.js) in a given array of objects? [{ start: moment("2019-03-23T15:55:00.000"), end: moment("2019-03-23T16:55:00.000")}, { start: moment("2019-03-23T14:40:00.000"), e ...

javascriptarraysmomentjs

Leveraging NodeJS to handle server-side tasks and operations

Background: I am exploring the use of NodeJS for a project that involves scraping and storing content in Mongo. This process needs to be automated according to a set schedule. In addition, I need functions that can extract items from the Mongo database, o ...

javascriptnode.jsexpressweb-scrapingserver-side

Flask is failing to display AJAX data

Looking to embark on a Flask project involving sending an AJAX request. In the Flask code, I want to assign a variable to handle the request and display it on the page using a Jinja variable. Flask from flask import Flask,render_template,request app = Fla ...

javascriptajaxflask