Is it possible for asp.nt ascx controls to have their own client side load event, like a window.onload for each, so I can hide the loading divs and show the content div when http transfer is complete.
I have image menus and cycle galleries that seriously need some loading progress don't know how to implement them. The site is http://techlipse.net. Thx in advance.
There are a few ways you can do this. I would take advantage of the fact that the onload event is not triggered until all content on the page is completely loaded. Since it looks like your site is already using jQuery, all of the examples below will use that.
In your user controls, you can have them hidden by default. To do this, place a style attribute in a wrapper tag for your control:
<div style="display: none">
<!-- Optionally you could use "visibility: hidden"
instead of "display: none". This will keep the
control's placeholder, but not physically show it to the user.
-->
<!-- Your control content here -->
</div>
Inside of your control, you can then have JavaScript code like this (assuming jQuery will be included at the top of the page, which is the way your site is now). This would be placed directly in your control.
<script type="text/javascript">
$(window).load(function() {
$("#" + <%= this.ClientID %>).css("display", "block");
// If you chose to use visibility, try the following line instead
//$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>
To explain how this works...
When the browser initially loads the page, the control defaults to being hidden. It will not be rendered at all. jQuery subscribes to the load() event of your page. When the load event triggers, it will then display the control. This only happens once everything is finished loading.
You can also hide any "loading..." <div /> in this load event also.
Another option, which may be better depending on what you're doing, is to structure your page so you have 2 main divs. A "loading" div and a "content" div. The loading div would be shown by default with a generic loading message. The content div would be hidden by default (or just hidden behind an overly like my example below). The onload event removes the loading objects from the page and allows the images to be shown.
This example below displays a loading message over top of the entire page until it is finished loading.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden/* Prevent user from scrolling. */
} /* Scrolling is re-enabled on load by JavaScript */
.loadingBackground {
background: #000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
height: 100%;
width: 100%;
position: absolute;
}
.loadingWrapper {
position: absolute;
top: 15%;
width: 100%;
}
.loading {
margin: 0 auto;
width: 300px;
text-align: center;
background: #ffffff;
border: 3px solid #000;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
$('body').css('overflow', 'auto');
});
</script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg"
style="height: 100%; width: 100%" />
</body>
</html>
You can add a listener to the load event... ( don't tie into the event directly as you might cause a different tie in to not be called )
Try using a JS library to help you listen to events, YUI, jQuery are fun.
http://developer.yahoo.com/yui/event/#start
var oElement = document.getElementById("myBody");
function fnCallback(e) { alert("i am loaded"); }
YAHOO.util.Event.addListener(oElement, "load", fnCallback);
YUI Library has a way to listen to when an area is "ready"
http://developer.yahoo.com/yui/event/#onavailable
You could have a listener that waits so see when a div is loaded, and then fire off some ajax to your long running processes.
Related
I would like to use the modal window model as described by Keenan Payne, made with HTML5 & CSS3. For that, I simply created two files: modal.html with the HTML Modal template & modal.scss with the styling description
Modal.html
<template name="ModalSuggestion">
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</template>
and simply invoke it through this simple
{{> iconSuggest}}
{{> ModalSuggestion}}
This should be dead simple and I feel ashamed to ask for help, but the should be on top of any other windows, independently of my app layout? I must have missed something...
Is there anything particular with Meteor that does prevent this from working right away?
Thanks for your help.
CSS
.modalDialog {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 99990;
opacity: 0;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
z-index: 99999;
}'
Is there a particular reason you want to use this technique? It's not clear from your question how it isn't working for you.
An alternative way to implement a modal in meteor:
HTML:
<template name="parentContainer">
{{#if modalOpen}}
{{> modal}}
{{/if}}
<div>Some content inside parent container</div>
<button class="open-modal">Exit</button>
</template>
<template name="modal">
<div class="modal-container">
<div>Are you sure you want to exit?</div>
<button class="confirm">Yes</button>
<button class="cancel">No</button>
</div>
</template>
Javascript:
Template.parentContainer.events({
'click .open-modal' : function() {
Session.set('modalOpen', true);
});
Template.parentContainer.helpers({
modalOpen: function() {
return Session.get('modalOpen');
}
});
Template.modal.events({
'click .confirm' : function() {
Session.set('modalOpen', false);
//closes modal
//do something else
};
'click .cancel' : function() {
Session.set('modalOpen', false);
//just closes modal
};
});
CSS:
I can't really provide specific css because it will depend on the context of the modal, but one option is to position the modal absolutely with a z-index that is higher than anything else on the page:
.modal-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
//z-index may be uncessary
z-index: 1; (or higher if necessary)
}
This would be a full width, full height modal that will cover anything else on the page. If you make it transparent or less than full width/height, then it will appear on top of the content behind it.
What is happening here:
The user clicks an element with an event listener attached to it, in this case it is a button with a class of 'open-modal'.
This event listener changes the value of a boolean session variable, in this case it sets the 'modalOpen' session variable to 'true'.
There is a helper function in our parent template that is watching the session variable, and will update the template whenever that variable changes, effectively adding our modal to the DOM. In this case, we're using a 'modalOpen' helper to track the 'modalOpen' session variable, and when it notices it has changed to true, it updates the template with this value. {#if modalOpen}} in the parent template notices that 'modalOpen' has changed, and because it now evaluates to 'true', it will insert our 'modal' template, represented by {{> modal}}.
We close the modal by changing the 'openModal' session variable to 'false'.
Hope that helps, and no need to be ashamed, this stuff is hard to learn. Like anything the more you do it the easier it gets.
it looks like this is a known issue when using Iron Router package... what I do use.
https://github.com/iron-meteor/iron-router/issues/711
I have a second page that is populated using data from an Ajax call on the home page. The header on this dynamically generated page is missing all its JQuery styling, and I suspect the two are related. This is my HTML for the page being generated:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
There is also some CSS styling I have used, which I think needs streamlining, but I don't think is causing the problem. This is because when I comment out this code the header is still missing the styling:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
I then populate the header (and the page) using the response from an Ajax call from the previous page. The page is populated on the click of a button (#resultsList) linking to this page:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Finally here is a picture of the header. You'll notice it doesn't have the JQuery Mobile styling and the back button is missing.
Thanks all!
To get the back button, you need to apply the data-add-back-btn="true" to the header div not the page div.
<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">
Working DEMO
Other than that the header looks correct given the CSS styling you are applying... Perhaps you can tell us how you want the header to be arranged?
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
Please, help me!
I need to modify width of standart dialog form for adding element into library.
If I click to ribbon button for adding element, form opened with width=402px:
<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 402px; height: 294px; left: 430px; top: 104px; "></div>
If I click to button under all elements of current library, form opened with width=1032px:
<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 1032px; height: 267px; left: 115px; top: 273px; "></div>
I can't understand, what I need to do for opening in the second case form with width=402px.
Maybe need enter some code in Upload.aspx? (this form generate automatically)
I guess, this page open for creating new element, because schema.xml for my list definition contain this code:
<Forms>
<Form Type="DisplayForm" SetupPath="pages\form.aspx" Url="Forms/DispForm.aspx" WebPartZoneID="Main" />
<Form Type="EditForm" SetupPath="pages\form.aspx" Url="Forms/EditForm.aspx" WebPartZoneID="Main" />
<Form Type="NewForm" Url="Forms/Upload.aspx" WebPartZoneID="Main" />
</Forms>
But if modify this part of Upload.aspx (add .ms-dglContent class), it doesn't help me:
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
padding: 8px;
border: none;
}
.ms-dglContent {
width:402px!important;
}
</style>
</asp:Content>
If I modify css files:
.ms-dglContent {width:402px!important;}
it modify all dialog forms, but in my case is unacceptable.
I would be grateful for any attempt to help!
Modal dialog div is place dynamically into DOM. If want to modify dialog dimensions try to find call like SP.UI.ModalDialog...
var dialogCallbackToMainSite = function (dialogResult, returnValue) {
if(returnValue == 'someValue') {
}
};
var option = {
url:record.data.url,
title:'Task',
allowMaximize:false,
showClose:false,
autoSize:false,
width: 800,
height: 600,
dialogReturnValueCallback:dialogCallbackToMainSite
};
SP.UI.ModalDialog.showModalDialog(option);
BTW if you need to vertical center dialog in situation when ribbon scroll with page and it´s static position is disable follow this solution http://generation12.wordpress.com/2011/10/25/floating-the-sp-ui-modaldialog/
I'm not used to working in Sharepoint, but it seems to me that the function that triggers the dialog to be displayed is provided different values on measurement variables somehow, so yes, you probably need to change your code somewhere. Try searching your entire solution for "1032" - maybe that width measurement is assigned to a variable somewhere.
If you want both of the dialogs to look the same and can't find where they are given their measurements (though, I strongly recommend that you try that first), you could perhaps override the inline-styling by using !important, like so:
.ms-dglContent {width:402px!important;}
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.