Pin-to-container

From Frontal Wiki

Purpose

This style causes a visual element to position itself relative to a specific visual element.

Value

The id of a visual element.

pin-to-container: myDiv;

Remarks

Normally a visual element is positioned relative to its parent as described in Frontal's Layout Scheme. With this style, this behavior can be changed as described here.

Example

This example shows the effect on an img tag of changing its pin-to-container style. The style is changed as you roll over and out of the text. Notice how since the image is scaled relative to its containing block, its size changes as this style changes.

<style><![CDATA[
	.halfSize
		{
			width: 50%;
			height: 50%;
		}
	#rolloverButton
		{
			@onRollOver
				{
					gE ( "myImage" ).sS ( "pin-to-container", "myDiv" );
				}
			@onRollOut
				{
					gE ( "myImage" ).sS ( "pin-to-container", undefined );
				}
		}
]]></style>
 
<div class="halfSize" style="background-color: red;">
	<div class="halfSize" style="background-color: blue;" id="myDiv" />
	<img class="halfSize" id="myImage" style="allow-smoothing: true; resize-scale: showall;" src="assets/images/image_1.jpg" />
</div>
<text id="rolloverButton"><![CDATA[Roll Over Me]]></text>

See Also

• pin-to-stage

Can Be Applied To

This style can be applied to any visual element:

• document
• div
• img
• text
• video
• form
• input