I wrote a PHP code for site backup and I am compressing the whole site and allowing the user to download it in his/her machine. The compression and download works fine but since it is a site backup, it is taking some time to zip and download and I don't want the user to navigate to any other page while the zip/download is in progress. Is there any way, I can show a progress bar while zip/download is in progress? I searched in google but it seems that you can show progress bar on upload but not while downloading.
I created a temp file before the zip actually takes place and did a check if the file exists. My logic was if the file exist then display a modal dialog in JS with "please wait.." message but since the download makes use of header, I cannot basically echo anything before download.
Any suggestions?
You can use a fake progress bar using a gif animation...
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var backup = document.getElementById("backup");
backup.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress"><img id="progress_image" src="css/progress_bar.gif" alt="BackUp in progress..."></div>
Here you can see my idea working... please click on BackUp button to test it...
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
.box {
padding: 20px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
text-align: center;
border: #C0C0C0 3px solid;
border-radius: 5px;
min-width: 270px;
height: 150px;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
}
.backup {
padding: 10px;
margin: 0 auto;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: darkviolet;
color: black;
border-radius: 5px;
border: #C0C0C0 3px solid;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
#progress {
padding: 20px;
}
.cleardiv {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BackUp Demo Progress Bar</title>
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var backup = document.getElementById("backup");
backup.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
</head>
<body>
<div class="box">
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress">
<img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="BackUp in progress...">
</div>
<div class="cleardiv"></div>
</div>
</body>
</html>
Then search a gif animation in order to display a progress bar...
Google + ajax + loader + gif
I hope this helps :)
Related
I'm using php to display an error message to the user. The code is sitting at the top of the page and once the error message displays, it affects the height of my textboxes. I coded the height in a style sheet. Also, my error message is sitting inside of a div. I tried using the span tag but that isn't working either since its still sitting at the top line of the page. This is the error message in php:
if($result != "")
{
echo "<div id='Error'>";
echo "<b>The following errors occured:</b><br>";
echo $result;
echo "</div>";
}
Registration div css:
#RegBody
{
background-color: white;
background-image: url(LilyPads.jpg);
height: 82.7vh;
}
#RegContents
{
position: absolute;
margin: 39px auto 0 402px;
border-radius: 20px;
background-color: white;
width: 500px;
height: 455px;
padding-left: 57px;
}
#RegisterUser
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
margin-top: 14px;
margin-left: 112px;
color: #1A3D5B;
width: 215px;
height: 30px;
color: white;
background-color: #1A3D5B;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
Error message css:
#Error
{
position: absolute;
background-color: white;
border: 2px solid red;
border-radius: 20px;
width: 200px;
padding: 15px;
margin: 147px 0 0 70px;
color: red;
}
Here's the css for the textboxes:
input[type='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 10px;
width: 210px;
height: 25px;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
Before the error message:
I was thinking that maybe its the font size that's the issue but regardless...a white line also appears at the bottom of the page:
Please have patience with me. I'm a student and new to php. Thank you
i can tell you how to rectify the error (though i am still looking for the reason because of which it happens).
what i did is that i inserted the php code inside body tag and it work fine no change in Textbox dimensions.Below is the code i wrote to prove the same
<?php
$result=1;
echo "<div id='Error'>";
echo "<b>The following errors occured:</b><span>";
echo $result;
echo "</span></div>";
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input[type='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 10px;
width: 210px;
height:25px;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
</style>
</head>
<body>
<input type='text' name=''>
</body>
</html>
When I try to display content from another blade template, it will only show certain data on the webpage. What I want is inside this page, the content from test.blade.php together with the button, when click will pop up a form(I don't want the test.blade.php content to be inside). But whenever I try to do it, only certain information is shown and when I view page source, all the data has already been loaded. I have asked this question before already and someone told me it was the fault of my css, but I when I try to look at it, I don't really see anything which is causing this to happen. Can someone help me please? Thanks in advance!
I will put the screenshot here first in the question.
This is what it is suppose to look like where it will have a scroll down bar, and below there should be a button for the popup form.
But this is what I am getting (I have checked that all the data are already loaded)
elements.css (here is the css that I used)
#abc {
width: 100%;
height: 100%;
opacity: .95;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: 'Raleway', sans-serif;
}
form {
max-width: 300px;
min-width: 250px;
padding: 10px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
background-color: #fff;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
}
#name {
background-image: url(../images/name.jpg);
background-repeat: no-repeat;
background-position: 5px 7px;
}
#email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: 5px 7px;
}
textarea {
background-image: url(../images/msg.png);
background-repeat: no-repeat;
background-position: 5px 7px;
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
span {
color: red;
font-weight: 700;
}
button {
width: 10%;
height: 45px;
border-radius: 3px;
background-color: #cd853f;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
cursor: pointer;
}
evaltest.blade.php
<html>
<head>
<title>Popup form </title>
<meta name="robots" content="noindex, nofollow">
<link href="{{ asset('css/elements.css') }}" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43981329-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- body starts here -->
<body id ="bdy" style="overflow:hidden;">
<div id="abc">
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
{{ csrf_field() }}
<img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
<input type="hidden" name="user_id" value="{{$data0->id}}">
<div class="form-group">
<label class="col-md-2"><b>Recommendation:</b></label>
<div class="col-md-6">
<input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
<input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
</div>
</div>
<div class="form-group">
<div class="col-md-6-offset-2">
<input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
</div>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
// #include('test')
//it will show all data if I were to put here but I don't want to put it together with the popup form
</div>
<!-- Display Popup Button -->
//this will show a few info but no button
#include('test')
<h1>Click Button to Evaluate</h1>
<button id="popup" onclick="div_show()">Popup</button>
<script src="{{ asset('/js/my_js.js') }}"></script>
//this will show even lesser info but button is shown
//#include('test')
</body>
</html>
test.blade.php (there are more information inside but I only put some as an example of how I got the information)
<div class="container">
#foreach ($data as $object)
<b>Name: </b>{{ $object->Name }}<br><br>
<b>Alias: </b>{{ $object->Alias }}<br><br>
<b>Email: </b>{{$object->Email}}<br><br>
#endforeach
</div>
I have tried removing some of the things inside the css but nothing happen, I even try removing those with the position: fixed and also added .container but it still doesn't work.
myjs.js
// function to display popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
// function to hide popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
I have figured it out how to show my data is that I have to remove the style="overflow:hidden;" part so that it will work
My blade view shows a empty page, but if I press CTRL + U to show the source code, then I get this:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://localhost/portal_testing/public/css/style.css'/>
<script src='http://localhost/portal_testing/public/js/main.js'/>
</head>
<body>
<div>
<div class='infoBox'>
<h4 class='infoBoxTitle'>Log:</h4>
<div class='infoBoxContent'>
<p>test</p>
</div>
</div>
<div class='errorBox'>
<h4 class='errorBoxTitle'>Error Log:</h4>
<div class='errorBoxContent'>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
Why is it not rendering even though there is valid code?
UPDATE:
Javascript:
//Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
CSS
.infoBox {
font-family: arial;
padding:2px;
background-color: #DADADA;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.infoBoxTitle {
padding:4px;
font-size: 13px;
color: red;
margin: 1px;
text-decoration: underline;
}
.infoBoxContent {
font-size: 10px;
padding-left:5px;
margin-left:10px;
border: 1px solid gray;
}
.errorBox {
font-family: arial;
padding:2px;
background-color: #838383;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.errorBoxTitle {
padding:4px;
font-family: calibry;
font-size: 13px;
color: white;
margin: 1px;
text-decoration: underline;
}
.errorBoxContent {
color: white;
font-size: 11px;
padding-left:5px;
margin-left:10px;
border: 4px solid white;
}
I found the problem...
I noticed that all the content was rendered inside of the script tag:
The reason is, becaues the script element was missing it's closing tag.
Fix:
<script type="text/javascript" src='{{ URL::asset("js/main.js") }}'></script>
This is what I have so far - JSFiddle
I want to submit the data from the form to the database and was wondering if there is any way with the code I have to submit the selected color of the note depending on the color the user has chosen.
I know how to use $_POST['x']; and all but to get the data from the clicked color div I am unsure of. Any help would be amazing!
$(document).ready(function() {
/* Listening for keyup events on fields of the "Add a note" form: */
$('.pr-body,.pr-author').on('keyup', function(e) {
if (!this.preview)
this.preview = $('.previewNote');
/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
this.preview.find($(this).attr('class').replace('pr-', '.')).html($(this).val().replace(/<[^>]+>/ig, ''));
});
/* Changing the color of the preview note: */
$('.color').on('click', function() {
$('.previewNote').removeClass('yellow blue pink').addClass($(this).attr('class').replace('color', ''));
});
});
.note-wrapper {
position: relative;
height: 150px;
width: 150px;
float: left;
margin: 5px;
}
.note {
height: 150px;
padding: 5px;
width: 150px;
overflow: hidden;
font-family: Trebuchet MS, Tahoma, Myriad Pro, Arial, Verdana, sans-serif;
font-size: 18px;
-moz-box-shadow: 2px 2px 0 #333;
-webkit-box-shadow: 2px 2px 0 #333;
box-shadow: 2px 2px 0 #333;
}
.pink {
background-color: #ff99ff;
border: 1px solid #e589e5;
}
.yellow {
background-color: #FDFB8C;
border: 1px solid #DEDC65;
}
.blue {
background-color: #A6E3FC;
border: 1px solid #75C5E7;
}
.author {
bottom: 5px;
color: #666666;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
position: absolute;
right: 8px;
}
.note-form label {
display: block;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 3px;
}
.note-form textarea,
.note-form input[type=text] {
background-color: #FCFCFC;
border: 1px solid #AAAAAA;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
height: 60px;
padding: 5px;
width: 300px;
margin-bottom: 10px;
}
.note-form input[type=text] {
height: auto;
}
.color {
/* The color swatches in the form: */
cursor: pointer;
float: left;
height: 10px;
margin: 0 5px 0 0;
width: 10px;
}
#note-submit {
margin: 20px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="note-wrapper">
<div id="previewNote" class="previewNote note yellow" style="left:0;top:65px;z-index:1">
<div class="body"></div>
<div class="author"></div>
<span class="data"></span>
</div>
</div>
<form action="post.php" method="post" id="note-form" class="note-form">
<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>
<label for="note-name">Your name</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />
<label>Color</label>
<!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color pink"></div>
<button id="note-submit" class="remodal-confirm">Submit</button>
</form>
Add a hidden input with name say color.
On click of color update the color value (as pointer out in the comment .css will return RGB not Hex) of the color you are chosing as value to the hidden input of the form.
On submit you have your chosen color - on your server side you can access the color value with the name of the input like any other string
Updated fiddle https://jsfiddle.net/5erjuo7o/
Note: add hidden attribute to the
<input name="note-color" hidden type="text"/><!-- to hide from view of the form-->
I am developing a Web app with Laravel and using Facebook's PHP SDK. I want to have Facebook's "Login" button appear on my homepage, but that apparently only comes with the JavaScript SDK. How do I get Facebook's "Login" button when I'm using Facebook's PHP SDK to log users in?
Add these three css files in your Web app.
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
bootstrap.min.css
https://raw.github.com/noizwaves/bootstrap-social-buttons/v1.0.0/social-buttons.css
And then write this in your view.
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
These buttons don't come just like that. In JS you must have use facebook-login-button that's the reason its coming there. The same button can not be used while using the PHP SDK.
In PHP you can create them yourself. Try this-
$user = $facebook->getUser();
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
<?php if ($user): ?>
Logout <!-- design these buttons -->
<?php else: ?>
Login with Facebook
<?php endif ?>
The code is self-explanatory I guess :)
I just tested the answer from Abdussami Tayyab and works fine
I got the latest from http://fontawesome.io/ (4.2.2) then created a /fonts and /css in top folder of website.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<?php include 'css/font-awesome.css'; ?>
<?php include 'css/font-awesome.min.css'; ?>
<?php include 'css/social-buttons.css'; ?>
</style>
</head>
<body>
<?php
print "Hello world!";
?>
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
</body>
</html>
I went ahead and implemented the Javascript login and then used Firebug to get the styles and URLs to images. I didn't bother to clean up the CSS so there is likely things that don't need to be here, feel free to clean it up some and re-post. My sizing matches the 'like' and 'post' button's, not the original log-in button.
Two things not covered here: The button doesn't do anything. Make it a link or use Javascript. I included the link to the 'progress' graphic but didn't implement it either.
Link to facebook images (image names changed later):
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/t4ZSL-NWK2R.png
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/49Rx-CGUu94.gif
CSS:
.facebook_button{
background: linear-gradient(#4c69ba,#3b55a0) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #4c69ba;
border-radius: 2px;
color: #ff;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
display: inline-block;
vertical-align: top;
/*now inherited*/
border-collapse:collapse;
border-spacing: 0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
padding: none;
};
.facebook_button:hover{
background: linear-gradient(#5b7bd5, #4864b1) repeat scroll 0 0 rgba(0,0,0,0);
border-color: #5874c3 #4961a8 #3b5998;
box-shadow: 0 1px 0 #607fd6 inset;
cursor: pointer;
}
.facebook_login{
border: 0 none;
border-collapse: collapse;
border-spacing: 0;
color: #fff;
text-align: left;
font-size: 11px;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor:pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.outer{
padding-bottom: 0;
padding-top: 0;
padding-right: 0;
font-family: "helvetica neue", helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size:11px;
/*now inherited*/
border-collapse:collapse;
border-spacing:0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.middle{
border: medium none;
display: inline-block;
font-family: "helvetica neue",helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size: 11px;
/*inherited*/
}
.inner{
font-size: 11px;
line-height: 14px;
padding: 2px 6px;
font-weight: bold;
border: medium none;
display: inline-block;
white-space: nowrap;
-moz-text-size-adjust: none;
direction: ltr;
}
The HTML:
<div class="facebook_button">
<table class="facebook_login">
<tbody>
<tr>
<td class="outer">
<span class="middle">
<span class="inner">
<img src="library/img/facebook.png" style="width:16px;height:16px;">
</span>
</span>
</td>
<td class="outer">
<span class="middle">
<span class="inner">
Log In
</span>
</span>
</td>
</tr>
</tbody>
</table>