[Dojo-interest] FloatingPane dynamic positioning

Fredrik Johansson fredrik at mumme.se
Sun Dec 3 07:14:57 MST 2006


lördag 02 december 2006 01:51 skrev Kyle Manuel:
> I am using a single FloatingPane called using
> function showme(paneid)
> {
> 	gethelp(paneid);
> 	pane = dojo.widget.byId('pane1');
> 	pane.show();
> }
>
> The gethelp function is AJAX to get the help information and load into a
> span innerHTML within the FloatingPane div.
>
> I am creating the page from a database with the paneid being loaded for
> each record.  The page scrolls so I need to position the pane to show
> within the current window.  Right now, it shows at the same position.  I
> have to drag the window down with me as I scroll.
>
> How can I position the window dynamically so it always shows within the
> visible page?
>

Hi, you can try this as a sample 

<html>
<head>
	<script>
		var djConfig = {isDebug: true};
	</script>
	<script src="dojo/dojo.js"></script>
	<script>
		dojo.require("dojo.widget.*");

		// make a closure with reference to our FloatingPane
		var fpane = null;
		dojo.addOnLoad(function(){
			fpane = dojo.widget.byId('fpane');

			// connect our trigger nodes
			
dojo.event.connect(['leftTop', 'rightTop', 'middle', 'leftBottom', 'rightBottom'],
								'onmouseover',
								'showFloatingPane');
		});

		function showFloatingPane(evt){
			if(!fpane.isShowing()){

				fpane.setContent(evt.target.innerHTML);

				with(fpane.domNode.style){
					left = evt.pageX;
					top = evt.pageY;
				}

				fpane.show();
			}
		}
	</script>
	<style>
		p {
			background-color: green; 
			padding: 1em;
		}
	</style>
</head>
<body>
	<h3>Place a floatingpane on different places on the screen</h3>
	<p id="leftTop" style="position: absolute; top: 100px; left:100px;">Left 
top</p>
	<p id="leftBottom" style="position: absolute; top: 700px; left:100px;">Left 
bottom</p>
	<p id="rightTop" style="position: absolute; top: 100px; left:924px;">Right 
top</p>
	<p id="rightBottom" style="position: absolute; top: 700px; left:924px;">Right 
bottom</p>
	<p id="middle" style="position: absolute; top: 350px; left:450px;">Middle</p>

	<div dojoType="FloatingPane"
		displayMinimizeAction="true"
		toggle="explode"
		duration="300"
		widgetId="fpane"
		style="display:none; width: 10em; height: 8em;"
	></div>
</body>
</html>


More information about the Dojo-interest mailing list