Executing Javascript code from a specified web address

Question

Executing Javascript code from a specified web address

Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet:

document.getElementById('ImgID1').style.verticalAlign =

However, the value by which I need to shift the image is provided through a URL (the URL is given below for reference), where if I were to run the contents of the URL as JavaScript, the output would be "-8px", which is exactly what I need. But how can I implement this? How do I express

verticalAlign={retrieve the URL content, execute as JS, extract the returned value}

.

The specific URL in question is http://latex.codecogs.com/gif.json?\inline%20\mathbb{R}

Here is a sample response that may shed some light on how to approach this:

ParseEqn({ "latex": { "type":"gif", "equation":"\\mathbb{R}", "site":"stackoverflow.com", "file":"f3ed131812d10a06a9349ab2b42e3ed4.gif", "url":"http://www.codecogs.com/eq/f3/f3ed131812d10a06a9349ab2b42e3ed4.gif", "width":"12", "height":"12", "baseline":"1" } });

Your insights would be greatly appreciated!

Sincerely,
Sam

javascript css json dom vertical-alignment

Answer 1

Answer №1

Check out the code snippet below to receive a response from the server. Make sure to open the console to confirm.

JSFIDDLE : Using JQUERY

window.ParseEqn = function(data) {
alert(data.latex.type);
}

$.ajax({
    url: 'http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D',
    crossDomain: true,

    contentType: "application/json; charset=utf-8",
    dataType: 'jsonp',
    headers: {"Access-Control-Allow-Origin": '*'
             },  
})

Using pure JavaScript: suggested solution by Blue skies

window.ParseEqn = function(data) {
    alert(data.latex.width);
}

var s = document.createElement("script")
s.src = "http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D";
s.onload = function() {
    document.body.removeChild(s);
};
document.body.appendChild(s);

Answer 2

Check out the code snippet below to receive a response from the server. Make sure to open the console to confirm.

JSFIDDLE : Using JQUERY

window.ParseEqn = function(data) {
alert(data.latex.type);
}

$.ajax({
    url: 'http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D',
    crossDomain: true,

    contentType: "application/json; charset=utf-8",
    dataType: 'jsonp',
    headers: {"Access-Control-Allow-Origin": '*'
             },  
})

Using pure JavaScript: suggested solution by Blue skies

window.ParseEqn = function(data) {
    alert(data.latex.width);
}

var s = document.createElement("script")
s.src = "http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D";
s.onload = function() {
    document.body.removeChild(s);
};
document.body.appendChild(s);

Answer 3

Answer №2

If you want to fetch a JSON file using AJAX, you can do that by following these steps:

$.getJSON('gif.json', function(data) {

However, keep in mind that simply specifying the URL in the function may not automatically trigger the download and processing.

var image = document.createElement("IMG")

Add the image to your webpage like this:

document.body.appendChild(image); 
    $.getJSON('<a href="http://latex.codecogs.com/gif.json" rel="nofollow">http://latex.codecogs.com/gif.json</a>?\inline%20\mathbb{R}', function(data) {
          var items = [];

      $.each(data, function(key, val) {
        if(key=="url")
        image.src=value;
        else if (key="width")
        image.style.width=value;
        else if (key="heigth")
        image.style.heigth=value;
              });
    document.getElementById("yourdive's case").appendChild(image);
    });

Hopefully, this is what you were looking for!

Answer 4

If you want to fetch a JSON file using AJAX, you can do that by following these steps:

$.getJSON('gif.json', function(data) {

However, keep in mind that simply specifying the URL in the function may not automatically trigger the download and processing.

var image = document.createElement("IMG")

Add the image to your webpage like this:

document.body.appendChild(image); 
    $.getJSON('<a href="http://latex.codecogs.com/gif.json" rel="nofollow">http://latex.codecogs.com/gif.json</a>?\inline%20\mathbb{R}', function(data) {
          var items = [];

      $.each(data, function(key, val) {
        if(key=="url")
        image.src=value;
        else if (key="width")
        image.style.width=value;
        else if (key="heigth")
        image.style.heigth=value;
              });
    document.getElementById("yourdive's case").appendChild(image);
    });

Hopefully, this is what you were looking for!

Executing Javascript code from a specified web address

Answer №1

Answer №2

Similar questions

Submitting the Ajax form will result in the quantity of the product in the cart being updated while remaining on

What is the best way to insert a React component or raw HTML into another React component?

NodeJS Exporting Features

Email replay feature

Issue encountered while creating a token in a JavaScript Chrome extension and attempting to validate it on a backend Node.js server

Aligning a row with space between columns

Accept either a string or an integer in the JSON response

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

Ajax response data triggered twice

Workaround for syncing MobX observables when toggling a select/deselect all checkbox

Converting XML data into a JSON format that is compatible with loading into BigQuery

How can I update the value of a span element that was added to the HTML document through an AJAX request?

Creating a fresh CSS class and utilizing its properties in JavaScript is the task at hand

Positioning elements precisely on a webpage through absolute positioning and floating them

changing tooltip color in bootstrap based on the parent element

Align the responsive image in the center of a container

Pair a specific portion of text with another string

Tips for managing API lists and authorization keys within the appsettings file

A critical issue occurred: array length is invalid. The attempt to include EJS in the template failed due to

I am looking to display the results table on the same page after submitting a form to filter content. Can you provide guidance on how to achieve this?