I want to show a loading image before the content of the whole page is loaded. How to achieve this? I'm working in ASP.NET.
Thank you.
NLV
You would need to use Javascript to accomplish this. My preference is jQuery. jQuery has a function that executes when the page is fully loaded, so you could set your main content div to have a css property display:none, and then when the DOM is ready, you could use jQuery to show the content:
$(document).ready(function() {
$("#myContent").css("display", "block");
});
You should initially have the image showing in your HTML, and then hide it when the page loads, like this:
Javascript:
window.onload = function() {
document.getElementById('loadingImageIDHere').style.display = 'none';
};
EDIT: The OP tagged this question as 'javascript', NOT 'jquery'!!
My personal preference is to have a loading image displayed on every page in advance and then use jQuery to hide the image once the page has loaded. It's up to you whether you want to use $(document).ready or $(window).load.
// assumes you already have a DIV#preloader container on your page centered with a loading image inside
// of it
$(document).ready(function() {
$("#preloader").hide();
});
$(window).load(function() {
$("#preloader").hide();
});
Related
I have a web application created in asp.net. In which, I would like to show a div (which is hidden initially) when a button is clicked with a css transition.
Additional Request:
The div that is shown on button click, will have some content added to it dynamically at run time.
How this can be done?
Here is a variation of the script from #geevee which I tend to use a lot, the DIV will slide up or down with a close and open option. Note the 500 is the speed of execution in milliseonds, you can change that to what ever suits you.
$(function(){
$('#BUTTON_ID').click(function(){
if ($('#DIV_ID').css('display') =='none')
{
$('#BUTTON_ID').html('Show DIV');
$('#DIV_ID').slideDown(500);
}
else
{
$('#BUTTON_ID').html('Hide DIV');
$('#DIV_ID').slideUp(500);
}
});//end .click
});//end onload
Hope this helps
Plain Javascript:
document.getElementById('BUTTON_ID').addEventListener('click', function(){
document.getElementById('DIV_ID').style.display = 'block';
})
Alternatively, with jQuery:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').show() });
});
replace BUTTON_ID and DIV_ID with real element IDs.
UPDATE:
if you want the div to be shown with transition, i'd recommend to use jQuery as following:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() });
});
notice the .fadeIn() method, which can be replaced with .show(), .slideDown() and more. jQuery is fun.
UPDATE 2:
in order to inject dynamic content into the div, do as following:
$(function(){
$('#BUTTON_ID').click(function(){
$('#DIV_ID').html('<b>Hello, dynamic content!</b>');
$('#DIV_ID').fadeIn();
});
});
hope that helps.
I have used the following line in my javascript function to show up an element with a class.:
<script type="text/javascript">
function showRates()
{
//load next page
alert("hi");
document.getElementsByClassName('myp').style.display = "block";
}
But, display block is not showing up.
Since you're using jquery-mobile, why not use it?
$('.myp').css('display', 'block');
Also, keep in mind that getElementsByClassName returns a NodeList and doesn't have the style property. if you don't want to use jQuery you'd have to iterate over the elements in the list, then apply the .style.display changes.
You can do it by the following way
$('.myp').hide();
And if you want to display the block then
$(".myp").show();
I am using 'uxiframe' component to load a separate application into a modal window (ExtJS4.1x).
Cross domain issues clearly do not allow me to access any part of the IFrame contents. However same domain app's Document in the IFrame is accessible from the parent via iframe.getDoc()
The question is this: Is there a way for me to setup DOM listeners on the elements inside the IFrame from the parent modal window?
Thanks and a simple example would be appreciated.
Update Thanks to #lontiviero for a tip to get me started. Here is what I ended up with:
var bodyEl=Ext.get(iframe.getDoc().body); //this gives me an Ext.dom.Element object
bodyEl.on('click',
function(event, el,opts){
console.log("<p> clicked");
},
this, //scope
{delegate:'p'} //options
);
With this code i was able to attach an event to the iframe´s body element.
Ext.EventManager.on(iframe.contentDocument.body, 'mouseover', function() {
alert('hello');
});
Take a look at it in jsfiddle: http://jsfiddle.net/XApQU/
JScript
// Wait for the page and all the DOM to be fully loaded
$('body').ready(function() {
// Add the 'hover' event listener to our drop down class
$('.dropdown').hover(function() {
// When the event is triggered, grab the current element 'this' and
if ($(this).find('.sub_navigation').is(":visible")) {
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideUp();
} else {
$(this).find('.sub_navigation').slideDown();
}
});
});
First of all here is the fiddle //
http://jsfiddle.net/Hv2HZ/
I am using wordpress to create my site...
(if that matters)
Someone helped me get the drop-down menu to work better.
But ever since I added the new JQuery script the link doesn't even work.
I tried hovering over it but no menu dropped.
When I hover on the fiddle it works.
Why is this?
And how can I fix this?! :(
I have a JavaScript method that I need to run on one of my pages, in particular, the onresize event.
However, I don't see how I can set that event from my content page. I wish I could just put it on my master page, but I don't have the need for the method to be called on all pages that use that master page.
Any help would be appreciated.
Place the following in your content page:
<script type="text/javascript">
// here is a cross-browser compatible way of connecting
// handlers to events, in case you don't have one
function attachEventHandler(element, eventToHandle, eventHandler) {
if(element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if(element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandler(window, "onresize", function() {
// the code you want to run when the browser is resized
});
</script>
That code should give you the basic idea of what you need to do. Hopefully you are using a library that already has code to help you write up event handlers and such.
I had the same problem and have come across this post :
IE Resize Bug Revisited
The above code works but IE has a problem where the onresize is triggered when the body tag changes shape. This blog gives an alternate method which works well
How about use code like the following in your Content Page (C#)?
Page.ClientScript.RegisterStartupScript(this.GetType(), "resizeMyPage", "window.onresize=function(){ resizeMyPage();}", true);
Thus, you could have a resizeMyPage function defined somewhere in the Javascript and it would be run whenever the browser is resized!