I want to show loading icon until pdf is loaded into the webpage.I have pasted what I have tried but loading icon keeps on displaying even the pdf is loaded fully. Got this code from JSFiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
width: 100%;
height: 100%;
border: 5px solid green;
}
</style>
<script>
$(function(){
var $iFrame = $('iframe');
$iFrame.load(function(){
$('h3').html('PDF Loaded!');
});
$('h3').html('Loading PDF...');
$iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');
});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>
You can't just use an iFrame to display a PDF. If you want to embed a PDF onto a webpage, you should use a JavaScript library like pdf.js.
Anyway, use this http://jsfiddle.net/BXe8C/497/
The $(document).ready(function() { event fires as soon as the DOM (document) has downloaded.
The $(document).load(function() { event fires when all on page elements have completely loaded.
So use a JavaScript library like https://github.com/mozilla/pdf.js to render the PDF, and use that jQuery event above to listen for when the page has completely loaded.
Related
I have a site that where some pages run a number of php routines that can sometimes take some time. For example, from one page there is a form:
<form action ="showdata.php">
<input type="submit">
</form>
Assume that the target page is:
connecting to a MySQL database
performing a series of select queries to establish the data to display
preparing the resulting page with data displayed.
I have tried putting a loading gif on the target page but it only loads briefly once I suspect the queries have completed. To do this I have the following on the target page:
CSS
.loader {
top: 50%;
left: 50%;
width:6em;
height:6em;
margin-top: -3em;
margin-left: -3em;
border: 0px solid #ccc;
background-color: #f3f3f3;
position:fixed;
background: url('../images/page-loader.gif') no-repeat;
}
SCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
HTML
<div class="loader"></div>
How can I get the loading gif to be displayed correctly? IE as soon as the page is chosen. I seem to remember reading that you can get around this problem using an intervening page that displays the gif and then redirects to the target page. Is this the good way to solve this problem or is there a better way?
What you're going to want to do is add a loading gif to your page with the form and show it when the button is clicked. The target page will only load as soon as the server-side php stuff has been handled, so showing a loading bar as soon as you click will probably give the result you are looking for.
For example:
<script type="text/javascript">
$('.submit').on('click', function() {
$(".loader").fadeIn("slow");
})
</script>
Cannot find any answers on this particular scenario.
CMS: Joomla
I am use jquery on page that will be iframed to suppress the logo, menu items, etc that are contained in the central index.php header class.
the following code on the page to be iframed works okayish, but flickers (common problem right):
jQuery(function() {
jQuery('.help').remove();
jQuery('.dropdown').remove();
jQuery("header").css("height", " 0px");
jQuery("header").css("width", "0px");
jQuery(":header").css({
width: "0px",
height: "0px"
});
I have seen some solutions around document.write, which may work, however please note i cannot change the html in the index.php file, i have to find some way of only changing during or before page load (for the page load iframe)
any help greatly appreciated!
Here is sample of the page that will be used for iframing (sometimes the classes do not load, i think this is due to the flickering/jolting of when the jquery kicks in : link
If you can change the CSS code of your document, add the following style properties to it:
.help,
.dropdown {
display: none;
}
header,
:header {
height: 0px;
width: 0px;
}
If you cannot change the CSS of your page, use the following snippet to handle your problem (the files need to be included in the head, before the elements are loaded):
<head>
<script type="text/javascript" src="jquery.js"></script">
<script type="text/javascript" src="file.js"></script>
</head>
file.js (not within $(document).ready()):
$('<style type="text/css">.help, .dropdown { display: none; } header, :header { height: 0px; width: 0px; }</style>').appendTo('head');
I know this is a general question, but I can't get a true answer on Stackoverflow or searching google. How do I make a page with a fixed header for logo and links and an iFrame of a given URL. The closest I've come across is this iFrame with Fixed Header. What I really want to achieve is this example on CodeCanyon. The first link gives a decent answer, but the page has two scroll bars. Thanks in advance!
EDIT: I want to make the iFrame stretch to the height of the page :)
The examples you linked are using jquery to dynamically adjust the height.
//function to adjust height of iframe
var calcHeight = function () {
var headerDimensions = $('#header-bar').outerHeight(true);
$('#preview-frame').height($(window).height() - headerDimensions);
}
$(document).ready(function () {
calcHeight();
});
$(window).resize(function () {
calcHeight();
}).load(function () {
calcHeight();
});
This is the code i used to dynamically adjust the height.
you can see it here in jsfiddle http://jsfiddle.net/QQKc4/11/
You would have your HTML something like this...
<html>
<head>
</head>
<body>
<div style="height:[[some value you want in px]]"; width:100%;>
The logo and links come here
</div>
<iframe src="[[the url to load]]" style="width:100%;"></iframe>
</body>
</html>
Note - The inline styles can be moved to a stylesheet, and for the iframe, you'll need to calculate the window height minus the header div height with javascript/jQuery and apply the height to the iframe
You could do
<html>
<head>
</head>
<body>
<div style="height:(x)px; width:100%; position:absolute; top:0; bottom:0; z-index:2;">
The logo and links come here
</div>
<div style="width:100%; height:100%; position:absolute; top:0; bottom:0; z-index:1">
<iframe src="xx.html" style="margin-top:(x)px; width:inherit; height:inherit"></iframe>
</div>
</body>
</html>
Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php
I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.
Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.
I use the jquery framework, but Im not that proficient at it. Site is written in php.
What I was thinking is this
I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.
<style type="text/css">
#chatFrame {
display: none;
width: 300px;
height: 200px;
/* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#activator').click(function() {
$('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
});
});
</script>
open chat
<div id="chatFrame"></div>
A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I like PrettyPhoto for it's simple look and so far I had no problem with it.
The code can be as simple as this :
Google.com
The website has all the details.
Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.
There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.
Your code might look like this, using vanilla javascript:
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
Update, in jQuery:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
Related documents: Events/ready, Events/load, CSS/css & Core/$
If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.
But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.
(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)
Best way
function ajax(){
$('#wapal').html('path to image');
$.ajax({
url:'somfile.php',
method:'get',
success:function(data){
if(data =='') return;
$('#wapal').html(data);
}
});
}
I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.
You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.
This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.
You can do it with jquery easily.
SCRIPT
$(window).load(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.
You can do it with jquery easily.
SCRIPT
$(document).ready(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"