Progress Bar for Online Web Form - html

I am making a application form for a survey of sorts, and want to include a progress bar at the top showing graphically (not really high end) how far the user has got.
I've spent a while surfing the net and asking Google in various ways to do this but it all comes out with progress bar for upload/download.
I am writing the form in XHTML and CSS with a PHP handler to a MySQL Database. The general thinking seems to be ASP (a few are JQuery)to which I have no experience, if it needs to be ASP then fine, but is there any other way and if it does need to be ASP can you please help?
Thank you in advance.

Possible solutions:
Include another image on each page, showing the progress.
Use php to get the current progress and include the image.
Make a div as a progressbar with different width
...
You could even just use simple html... However, here are two possible solutions with php:
<?php
$progress = 1;
$max = 5
echo "<img src=\"progress_".$progress.".jpg\" />"
?>
where progress_1.jpg, progress_2.jpg,... are your images.
Without images - just CSS:
<?php
$progress = 70;
$max = 100;
?>
<div style="height:15px; width:<?=$max?>px; background-color:silver; padding:1px;">
<div style="height: 100%; width:<?=$progress?>px; background-color:yellow"></div>
</div>

Related

Wordpress - Having head, body into WYSIWYG editor

I created my event pages with a different website. That website generated an html page for me(with Javascript, CSS hosted at their end) each time I created an event. I would like to embed the event pages into my website. In order to achieve, I tried to create a blank page template like below:
<?php
/**
* Template Name: Blank
*
*/
if (have_posts()) {
while (have_posts()) { the_post();
the_content();
}
}
?>
Then pasted the content (including head and body) into WYSIWYG editor. However, WordPress pushes everything into body. How can I create a pure blank page template and have the ability to edit everything with WYSIWYG?
Not quite sure if this is the best way to solve your problem. If I understand correctly you want to include events from website X in a page on website Y?
Assuming you set up events as a custom post type, you could use an 'event' RSS feed on website X: http://www.website-x/feed/?post_type=event
Then, on website Y reed the feed using:
$content = file_get_contents('http://www.wesite-x/feed/?post_type=event');
$x = new SimpleXmlElement($content);
foreach($x->channel->item as $entry)
{
$title = $entry->title;
//ETC...
}
It's not wysiwyg but it well get you all the content you need, and you can do whatever you want with it.
Hope this helps.

Open page as pdf with DOMPDF

I am currently working on a semi dynamic page where I use some GET functionality to personalize it. I also echo the date a couple of places. At the bottom of this page, I would like to have a button that gives the visitor the option to download/open this page as PDF. Without the header. I have integrated DOMPDF, but I simply cant get it to work properly and need some help. I have tried a couple of things found here on Stackoverflow, with no success.
In basic, I need the whole page printed in the PDF, but it should not open when page is loaded. But triggered by the button. And then without the header (one spesific div). Is this possible?
<?php
require_once("dompdf/dompdf_config.inc.php");
$html =
'<html><body>'.
'<p>This is a test for '.
'<?php echo htmlentities(substr(urldecode($_SERVER["QUERY_STRING"]), 1)); ?> </p>'.
'<p>Thank you for reading.</p>'.
'</body></html>';
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("the_inquiry.pdf");
return true;
?>
<html>
<body>
<div class="shouldnotPrintToPDF">
Content.
</div>
<div class="shouldPrintToPDF">
Sensitive content.
Open or save as PDF
</div>
</body>
</html>
This is basically our one page presentation. And contains a lot of text, so I will not present all of that here. But in this way, I have to write the page twice, in $html = as well as inside the actual tag. And the PDF save/open option pops up right from the start, which it should not. I also wish to append the echo htmlentities part to the actual pdf-name.. is this possible? The PDF opens and contains what put into the $html = just fine. But not triggered by the link.
Update:
When i do exactly what you perform here, I get an error "The requested URL /inquiry.php&pdf=1 was not found on this server." I have the page I am trying to print in pdf on root level, but the DOMPDF is in /dompdf.. I dont know if that has anything to do with it?
Update:
When i edited the link, i get all this information up in a new page, like below.
[_parse_properties(margin:=1.2cm)(empty)_parse_properties]
[_parse_sections[section[_parse_properties(display:=-dompdf-page)
(counter-reset:=page)(empty)_parse_properties]#html#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]
_parse_sections][_parse_sections[section[_parse_properties(display:=block)
(empty)_parse_properties]#div##map##dt##isindex#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]
_parse_sections][_parse_sections[section[_parse_properties(page-break
-before:=avoid)(display:=block)(counter-increment:=page)
(empty)_parse_properties]#body#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(margin:=1em
0)(empty)_parse_properties]#p##dl##multicol#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(margin-left:=40px)
(empty)_parse_properties]#dd#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(margin:=1em
40px)(empty)_parse_properties]#blockquote#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(font-style:=italic)
(empty)_parse_properties]#address#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(text-align:=center)
(empty)_parse_properties]#center#section]
Do you have any idea what it might be caused by?
Breakthrough:
When I activated DOMPDF_DPI it actually opens as PDF, but now all of the text comes on first line of the second page of the PDF. Like, all the text comes out on top of each other. Also, when it opens the PDF, the ?&pdf=1 are included in the htmlentities query string, which looks very messy since it is supposed to be a personalized page as well as the PDF.
You can set dompdf to parse CSS #media queries for standard media types (screen, print, voice, etc.). By default dompdf parses the "screen" media type styles, but you can change this in the configuration file. See the DOMPDF_DEFAULT_MEDIA_TYPE configuration setting. Then you just need to pass the original URL querystring with an appended variable telling the page to render to PDF. If your original URL is something like the_inquiry.php?name=Joe then your PDF URL could be the_inquiry.php?name=Joe&pdf=1.
Your code would then look similar to the following:
<?php
ob_start();
?>
<html>
<head>
<style>
#media print {
.shouldnotPrintToPDF, .pdflink { display: none; }
}
</style>
</head>
<body>
<div class="shouldnotPrintToPDF">
Content.
</div>
<div class="shouldPrintToPDF">
Sensitive content.
Open or save as PDF
</div>
</body>
</html>
<?php
if ( isset( $_GET['pdf'] ) ) {
require_once 'dompdf/dompdf_config.inc.php';
$html = ob_get_clean();
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("the_inquiry.pdf");
}
?>

