jquery and html elements that run at server

Question

Hi,

I have a element contained in a user control (header). This div includes sub divs inside it. One of them includes user options. The user options div () displays the username of the logged in user, and couple of links related to already signed in users such as logout, settings etc.. the "user_options" div is absolutely positioned within the "header" div.

Now, in the login page itself, I want to hide this div since the user is taken there because she/he is not logged in. In this case, I put a runat="server" attribute to the "user_options" div and I carry a check in page_load event of the .aspx page to see is the user is logged in as follows;

if check_user_loggedin() then
  user_options.attributes("style") = "display:none;"
  ' also tried this with user_options.visible = false and 
else
  user_options.attributes("style") = "display:block;" 
  ' in this one, I even tried the whole positioning css e.g. display:block; positon:absolute; left:100px; etc...
end if

now with this code, when I run the project, it works fine where I do not want to display the div - it gets hidden successfully. But in those pages where I need to show the div, it still gets displayed at the far top left side of the page, and the jquery click event of other "div" elements inside it also don't work.

I presume it has something to the with the execution order or the page event cycle but can you suggest any workaround for this?

========= EDIT =========================
THIS IS THE CSS:

   #user_options
    {
        position:absolute;
        top:18px;
        right:10px;
        width:200px;
        color:#ffffff;
        text-align:right;
    }

THIS IS THE HTML:

<div id="user_options" **runat="server"**>
    <strong><a class="whiteLink" href="#"><%=MyNamespace.Users.getUsernameFromCookie%></a></strong> | <a class="whiteLink" href="usr_logout.aspx">logout</a> | <a class="whiteLink" href="#">settings</a> | <a class="whiteLink" href="#">help</a>
</div>

THIS IS THE CODE IN USER CONTROL:

Private _displayUserOptions As Boolean
Public Property displayUserOptions() As Boolean
    Get
        Return _displayUserOptions
    End Get
    Set(ByVal value As Boolean)
        _displayUserOptions = value
    End Set
End Property


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If displayUserOptions Then
        user_options.Attributes("style") = "display:none;"
    Else
        user_options.Attributes("style") = "display:block;"
    End If
End Sub

THIS IS WHAT I CALL IN THE HTML PAGE TO DISPLAY THE USER CONTROL

<uc1:x_layout_top ID="x_layout_top1" runat="server" displayUserOptions="false" />

Answer 1

Your problem probably stems from nested naming containers. When your user control is placed on a page and the div is given the runat="server" attribute, then it will probably name the div something like ID="ctrl00_user_options".

As an alternative and if you are using the Membership provider framework, you could use the loginname control to control whether a user's name is displayed. Otherwise, you could do something like this in your markup (assuming there's a variable named user that is available to the page:

<script type="text/javascript">
$(function() { if (user) { $("#<%= user_options.ClientID %>").hide();});
</script>

Answer 2

Before we get to ASP.NET 4.0 and ClientIdMode="Static" I would suggest using unique class names to work around this issue.

<div id="user_options" runat="server" class="user_options">....

Because then you can a) use code behind to access user_options and then use jQuery and CSS to access .user_options instead of #user_options