Element ForeignObject
JXG.GeometryElement,JXG.CoordsElement
↳ JXG.ForeignObject
↳ ForeignObject
Display any HTML content in an SVG foreignObject container - even below other elements.
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.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Field Attributes | Field Name and Description |
|---|---|
|
List of attractor elements.
|
|
|
If set to true, this object is only evaluated once and not re-evaluated on update.
|
- Methods borrowed from class JXG.ForeignObject:
- H, hasPoint, setSize, update, updateRenderer, updateSize, updateSpan, W
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, 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.
Attribute Detail
{Array}
attractors
List of attractor elements. If the distance of the foreignobject is less than
attractorDistance the foreignobject is made to glider of this element.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- empty
{Boolean}
evaluateOnlyOnce
If set to true, this object is only evaluated once and not re-evaluated on update.
This is necessary if you want to have a bord within a foreignObject of another board.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
Attributes borrowed from other Elements
- Attributes borrowed from class JXG.GeometryElement:
- aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, 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, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval
Events borrowed from other Elements