What is the method for passing an element object instead of an id in JSXGraph?

I'm attempting to modify

var brd2 = JXG.JSXGraph.initBoard('box', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});

to read as

var brd2 = JXG.JSXGraph.initBoard(this.$('#box'), {boundingbox: [-8.75, 2.5, 8.75, -2.5]});

Due to the creation of dynamic elements within backbone views, I must initialize JSXGraph for each element identified by the id "box".

Answer №1

To bypass passing the id and instead pass an object to JSXGraph, a clever hack can be utilized. Initially, an invisible div with the id "dummy" must be created. The board is then initialized using this dummy id, followed by necessary corrections. For example:

var board = JXG.JSXGraph.initBoard('dummy', {axis:false,
    boundingbox: [-10,30,10,-10], keepaspectratio:false});

var obj = document.getElementById('box'); // or this.$('#box')

board.removeEventHandlers();
board.container = 'box';
board.containerObj = obj;
//
// Providing box dimensions
board.renderer = new JXG.SVGRenderer(obj, {width: 800, height: 800});
board.setBoundingBox([-10,30,10,-10], false);
board.addEventHandlers();

It's important to note that setting axis:true or grid:true in initBoard() will not have the desired effect.

Hoping this solution proves helpful, Alfred

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

AngularJS is capable of executing conditional logic using the if/else statement

I am attempting to set the inputLanguage value to 'en' and encountering an error that says english is not defined. Here is the code snippet from my alchemy.js file: module.exports = function(Alchemy) { Alchemy.language = function(inText, inp ...

"Displaying 'Object Object' as a title when hovering over an element

I am currently using an accordion element to display several FAQs on a webpage. The code snippet for the accordion with content is as follows: { Object.keys(FAQS).map((key, index) => { return ( <div key={key}> ...

Issue with the _.filter function in lodash library when used in a Node.js environment

My goal is to remove rows from a CSV file that already contain email addresses found in Mailchimp. Although I attempted to achieve this with a function, it seems that the number of elements returned is not accurate: async function testDeleteEmails(listID, ...

Utilizing Javascript within a PHP while loop to showcase map markers

Is there a way to display multiple database entries in a loop and show them as markers on a map like this: https://i.stack.imgur.com/SwaGP.png I am struggling with looping through JavaScript in PHP to display multiple markers. Is it possible to achieve t ...

Ways to transform epoch timestamp to present timestamp?

Is there a way to accurately convert an epoch timestamp in milliseconds to the current timestamp in milliseconds? My Attempt: var currentTime = (resp.timestamp * 1000) + 1980000000; resp.timestamp represents the epoch timestamp I attempted to add 5 ho ...

Ways to divide a buffer in JavaScript

String was created by utilizing the toString method on the buffer. Here is a sample of the resulting string: GET / HTTP/1.1 Host: localhost:8080 Connection: keep-alive Cache-Control: max-age=0 .... Is there a way to parse this string whenever a space (" ...

Changing Text in React Native is Customizable

As a newcomer to react native, I find myself in need of some guidance. I am currently working on implementing a TextInput feature where users can update the text value as they please. For instance, if a user initially creates a folder named "Bar" but later ...

Creating a custom route that is specific to a single ejs file

I'm trying to set up a URL like localhost:3000/hh234due with a unique ID that routes to a specific page. However, my current implementation is conflicting with other routes. How can I make the /:id route unique to one view? module.exports = fun ...

Listening for time events with JQuery and controlling start/stop operations

I recently developed a jQuery plugin. var timer = $.timer(function() { refreshDashboard(); }); timer.set({ time : 10000, autostart : true }); The plugin triggers the refreshDashboard(); function every 10 seconds. Now, I need to halt the timer for ...

Exploring the potential of utilizing records within deepstream.io

Lately, I've been delving into the world of records and I find myself pondering on the practical limitations when it comes to the size of a json structure. Is there a recommended maximum length? Can you store an entire chat history as an (anonymous) r ...

What could be the reason for my failing express test?

I'm in the process of configuring a server using Node/Express and I want to write ES6 code, so I've incorporated babel into my setup. Currently, the server is operational, and I can successfully make the necessary requests. However, I am facing ...

What causes the server to give an incorrect response despite receiving a correctly read request?

After setting up a new project folder and initializing NPM in the Node.js repl, I proceeded to install the Express package. In my JavaScript file, I included the following code: const express = require('express'); const app = express(); ...

NodeJS making seven successful Ajax requests

I'm delving into the world of JavaScript, NodeJS, and electron with a goal to create a presenter-app for remote control over powerpoint presentations. My setup involves an electron server structured like this: const electron = require('electron ...

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

Can you identify the origin of the inclusion of a .php file?

Is there a way to automatically determine if a PHP script is being accessed directly as an HTML page, used as a JavaScript file, or utilized as a CSS Stylesheet? I'm looking for a solution that doesn't involve GET variables or setting a flag wit ...

JavaScript function for searching YouTube videos

While browsing on stackoverflow, I came across the following code snippet: $(document).ready(function () { $("#show").click(function () { getYoutube($("#Search").val()); }); }); function getYoutube(title) { $.ajax({ type: "GET", url: yt_url ...

JQuery If Statement always outputs a consistent number regardless of the input provided

I'm facing an issue with my HTML form and JQuery code that is supposed to calculate a figure. The problem I am encountering is that the if statement always returns the same number, regardless of the input: $(document).ready(function() { ...

How to handle redirects based on status codes in AngularJS $http requests

My angular application includes numerous $http requests, and I am looking for a way to automatically redirect users to the login page in case the server session expires (resulting in a 401 error). Does anyone have a solution that can handle this for all ...

How can I effectively exclude API keys from commits in Express by implementing a .gitignore file?

Currently, my API keys are stored in the routes/index.js file of my express app. I'm thinking that I should transfer these keys to an object in a new file located in the parent directory of the app (keys.js), and then include this file in my routes/in ...

unable to retrieve the value from the scope

I'm trying to implement the following code in HTML: <div ng-if="item.shareText"> <textarea></textarea> <div> <select ng-model="shareOptions"> <option value="PUBLIC" selected>public</option> ...