I have a ASP.NET site with nested Masterpages that utilize the .layout() function in jquery.layout.js.
All of the pages display beautifully resizing dynamically, rendering a resizer bar, and vertically scrolling areas. i.e. all of the layout functionality is working.
However I would like to eliminate the "flicker" I am getting on PostBack, so wanted to introduce an ASP:UpdatePanel.
I tried to surround everything within the form on the root Master page with an ASP:UpdatePanel, at which point all of my beautiful formating disappeared, and my pages look a mess. I seem to lose my resizer bar completely and my ui-layout-center now appears
at the bottom of the screen.
My master page resembles the following:
<body id="body">
<form id="BaseForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="ui-layout-north banner">
etc etc
'
'
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
I am using the following script to format my pages:
$(document).ready(function() {
var myLayout;
// myLayout = $('body').layout(); -- syntax with No Options
myLayout = $('#body').layout({
// enable showOverflow on north-pane so popups will overlap other panes
north__showOverflowOnHover: false
// some resizing/toggling settings
, north__spacing_open: 0
// no resizer-bar when open (zero height)
, north__spacing_closed: 0
// big resizer-bar when open (zero height)
, south__spacing_open: 0
, south__spacing_closed: 0
, east__spacing_open: 0
, east__spacing_closed: 0
, south__minSize: 40
, east__maxSize: 10
, north__minSize: 80
, west__minSize: 300
, west__maxSize: 600
});
});
The styles are as follows:
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 0px solid #fff;
padding: 10px;
overflow: auto;
}
.ui-layout-north {*overflow:hidden;}
.ui-layout-south {padding:0px;}
.ui-layout-east {padding:0px;}
.ui-layout-west {
margin-bottom:10px !important;
margin-left:10px !important;
border-right: solid 10px transparent;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
background:#f2f2f3;
border-left:1px solid red;
border-bottom:1px solid red;
}
.ui-layout-center {
padding: 0px !important;
margin-right:10px !important;
margin-bottom:10px !important;
background:#f2f2f3;
border-right:1px solid red;
border-bottom:1px solid red;
}
.ui-layout-resizer { /* all 'resizer-bars' */
background: #fff;
}
.ui-layout-resizer-west {
background:#efefef;
border-bottom:1px solid red;
}
.ui-layout-toggler { /* all 'toggler-buttons' */
background: #111;
}
I have tried various ways of registering my script
- Registering this script using ClientScript.RegisterClientScriptInclude
- using pageload()
- using Sys.WebForms.PageRequestManager.getInstance().add_endRequest
I am sure that the script is running ok as I have added alert("Please work!"); and the alert displays. So something else is interferring with the rendering.
Has anyone any ideas?
A quick suggestion off the top of my head:
If your layout is being broken by the additional div tag that the update panel renders - can you make it just replace the top level div in your layout, instead of surrounding it?
<asp:UpdatePanel ID="updPanel" runat="server"
UpdateMode="Conditional" CssClass=""ui-layout-north banner">
<ContentTemplate>
etc etc
'
'
</ContentTemplate>
</asp:UpdatePanel>
Try registering your javascript file in your scriptmanager.
For example:
<asp:ScriptManager ID="SMgr" runat="server">
<Scripts>
<asp:ScriptReference path="MyScript.js" />
</Scripts>
</asp:ScriptManager>
the fix is simple, you just have to update the "jquery.layout.js" defaults to allow for nested content.
first add a parent container, this can sit just inside the update panel, see:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<div id="ui-wrapper">
remember the closer:
</div>
</ContentTemplate>
</asp:UpdatePanel>
then update the script parameters (You can do this in the "myLayout" bit):
, north__paneSelector: "#ui-wrapper .ui-layout-north"
, south__paneSelector: "#ui-wrapper .ui-layout-south"
, east__paneSelector: "#ui-wrapper .ui-layout-east"
, west__paneSelector: "#ui-wrapper .ui-layout-west"
, center__paneSelector: "#ui-wrapper .ui-layout-center"
Hope this helps
Chris
Related
I am trying to make background color of by DropDown as transparent even for Listitem.
<asp:Label ID="Label1" runat="server" Text="Language : " style="color:white;padding:0 2px 0 2px;background-color: transparent !important;" />
<asp:DropDownList ID="ddlLanguages" runat="server" AutoPostBack="true" style="color:black;background-color: transparent !important;" >
<asp:ListItem style="background-color:transparent" Text="English" Value="en-us" />
<asp:ListItem style="background-color:transparent" Text="French" Value="fr" />
</asp:DropDownList><span style="color: white;;padding:0 2px 0 2px;"> | </span>
but it does not work even added css in my main CSS file still not work
select.tt-dropdown-menu {
background-color: transparent !important;
}
select.tt-dropdown-menu .tt-suggestions .tt-suggestion {
cursor: pointer;
border-bottom: 1px solid #000;
}
not sure why not its working. Any Suggestions !!
Actually, changing the background color to transparent doesn't have any effect at all. That because the select option container has some attributes that are defined by the browser in the first place and the operating system secondly. This means if you change the background color of the ListItem to transparent, the container's color is white and you won't be able to find the difference. Except transparent, you can change the color of the odd, even elements, by using that js/jquery script:
window.onload = function () {
$("#<%=ddlLanguages.ClientID%> option:odd").css("background-color", "red");
$("#<%=ddlLanguages.ClientID%> option:even").css("background-color", "blue");
}
Which can be achieved by css, but I see jquery a more stable choice for implementation in web forms
I have a buying and selling website and above the sellers photos I have a LIKE button which used to work fine but since I've added a new background and moved things around with new margins it is now not clickable. I believe there's a solution with CSS but not sure how to do it.
When logged in on this page: https://www.onlinecarbooty.com/go-booting.aspx
You will see the LIKE icons. You can log in with test12345#aol.com and Password: qwerty
Here's the code I have for the like button..
<div style="width:50px; height:50px; display: inline-block; background:url('/files/images/icons/stallIconLike50.png'); cursor: pointer;" onclick="addLike('<%# Eval("orderID")%>')">
<div style="font-size:12px; color:#000; background:#ffffff; border:1px solid #000; padding:0 3px; float:left; margin: 0px 0 0 38px;" id="<%# Eval("orderID")%>"> <%# Eval("likeCounter")%>
</div>
</div>
JAVA
<script type="text/javascript">
function addLike(stallID) {
$.post('add-like.aspx', { id: stallID }).done(function(data) {
originalColor = $('#'+stallID).css('background-color');
$('#'+stallID).css('background', 'yellow').html(data);
$('#'+stallID).html(data);
setTimeout(function(){
$('#'+stallID).css('background', originalColor);
}, 500);
});
}
</script>
Any help appreciated.
Considering your current markup,
.lasteventimg + div {
z-index: 1;
position:relative;
}
seems to do the trick.
Additionally, pointer-events:none on .stallNew > div:nth-child(2) > div in your layoutNew.css:746 disables pointer-events on the middle button, so the onclick never fires on those items.
It's clearly none of my business but, if you asked me, I'd say your website needs professional services for:
frontend development,
design/layout.
I know this question has been asked many times, but I didn't seem to find any solution that I can understand online. Most says using javaScript and css but I don't really know how to implement that.
I'm using visual studio and i have a master page and several other content pages. On the master page I have a link that redirects me to one of these content pages using
"a href = pages.aspx"
Since the content page uses a SQL query to retrieve data so it takes a very long time. I would like to show a loading spinner or progress bar or even just a text saying "loading..." while the page loads.
Are there anyway to do this?
I also thought about using a label which is only visible when the link is clicked, and goes invisible when the page loads. Is there a way of doing this?
Thanks!
An exact situation with detailed code and explanation, where a loading image is shown on loading of an asp.net page can be seen at following URL : Show Loading Image when Page first Loads.
This has detailed explanation with full working code as well as a link to demo page. You can ask me if you have any questions regarding this sample.
To verify that the loading image shows up in above sample you can simply go to this URL : Loading Image when Page first loads
Another very simple approach with tested/tried sample code is as explained below.
You will need jquery in your aspx page for this to work.
There are three scenarios in which you would like to show a loader element in an aspx page and they are:
On button click that does a non-ajax postback
hyperlink click that navigates to another page
on button click that does an ajax postback
In first two of above scenarios, all you need to do is hookup their client click event with a JavaScript method of ShowProgress. This method shows a popup div that has an animated image in it.
In the last scenario where an ajax postback is done, an UpdateProgress control is used so it automatically hides once the ajax postback completes.
The loader popup is styled to show at center of page in a modal manner'; these styles can be found in the head section of markup pasted below. You can modify some of these styles like border or background-color and also you can substitute any animated image in place of loading.gif.
I tested the markup below with a Page PageTakingLongToLoad.aspx that took 20 s to load the first time it rendered, and with ajax/non-ajax postbacks that took 10 s to complete, and in both cases the loader displayed perfectly as expected.
Markup of Page from which a loader is shown
<%# Page Language="C#" AutoEventWireup="true" CodeFile="InitialPage.aspx.cs" Inherits="InitialPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: lightgray;
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 dashed #f00;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
margin: 0 auto;
text-align: center;
padding-top: 35px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div class="loading">
<div>
Loading. Please wait.<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
Link To Another Page
<br /><br />
<asp:Button ID="btnPostBack" runat="server" OnClientClick="ShowProgress();" OnClick="btnPostBack_Click" Text="Do Long Process without Ajax" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="btnAjax" runat="server" OnClick="btnPostBack_Click" Text="Do Long Process with Ajax" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="loading" style="display: table">
<div>
Processing. Please wait...<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.css("vertical-align", "middle");
loading.css("display", "table-cell");
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
</script>
</form>
</body>
</html>
I have a lenghty ASP.NET page load process.
Is there a way to display a loading gif while the ASP.NET page loads?
Obviously I can't use an image on the page itself, and when I fiirst load a "dummy page" with the "Loading..." picture, that page is discarded as soon as I redirect the user to the real page...
Any clue? Thanks
You can use an UpdateProgress control for this, like this:
<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Here are some styles you can use if you want it to be semi-transparent:
#overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #f8f8f8;
width: 100%;
height: 100%;
filter: Alpha(Opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
}
#theprogress {
background-color: #fff;
border:1px solid #ccc;
padding:10px;
width: 300px;
height: 30px;
line-height:30px;
text-align: center;
filter: Alpha(Opacity=100);
opacity: 1;
-moz-opacity: 1;
}
#modalprogress {
position: absolute;
top: 40%;
left: 50%;
margin: -11px 0 0 -150px;
color: #990000;
font-weight:bold;
font-size:14px;
}
Please see my similiar question "Please Wait" message using jQuery or AJAX?:
While the ASPX page loads, you will stay on the current page in the web browser. So when you know the new page is loading (i.e., when a button or link is pressed), simply show the "Loading" image and it will automatically disappear when the client is finished receiving the "new" page (whether it be an actual new page or the same page posted back).
Example code you can use to automatically show your loading image (contained in a div) when a submit button is clicked is the following:
$(':submit').click(function() {
$('#divLoading').show();
});
Alternatively, you can use the UpdatePanel that comes in the Ajax Toolkit or in ASP.NET 4.0. It has a control called UpdateProgress that displays a loading image automatically.
EDIT:
I think you mean you want to show a "Loading" image before your first page is even loaded, in which case you should put your master page content wrapped around an UpdatePanel, use a progress loader control that automatically shows an image (both available in the Ajax Toolkit or ASP.NET 4.0), and load the substantial (non-master page) content of your page after your initial page load in the UpdatePanel.
You can do this by putting the body of your content page inside a Panel, setting the panel's visibility to False, and then setting it to True after the page loads.
Markup for an UpdateProgress control is as follows. You would, of course, want to style it and position it in the right area.
<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
<ProgressTemplate>
<div id="theprogress">
<img src="images/loading.gif" />
<span>Loading</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
EDIT:
If you don't want to use the UpdatePanel and UpdateProgress controls, then simply do the following:
Put your page content in a Panel called pnlContent and set the panel's visibility to False.
Create an img and your loading image and put it in a separate Panel called pnlLoading with the visility set to True.
Put a client-side script that forces the page to reload as soon as it loads. Put this script inside pnlLoading. Update: Put the #3 code below in your ASPX page to create your panel and it will trigger a post back immediately.
Add the following #4 code to your Page_Load.
Code:
For #3:
<asp:Panel runat="server" ID="pnlLoading">
<!-- Replace "form1" with your form's name. -->
<script type="text/javascript">form1.submit()</script>
<img src="images/loading.gif" alt="Loading" />
<span>Loading</span>
</asp:Panel>
For #4:
if (Page.IsPostBack())
{
pnlLoading.Visible = false;
pnlContent.Visible = true;
}
That will cause a loading image to show while your actual page content is being loaded.
I found the following solution works nicely between page navigations without affecting the current Ajaxification or site structure.
Just drop the script in no-mans-land between the head end and body start tags on your Master page.
Thanks to Subin for this one.
http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript
<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
document.documentElement.style.overflow="hidden";
var subinsblog=document.createElement("div");
subinsblog.id="subinsblogldiv";
var polu=99*99*99999999*999999999;
subinsblog.style.zIndex=polu;
subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
subinsblog.style.backgroundPositionX="50%";
subinsblog.style.backgroundPositionY="50%";
subinsblog.style.position="absolute";
subinsblog.style.right="0px";
subinsblog.style.left="0px";
subinsblog.style.top="0px";
subinsblog.style.bottom="0px";
if(subinsblogla==0){
document.documentElement.appendChild(subinsblog);
subinsblogla=1;
}
}else if(document.getElementById('subinsblogldiv')!=null){
document.getElementById('subinsblogldiv').style.display="none";
document.documentElement.style.overflow="auto";
}
},1000);
</script>
He recommends you do not replace the variable names, because there might be an other variable like that and the code won't work.
If you want to change the Loading Image just change the background URL in the variable subinsblog.style.background.
So, we have an ASP.Net application - fairly standard - and in there are lots of updatepanels, and postbacks.
On some pages we have
<ajax:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="updatePanel" BehaviorID="UpdateAnimation">
<Animations>
<OnUpdating>
<FadeOut Duration="0.1" minimumOpacity=".3" />
</OnUpdating>
<OnUpdated>
<FadeIn minimumOpacity=".5" Duration="0" />
</OnUpdated>
</Animations>
</ajax:UpdatePanelAnimationExtender>
Which basically whites out the page when a postback is going on (but this clashes with modal dialog grey backgrounds). In some cases we have a progressupdate control which just has a spinny icon in the middle of the page.
But none of them seem particularly nice and all a bit clunky. They also require a lot of code in various places around the app.
What methods do other people use and find effective?
i havent used the UpdatePanelAnimationExtender but an UpdateProgress-Control in combination with an animated gif(Bermos Link):
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UdpImeiLookup" DisplayAfter="500" >
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The ProgressTemplate will be visible on every Postback of the associated Update Panel(after 500ms in this example).
EDIT: where class "progress" can be f.e. this:
.progress
{
text-align:center;
vertical-align:middle;
position: absolute;
left: 44%;
top: 35%;
border-style:outset;
border-color:silver;
background-color:Silver;
white-space:nowrap;
padding:5px;
}
Regards,
Tim
Like the others, I suggest to use the UpdateProgress in a modal popup.
I will add this twist, put the popup, UpdateProgress and this code in a masterpage, so whenever you need it, just plug the masterpage to the content page.
<script type="text/javascript">
var ModalProgress ='<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args){
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args)
{
// hide the Popup
$find(ModalProgress).hide();
}
</script>
here some ref:
http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html
http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html
Animated gifs require the least amount of code and you can select your favourite one with whatever colours you please from the following site - Ajaxload - Ajax loading gif generator.
This is what I use, it has a modal popup type background and a gif
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 101;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Please wait....
</div>
</td>
</tr>
</table>
</ProgressTemplate>