I'm working on a web application in C# .net, using twitter bootstrap in frontoffice.
In onClick button I need to show a div that contains a progressBar div and when the process finish, hide the div. I'm using this code:
web.aspx:
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="btnProcess_Click" />
// on load web, this div is invisible
<div class="progress progress-striped active invisible" id="progressBar" runat="server">
<div class="bar" style="width: 90%;" id="percentProgresBar"></div>
</div>
And my web.aspx.cs:
protected void btnProcess_Click(object sender, EventArgs e){
// here change class to "visible"
progressBar.Attributes["class"] = "progress progress-striped active visible";
//--- all my process ----
//--- all my process ----
//when my process finish, hide the div again, change the css class to "invisible"
progressBar.Attributes["class"] = "progress progress-striped active invisible";
}
My problem is the div is visible when my process ends, not at the beginning. How can I resolve this? tTo make visible the div before --- all my process ---- and when finish that part of my code, to make the div invisible again.
Thanks for your help!!
You can try changing/converting your div to a server-side control by giving it an ID and add runat="server" , then use it in your code.
instead of using those classes, give the attribute Style="display:none" to hide and Style="display:" to make it visible but that wont serve your purpose. But for displaying the progress bar you can simply use Update Progress
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="upd" onclick="updButton_Click"
text="click to update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
In code behind updButton_Click takes a long time to update, during the period you will see Loading... on the page, you can change the text to a to make it more like a ProgressBar(such as a GIF moving-bar image)
I am trying to use the jquery accordion with a repeater. I used the sample directly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, not sure where this is going wrong.
<script>
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<asp:Repeater ID="respondToExceptionsList" runat="server">
<ItemTemplate>
<h3>Section 1</h3>
<div>
sdfffffffffffffff
</div>
</ItemTemplate>
</asp:Repeater>
</div>
This is the html output.
<DIV id=accordion class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=tablist jQuery1315324170464="2">
<H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 jQuery1315324170464="3">
<SPAN class="ui-icon ui-icon-triangle-1-s" jQuery1315324170464="13"></SPAN><A tabIndex=-1 href="#">Section 1</A></H3>
<DIV style="HEIGHT: 19px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>sdfffffffffffffff </DIV>
</DIV>
This is related to the accordion height being set to zero. I am having the same issue using the accordion in an html repeater generated using angularjs. To fix the problem, the accordion must be refreshed after the data is loaded. I found the answer in the jquery forums here.
I had JavaScript slide show which had Image and text .But I want to mange js code to retrieve it's data(image, text) from database by code .please anyone help more it more difficult.
aspx page:
<form id="form1" runat="server">
<div class="hom_scrooler_con tm10 "><script type="text/javascript" src="js/scroller.js"></script>
<div class="hom_but_a "><img src="images/home-bu_pro.jpg" alt="#" name="Image9" width="134" height="34" border="0" id="Image9" /></div>
<div class="hom_but_a"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/home-bu_news.jpg',1)"><img src="images/home-bu_npro.jpg" alt="#" name="Image8" width="134" height="34" border="0" id="Image8" /></div>
<div class="hom_but_a"><img src="images/home-bu_news.jpg" width="134" height="34" border="0" /></div>
</div>
</form>
JS:
sts_bs("jwscroller2dbd",[20080623,"images/","","blank.gif",0,1,0,50,"50%","left",2,3,298,199,1,10,0,0,0,2000,1,12,2,
"stEffect(\"scroll(Rate=24,enabled=0,Duration=0.50)\")",-2,60],["none",1,"#454545","transparent","","no-repeat"]);
sts_sca(["center","middle","center","middle"],["aro-lft.png","aro-lftr.png","arrowl_gray.gif",56,55,"aro-rt.png","aro-rtr.png","arrowr_gray.gif",55,51]);
sts_tbd([1],["solid",1,"#454545",5,"round_tl.gif","round_tr.gif","round_br.gif","round_bl.gif","transparent","round_t.gif",
"repeat","transparent","round_r.gif","repeat","transparent","round_b.gif","repeat","transparent","round_l.gif","repeat"]);
sts_ai("i0",[0,"New Sharp Copiers Now 2\r\n\r\nHas been the industry\'s standard dummy text ever
when an unknown printer.Simply dummy text of","#","_self","media3_07.png",298,197,"left"],["transparent"
,"bold 10pt Verdana,Arial","#666666","none","bold 10pt Verdana,Arial","#666666","none"]);
sts_ai("i1",[,"New Sharp Copiers \r\n\r\nHas been the industry\'s standard dummy text ever when an unknown printer.Simply
dummy text of",,,"media3_08.png"],[,,,,"italic bold 10pt Verdana,Arial"],"i0","i0");
sts_es();
Don't use JavaScript to connecto to a database. If you want to get data from a database, use jQuery and AJAX to get data from a .Net Web Service. It's pretty simple, and reusable.
You can build your own AJAX controls without jQuery, but I wouldn't...
I have a model pop extender control like:
<cc1:ModalPopupExtender ID="basketPopUp" runat="server"
PopupControlID="Panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG"
TargetControlID="Panel1">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="PopupBody">
<b>Test</b>
<br />
</div>
</asp:Panel>
What i want is to show the popup for 5 seconds and HIDE it AUTOMATICALLY after this period of time.
I've tried this, but, running on the server side, of course it is not working:
public void showAndHidePopUp()
{
basketPopUp.Show();
System.Threading.Thread.Sleep(5000);
basketPopUp.Hide();
}
Do you know how to hide it in a proper way?
Thanks.
Edit:
For announcementes i've decided to use jGrowl-> http://www.stanlemon.net/projects/jgrowl.html
and not ModalPopUp Extender.
Try using a javascript timer, let the client handle it:
http://www.mcfedries.com/JavaScript/timer.asp
http://www.w3schools.com/js/js_timing.asp
How can i use progress bar in web application c#, without ajax tools... When i click from one page to next page..the page load should be shown as in progress bar.. Can anyone help out, without ajax tools..
Thank you in advance
I think you still need javascript but dont need to use the AJAX update panel.
on your page add a div with an
progress animated image
set the div to hidden using CSS
on your linkbutton/button or
whatever, link up your onClick event
as normal
on the same linkbutton/button add an
onClientClick attribute and call a
javascript function to set the div
style to visible
this will in effect display the progress meter until the page has actually posted back.
Wired up Button
<asp:Button ID="btnProgress" runat="server" Text="show progress" OnClientClick="javascript:DisplayProgress()" OnClick="btnProgress_Click"
CausesValidation="false" />
Progress Meter Div
<div ID="pnlProgress" Class="modalBackground" style="visibility: hidden;">
<div id="content" class="modalDialogClear" style="text-align: center; " >
<br />
<br />
looking up address, please wait...<br />
<img src="/images/progress_bar.gif" />
</div>
Javascript
function DisplayProgress()
{
document.getElementById('pnlProgress').style.visibility = 'visible';
window.setTimeout(HideProgressPanel, 20000); //handles hiding the progress panel should the operation time out
}
function HideProgressPanel()
{
document.getElementById('pnlProgress').style.visibility = "hidden", 20000
}
I did in this way, when page load, before loading complete I am show progress bar...
<body onload="javascript:HidePreloader();">
<div id="preloader" style="width: 100%; text-align: center;">
<img src="../Images/loading.gif" alt="" style="display: block;" />
</div>
<script language="javascript" type="text/javascript">
function HidePreloader() {
if (document.getElementById('preloader') != null) {
document.getElementById('preloader').style.visibility = 'hidden';
}
}
</script>