Show/hide divs according to server side variable

Discussion in 'ASP .Net' started by Mike P, Jun 20, 2008.

  1. Mike P

    Mike P Guest

    How would I show or hide a div that is using client side Javascript
    based upon a server side variable?

    Here are my divs :

    <div id="idButton5" class="otherLeftBarLink" onmouseover="javascript:
    changeStylesMouseOver('5');" onmouseout="javascript:
    changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'">
    <div class="leftBarLinkText">
    Add Project
    </div>
    </div>
    <div id="idButton7" class="otherLeftBarLink"
    onmouseover="javascript: changeStylesMouseOver('7');"
    onmouseout="javascript: changeStylesMouseOut('7');"
    onclick="location='/AddTask.aspx'">
    <div class="leftBarLinkText">
    Add Task
    </div>
    </div>

    I want to use a variable that is being set in the Page_Load event to
    determine whether I show or hide each of these divs.



    *** Sent via Developersdex http://www.developersdex.com ***
     
    Mike P, Jun 20, 2008
    #1
    1. Advertising

  2. Mike P

    Munna Guest

    Munna, Jun 20, 2008
    #2
    1. Advertising

  3. Mike P

    Mike P Guest

    Mike P, Jun 20, 2008
    #3
  4. Mike P

    BWC Guest

    If you add the attribute runat="server" to the divs, you will be able to
    programmatically reference them as a server side control.

    For example

    //asp.net
    <div runat="server" id="idButton5" class="otherLeftBarLink"
    onmouseover="javascript:
    changeStylesMouseOver('5');" onmouseout="javascript:
    changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'">
    <div class="leftBarLinkText">
    Add Project
    </div>
    </div>


    //c#

    protected void Page_Load(object sender, EventArgs e)
    {
    this.idButton5.Visible = false;
    }


    Obviously this c# can be extended to check a variable that exists in the
    class, and thus conditionally show the div.

    If you are rendering the Div using a Repeater or other databound control,
    you may not be able to do this directly, but would need to first find the
    control within the repeater in order to access it programmatically.

    Good luck,
    BWC

    "Mike P" wrote:

    > How would I show or hide a div that is using client side Javascript
    > based upon a server side variable?
    >
    > Here are my divs :
    >
    > <div id="idButton5" class="otherLeftBarLink" onmouseover="javascript:
    > changeStylesMouseOver('5');" onmouseout="javascript:
    > changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'">
    > <div class="leftBarLinkText">
    > Add Project
    > </div>
    > </div>
    > <div id="idButton7" class="otherLeftBarLink"
    > onmouseover="javascript: changeStylesMouseOver('7');"
    > onmouseout="javascript: changeStylesMouseOut('7');"
    > onclick="location='/AddTask.aspx'">
    > <div class="leftBarLinkText">
    > Add Task
    > </div>
    > </div>
    >
    > I want to use a variable that is being set in the Page_Load event to
    > determine whether I show or hide each of these divs.
    >
    >
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    >
     
    BWC, Jun 20, 2008
    #4
  5. Mike P

    Guest

    In the page load event register some custom javascript to include on
    the page, e.g.

    protected void Page_Load(object sender, EventArgs e)
    {
    // build custom javascript string based on server parameter
    string myJavascript = "var myParameter = '" + this.MyParameter +
    "';";
    // register script on page
    Page.ClientScript.RegisterClientScriptBlock(
    Page.GetType(), "MyScript", myJavascript, true);
    // now myParameter can be used in javascript code on the page
    }
    private string MyParameter
    {
    get { ... }
    }


    Alternatively you could put runat="server" on the divs and set the
    Visible property as you would on a server control, but that's entirly
    server side, not javascript.

    Terry.



    On Jun 20, 12:02 pm, Mike P <> wrote:
    > How would I show or hide a div that is using client side Javascript
    > based upon a server side variable?
    >
    > Here are my divs :
    >
    > <div id="idButton5" class="otherLeftBarLink" onmouseover="javascript:
    > changeStylesMouseOver('5');" onmouseout="javascript:
    > changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'">
    >         <div class="leftBarLinkText">
    >             Add Project
    >         </div>
    >     </div>
    >     <div id="idButton7" class="otherLeftBarLink"
    > onmouseover="javascript: changeStylesMouseOver('7');"
    > onmouseout="javascript: changeStylesMouseOut('7');"
    > onclick="location='/AddTask.aspx'">
    >         <div class="leftBarLinkText">
    >             Add Task
    >         </div>
    >     </div>
    >
    > I want to use a variable that is being set in the Page_Load event to
    > determine whether I show or hide each of these divs.
    >
    > *** Sent via Developersdexhttp://www.developersdex.com***
     
    , Jun 20, 2008
    #5
  6. Mike P

    Mike P Guest

    I am setting runat="server" on the divs and set the
    Visible property as you would on a server control, but whenever my code
    calls one of my Javascript functions I get the error 'object required'
    when I am passing the div id to the function changeStylesMouseOver(id).
    But this works fine when I don't set runat="server".

    Any ideas why?

    *** Sent via Developersdex http://www.developersdex.com ***
     
    Mike P, Jun 20, 2008
    #6
  7. Mike P

    Guest

    On Jun 20, 2:50 pm, Mike P <> wrote:
    > I am setting runat="server" on the divs and set the
    > Visible property as you would on a server control, but whenever my code
    > calls one of my Javascript functions I get the error 'object required'
    > when I am passing the div id to the function changeStylesMouseOver(id).
    > But this works fine when I don't set runat="server".
    >
    > Any ideas why?
    >
    > *** Sent via Developersdexhttp://www.developersdex.com***


    The server side Visible property will cause the control not to be
    rendered out to the browser.

    To have it there but hidden change the CSS style properties of the
    control rather than the Visible property.

    Terry.
     
    , Jun 20, 2008
    #7
  8. Mike P

    BWC Guest

    In addition, marking the div tag as runat=server will have changed its ID
    when it is rendered on the client.

    In order to get access to the div tag with a modified name, you have a
    number of options:

    1: Reference it as an object in javascript, notice the use of the keyword
    "this" in the following javascript statements :
    <div id="idButton5" class="otherLeftBarLink" onmouseover="javascript:
    changeStylesMouseOver('5', this);" onmouseout="javascript:
    changeStylesMouseOut('5', this);" onclick="location='/AddProject.aspx'">

    You would then be able to set a class on "this" by defining the
    changeStylesMouseOver thusly:

    function changeStylesMouseOver(intButtonId, divElement)
    {
    divElement.className = "someCSSClass";
    }

    2: Render the Control.ClientID server side value into the javascript context:
    <script language="javascript">
    function changeStylesMouseOver(intButtonId)
    {
    document.getElementById("<%= this.idButton5.ClientID %>").className =
    "someCSSClass";
    }
    </script>


    Good luck,
    BWC


    "" wrote:

    > On Jun 20, 2:50 pm, Mike P <> wrote:
    > > I am setting runat="server" on the divs and set the
    > > Visible property as you would on a server control, but whenever my code
    > > calls one of my Javascript functions I get the error 'object required'
    > > when I am passing the div id to the function changeStylesMouseOver(id).
    > > But this works fine when I don't set runat="server".
    > >
    > > Any ideas why?
    > >
    > > *** Sent via Developersdexhttp://www.developersdex.com***

    >
    > The server side Visible property will cause the control not to be
    > rendered out to the browser.
    >
    > To have it there but hidden change the CSS style properties of the
    > control rather than the Visible property.
    >
    > Terry.
    >
     
    BWC, Jun 20, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. middletree
    Replies:
    0
    Views:
    594
    middletree
    Oct 25, 2005
  2. Mike P

    show/hide divs on checkbox click

    Mike P, Nov 14, 2007, in forum: ASP General
    Replies:
    1
    Views:
    250
    Dooza
    Nov 14, 2007
  3. Frances
    Replies:
    3
    Views:
    117
    Randy Webb
    Sep 9, 2005
  4. tlyczko
    Replies:
    5
    Views:
    130
    tlyczko
    Dec 8, 2005
  5. ll
    Replies:
    2
    Views:
    662
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page