sipwise
/
ngcp-panel
mirror of https://github.com/sipwise/ngcp-panel.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix positioning inside figure container.

Browse Source 
Use absolute positioning within relative placed container, so
put annotations inside container instead of appending them to
the body.
gjungwirth/email_test
Andreas Granig 12 years ago
parent b5a70a8b37
commit 1c0a2bfa2f
3 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File

6
sandbox/annotate.css
Unescape View File

@ -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;

27
sandbox/annotate.html
Unescape View File

@ -39,7 +39,9 @@ a {
<script src="annotate.js"></script>
<script>
$(function() {
$("figure.annotated figcaption ul li").annotate();
$("figure.annotated").each(function(){
$(this).find("figcaption ul li").annotate(this);
});
});
</script>
<!--<![endif]-->
@ -47,15 +49,30 @@ a {
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<h1>Annotations for Key Selection</h1>
<figure class="annotated">
<img src="spa504g-front.jpg" alt="Cisco SPA504g" />
<figcaption>
<b>Line/Key Selection:</b>
<ul>
<li class="assigned" style="top:71px; left:483px;" data-pos="top"><a href="#">test1xxxx@example.org</a></li>
<li class="unassigned" style="top:93px; left:493px;" data-pos="right"><i class="fa fa-plus-square-o"></i><a href="#"> Unassigned</a></li>
<li class="assigned" style="top:109px; left:473px;" data-pos="left"><a href="#">test3xxxx@example.org</a></li>
<li class="unassigned" style="top:130px; left:483px;" data-pos="bottom"><a href="#">Assign</a></li>
<li class="assigned" style="top:71px; left:483px;" data-pos="top"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test1xxxx@example.org</a></li>
<li class="unassigned" style="top:93px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
<li class="assigned" style="top:109px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test3xxxx@example.org</a></li>
<li class="unassigned" style="top:130px; left:483px;" data-pos="bottom"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
</ul>
<i><a href="#">All Annotations Test</a></i>
</figcaption>
</figure>
<div style="clear:both"></div>
<figure class="annotated">
<img src="spa504g-front.jpg" alt="Cisco SPA504g" />
<figcaption>
<b>Line/Key Selection:</b>
<ul>
<li class="assigned" style="top:76px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test1xxxx@example.org</a></li>
<li class="unassigned" style="top:93px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
<li class="assigned" style="top:109px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test3xxxx@example.org</a></li>
<li class="unassigned" style="top:127px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
</ul>
<i><a href="#">Cisco SPA504G</a></i>
</figcaption>

26
sandbox/annotate.js
Unescape View File

@ -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 = $('<div class="annotate ' + $el.attr("class") + '" data-annotate="' + i + '">' + $el.html() + '<div class="arrow-' + pos + '"></div></div>').appendTo("body");
var $annotate = $('<div class="annotate ' + $el.attr("class") + '" data-annotate="' + i + '">' + $el.html() + '<div class="arrow-' + pos + '"></div></div>');
$(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({

Write Preview
Loading…
Cancel
Save