How to control Loading panel using master page and without using AJAX - javascript

I have an asp.net project and I want to show the progress image (GIF) without using AJAX and using simple java-script DIV magic.
All I want to do is to put one div (which show animation clock while page loading in progress) in master page (asp.net master page so I need not to repeat the code on every content pages) and show it when page load is in progress.
I hope your understand what I want to do.
Thanks,

You can achieve like this
<body style="background-color:#FFFFFF;" onLoad="init()">
<div id="loading" style="position:absolute; width:200px; height:163px; text-align:center;top:310px; left:487px;">
<img src="images/loading.gif" border=0 style="margin:38px"/>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>

make 2 sections in your document's body
<div id="progress">
// Code for gif image
</div
<div id="content" style="display:none;">
// Whole page content
</div>
And after that include this javascript. Not in header
<script>
document.getElementById("progress").style.display = 'none';
document.getElementById("content").style.display = 'block';
</script>
If you know jQuery you can do similarly on $(document).ready() event

Related

Making elements change without refreshing the page

So I need to make something like this happen - http://jsfiddle.net/3nk8x98g/1/ everything is explained in the link.
What do I use Javascript or AJAX? And maybe someone knows a tutorial or something out there? Thanks.
<body>
<div class="row">
BUTTON1
BUTTON2
BUTTON3
</div>
<div class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
</body>
AJAX is just a JavaScript technique, so yet, you need to use AJAX and JavaScript. Look at this for examples of how to achieve it using JavaScript only.
<body>
<div class="row">
<a id="one" href="#">BUTTON1</a>
<a id="two" href="#">BUTTON2</a>
<a id="three" href="#">BUTTON3</a>
</div>
<div id="content" class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
<script>
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var content = document.getElementById("content");
one.addEventListener("click", function() {
content.innerHTML = "One";
});
two.addEventListener("click", function() {
content.innerHTML = "Two";
});
threee.addEventListener("click", function() {
content.innerHTML = "Three";
});
</script>
</body>
You can do this. Ajax is just for getting data from server without refreshing but you have to use javascript to attach that content to html dynamically.
$('a').on('click', function(){
$('#changeingDiv').html('Changed Content');
}
);
this is just for example. Bind an event to the buttons, and on its click change the content of the div. For different content on different button click you can add id to them and change the content accordingly on some condition.
http://jsfiddle.net/3nk8x98g/2/

Is there any way to hide a div from source code at runtime

Is there any way to hide a div from source code at runtime
Using jquery, javascript or any other method.
Eg:
<div id="abc">
This will not be displayed on source as well as in page
</div>
By using jQuery remove() or hide() - the item is hidden from front end.
But i need to remove it from source...
I'm using drupal render method.
It is not possible to hide DOM elements in browser. You can only remove them using .remove() or hide with .hide() when rendered. But if DOM exist in code then you can not hide it in view source code component.
Here is one solution
In your body tag add onload event
<body onload='removeDiv()'>
<div id='abc'>
This will not displayed in source code as well as in web page.
</div>
<body>
Javascript
<script>
function removeDiv(){
var div = document.getElementById('abc');
div.remove();
}
</script>
<script>
$('.abc').hide();
</script>
If the .hide() and .remove() doesn't work for you. You can try this.
Make a parent div and set the html part empty
<div id="def">
<div id="abc">
This will not be displayed on source as well as in page
</div>
</div>
<script type="text/javascript">
$("#def").html('');
</script>
If you are using drupal the write a php if condition to hide the content of the div, example
<?php if(1){ ?>
<div id="abc">
This will not be displayed on source as well as in page
</div>
<?php }?>

How to show ajax-loader each time when an iframe is loaded

I have seen many ajax loader which shows until an iframe finishes loading.But my question is there anyway I could show an ajax loader each time the content inside the iframe loads?
Example:
If I loaded a webpage in an iframe,it shows the loader.But after it been loaded,I clicked on another link inside the iframe webpage and when the page inside the iframe is loading it should show the loader again.
Is there anyway I could do this?
Dear You can show the loaded by adding a div on parent page and create a javascript function on parent page and then call that function from iframe using parent.methodonpareentpage
Parent Page
<iframe id="iframe" src="url" style="height:600px; width:700px; display:none;"></iframe>
<div id="divIframeLoader" style="height:600px; width:700px;">
<img src="Images/loading_async_big.gif" style="position:relative; top:12%; left:40%;" />
</div>
<script type="text/javascript">
function showIframeLoader(btrue)
{
if (btrue)
{
jQuery("#divIframeLoader").show();
jQuery("#iframe").hide();
}
else {
jQuery("#divIframeLoader").hide();
jQuery("#iframe").show();
}
}
</script>
iframe page
parent.showIframeLoader(true);

How to print Html page with image using Javascript

Hi,
My application is in asp.net MVC3 coded in C#.Net, I have a certain view with the requirement to print the complete Html of a particular div in that view.
Suppose
<div id="Printable_Div" >
<div>
<img id="First_Image" src="Source of my Image">
</div>
<table>My table data
</table>
</div>
Following are the things i tried
var w = window.open();
w.document.write($("#Printable_Div").html());
w.print();
w.close();
Also i have tried using the jquery printElement.js
$("#Printable_Div").printElement();
And Also
window.print();
I have also tried setting the Image as the background of the
<div style="background-image:My Image"></div>
There is not any issue in printing the Html page, but the issue is, image is not getting displayed in all the three methods tried above. I want to print the entire HTML that is available in the Div with the ID=Printable_Div
Is there any way to display the image in the print as well. The image tag is shown in the print preview but not the image.
Updated
Also i have tried printing the entire page by using the below code.
<div id="Printable_Div" onclick="Print_Function()">
</div>
Javascript function
<script type="text/javascript">
function Print_Function() {
window.print();
}
</script>
Try This way,
<button onclick="window.print();printDiv(document.getElementById('Printable_Div'));">Save as PNG Image</button>

Load in external .html file with jQuery

I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.
HTML-code:
http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v
The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The problem:
When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.
You have some duplicate #ids.
Remember when you do:
var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
$('#content').load(toLoad,function(){
$('#content').slideDown('normal');
});
you are actually loading a page fragment #content into #content in your page. So you end up with this:
<div id='content'>
<div id='content'>Random Data</div>
</div>
Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.

Categories