JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

Classes


Element ForeignObject

JXG.GeometryElement,JXG.CoordsElement
   ↳ JXG.ForeignObject
         ↳ ForeignObject

This element is used to provide a constructor for arbitrary content in an SVG foreignObject container.

Instead of board.create('foreignobject') the shortcut board.create('fo') may be used.

NOTE: In Safari up to version 15, a foreignObject does not obey the layer structure if it contains <video> or <iframe> tags, as well as elements which are positioned with position:absolute|relative|fixed. In this case, the foreignobject will be "above" the JSXGraph construction.



Defined in: foreignobject.js.
Extends JXG.ForeignObject.

Element Summary
Constructor Attributes Constructor Name and Description
 
Methods borrowed from class JXG.ForeignObject:
H, hasPoint, setSize, update, updateRenderer, updateSize, updateSpan, W
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Dist, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
ForeignObject
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "foreignobject".

Possible parent array combinations are:
{String} content

HTML content of the foreignObject. May also be <video> or <iframe>


{Array} position

Position of the foreignObject given by [x, y] in user coordinates. Same as for images.


{Array} size

(Optional) argument size of the foreignObject in user coordinates. If not given, size is specified by the HTML attributes or CSS properties of the content.


See:
Image
Examples:
var p = board.create('point', [1, 7], {size: 16});
var fo = board.create('foreignobject', [
    '<video width="300" height="200" src="https://eucbeniki.sio.si/vega2/278/Video_metanje_oge_.mp4" type="html5video" controls>',
    [0, -3], [9, 6]],
    {layer: 8, fixed: true}
 );


				
				
var p = board.create('point', [1, 7], {size: 16});
var fo = board.create('fo', [
    '<div style="background-color:blue; color: yellow; padding:20px; width:200px; height:50px; ">Hello</div>',
    [-7, -6]],
    {layer: 1, fixed: false}
 );


				
				
board.renderer.container.style.backgroundColor = 'lightblue';
var points = [];
points.push( board.create('point', [-2, 3.5], {fixed:false,color: 'yellow', size: 6,name:'6 am'}) );
points.push( board.create('point', [0, 3.5],  {fixed:false,color: 'yellow', size: 6,name:'12 pm'}) );
points.push( board.create('point', [2, 3.5],  {fixed:false,color: 'yellow', size: 6,name:'6 pm'}) );

var fo = board.create('fo', [
    '<video width="100%" height="100%" src="https://benedu.net/moodle/aaimg/ajx_img/astro/tr/1vd.mp4" type="html5video" controls>',
    [-6, -4], [12, 8]],
    {layer: 0, fixed: true}
 );

var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f, -10, 10], {fixed:true,strokeWidth:3, layer: 8});


Video "24-hour time-lapse in Cascais, Portugal. Produced by Nuno Miguel Duarte" adapted from
https://www.pbslearningmedia.org/resource/buac18-k2-sci-ess-sunposition/changing-position-of-the-sun-in-the-sky/,
©2016 Nuno Miguel Duarte.

Attributes borrowed from other Elements
Attributes borrowed from class JXG.GeometryElement:
dash, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, needsRegularUpdate, precision, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, trace, traceAttributes, transitionDuration, visible, withLabel

Fields borrowed from other Elements
Fields borrowed from class JXG.ForeignObject:
content, size
Fields borrowed from class JXG.GeometryElement:
_org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
Fields borrowed from class JXG.CoordsElement:
coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Methods borrowed from other Elements
Methods borrowed from class JXG.ForeignObject:
H, hasPoint, setSize, update, updateRenderer, updateSize, updateSpan, W
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Dist, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval

Events borrowed from other Elements
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Documentation generated by JsDoc Toolkit 2.4.0 on Fri Nov 19 2021 10:52:26 GMT+0100 (Mitteleuropäische Normalzeit)