I have implemented some web-page in ASP.NET. I want to add a progress bar to my page. Because the page takes several minutes to load.
I want to put show Progress bar function at the start of Page_Load function. And hide it at the end of the Page_Load function. How can I implement this?
Please give me some advice. Thank you in advance.
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 220px;
height: 20px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
text-align: center;
line-height: 20px;
}
</style>
<script type="text/javascript">
function ToggleProgressBar() {
var loading = window.jQuery('#loading');
if (loading.is(':visible')) {
loading.hide();
}
else {
var top = Math.max(parseInt($(window).height() / 2 - loading.height() / 2), 0);
var left = Math.max(parseInt($(window).width() / 2 - loading.width() / 2), 0);
loading.css({ top: top, left: left });
loading.show();
}
}
function blahblah(s, e) {
// some blah blah function contents
}
function blahblah2(s, e) {
// some blah blah function contents
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
**// TODO: Show Progress Bar**
DelayTime(); // dummy function to delay page load
**// TODO: Hide Progress Bar**
}
protected void DelayTime()
{
txt_delay.InnerText = "";
for (int i = 0; i < 3000; i++)
{
txt_delay.InnerHtml += i.ToString("0000") + ", ";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="txt_delay" runat="server"></span>
<div id="loading" align="center" runat="server">
Loading...
<%--<img src="/Images/progress-indicator.gif" alt="" />--%>
</div>
</div>
</form>
</body>
</html>
Another way would be to give your css a class. Then put a div as a placeholder where you want the window to show. Give the div an id and assign it's css class the id of your class and set the display attribute to none. Then when you are ready use a bit of jquery to change the display from none to say block. assuming you have done something like div id='myWait' display='none' class='mycssclass'
then jquery along the lines ('#myWait').attr('display','block');
Related
Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}
Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>
Good Morning
I have a webpage with a button pad on it. It is used at a gas station with bad network so everytime they click on the button to add a number to the textbox it will load forever so I changed the button clicks to javascript.
It works perfectly but now the code behind gets an empty value (Not null) when i retrieve the value from the textbox.
This is my code
The buttons used to add the numbers to the textbox
and the textbox
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
/*background-color: black;*/
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtRknr" runat="server" CssClass="txtBoxRknr" PlaceHolder="Rekening Nommer" Enabled="False" autocomplete="off" Width="175px"></asp:TextBox>
<input type="button" id="btnPad1" runat="server" value="1" class="buttonsb" onclick="input(this);"/>
<input type="button" id="btnPad2" runat="server" value="2" class="buttonsb" onclick="input(this);"/>
<asp:Button ID="btnMsg1" runat="server" Text="Gaan Voort" CssClass="buttonsa" OnClick="btnMsg1_Click" />
</form>
</body>
<script type="text/javascript">
function input(e) {
document.getElementById("<%=txtRknr.ClientID %>").value = document.getElementById("<%=txtRknr.ClientID %>").value + e.value;
}
</script>
</html>
And this is my code in the code behind file
protected void btnMsg1_Click(object sender, EventArgs e)
{
lblError.Text = "";
//string user = txtRknr.Text;
string user = ((TextBox)FindControl("txtRknr")).Text;
if(user == "")
//if (txtRknr.Text == "")
{
lblError.Text = "ONGELDIGE REKENING NOMMER";
return;
}
}
Basically all this needs to do is add an account number to a textbox from an button pad on the website.
After the account is added they would click on continue button and then the code behind checks if the textbox is empty if it is not empty it connects to database to check if it is valid.
But no matter how many numbers i add to the textbox it is still empty when i access it from code behind.
Enabled="False" means that your input field will have a disabled attribute. Disabled form elements do not get posted in HTML forms, which means that when you access it from the code-behind, it's using the default value of the textbox.
Try ReadOnly="True" instead of Enabled="False" if you don't want the field to be edited by hand.
EDIT
I guess ASP.NET prevents you from reading the value from a ReadOnly=True textbox, to prevent you from doing exactly what you're trying to do. A <asp:HiddenField> creates an <input type="hidden">, which you should be able to write the value and have it posted properly to the codebehind.
In the line
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
replace in Inherits="OVKWEBAPP.WebForm1" with Inherits="OVKWEBAPP.default"
try this.
Request.Form["by-name-attribute"];
Problem
When I click the buttons for playoff season or regular, the divs that holds the content players-list and players-regular appear to jump out of place when they fade in and out. How do I prevent this from happening?
I've tried using position fixed on some of elements, but things would get way out of place. I've included a JSFiddle here: http://jsfiddle.net/onlyandrewn/gcthaffs/
Click listener
// Click listener, toggles between sheets
$('button').click(function() {
$('button').removeClass("active");
$(this).toggleClass("active");
if ($('button.regular').hasClass('active')) {
$('#players-list').fadeOut(500);
$('.note').fadeOut(500);
$('#players-regular').fadeIn(2000);
} else {
$('#players-regular').fadeOut(500);
$('#players-list').fadeIn(2000);
$('.note').fadeIn(2000);
}
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Wheat Kings' leading point scorers</title>
<meta name="description" content="Wheat Kings' leading point scorers">
<meta name="author" content="Andrew Nguyen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Wheat Kings leading goal scorers</h1>
<p class="year"></p>
<button class="playoffs active">Playoffs</button>
<button class="regular">Regular Season</button>
<div class="top">
<div id="players-list"></div>
<div id="players-regular"></div>
<p class="note">Note: Since there was a five-way tie for 6th place, players who scored two goals were then ranked by their total points in the playoffs. The other two players not listed here are Nolan Patrick and Macoy Erkamps.</p>
</div><!-- /.top -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<!-- This is where the template for facts goes -->
<script id="players" type="text/x-handlebars-template">
<div class="container">
<div class="group">
<div class="{{row}}">
<p class="goals">{{goals}}</p>
<img src="{{image}}" alt="" class="head">
<p class="name">{{name}}</p>
<p class="position">{{position}}</p>
</div><!-- /.group -->
</div><!-- /.row -->
</div><!-- /.container -->
</script>
<script type="text/javascript">
// Click listener, toggles between sheets
$('button').click(function() {
$('button').removeClass("active");
$(this).toggleClass("active");
if ($('button.regular').hasClass('active')) {
$('#players-list').fadeOut(500);
$('.note').fadeOut(500);
$('#players-regular').fadeIn(2000);
} else {
$('#players-regular').fadeOut(500);
$('#players-list').fadeIn(2000);
$('.note').fadeIn(2000);
}
});
// Original
var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1RMN49oyRlTxW5kv8MnYJwQRttis2csgVFH46kyORCaQ/pubhtml";
$(document).ready( function() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
parseNumbers: true } );
});
function showInfo(data, tabletop) {
var source = $("#players").html();
var template = Handlebars.compile(source);
// The actual name of the sheet, not entire .csv
$.each(tabletop.sheets("Playoffs").all(), function(i, fact) {
var html = template(fact);
// You need an element with this id or class in your HTML
$("#players-list").append(html);
$('.container').eq(i).addClass(data.Playoffs.elements[i]);
// This logs all the objects in the sheet
// console.log(data);
// This logs just validity
// console.log(data.Playoffs.elements[i]);
})
// If you need to get data from a second sheet in single Google Doc
$.each(tabletop.sheets("Regular").all(), function(i, fact) {
var html = template(fact);
// You need an element with this id or class in your HTML
$("#players-regular").append(html);
$('.container').eq(i).addClass(data.Regular.elements[i]);
// This logs all the objects in the sheet
// console.log(data);
// This logs just validity
// console.log(data.Regular.elements[i]);
});
}
</script>
</body>
</html>
base.scss
/*----------------------------------
MAIN STYLES
----------------------------------*/
html {
font-size: 62.5%; /* 10px browser default */
}
body {
max-width: 600px;
padding: 10px;
}
.top {
max-width: 600px;
}
#players-list,
#players-regular {
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: 900;
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
}
.note {
position: relative;
width: 95%;
left: 3%;
}
This is happening because the fadeOut is not done when the fadeIn starts. You end up with both divs visible for a short period of time, and when the fadeOut is done the first div is hidden and you see the jump.
How about something like this:
$('#players-list').fadeOut(500, function() {
$('#players-regular').fadeIn(500);
});
This way the second div is displayed only when the first one is completely hidden.
Also, decrease the animation duration a bit, it makes for better user experience ;).
I have a script that works to switch between two popups that are triggered by an onmouseover event. One feature of this is that the popup persists until the next onmouseover event. I want to have many of these and so the popup to be hidden can not be 'hard coded' as in my script. Is there a way to store in a variable the id of the popup that needs to be undisplayed the next time the popup function is called?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function popup(show,hide){
show.style.display="block"
hide.style.display="none"
}
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr>
<td onmouseover="popup(pop1,pop2)">Show popup 1</td>
<td onmouseover="popup(pop2,pop1)">Show popup 2</td>
</tr></table>
<div class="pop" id="pop1">This is popup 1</div>
<div class="pop" id="pop2">Popup 2 is here</div>
</body>
</html>
or go to http://www.salemharvest.org/Utilities/TestingPHP/testingpopupdivs5.php
One way to generalize it is to use element index to show the associated popup. This will require that the popup elements (pop class elements) is contained by an element, in order to make both the popper and the popup element indexes mapped equally like two arrays of same length.
When showing a popup, the popup element is saved in a variable which will be used later when the mouse is on a different popper element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.cellIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").cells, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr id="poppers">
<td>Show popup 1</td>
<td>Show popup 2</td>
</tr></table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
</div>
</body>
</html>
I probably should have started with this, but my poppers will actually be rows, not cells. I tried what seemed like simple modifications of Jay's code to do it with rows. I changed it to index rows and then used rowIndex to find the popups, but I am missing something.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// function by Jay at stackoverflow
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.rowIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").rows, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 100px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table id="poppers">
<tr><td>Show popup 1</td></tr>
<tr><td>Show popup 2</td></tr>
<tr><td>Show popup 3</td></tr>
</table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
<div class="pop">And then popup 3</div>
</div>
</body>
</html>
HTML Code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.msg_body
{
display: none;
}
</style>
<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".msg_head").click(function () {
$(this).next(".msg_body").slideToggle();
})
$(".msg_headRoot").click(function () {
$(this).next(".msg_bodyRoot").slideToggle();
})
.toggle(function () {
$(this).children("span").text("[+]");
}, function () {
$(this).children("span").text("[-]");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="msg_headRoot" style="cursor: pointer;">
<p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Root
</p>
<div class="msg_bodyRoot">
<div class="msg_head" style="cursor: pointer;">
<p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Hello
</p>
<div class="msg_body">
Div text
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Query
Right now it is keeping the div opened. I want to keep the div closed by default and user should click the plus to open it.
EDIT
Forgot to mention the root div. I have actually one nested div. I meant on click the plus of outer dive should open the inner div
CSS:
.msg_body, .msg_bodyRoot {display: none;}
Updated JS:
$(document).ready(function() {
var toggler = function(elem) {
elem.slideToggle(500, function() {
if (elem.is(':visible')) {
elem.parent().find("p:first > span").text("[-]");
} else {
elem.parent().find("p:first > span").text("[+]");
}
});
};
$('div.msg_headRoot').click(function(e) {
toggler($(this).children(".msg_bodyRoot"));
e.preventDefault();
return false;
});
$("div.msg_head").click(function(e) {
toggler($(this).children(".msg_body"));
e.preventDefault();
return false;
});
});
Working fiddle: http://jsfiddle.net/N9E9b/2/
Add some CSS to your markup:
.msg_body { display: none; }
You are missing a semi-colon, and no toggle on the inner part. I made some assumptions on my part that the root should work with its child and the inner with its child. I surely hope I have not made an oversimplification of what you want here.
EDIT: REMOVED BAD CODE THAT HAD BUGS
Just to follow up with the simpler: (and fix a minor issue with +/- text in prior version)
$(document).ready(function() {
$(".msg_head,.msg_headRoot").click(function() {
$(this).next(".msg_body").slideToggle();
var clickp = $(this).children("span:contains('+')");
var clickm = $(this).children("span:contains('-')");
clickp.text("[-]");
clickm.text("[+]");
});
});
<div>
<p class="msg_headRoot"><span>[-] </span>Root</p>
<div class="msg_body">
<p class="msg_head"><span>[+] </span>Hello</p>
<div class="msg_body">Div text</div>
</div>
</div>
.msg_headRoot,.msg_head{margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold; cursor:pointer;}
.msg_body div.msg_body{display:none;}
Example here: http://jsfiddle.net/ykRaY/3/