Hi i am trying to use script to display a loading bar while my php is executing. I learnt from this website but when I did the exactly same thing, my loading bar still cannot display, any idea why?
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
div#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 160px;
height: 24px;
background: url(img/142.gif) no-repeat;
cursor: wait;
}
</style>
<script type="text/javascript">
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style type="text/css"></style>
</head>
<body>
<div id="loading"></div>
<div id="content" >
<?php
sleep(10);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
</body>
</html>
Just run this code in any browser
<!DOCTYPE html>
<?php
#ini_set('zlib.output_compression', 0);
#ini_set('implicit_flush', 1);
#ob_end_clean();
set_time_limit(0);
?>
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
img#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 500px;
height: 24px;
cursor: wait;
height: 500px
}
</style>
<style type="text/css"></style>
</head>
<body>
<?php
for ($i = 0; $i < 10; $i++) {
echo str_repeat(' ', 1024 * 64); // this is for the buffer achieve the minimum size in order to flush data
if ($i == 1)
echo '<img id="loading" src="img/142.gif" />';
}
?>
<div id="content" style="display: block;">
<?php
sleep(5);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
<script type="text/javascript">
function preloader() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
</body>
</html>
if you have acces to php.ini set following configuration in your php.ini and remove
#ini_set('zlib.output_compression', 0); #ini_set('implicit_flush', 1); from begining
output_buffering = Off
implicit_flush = on
output_compression = Off
If your are curious about output buffering click here
<?php
sleep(1000);//increase sleep time
echo 'This content has been loaded via an AJAX request';
?>
and remove style="display: none;"
Related
I have done this code with javascript to try out my first javascript animation, but when I open the page, it's showing me a blank page...
can anyone please tell me whats wrong with the code and why it's not showing anything?
thanks in advance...
<html>
<head>
<title>Trying js Animation</title>
</head>
<body>
<style>
#container{
width: 500px;
height: 500px;
color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
color: red;
position: absolute;
}
</style>
<div id="container">
<div id="box">
</div>
</div>
<script type="text/javascript">
var t = setInterval(move, 1);
var pos = 0;
var box = document.getElementById('box');
function move(){
pos += 1;
box.style.left = pos + "px";
}
</script>
</body>
</html>
The box is white. Change "color" to "background-color".
I would like to know how I can define CSS element dimensions before they are rendered eg. not using offset and jQuery
Can I echo php into where the width/height or position values are? eg.
<?php
$width = 290px;
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
}
Would any of these work, is it completely wrong?
Similarly how would I apply JavaScript dimensions using a variable?
$(document).ready(function(){
$('.widget').css('width', <?php echo $width; ?>);
$('.altwidget').css('width', <?php echo $altwidth; ?>);
});
Your code will also works if it is written in php file.
Yes it will work, but you will have to make 290px a string for $width ( e.g. $width = "290px";), or better yet go with the $altwidth way and leave the px part out of the variable.
See below for how to dynamically set dimensions from JavaScript once the page has loaded. I have added some CSS for the example.
<html>
<head>
<?php
$width = "290px"; // Quotes added
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
height: 100px;
color: white;
background: green;
cursor: pointer;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
height: 100px;
color: white;
background: red;
cursor: pointer;
}
</style>
<script type="text/javascript">
var newWidgetWidth = '200';
var newAltWidgetWidth = '400';
</script>
</head>
<body>
<div class="widget" onclick="this.style.width = newWidgetWidth + 'px';">
Shrink me
</div>
<div class="altwidget" onclick="this.style.width = newAltWidgetWidth + 'px';">
Grow me
</div>
</body>
</html>
I'am working my web page on "WYSIWYG Web Bulider", and on the main page I have inline frame, and when I click that inline frame another page is opened who has online slide show on It. I want that when that page is opened, online slide show is automaticly triggered.
Probably I need some javascript code for that, but I'm not familiar with coding.
test web page is curently on croatian language, but just click the picture
http://3dvizlab.com/test/3d_vizualizacija.php
This is html code of the page with online slide show
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>exteriors</title>
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: #FFFFFF;
background-image: url(images/classy_fabric.png);
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook'});
});
</script>
</head>
<body>
<div id="OnlineSlideShow" style="position:absolute;left:352px;top:337px;width:300px;height:200px;z-index:0;">
<?php
$images_folder = "../pictures/exteriors/";
$image_width = 300;
$image_height = 200;
$count = 0;
$dir = opendir($images_folder);
while ($filename = readdir($dir))
{
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if ($ext == 'gif' || $ext == 'jpeg' || $ext == 'jpg' || $ext == 'png')
{
echo "<a href=\"$images_folder$filename\" rel=\"prettyPhoto_OnlineSlideShow[OnlineSlideShow]\">";
echo "<img class=\"image\" alt=\"\" style=\"border-width:0;left:0px;top:0px;width:" .$image_width. "px;height:" .$image_height. "px;";
if ($count != 0)
{
echo "display:none;";
}
echo "\" src=\"$images_folder$filename\">";
echo "</a>";
echo "\r\n";
$count++;
}
}
?>
</div>
</body>
</html>
Change the function call to
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook', ,slideshow:5000, autoplay_slideshow:true});
});
That should trigger the slideshow on load, with a delay of 5 seconds between slides.
HTML:
<div id="container">
<div id="bar">
</div>
</div>
CSS:
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
JS:
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
This code from jsfiddle http://jsfiddle.net/Mp7R3/ is not working when I copy paste the code but it is working fine on jsfiddle .maybe I have some onLoad problem but I dont know how to solve it . I tried $(document).ready(function() but it didnt help .
Be sure you don't forget the script for calling jQuery in the <head> of your code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You can also try to place the code at the bottom of your code so it's can run only if the full page is loaded.
I also write below the simplest page to make this code work (normally you should separate HTML, CSS and JS), so you can compare it with your own:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>- That's Work!!! -</title>
<style>
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="bar">
</div>
</div>
</body>
<script type="text/javascript">
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
</script>
</html>
I hope it will help you!
My index.html code works fine when I call reg.htm directly from JavaScript as window.open("reg.htm") (the JavaScript on the page is called and the AJAX and callback all works and my DB is updated). However, when call REG.HTM with an tag and put the jQueryMobile tag of data-rel="dialog" the file opens but doesn’t call any of the JavaScript.
index.html (works)
Movie Reminder
<style type="text/css">
<!--
.image { position: relative; width: 100%; /* for IE 6 */ }
.register { position: absolute; top: 250px; left: 0; width: 100%; padding-left: 106px;}
.login { position: absolute; top: 250px; left: 0; width: 100%; padding-left: 106px;}
-->
</style>
<script language="Javascript">
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady()
{
var user = window.localStorage.getItem("user");
alert ("Device Ready");
if (user == null)
window.open("reg.htm");
else
{
var token = window.localStorage.getItem("token");
if (token == null)
window.open("login.htm");
else
window.open("search.htm");
}
}
$(document).ready(function() {
setTimeout("onDeviceReady()", 2000);
});
</script>
</head>
<body topmargin="0" leftmargin="0">
<div class="image">
<img src="images/mov-rem-bkgd.jpg" alt="" />
</div>
</body>
</html>
Here's the code that calls using the tag that doesn't work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Movie Reminder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css">
<!--
.image { position: relative; width: 100%; /* for IE 6 */ }
.register { position: absolute; top: 250px; left: 0; width: 100%; padding-left: 106px;}
.login { position: absolute; top: 250px; left: 0; width: 100%; padding-left: 106px;}
-->
</style>
<script language="Javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
if (window.localStorage.getItem("user") == null)
$('.register').show();
else {
if (window.localStorage.getItem("token") == null) $('.login').show();
else window.open("search.htm");
}
}
$(document).ready(function() { setTimeout("onDeviceReady()", 2000); });
</script>
</head>
<body topmargin="0" leftmargin="0">
<div class="image">
<img src="images/mov-rem-bkgd.jpg" alt="" />
<div class="register">
Register
</div>
<div class="login" style="display:none">
Login
</div>
</div>
</body>
</html>
If you create a simple reg.htm file that has the following code in it you'll see that the JavaScript is not called by index2.htm only by index1.htm.
<script>
$(document).ready(function() {
alert ("doc ready");
$('.ui-btn-hidden').click(function(event) {
$("#regform").submit(function(event) {
if ($('.ui-btn-hidden').attr("value") == "Submit")
{
alert ("inside submit");
var postData = "username=foo";
var urlStr = "http://www.fohost.co/mr/regUser/index.php?";
$.ajax({
url: urlStr,
data: encodeURI(postData),
dataType: "jsonp",
success: doCallback
});
return false;
}
});
});
});
function doCallback(data) {
alert("doCallback");
if (data.success == "true")
window.open("login.htm");
}
</script>
Anyone have any thoughts?
Read Scripting Pages. Applies to Dialogs as well.