How to print the current printing date and time along with the page number? - html

I need the format like HH:MM:SS Date Time
With the help of css and html ,how can I show the page number and printing date and time in the footer of the page.

By using HTML and CSS you can only write it by yourself but if you want it to be automated so you must use a server language like PHP or another.
You can also do it by using Javascript or Jquery like so :
var d = new Date().toLocaleTimeString();
document.getElementById("date").innerHTML = d;
<p id="date"></p>

You can use moment library to get a better display of the date on your jsreport
first, Install moment package inside your docker container
second, you need to allow custom script in your jsreport config.json by adding
"allowedModules": "moment" or allow all "allowedModules": "*"
Third, import moment to your jsreport var moment = require('moment')
and finally, add a helper for the time and display it on your jsreport {{now}}
var moment = require('moment')
Handlebars.registerHelper("now", function(date) {
return moment(date).format('L');
});

Here how to achieve with css print media
Page numbering
css
#page {
#bottom-right {
content: "Page "counter(page);
}
}

Related

Call a hook inside another hook function in MediaWiki

Hello guys I'm new to MediaWiki and trying to build my own extension. Using this extension I'm trying to show some content blow page heading but only to a page specific to a category.
For that, I'm using two hooks:
onArticleViewHeader ( To add my HTML content below the page heading)
onOutputPageMakeCategoryLinks (To get all the category of page being loaded)
From the first hook, I'm able to show my content using the following code:
public static function onArticleViewHeader( &$article, &$outputDone, &$pcache ) {
$article->getContext()->getOutput()->addHTML("Printed from a hook");
}
The above code prints the HTML below every page heading but I want to load HTML only to a specific page category. So for that, I'm trying to load the category and I'm just trying to call my first hook only if the category gets caught.
public static function onOutputPageMakeCategoryLinks( &$out, $categories, &$links ) {
foreach($categories as $category){
if($category=="my_page_category"){
MyExtentionClass::onArticleViewHeader();
}
}
}
I know I'm calling the hook in a bad manner which is not correct. But I just wanted to call my 1st hook 'onArticleViewHeader' from inside of my 2nd hook so that I can print my HTML only to a page with a specific category.
Just use $article->getPage()->getCategories() in the header hook.
Haven't really got the exact solution of the question I asked but has got the way out to solve the problem I have been facing.
I just tried getting the current categories in the "onArticleViewHeader" itself by using some of MediaWiki's global variables.
global $wgOut;
$title = Title::newFromText( $wgOut->getPageTitle() );
$categories = $title->getParentCategories();
if(isset($categories['Category:my_cat_name']){
//formed my logic here
}
This might help some other people facing this kind of issue.

Display value + text using jQuery

I am a total beginner. I have a form in HTML and am trying to calculate a specific value using jQuery. I want this value to be displayed in paragraph <p id="final"></p> under the submit button, but am actually not sure, why my code isn't working.
jQuery(document).on("ready", function() {
jQuery("final").hide();
jQuery("#form").submit(function(e){
e.preventDefault();
const data = jQuery(this).serializeArray();
/*
some calculations
*/
$('#final').html($('#final').html().replace('','result + " text"'));
jQuery("#final").show();
}
}
Do you have any idea, what could I be doing wrong??
You've got a several issues here.
Firstly, don't mix jQuery and $. If you're using the former, it's normally to avoid jQuery's alias, $, from conflicting with other code that might use $.
Secondly, you don't actually do any calculation (from what I can see in your code), so I'm not sure what you're wanting to output. I'll assume you're going to fill that in later.
Thirdly, jQuery('final').hide() is missing the # denoting you're targeting by element ID.
Fourthly, the line
$('#final').html($('#final').html().replace('','result + " text"'));
...doesn't quite do what you think it does. For one thing, it makes no reference to your data variable. And running replace() on an empty string doesn't make much sense.
All in all I'm guessing you want something like (note also how I cache the #final element - that's better for perforamnce):
jQuery(function() { //<-- another way to write a document-ready handler
let el = jQuery('#final');
el.hide();
jQuery("#form").submit(function(e){
e.preventDefault();
const data = jQuery(this).serializeArray();
let calc = 5+2; //<-- do what you need to here
el.html(calc).show();
}
}
Guessing result is your variable and your above code is your current status, you should fix the html replacement to something like (depending on your acutal usecase):
$('#final').html(result + " text"));

How to override non-theme function in Drupal

I need to change the function that dictates the behavior of my Search form. I want the text to be "GO" instead of "Search" and the input type to be search instead of text.
Now, I already done that by editing the search.module, but is there a more convenient way? I want the theme to be 1 package deal and ready to go, not to have to edit other files from the Drupal installation.
It is for Drupal v.7.16
Thank you!
In your theme's template.php you can override any part of the search form by implement MYTHEME_form_alter.
For your example, it might look something like this:
function MYTHEME_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'search_block_form') {
// Change form submit text
$form['actions']['submit']['#value'] = t('GO!');
// Change type to 'search'
$form['search_block_form']['#type'] = 'search';
}
}
For more background information about Tanis' solution, see the API documentation for hook_form_alter() and hook_form_FORM_ID_alter().

Need to update date code mm/dd/yyyy in in several webpages without using code

I need to get the date from the server in mm/dd/yyyy without any javascript or asp code. I would prefer to do this as either a link that flows in the current document frame and that also injects the mm/dd/yyyy into the current html web page as css or other non code based solution. I don't want to use any extraneous querying languages like xslt, xquery, or plinq either.
example:
<h3>Date:<date format="mm/dd/yyyy" src="currentdate.asp" /></h3>
output:
Date:06/26/2012
No, this is an impossible task.
HTML is a static language. It is impossible to use a static language without any dynamic element (javascript, php, ssi, etc.) and have it change the page.
You will need to find a way to loosen the constrains for your project as it is currently not only impossible but illogical.
EDIT:
I thought of one potential way but it wouldn't be pretty.
You could use an <iframe src="date.asp"> and if the date.asp only returned the date then it would work. This is the only way possible.
as he others say you cannot achieve this without at least a bit of javascript. what you could do is use jquery to select all your date tags and then post an ajax to get the current date in your preferred format.
like so:
<script type="text/javascript">
$(document).ready(function(){
$("date").each(function(index, element) {
var d = $(this);
$.post("ullu.asp", {
ajax: true,
act: "currentdate",
format: d.attr("format")
}, function(data) {
d.after("<span>" + data + "</span>");
});
});
});
</script>
<h3>Date:<date format="%m/%d/%Y" /></h3>
then on ullu.asp:
<%
if request("ajax") = "true" then
dim d : d = DateTime.FormatDate(request("format"), now)
response.write d
end if
%>
DateTime is here a class of mine for formatting dates you could use your own implementation... Furthermore you could add another attribute to your tag like "src" to send your ajax there.
i know you wanted to do this without "using code" but that is not possible. with this solution you only have to add a bit of javascript which handles all your tags...
You can always make it an img, then use an on the fly img generator which generates text as an image from the server. You can use something like csImageFile for generating text in an image on the fly.
http://www.chestysoft.com/imagefile/default.asp
Your image would look like this:
<img src="date.asp" />
Then your date.asp file would be generating a new image (using response.contenttype="image/jpeg" with the current date on each call.
But your date would be displayed as an image, not text.
Or you can use an iFrame like the secretformula's answer, or Ajax/jQuery for this. But if you're not gathering the data from the server, then your date will from the client.

Is there a way to set the CSS information for a particular instance of YUI DataTable?

The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?
I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.
Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.
Here's how from the open source Timeline project:
// Use document for the doc param
function includeCssFile(doc, url) {
if (doc.body == null) {
try {
doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
return;
} catch (e) {
// fall through
}
}
var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
getHead(doc).appendChild(link);
};
function getHead(doc) {
return doc.getElementsByTagName("head")[0];
};
Put your datatable in a specific div with an id
Or: Via the css selector : #yourdivid .yui-dt-data