CODEWITHSUNDEEP
c#asp.netcsshtml
Donald Cardwell
Donald Cardwell

Reputation: 71

Change DIV position dynamically through C# code-behind

I've created several moveable "widgets" (DIVs with text, image content) for the page I'm working on.

The user can currently go on the page and drag the DIVs about, with the new positions being saved in the database on page unload.

On page_load I can retrieve the most recently saved Top and Left CSS values for each moveable DIV, and I want to set each DIV to its respective saved position on the page. (So when a user logs in, the DIVS are in the same position that they last saw them.)

My problem is that setting the top and left styles from the C# code is not affecting the position of the DIVS. Setting other styles, such as background color, etc have been working okay, but setting the position doesn't do anything.

The Top and Left numbers I am reading from the database are OK, so there are no errors there.

Here is a simple example:

C# Code Behind

  SearchBox.Attributes.Add("style", "top: 111px;");

  SearchBox.Attributes.Add("style", "left: 144px;");

ASPX

<div id="SearchBox" runat="server"  style="position: absolute; width: 157px; z-index: 100; background-image: url('Images/tagsbox.png'); height: 169px;">

text text text text text text text    

</div>

Does anybody have any idea why the position stays the same?

Many thanks

Upvotes: 0

Views: 15339

Answers (3)

Donald Cardwell
Donald Cardwell

Reputation: 71

Thanks for the responses everyone. I found my answer-

Using the 

SearchBox.Attributes.Add("style", "left: 144px;");

line was replacing the style code for the SearchBox with "left: 144px;", rather than adding additional elements to it like I had intended.

The correct line to use was:

SearchBox.Style.Add("left", "144px");

which actually adds on style elements rather than replacing them.

Upvotes: 1

Bobson
Bobson

Reputation: 13706

Try putting this in the ASPX:

<%
  int topValue = 111;
  int leftValue = 144;
%>
<div id="SearchBox" runat="server" style="position: absolute; width: 157px; z-index: 100; background-image: url('Images/tagsbox.png'); height: 169px; top: <%= topValue %>px; left: <%= leftValue %>px;"
      text text text text text text text    
</div>

Just set topValue and leftValue from the database.

Upvotes: 0

CR41G14
CR41G14

Reputation: 5594

You need to adjust the divs client side using a client side language such as jQuery, store the values in a hidden field and then use Jquery to reposition the divs from the values from the server

Upvotes: 0

Related Questions