precise location of a user control

[Steve Steve]

Hi there

I'm trying to create a shop web-page with a dynamic basket as a part of
a user control. I have done the basket in javascript which means
outputting client script in the server code when we create the page.

Right my problem is that the javascript code contains a position for the
basket button and this means that even though it is included in the user
control it can appear pretty much anywhere on the page depending on
'top' and 'left' (javascript array elements) for its positioning
- the question I want answering if anybody knows is can you find out the
pixel position of the top and left of the panel that the control is sat
on? I know that this is dynamically decided at runtime but I will need
to place the button in the panel if possible or else it is useless as a
web control.

I would be grateful if you could include some code to give me an example
(if this is possible of course).

Thanks
Steve

 

[Alessandro Zifiglio]

hi steve,
The designer automatically assigns CSS position information to our control.
To use this position information, we need to read it from the Style
collection for our webControl .
Make sure you try to retrieve this information not sooner than the
onPreRender method for you page, as this information is avaialbe from then
on.
So in your onPreRender method the code below will work for you

dim leftPosition as string
dim topPosition as string

leftPosition = panel1.style("LEFT")
topPosition = panel1.style("TOP")


Note that the css attributes included in style are case sensitive so make
sure you use uppercase like on my example.

 

[Steve Steve]

Hello

I did think it would have something to do with the style and I had tried
this before - I'm hoping I'm just not doing it in the right place.

I've been trying to use this:

string top = Panel1.Style["TOP"];

but this string is always an empty string.

You mentioned an onPrerender method but I don't know where this would be
- is it different in c# than it is in VB?

Here's exactly what I'm doing - I am using the html source page of the
web control which just outputs javascript to the client. The javascript
is output dependent on c# variables and that's why I have done it this
way so that the jscript can be dynamic.

The problem is that in the javascript code, the position of the menu is
set left and top with a pixel value (integer) and doesn't sit on the web
control where it should. I need to be able to find out the pixel left
and top from the panel so I can place this menu over the panel.

I think there is some wisdom in the previous posting but I don't know
how to do anything about it.

Any help would be appreciated

 

[Alessandro Zifiglio]

Steve, try retrieving the value in either the OnPreRender event for your
panel or your page. These values are made available to you as these events
fire not any sooner.

so in c# if you were going to find these values in your panels OnPreRender
event then your code would be :

private void InitializeComponent()
{
// add the handler :
this.Panel1.PreRender += new System.EventHandler(this.Panel1_PreRender);
}
private void Panel1_PreRender(object sender, System.EventArgs e)
{
this.Response.Write(Panel1.Style("TOP"));
}

 

[Steve Steve]

Thanks but I still am not able to get at the value - I copied the code
you posted (just changing the Style("TOP") to Style["TOP"] because it is
an array not a method) and commented out the Page_Load event so that
that does not get in the way - it does build with the
eventhandler/pageload method commented out.

I'll put the whole class in this time and if you could try and spot
what's wrong I'd be grateful:

namespace shop
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
using System.IO;
using System.Web.UI;

/// <summary>
/// Summary description for dynamicMenu.
/// </summary>
public class dynamicMenu : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Panel Panel1;


//private void Page_Load(object sender, System.EventArgs e)
//{
//commented out
//}



#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
//This call is required by the ASP.NET Web Form Designer.

InitializeComponent();
base.OnInit(e);
}


private void InitializeComponent()
{
//this.Load += new System.EventHandler(this.Page_Load);
this.Panel1.PreRender += new System.EventHandler(this.Panel1_PreRender);
}

private void Panel1_PreRender(object sender, System.EventArgs e)
{
this.Response.Write("Top:" + Panel1.Style["TOP"]);
}
}

}


All it outputs to the browswer is the string "Top:" and no string that
represents position.

Sorry if I'm being rubbish but I can't see a solution

Steve

 

[Alessandro Zifiglio]

Steve, one and only reason why your top and left are turning out blank is
because your webform designer is set to flow layout and not grid
layout --when in grid layout vs.net automatically provides inline style for
"Z-index, position, top and left attributes.

If these are not provided by default then you will surely end up blank, coz
the css attributes are not set.

If you still want to work in flow layout then you can manually make this
setting in code for your panel, that is set :

panel1.Style["POSITION"] = "ABSOLUTE";
panel1.Style["TOP"] = "100px";
panel1.Style["LEFT"] = "100px";

now your panel is absolutely positioned, during postback you can retrieve,
and this will work for you, however because you already know ahead of time
what your left and top are as you are manually setting, you can just pass
that to your script.

Please take a look at your panel control in html view and see if by default
there are style settings for position,left and top.
If there is nothing provided by default then you are flow layout, change
your layout to gridlayout and drag and drop your panel. You cannot retrieve
left and top if you or vs.net never set this in the first place ;P

Besides that it should work for you

Thanks but I still am not able to get at the value - I copied the code
you posted (just changing the Style("TOP") to Style["TOP"] because it is
an array not a method) and commented out the Page_Load event so that
that does not get in the way - it does build with the
eventhandler/pageload method commented out.

I'll put the whole class in this time and if you could try and spot
what's wrong I'd be grateful:

namespace shop
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
using System.IO;
using System.Web.UI;

/// <summary>
/// Summary description for dynamicMenu.
/// </summary>
public class dynamicMenu : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Panel Panel1;


//private void Page_Load(object sender, System.EventArgs e)
//{
//commented out
//}



#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
//This call is required by the ASP.NET Web Form Designer.

InitializeComponent();
base.OnInit(e);
}


private void InitializeComponent()
{
//this.Load += new System.EventHandler(this.Page_Load);
this.Panel1.PreRender += new System.EventHandler(this.Panel1_PreRender);
}

private void Panel1_PreRender(object sender, System.EventArgs e)
{
this.Response.Write("Top:" + Panel1.Style["TOP"]);
}
}

}


All it outputs to the browswer is the string "Top:" and no string that
represents position.

Sorry if I'm being rubbish but I can't see a solution

Steve

 

[Alessandro Zifiglio]

To make it clear, this is what my panel looks like in html view, coz i have
gridlayout for my form :

<aspanel id="Panel1" style="Z-INDEX: 105; LEFT: 188px; POSITION: absolute;
TOP: 107px" runat="server">Panel</aspanel>

 

[Steve Steve]

And is this "TOP" or "LEFT" value only set when the panel goes to page
or do you have to manually set the height (or drag and drop to the page
- which is kind of the same thing)?

The point I'm trying to make is - I don't ever drag and drop these
controls onto a web form - I put placeholders into a html table on the
page - each web control I write is inside a panel that is loaded by this
placeholder - therefore making the webpage about as dynamic as you can
make it - this is because we might need various different skins for
different clients. Also the panel doesn't know where it is going until
it is rendered - depending on the size of the other controls.

So the panel is inside a web control that is put in place of the
placeholders - Can you use what you suggest in this case? I will have a
go - I have already changed to grid view.

I think I might have a go with a new project to see if I can get
something simple working and move up from there.

Thanks for taking the time to help me - I appreciate it!

Steve

 

[Alessandro Zifiglio]

Steve, if your panel is not absolutely positioned then you cannot retrieve
its postition in javascript.

From the way you have described your situation I understand that your panel
is dynamically loaded into a placeholder control. A placeholder is never
rendered to screen, and cannot be absolutely positioned either, it just acts
as a placeholder in that if you had a table for example and the placeholder
was put in that table cell, it any controls added to the placeholder will go
into that particular table cell.

1. one option you could look at is to use the label control. A label outputs
a span element and this can be absolutely positioned in the vs.net designer
and in turn onto your page. Use this in place of the placeholder, that is
throw it on your page and give it default left and top positions --add your
panel to the label, same way you add your control to the place holder, then
retrieve left and top values of your label, should be the same position of
your panel as your panel is added into this.

2. another option is client side, in javascript get a reference to your
panel(div element) and retrieve its offsetLeft --offsetTop values whereas to
style.left and style.top, this should return the Left and Top positions of
the panel without requiring you to make any other changes, and seems to be
the simplest ;P

if you went with the second option here is a small demo
<html>
<head>
<title>Panel position test</title>
</head>
<body>
<div id="panel1">My panel is here</div>

<script type="text/javascript">
//<![CDATA[


function GetPosition(panelID){
var myPanel = document.getElementById(panelID);
alert(myPanel.offsetLeft);
alert(myPanel.offsetTop);
}

GetPosition('panel1');
//]]>
</script>
</body>
</html>



Point is you need an initial left and top position to be able to reference
them. So my advice to you

 

[Steve Steve]

I used your javascript and it still doesn't work - I include the div
tags just before the <asp> tags in the html and I do get output from the
functions but they are both just '-1' which puts the basket in the top
left corner every time. It seems that the panel still has no position
client side.

I am considering adding a panel of a fixed size and then putting this
HtmlTable over the top of it - I'll have to keep trying to find the
solution in the meantime and let the boss decide on the course of
action.

Thanks again for trying - if you do get this working using placeholders
and stuff could you let me have some sample code - you could just email
me directly if you want

 

[Alessandro Zifiglio]

Your almost there steve. The javascript code i posted last is not a
solution, its only a demo for offsetLeft and offsetTop which should work for
you in place of left and top, it will require some modification to your js
code thats all.

Steve, for you to retrieve absolute top and left your element has to
positioned absolute or relative. This seems like a requirement for your
menu, so simply absolutely position the panel. This will work

1.add your panel to the placeholder
2.right after you add the panel to the placeholders control collection set
the values --important you set it after adding it to the controls collection
otherwise it wont maintain state.
panel1.Style["TOP"] = "100px"
panel1.Style["LEFT"] = "100px"
panel1.Style["POSITION"] = "ABSOLUTE"

3. You are manually setting absolute top and left so pass the values to your
js code --solves the problem.
4. You dont even need to check for absolute left and top of your panel
because you are adding this yourself


It will take a while till you get it sitting where you want so you are going
to have to try playing with the left and top values and position the panel
where you want it. *Note at this point you are not using your table anymore
for the placement, your panel will float and can be positioned anywhere
based on the left and top values you supply. Pass these same values to your
js code ;P

Do not worry, keep posting --that way if someone else had these same needs
this will get helpful