HTML5 Canvas - awesome charts error - when used inside php - base64 output

First thanks for the awesome charts - they are simple and i am trying them out for a friends website.
A brief abt the site -it is a stock market related website trying to show a index from Bombay Stock Exchange in detail. Doing it for a friend basically for free.
The site is in wordpress and use wp exec php for inserting php into posts etc. I am trying to insert the chart html code inside php - since I get a variable data through php from a url and on the fly i define it into a csv - field like - echo $mycsvfile[49][0]; which out puts a value from 49th row 0 coloum.
So if the php ends the temp values are lost so basicallt what i have to do is - get both the java script and also html div into the php.
what i tried first was to get the div only into php to sse the default output - but the output is coming as - base64 code - ie numericals etc. I dont know how to output that into image and embed into the page - inside php.
The link being - http://www.shariah50.net/live-stock-price-quotes-shariah-index-bse/
Trying to display two images- inside php and another one pure html as u had given.
pls guide
how to output that into php and get an image
how to code the javascript into php - since i need to pass variables into the javascript.
Two ideas i had - dont know how good they are - is it ok to convert the canvas element into a jpeg or png, and secondly - can we convert the in page javascript into a php query...
Waiting for ur reply - tried to find a solution for it but couldnt online ...
What code i am using is basically below -
echo ' ';
echo ' ';
echo ' Your web-browser does not support the HTML 5 canvas element.';
echo ' ';
echo ' ';
?>
.chart_container{ text-align: center; width: 400px; height: 400px; margin: 0px 25px; float: right; }
<div class="chart_container">
<canvas id="chartCanvas11" width="400px" height="400px" float="right";>
Your web-browser does not support the HTML 5 canvas element.
</canvas>
</div>
<script type="application/javascript">
var chart11 = new AwesomeChart('chartCanvas11');
chart11.chartType = "horizontal bars";
chart11.title = "Charts";
chart11.data = [-12.62,13.3,10.06,4.27,1.96,0.78];
chart11.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
chart11.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
chart11.randomColors = true;
chart11.draw();
</script>
Ok, the basic flow is:
Create an Image element that has the base64 image string as src value. Example: <img src="data:image/png;base64,iVBORw0KG...
I don't really understand your question and how it is related to html5, but "putting javascript into php code" is the same as "putting html into php code".

formatting posts in wordpress

I'm developing a wordpress theme, but I'm stuck in formatting the single.php.
I have in my posts a slideshow plugin which is load with the_content() function, togheter with the text of the post, and with the_title() load the title.
that seen like this:
<h1>the_title()</h1>
<div id=post>the_content</div>
the problem is, I need customize how it's display.
I need display:
<div>theplugin</div>
<div id=post>
<span>the_title</span>
the text
</div>
I try to do that with add_filters but I wasn't lucky.
I hope you can understand my explanation, if you need more details, just tell me.
Thanks in advanced.
If users can add plugin components to posts in the editor, they are usually added via shortcodes.
If that's the case with your plugin, you can add it with apply_filters(). Here's an example of how to add a slideshow from the popular nextgen gallery plugin outside the post content:
<?php
$slideshow = apply_filters('the_content', '[slideshow id=1]' );
echo $slideshow;
?>
The above code can be added into single.php, any static page's page template file or directly into header.php to display on all pages.
If you specify the plugin you're using, I'll update the answer accordingly.
If it should indeed be called directly via a function, I second Ancide's answer.
You just need to change the place of where the functions are situated. Like this:
<div>theplugin</div>
<div id=post>
<span><?php the_title(); ?></span>
<?php the_content(); ?>
</div>
Edit: I misunderstood the description of the problem. Here's my answer now that I understand what the problem is:
The plugin uses a hook for the_content function. If you look inside all the php-files inside wp-content/plugins/your-plugin there will be a file with this code:
add_action('the_content','some-function-name');
This tells wordpress to run the function some-function-name everytime the function the_content is run. So you need to look for the some-function-name to figure out how to customize the output.

Coloured Indication Boxes On Website

What I am trying to do is create a grid of data for clients against days. IE, if their backups worked, they get a green square against that day, in a html page.
Is there any CSS or something else that would do the job to check to see if a text document with date and "success" or "fail" is in a directory, then change the background colour of a box in a html file? I'm planning on creating a folder for each client, then having the text files named "20110201Success" or "20110201Failed"
Thanks for any direction you could give me.
You will have to do server-side programming to accomplish this. (PHP, ASP, etc.)
In PHP, use something like:
function getStatus($date)
{
if (file_exists("path/to/file/".$date."Success.txt"))
{
echo "<div class='greenbox'></div>";
}
else
{
echo "<div class='redbox'></div>";
}
}
You need some server-side code to do this.