Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Show/hide divs according to server side variable

Reply
Thread Tools

Show/hide divs according to server side variable

 
 
Mike P
Guest
Posts: n/a
 
      06-20-2008
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 ***
 
Reply With Quote
 
 
 
 
Munna
Guest
Posts: n/a
 
      06-20-2008
Hi,

Put your variable's value in a hidden input ....
access the hidden input from javascript ...
and perform your operation

Best of luck

Munna

www.munna.shatkotha.com
www.munna.shatkotha.com/blog
www.shatkotha.com
 
Reply With Quote
 
 
 
 
Mike P
Guest
Posts: n/a
 
      06-20-2008
How exactly would I do that?


*** Sent via Developersdex http://www.developersdex.com ***
 
Reply With Quote
 
BWC
Guest
Posts: n/a
 
      06-20-2008
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 ***
>

 
Reply With Quote
 
rogers.terry@gmail.com
Guest
Posts: n/a
 
      06-20-2008
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 <(E-Mail Removed)> 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***


 
Reply With Quote
 
Mike P
Guest
Posts: n/a
 
      06-20-2008
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 ***
 
Reply With Quote
 
rogers.terry@gmail.com
Guest
Posts: n/a
 
      06-20-2008
On Jun 20, 2:50*pm, Mike P <(E-Mail Removed)> 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.
 
Reply With Quote
 
BWC
Guest
Posts: n/a
 
      06-20-2008
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


"(E-Mail Removed)" wrote:

> On Jun 20, 2:50 pm, Mike P <(E-Mail Removed)> 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.
>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
side-by-side divs Sam Takoy HTML 4 08-25-2010 11:25 PM
2 Divs side-by-side causing me grief Yobbo ASP General 3 11-12-2006 08:38 AM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM
3 divs side-by-side? theo HTML 7 02-11-2005 05:51 AM
How can Server-Side variable'value be given to Client-Side variable by program Jack ASP General 3 01-29-2004 01:09 AM



Advertisments