From 1c0a2bfa2f6485cacddf612abcab0cdadb61ed89 Mon Sep 17 00:00:00 2001 From: Andreas Granig Date: Mon, 21 Jul 2014 14:10:37 +0200 Subject: [PATCH] Fix positioning inside figure container. Use absolute positioning within relative placed container, so put annotations inside container instead of appending them to the body. --- sandbox/annotate.css | 6 +++--- sandbox/annotate.html | 27 ++++++++++++++++++++++----- sandbox/annotate.js | 26 ++++++++++++++------------ 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/sandbox/annotate.css b/sandbox/annotate.css index 8720de9df5..e621f20ad8 100644 --- a/sandbox/annotate.css +++ b/sandbox/annotate.css @@ -10,14 +10,14 @@ .annotate.unassigned .arrow-top:after, .annotate.unassigned .arrow-bottom:after, .annotate.unassigned .arrow-left:after, .annotate.unassigned .arrow-right:after { background: white; - color: #909090; - border: 1px solid #909090; + color: #ff9900; + border: 1px solid #ff9900; } .annotate { display: inline-block; position: absolute; - padding: 2px 10px; + padding: 1px 3px 1px 1px; border-radius: 1px; text-align: center; line-height:14px; diff --git a/sandbox/annotate.html b/sandbox/annotate.html index f12a3a3d19..702b627534 100644 --- a/sandbox/annotate.html +++ b/sandbox/annotate.html @@ -39,7 +39,9 @@ a { @@ -47,15 +49,30 @@ a { +

Annotations for Key Selection

Cisco SPA504g
Line/Key Selection: + All Annotations Test +
+
+
+
+ Cisco SPA504g +
+ Line/Key Selection: + Cisco SPA504G
diff --git a/sandbox/annotate.js b/sandbox/annotate.js index 34c1cd4f47..357fcc3c65 100644 --- a/sandbox/annotate.js +++ b/sandbox/annotate.js @@ -1,6 +1,8 @@ (function( $ ) { - $.fn.annotate = function(el) { + $.fn.annotate = function(ctx) { + + console.log("ctx is ", ctx); var $annotate, $body = $('body'), @@ -13,29 +15,29 @@ if(pos == undefined) pos = "top"; console.log("pos at " + i + " is ", pos); - var $annotate = $('
' + $el.html() + '
').appendTo("body"); + var $annotate = $('
' + $el.html() + '
'); + $(ctx).append($annotate); + $el.html(''); var linkPosition = $el.position(); - console.log(linkPosition); - console.log("w="+$annotate.outerWidth()+",h="+$annotate.outerHeight()); var top, left; switch(pos) { case "top": - top = linkPosition.top + 10 - $annotate.outerHeight(); - left = linkPosition.left + 48 - $annotate.outerWidth()/2; + top = linkPosition.top - 5 - $annotate.outerHeight(); + left = linkPosition.left - 9 - $annotate.outerWidth()/2; break; case "bottom": - top = linkPosition.top + 3 + $annotate.outerHeight(); - left = linkPosition.left + 48 - $annotate.outerWidth()/2; + top = linkPosition.top - 11 + $annotate.outerHeight(); + left = linkPosition.left - 9 - $annotate.outerWidth()/2; break; case "left": - top = linkPosition.top + 17 - ($annotate.outerHeight()/2); - left = linkPosition.left + 41 - $annotate.outerWidth(); + top = linkPosition.top - ($annotate.outerHeight()/2); + left = linkPosition.left - 25 - $annotate.outerWidth(); break; case "right": - top = linkPosition.top + 17 - ($annotate.outerHeight()/2); - left = linkPosition.left + 55; + top = linkPosition.top - ($annotate.outerHeight()/2); + left = linkPosition.left + 5; break; } $annotate.css({