html
<style>
#aCalcVal{position:absolute;top:30px; left:122px;}
#aBulletGraph{position:absolute;top:608px; left:204.6875px;}
#aDropDown{position:absolute;top:141px; left:91.6875px;}
#anInput{position:absolute;top:563px; left:222.6875px;}
</style>
<IMG src="5487af1ed6ec4b8c90da59da34200d0f.png" border=0>
<span id='aCalcVal'>
<SpotfireControl id="0ec42a6609d541308d42c406369df8d5" />
</span>
<span id='aBulletGraph'>
<SpotfireControl id="e57d92f8099c438b9a2a003b413fef37" />
</span>
<span id='anInput'>
<SpotfireControl id="0b36814498214275a80596860f6abcd7" />
</span>
<span id='aDropDown'>
<SpotfireControl id="9c8c9f42216a4efc8bb63ce81113d9d4" />
</span>
Optionally add this javascript tool to stop guessing top and left positions.
js
$(".drag").draggable({
cursor:"move",
drag:function(e){
p = $(this).position()
id = $(this).attr('id')
css = "#"+id+"{position:absolute;top:"+p.top+"px; left:"+p.left+"px;}"
$("#pos").text(css)
}
,refreshPositions :true,
}).css({border:"1px dashed blue",padding:"5px"})
This tool requires to add class='drag' to all elements you wish to move, for example:
<span class='drag' id='aDropDown'>
<SpotfireControl id="9c8c9f42216a4efc8bb63ce81113d9d4" />
</span>
It also requires a way to display the position:
<div id="pos">--</div>
2 comments:
I have some trouble getting this to work.
1) The HTML editor says that STYLE tags are not recognized
2) When playing around, Spotfire controls disappear
Have your administrator turn off HTML sanitation for style and other tags to work.
Post a Comment