Develop Reference

Please Wait Loading Bar on button click not showing

Good Day Every one,
So here is my code:
I have a Div in my aspx page that contains a loading bar gif image
<div runat="server" id="divwait" style="border-right: #808080 1px solid; border-top: #808080 1px solid;
z-index: 100; left: 570px; border-left: #808080 1px solid; border-bottom: #808080 1px solid;
position: absolute; top: 401px">
<div class="body" style="padding-right: 10px; padding-left: 10px; border-left-color: #808080;
border-bottom-color: #808080; padding-bottom: 10px; border-top-style: solid;
border-top-color: #808080; padding-top: 10px; border-right-style: solid; border-left-style: solid;
background-color: #f2f2f2; border-right-color: #808080; border-bottom-style: solid">
<img alt="" src="Images/ajax-loader.gif" /> <br />
<asp:Label ID="Label7" runat="server" BackColor="White" BorderColor="White" Text="Processing transaction. Please wait."
Width="219px" ForeColor="Black"></asp:Label></div>
what I'm trying to do is to invoke/open the div upon button click that's why i use this code in my button click
protected void uploadButton_Click(object sender, EventArgs e)
{
divwait.Visible = true;
// do serverside process after showing the div
}
the problem is that when i click the uploadbutton, it doesn't view the divwait before doing the processes below.
What i aim on doing is making a please wait loading bar that would notify the users to please wait because the processes that is going to take place in the upload button takes some time to finish.
I'm really sorry if this is a newbie question i have just started learning programming.
im using VS 2005/.net2.0 and i cannot use ajax as what i have saw in other examples.
thank you for your help and kind understanding.
**EDIT
In the Page Load i have hid the div
if (!Page.IsPostBack)
{
divwait.Visible = false;
}
the div should only be shown upon button click and while the sytem do it's work.
if you can recommend also recommend other process to do this, that would be highly appreciated.

In your Page_Load you should probably hide the div only if IsPostBack is false:
if (!IsPostBack) {
// first time we load the page, hide the div
divwait.Visible = false;
}

Anchoring from a link to label in a repeater

I have a list on top of my page that has a few different countries on it. I need to have an #anchor that will pop half way down the page to the country picked. However the countries down the page are pulled from a Database and are listed by HyperLinks in a repeater.
<td align="center">
<ul style="list-style-type: none;">
<li>USA </li>
<li>Canada </li>
<li>Australia </li>
</ul>
</td>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hlCountryName" runat="server" Style="color: #6D94B8; font-size: 20px; font-weight: bold; margin-bottom: 5px; padding-left: 10px;"></asp:HyperLink>
And inside the DataList1_ItemDataBound method in the C# section I did:
hlCountryName.Attributes.Add("href", "#" + drCountry[Common.Data.Country.Constants.countryName].ToString());
Yet when I click on the link at the top of the page I am not taken anywhere. I am wondering what I could be missing in my code? Or if I have miss understood how to do this altogether? Any help is appreciated. Thanks!

You should just try to replace this line :
hlCountryName.Attributes.Add("href", "#" + drCountry[Common.Data.Country.Constants.countryName].ToString());
with :
hlCountryName.Attributes.Add("name",drCountry[Common.Data.Country.Constants.countryName].ToString());

How to wrap content of H1 tag

I am unable to explain my question. But if anyone understood what I want please do edit.
I have following code
<table style="width:100%">
<tr style="border-style: none solid solid solid; border-width: thin; border-color: #C0C0C0; background-color: #FFFFFF">
<td class="style4" width="100%"
style="border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #C0C0C0"
align="left">
<h1 style="font-style: normal; font-weight: normal;">
<%=t.getTitle() %>
</h1>
Whenever t.getTitle() returns a larger string that is in one line, my heading goes out of the page (overflow). I want to wrap the content of h1 into td having it.
Like stackoverflow.com uses for its question titles.

Quite seldom, text overflows text-boxes. In such cases, one can force the browser to change wrapping. web designer wall explains it here:
.break-word {
word-wrap: break-word;
}
Changes rendering behavior like this:
Additionally, while maybe not helpful in the current situation, one may hide any overflow using CSS:
style="overflow:hidden;"
PS: Actually, I wonder, if word-wrap is the root cause your problem.

1000 words will be wrapped.
1 word with 1000 character won't be wrapped.
Try:
word-wrap:break-word;

Accordian: Arrow image not displaying even though image path is correct

I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either

Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.

Simple Gridview and button problems. I am learning Asp.Net. Please help me out!

I would not say I wasted my time, but spent around few hours changing this. But in vain. Could some one please help me out.
In the following code:
I need to use break in between Disable Location(Title) and the gridview
I want the border color of grid to none. I do not want any color.
I want both the buttons Disable or deactivate and Cancel to be displayed just below the gridview. and in the middle of the page.
<div style="display: block; background: url(images/reusable_blue_bg.jpg) repeat-x 0 -15px;
border-left: #88b9c7 1px solid; border-bottom: #88b9c7 1px solid; border-top: #88b9c7 1px solid;
border-right: #88b9c7 1px solid; padding: 0px 2px; height: 236px; min-height: 236px;
height: auto; margin-left: auto; margin-right: auto;">
<table align="center" style="width: 554px; border-top-style: none; border-right-style: none;
border-left-style: none; border-bottom-style: none" id="TABLE1">
<tr>
<td align="center" colspan="5" style="font-weight: normal; font-size: 20px; margin: 0px;
font-family: Arial; color: #1e7c9b;">
Disable Location</td>
</tr>
I need number 1 over here..
<asp:GridView ID="disableloc" runat="server" AutoGenerateColumns="False" DataKeyNames="LocationName"
DataSourceID="" AllowPaging="True" EnableViewState="true" BorderStyle="None">
i want 2 over here, i guess
</asp:GridView>
I want 3 in here..
<tr align ="center" style="position:fixed">
<asp:ImageButton ID="btnDisable" runat="server" ImageAlign="Middle" ImageUrl="~/images/green-deactivate.gif" OnClick="btnDisable_Click"
ValidationGroup="group1" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/images/cancel.gif" OnClick="btnCancel_Click" />
</tr>
</table>
</div>

Use padding-bottom in the header td style to get the proper spacing.
Use gridlines="None" on the GridView.
Put the Gridview and the buttons in td:s to place them properly.

This is rather basic HTML/CSS knowledge (nothing wrong with that), but investigating basic information sources may help you help yourself.
As to your specific items:
A 'break' can be as simple as a <br /> statement between the controls
if you don't want colors: #88b9c7 and similar-looking statements are colors.
As you're using a table, positioning the buttons below your grid can be done by placing them in the correct <tr> / <td>

For #1, try using margin or padding on the td, or wrap "Disable Location" in a span (or something) and style its margin/padding to give some space.
For #2, try setting Gridlines="None" on the GridView.
For #3, make sure you have a <td> inside the <tr>, and try using text-align:center on either the td or a div wrapping the buttons. Alternatively, don't put it in the table, just wrap them in a div with text-align:center, right under the table (do you need the table at all?)