Anchor Positioning Example
Sometimes when using custom icons you want the anchor point to appear in a different location in relation to the icon. By using the anchorPosition initialization option, you can specify an x/y cooridinate within the icon, or use general instruction like 'top', 'middle', 'bottom', 'left', 'center', and 'right'. When specifiying a numeric x or y cooridinate, the first instruction is the x value, and the second is the y. Default is 'center middle'.
Default: Custom: Custom 2: Custom 3:
Default:
<script type="text/javascript">
new HelpBalloon({
title: 'Default Anchor',
content: 'You can set the position of the anchor '
+ 'using the \'anchorPosition\' option. Possible '
+ 'values are top, middle, bottom, left center and right '
+ 'and any numeric value. It reads it as \'X Y\'',
icon: 'assets/quadrants.gif',
iconStyle: {
'cursor': 'pointer',
'verticalAlign': 'middle'
}
});
</script>
Custom:
<script type="text/javascript">
new HelpBalloon({
title: 'Custom Anchor',
content: 'You can set the position of the anchor '
+ 'using the \'anchorPosition\' option. Possible '
+ 'values are top, middle, bottom, left center and right '
+ 'and any numeric value. It reads it as \'X Y\'',
icon: 'assets/quadrants.gif',
anchorPosition: '37 12',
iconStyle: {
'cursor': 'pointer',
'verticalAlign': 'middle'
}
});
</script>
Custom 2:
<script type="text/javascript">
new HelpBalloon({
title: 'Custom Anchor',
content: 'You can set the position of the anchor '
+ 'using the \'anchorPosition\' option. Possible '
+ 'values are top, middle, bottom, left center and right '
+ 'and any numeric value. It reads it as \'X Y\'',
icon: 'assets/quadrants.gif',
anchorPosition: 'bottom right',
iconStyle: {
'cursor': 'pointer',
'verticalAlign': 'middle'
}
});
</script>
Custom 3:
<script type="text/javascript">
new HelpBalloon({
title: 'Custom Anchor',
content: 'You can set the position of the anchor '
+ 'using the \'anchorPosition\' option. Possible '
+ 'values are top, middle, bottom, left center and right '
+ 'and any numeric value. It reads it as \'X Y\'',
icon: 'assets/quadrants.gif',
anchorPosition: 'right 37',
iconStyle: {
'cursor': 'pointer',
'verticalAlign': 'middle'
}
});
</script>
Post a Comment
Artikel Terpopuler
-
Despite that at the end of this post you will find a filtered and somehow manually edited list of Pligg-based social bookmarking sites, this...
-
2016-08-09 18:38:19.0 Guangzhou Int'l Parcel Center received 2016-08-09 18:38:25.0 Guangzhou Int'l Parcel Center customs scan 20...
-
It seems the method for us to use is far simpler than my initial impressions - we need only add two small sections of code to our templates ...
-
Disaat-saat tertentu untuk menghilangkan kejenuhan kadang kala entertain (kesenangan) harus kita upayakan, demikian pula ketika kita berkuta...
-
Last month we showed you some of the more popular and useful Adobe AIR applications (see " 6 Adobe AIR Apps to Check Out ...
-
PicPick is an all-in-one software for software developers, graphic designers and home user. It has an intuitive interface and simple, elega...
-
About the author henkhei is man in the mirror where you can find everywhere henkhei . he specializes in topics of interest to techno gee...
-
Twitter pages have their own google page rank too in Google, so it is important to do that 5 mins drill better utilize your Twitter page.Thi...
-
A tablet PC is a wireless, portable personal computer with a touch screen interface. The tablet form factor is typically smaller than ...
-
Bio-Linux is an ideal system for scientists handling and analysing biological data. Bio-Linux 6.0 is a fully featured, powerful, config...
