使用JavaScript验证来使用jQuery

Question

Hi I'm kind of new to Javascript and jQuery, what I want to do is a suggestion box that opens when the user clicks on a bottom div or button, and the div appears, so to do that I will use jQuery, the problem is that this will only be shown to logged users. I know how to validate a session state with Javascript, so here comes my question, how can I make this thing to only show to logged in users using only jQuery, or using a Javascript? Can I use both?

Note: I'm using .ASPX with C# on Visual Studio, this file uses a MasterPage

Here is the jQuery code, animations work kind of lame but it works as intended:

<script>
    $(function () {
        $("#chat_content").hide();
        $("#chat_content").css('bottom:-280px;');
        $("#chat_header").click(function () {
            $("#chat_content").toggle(250);
            $("#chat_content").animate({bottom:'0'});
        });
    });
</script>

Here the HTML, still no backcode on C#, that I will do later

<asp:Content ContentPlaceHolderID="chat_on" ID="cajadechat" runat="server">
    <div id="chat_header">
        <label id="bar_content_lbl">Chat en Línea</label>
        <img src="imagenes/botones/icono chat.png" id="chat_icon" />
    </div>
    <div id="chat_content">
        <span id="chat">
        En este momento no estamos conectados al Chat. Pero déjanos un mensaje y muy pronto nos contactaremos contigo. ¡Gracias!</span><br /><br />
        Su nombre*:<br />
        <asp:TextBox ID="txt_nombrechat" CssClass="chattext" runat="server" ></asp:TextBox><br />
        Su correo*:<br />
        <asp:TextBox ID="txt_correochat" CssClass="chattext" runat="server" ></asp:TextBox><br />
        Su pregunta*:<br />
        <asp:TextBox TextMode="MultiLine" CssClass="chatarea" runat="server" ></asp:TextBox><br />
        <asp:Button ID="btn_chat" CssClass="chatbutton" runat="server" Text="ENVIAR" />
    </div>
</asp:Content>

And here the corresponding CSS

#contacto_ebook{
    position:fixed;
    right:150px;
    bottom:0;
    z-index:40;
    font-family: EuroStileTRegExt;
}
#chat_header{
    height:10px;
    width:260px;
    padding:10px 0 10px;
    background-color:#3a80cb;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
#chat_header:hover{
    background-color:#499cf5;
    cursor:pointer;
}
#chat_content{
    height:280px;
    width:240px;
    background-color:#ffffff;
    text-align:left !important;
    padding:5px 10px 0 10px;
}
.chatbutton,.chattext,.chatarea{
    border-radius:3px;
    font-size:14px !important;
}
.chatbutton{
    height:40px;
    width:100%;
    margin-top:4px;
    cursor:pointer;
    color:#ffffff;
    box-shadow:none;
    background-color:#3a80cb;
    border:none; 
}
.chatbutton:hover{
    background-color:#499cf5;
}
.chattext,.chatarea{
    width:98%;
}
.chatarea{
    resize:none;
    outline-color:#3a80cb;
    height:52px;
}
#bar_content_lbl{
    color:#ffffff !important;
    font-size:14px !important;
    cursor:pointer;
    float:left;
    margin-left:10px;
}
#chat_icon{
    width:14px;
    height:14px;
    float:right;
    margin-right:10px;
}
#chat{
    text-align:justify !important;
    font-size:12px !important;
}

Answer 1

How are you showing that the user is logged in? Is this an MVC application where you would be able to pass whether or not the user is logged in to the view? Then you would simply have to check a certain value on the DOM for whether or not the user is logged in and then display.

Modern browsers also have access to local storage, so you could store whether or not the user is logged in there, then check with javascript / jQuery and display accordingly.