hs.targetX
Positions the expanded image or
HTML content exactly above a given element on your page.
By using the hs.targetX and
hs.targetY properties you gain full control on the positioning of the expanded content. The target value is the id of some element in the document, and you can place this element anywhere on the page using regular HTML/CSS positioning. Then, by setting
hs.targetX = 'my-element' and
hs.targetY = 'my-element' the expander is positioned exactly above it. By setting for example
hs.targetX = 'my-content-element' and
hs.targetY = null you place the expander above the content area and keep the left menu free. The target settings can be expanded by a pixel value.
hs.targetX = 'my-element 20px' means the expander is placed 20px to the right of the target, and
hs.targetX = 'my-element -20px' places it to the left. These properties can also be applied to each single expander in the second argument of
hs.expand. These properties override
hs.align and
hs.anchor.
Details
| Requires |
positioning |
| Type |
string |
| Default value |
null |
| Overrideable inline |
Yes |
Example
General setting to all expanders
1) In these examples, 'my-target' is the div containing the main text above.
<div id="my-target">
[...]
</div>
2) Put this in the head section of your page. This affects all expanders on your page.
<script type="text/javascript">
hs.targetX = 'my-target 20px'; // 20px to the right of the target
hs.targetY = null; // follow the scrolling
</script>
The effect:
Specifically setting it to a single expander
<a class="highslide" href="full1.jpg" onclick="return hs.expand(this,
{ targetX: 'my-target 20px', targetY: null })">
<img src="../samples/thumb1.jpg" alt=""/>
</a>
targetX = 'my-target'
targetY = 'my-target'
|
targetX = 'my-target -200px'
targetY = 'my-target 200px'
|
See also
