PRINT HTML SOURCE IN JAVASCRIPT
|
|
See the html source and print it on a window
|
The request was: how can I show the html code of a page and print it somewhere else like (original question) on a pop up window, or (enhancements of this script) on a frame or a textarea or whatever other support?
This script does that; it is called getCode and takes in these arguments:
ARGUMENTS OVERVIEW |
object |
It is the first argument, and it can be:
- Zero: in such case it defaults to the current window.
- Window or frame: if a frame it can be passed as a full path to a frame, example:
top.frameName.
If another window which was open via script, the variable name assigned to such window once opened:
var foo=window.open();//
- A DOM node: namely something expressly passed as:
document.getElementById("anId");
- A string: in such case it is assumed such string is a valid ID of a tag and the function will grab it by itself using:
document.getElementById(object);
|
nodeName |
It is the second argument, and if passed as zero defaults to "HTML".
It is actually optional, and it should be the name of the tag within which is included all the HTML you want to grab. I allowed for this argument feature to introduce some sort of potential compliance with XML where the root node might have whatever name a DTD assigned.
Just pass it as zero if you don't have any XML "concern". |
print |
It is the third argument; the function returns always and invariably either an empty string (no html was grabbed) or all the grabbed html.
Yet if you pass the second argument named print as 1, the function will also open a pop up window and print upon a textarea in it all the grabbed html source code. |
stripTags |
It is the fourth argument; if passed as 1, it strips the tags and keeps only the text (Internet Explorer uses a proprietary Dom property named innerText for that, but that property is implemented on Explorer only, thus this function will manage to achieve this by a regular expression that strips the tags).
Note on this argument: apparently, there is no way with this method to strip html comments too. Also, setting it occasionally crashed Netscape 7. |
nl2 |
Optional fifth argument: if you want, you can also replace new lines that are more than two with two new lines alone.
This can be useful for a more nicely formatted "text only" version (by the way a "text only" version from an HTML source code is achieved in this function by setting the last two arguments, see further on), because at times in a source code hard and hand written carriage returns may abound, or when stripping tags using the next arguments replaceBR and/or PDIVLIHR you could end up with excessive and unexpected cumulations of new lines.
My personal suggestion is always to pass this argument: the format results much nicer in any case. |
replaceBR |
Optional sixth argument; if passed as 1, before stripping the tags (it makes sense using it only if you passed stripTags too) the function will replace <br> tags with a new line \n. Useful to have a less compact text only version. |
PDIVLIHR |
Optional seventh argument; if passed as 1, before stripping the tags (it makes sense using it only if you passed stripTags too) the function will replace <p> , </p>, <div>, </div>, <li>, <hr> tags with a new line \n. Useful to have a much less compact text only version.
Please note that I suggest not to pass this argument (or by-pass it as zero) if you don't really need it, because it burdens a bit the processing time. |
Example calls (third argument is number 1 to signify these call examples all launch a pop up window to show the HTML code, rather than just silently returning it; the last 1,0,0 are, obviously, the nl2, replaceBR, and PDIVLIHR arguments):
getCode(0,0,1,0, 1,0,0);
getCode(parent.frameName,0,1,0, 1,0,0);
getCode("anId",0,1,0, 1,0,0);
getCode(top.frameName.document.getElementById("anId"),0,1,0, 1,0,0);
Keep in mind that in order to do this the function by default grabs the tag <html>: if such tag is absent from the document (which might happen) then it might fail, though my tests on Internet Explorer at least proved that it can grab also the whole innerHTML in documents whose absence of an html tag could have induced the function to return false.
"Shortcomings" of the function: it won't grab if present the < doctype > tag, it will exclude the HTML tag pair itself (innerHTML reads by default the html code nested inside the designed container but with exclusion of the container tag itself).
Truly strangely, for some reason the fully valid and perfectly working regular expression:
object.replace(/<.+?>/g,"")
strips the <script> tags but refuses to strip the commented content within them, which of course starts with a < sign as well and should be regarded just another tag! Yeah, funny.
a Joan Miro painting: Dragonfly with red wings chases a serpent which leaps with spirals towards a comet star, 1951 |
/
/
/
/
/
TEST IT
/
/
/
/
/
|
|
|
|
nl2? »
stripTags? »
replaceBr? »
PDIVLIHR? » |
|
To verify the function can also grab subsections of a document, and report the HTML within such subsection or only the text within it (stripTags) check this checkbox:
If you check it, the invocation will not be:
getCode(0,0,1,0,0,0,0);
but it will grab a subsection I labelled with an id, as an example, by:
var subsection=document.getElementById("anId");
getCode(subsection,0,1,0,0,0,0);
or, equivalent for the layer is in the same document from where the function is called:
getCode("anId",0,1,0,0,0,0); |
COLLAPSE AND EXPAND SECTIONS OF A DOCUMENT
|
|
Expand a section, collapse another at the same time
|
If you want to expand a section of a document included within a tag to which you have assigned an id and at the same time you want to collapse another (though the function can also limit itself to toggle one element alone if you don't pass all the arguments), this snippet does that.
It is named collapseShow and takes in four arguments:
- showThis: a string representing the id of an element you want to show. If absent or passed as zero, the command gets simply bypassed.
If it is passed as an array rather than as a string, it must be an array of Strings representing valid IDs assigned to multiple elements (tags), and the script will show them all.
- collapseThat: a string representing the id of an element you want to hide. If absent or passed as zero, the command gets simply bypassed.
If it is passed as an array rather than as a string, it must be an array of Strings representing valid IDs assigned to multiple elements (tags), and the script will hide them all.
If collapseThat meets an id that is also within the showThis argument (in case it is passed as an array, but will manage if it is passed as a string too), this/these latters indicated in showThis will be not affected by the operations that involve collapseThis (namely will not be hidden, but shown).
- displayType: the function achieves this by setting the style display property to either none to hide or inline to show.
If you want the element to be shown to be assigned a different type of display value rather than inline, such as for instance "block", pass this argument as such, that is as a String whose value is the one you want to assign to the display property.
- hideType: you can override the default setting of the collapsed items which is set to hide by passing this last argument as a String with the value different than hide that you mean to assign.
This basically means you could use this function also to toggle the display property not only between the couples hide/inline but also between other pairs of your choice.
- property: optional, a Styring; defaults to "display".
If passed as a valid style property in javascript notation (that is, css properties turned into javascript replace the dash by capitalizing the letter after it, instance: css border-color becomes in javascript borderColor), that will be the property affected, whose values will be the ones passed as displayType and hideType.
This is just an optional feature that adds a great flexibility!
You can consider this example, where the background colors of the links switch upon clicking: try clicking each of them:
SHOW STEP 1
SHOW STEP 2
SHOW STEP 3
The code of that is:
Example of call: collapseShow("idToShow", "idToHide", "block", "none");
a Joan Miro painting: The bird with a serene gaze and his wings burning, 1952 |
/
/
/
/
/
TEST IT
/
/
/
/
/
|
toggled layers: one display:hide the other display:block.
Click again to restore
|
|
|
MAXIMUM OF SELECTED OPTIONS
|
|
Snippet to verify that no more than a fixed amount of options have been selected in a select tag
|
This is an easy one: giving a select option tag whose property multiple is set (by setting a select tag as multiple you allow a selection of more options if, while you select them, you also keep pressed the CTRL -preferred- or the SHIFT key on your keyboard), verify that no more than x options have been chosen.
The function is called selectAmount and takes in 2 arguments:
- object: a reference to the form select tag - instance:
document.forms[0].selectName.
- amount: a number. Defaults to the amount of options, namely allows by default to select them all.
amount even accepts zero as value, thus basically making the select menu disabled, no longer fit to be picked options from.
- unselect: if passed as, say, number 1, it will de-select all the options starting with the one which has been found as exceeding the given amount onward.
Whether you want this property or not arguably depends on whether you have involved some server side processing of the form: would your server side application work in the expected way with the correct amount of selected options, though not like the user would have rearranged them after the "error" but as a script did? In this case perhaps your server side scripts should present the user with an overall summary before approving the eventual data, ok?
Example of call: selectAmount(this, 2)
MULTIPLE CHECKBOXES WITH SAME NAME
|
|
A snippet to verify which chekboxes are checked and not when they have the same name
|
By all account a trivial task, yet it seemed to be daunting for a javascript programmer on a web group.
The problem is the following: for some reasons, you have a family of checkboxes all with the same name property. Say name is foo:
<input type="checkbox" name="foo" value="0">
<input type="checkbox" name="foo" value="0">
<input type="checkbox" name="foo" value="0">
<input type="checkbox" name="foo" value="0">
<input type="checkbox" name="foo" value="0">
<input type="checkbox" name="foo" value="0">
They have the same name for they are meant, for some reason, to be handled as a family.
Since they have the same name, you can't discriminate among them, by interpellating different names, which one(s) is (are) checked and which is (are) not.
Thus you resort to the fact all form objects listed after the same name yield (are represented as) a standard numerical array, which therefore can be interpellated by numerical indexes.
The function is named checkCheckboxes and returns an array of two arrays, the first one storing all the indexes of the checked ones, the second one all the indexes of the non checked ones.
Pass as its only argument a reference to the family of objects, such as, with FormName and foo as mere place holders for the form and elements' shared names you assigned:
checkCheckboxes( document.FormName.foo );
JAVASCRIPT CLOCK
|
|
A fully customizable javascript clock which calculates also worldwide time zones
|
An interesting article online, witten by Martin Webb, and related to calculating time zones via javascript, which includes a few very interesting examples, and that I enjoyed is: http://www.tech.irt.org/articles/js076/
I do not fear to link the «concurrent» files; on the contrary, I rather like it. I find they enrich me and my site, and not at all the contrary.
This is a javascript class that allows you to initialize as many javascript clocks as you want, without populating the window with too many variables (being a class each clock instance encapsulates its own variables without meddling with the window scope), and which lets you perform a few interesting things like setting the clock(s) to whatever time zones you prefer so to simulate on the local machine a clock running the time of another edge of the world.
The name of the function is clocker - the reason I didn't just call it clock is to be more user friendly so to say: though you could change the name of the function, yet it is better never to use names, such as just clock, which being rather common have higher chances of overwriting variables already present in a script with that name.
Being a class, you have to get a variable with your favorite name (our placeholder will be foo) and initialize it as a new clocker by using the keyword new; also, don't forget to put before this variable the keyword var or the whimsical javascript would complain:
var foo = new clocker(arguments here...)
The only thing you truly have to keep in mind is that the very first argument of the function must be the name of your chosen variable name itself as a String namely passed in between quotes:
var foo = new clocker("foo")
To run it, as you will see in the Available Methods Overview below:
foo.run()
I therefore I move now on to provide you with a detailed description first of all the arguments you can pass when initializing each clocker instance, in due order as they can be passed; and then I pass to a section where I describe the methods available to each instance of this class (that is, to each initialized clocker) so that you will know how to start, stop, and reset a clocker.
ARGUMENTS OVERVIEW |
variableName |
It is the first argument, it must be passed as a String (in between quotes that is) and must be the name of the initialized variable itself! |
hours |
It is the 2nd argument, represents the hours to start with, and can be passed as a number. To bypass it pass it as zero; the clock will use the local time (adding or subtracting the passed Greenwich time if its relative argument -see further on- is passed as a number). |
minutes |
It is the 3rd argument, represents the minutes to start with, and can be passed as a number. To bypass it pass it as zero; the clock will use the local time (adding or subtracting the passed Greenwich time if its relative argument -see further on- is passed as a number). |
seconds |
It is the 4th argument, represents the seconds to start with, and can be passed as a number. To bypass it pass it as zero; the clock will use the local time (adding or subtracting the passed Greenwich time if its relative argument -see further on- is passed as a number).
I didn't arrange this clocker class to display milliseconds and the alike too; yet if you have some knowledge of javascript all you need to do to custom this, are minor interpolations, especially within the body of the method named execute. |
separator |
It is the 5th argument, represents the separator used to divide hours from minutes and minutes from seconds when your clock displays itself. Defaults to a column(:. Must be a String (in between quotes) and cannot be an empty string or the hours would be hardly distinguishable. |
alternateSeparator |
It is the 6th argument, represents a possible alternate separator to appear at each alternate second to divide hours from minutes and minutes from seconds when your clock displays itself, thus implementing merely a fancy flashing effect. Defaults to a column(:. Must be a String (in between quotes) and cannot be an empty string or the hours would be hardly distinguishable. |
twelveFormat |
It is the 7th argument, if passed as 1 (zero bypasses it) represents the hours as sets of 12 rather than as the default set from 0 to 23. |
addPmAm |
It is the 8th argument, if passed as 1 (zero bypasses it) appends either the string pm or am to the hour. Obviously, it makes sense passing it only if you have passed twelveFormat as 1. |
currentTime |
Important.
It is the 9th argument, if passed as 1 (zero bypasses it) it ignores whatever hours/minutes/seconds may have been passed as arguments, and derives all of them from the current time as yielded by the client computer. A feature you arguably mean to use a lot. |
toGreenwich
|
Important.
It is the 10th argument, it can be bypassed only by setting it as keyword false.
If you pass it, it must be a number, either positive or negative or zero representing the GMT of the time zone which you want to grab the hour of: it will thus simulate a clock running after that time zone.
For instance the official time zone for Paris is +1, no matter where you live and the New York time zone is always -5 regardless of where you live, even if it were New York itself (see the map below to view all the absolute hour differences from the Greenwich meridian): if you pass one such number as this toGreenwich argument, no matter whether positive or negative (though by the way numbers lower than -11 or higher than 12 would cause the script to default to your own local time zone) the script will look after the rest by itself, namely it will extract your local timezone offset (by the javascript Date.getTimezoneOffset method) and then will work out from your local relative path (numerical difference, that is) the path to the absolute time zone number as you passed it to the function.
If you are to make tests changing the settings of your time zone on your computer (yeah it is possible: double click on your tray icon of your computer clock) always reload the page to see printed the correct new values (in the test soon after the map, no matter what time zone you assign to your local machine, if you reload the page after you have changed it, the time zones will always show the same hours each showed identical to the one assigned with a different time zone, regardless of the new time zone you set/simulated! Cool, I think). Be warned that on my machine the time zones were all reported with a number sign different from the one used in the map below: that is, all positive offsets got represented by negative numbers and vice versa. I don't know what causes this and whether that is the correct behavior though inconsistent with the map I use here whereas time zones at the right of Greenwich are positive not negative!
Anyway since the timezone where I was working was by all accounts definitely +1 and my system insisted saying it would have been -1, I arranged in the script the following statement to revert this sign issue by default:
var timezone = this.startDate.getTimezoneOffset()/60;
note the (minus) sign prepended, to revert that representation.
If you think your system is not affected by this "issue", you'd change that manually by deleting that minus sign in the script: I don't have enough data to say whether this is a Windows 2000 issue, or a legitimate alternative representation that all operative systems implement: I can afford only one operative system, and after all it could really be just an issue about the algebraical sign changed and nothing more - that is, truly an alternative different representation just reversed back to front. Yet whereas the numbers still correspond and are all the same, by +5 you mean New Delhi time, and by -5 New York, so there is a practical difference indeed behind this mere difference in sign and identity in numerical absolute value.
Passing this parameter makes really sense only if you have passed currentTime as 1.
Passing this parameter as zero means the Greenwich time zone itself, not that you're bypassing it! To bypass it, pass it as keyword false.
Passing this parameter automatically strips any possible daylight legal hour from the hour, because it calculates the absolute time zone as requested without meddling with daylight considerations.
|
yourPrintFunction |
Important.
It is the 11th argument; since you surely want to print the returned hours somewhere, this argument can be either:
- A path to a form object, without the value keyword, for instance:
document.aFormName.aFieldName
If so, the clock will take care of printing on such form field.
- Can be a function tailored by you and meant to accept one argument alone, which will be the returned String of hours minutes and seconds from your clocker, formatted as a string and thus ready to be printed. Thus your function will determine what to do with it (say, print it on a specific layer).
To pass the function, pass just the function name as an Object, not in between quotes and without the round brackets, say just like, if your function mae is myFunc: myFunc.
Like that!
|
AVAILABLE METHODS for each clocker |
run() |
foo.run()
When you invoke run on your initialized clocker, it triggers the clock and prints it on a support accordingly to the yourPrintFunction argument (see section above about arguments).
|
stop() |
foo.stop()
When you invoke stop on your initialized clocker, it stops the clocker. |
execute() |
Do not meddle with this: it is just the internal method that gets executed at each second to update the counter. I report that it exists just for completeness' sake. |
result |
This is a property not a method:
foo.result
It just stores the time as your clock clicks on. Your clock must have been triggered by calling run on it at least once to have this property store something (defaults to an empty string). |
JAVASCRIPT CHRONOMETER
|
|
A fully customizable javascript chronometer that ticks counting either upward or downward
|
This is a javascript class that allows you to initialize as many javascript chronometers as you want, without populating the window with too many variables (being a class each chronometer instance encapsulates its own variables without meddling with the window scope)..
The name of the function is chronometer.
Being a class, you have to get a variable with your favorite name (our placeholder will be foo) and initialize it as a new clocker by using the keyword new; also, don't forget to put before this variable the keyword var or the whimsical javascript would complain:
var foo = new chronometer(arguments here...)
The only thing you truly have to keep in mind is that the very first argument of the function must be the name of your chosen variable name itself as a String namely passed in between quotes:
var foo = new chronometer("foo")
To run it, as you will see in the Available Methods Overview below:
foo.run()
I therefore I move now on to provide you with a detailed description first of all the arguments you can pass when initializing each chronometer instance, in due order as they can be passed; and then I pass to a section where I describe the methods available to each instance of this class (that is, to each initialized chronometer) so that you will know how to start, stop, and reset a chronometer.
ARGUMENTS OVERVIEW |
variableName |
It is the first argument, it must be passed as a String (in between quotes that is) and must be the name of the initialized variable itself! |
hours |
It is the 2nd argument, represents the hours to end with. You can specify later if your chronometer must also start with this time and clock down to zero, or start with zero and tick up to this time.
If you pass the hours, or also the minutes or seconds or milliseconds, as a value higher than the higher allowed ones (hours=24, minutes=60, seconds=60) the chronometer would perform (via the way javascript works, not because of any arrangement by my deliberately put into action) a subtraction and will show only the hours consistent with the limit of 24; yet it will go on ticking for all the specified hours, like say 48 though number 48 will not appear printed.
If at whatever time you want to verify what the originally passed set of hours/minutes/seconds/milliseconds was, you can check:
foo.originalTime
which holds a String with the starting data (time arguments) separated by a column:
"hh:mm:ss:mmss" |
minutes |
It is the 3rd argument, represents the minutes to end with. You can specify later if your chronometer must also start with this time and clock down to zero, or start with zero and tick up to this time. |
seconds |
It is the 4th argument, represents the seconds to end with. You can specify later if your chronometer must also start with this time and clock down to zero, or start with zero and tick up to this time. |
milliseconds |
It is the 5th argument, represents the milliseconds to end with. You can specify later if your chronometer must also start with this time and clock down to zero, or start with zero and tick up to this time. |
upOrDown |
It is the 6th argument, and flags whether your chronometer must tick upward from zero (default) or downward from the assigned hours/minutes/seconds/hours: for the latter case pass this argument as number 1, otherwise as zero. |
speed |
It is the 7th argument, and specifies the speed in milliseconds (so, one second = 1000) your clock must follow.
It defaults to 1000, and can't be set to higher values than 1000 (to my eyes a chronometer that ticks every three seconds makes little sense, by and large) or lower than 100, and this because speeds lover than that would not be able to catch up with the processing time of the running methods which require at least a few dozens of milliseconds to make the computations.
My personal suggestion is to use it always between 500 or 1000 milliseconds. The chronometer is able to catch up eventually and correctly also for values lower than, say, 200 milliseconds; yet while it does, the printing time may slightly lag behind occasionally, still because of processing time exigencies. |
separator |
It is the 8th argument, represents the separator used to divide hours from minutes and minutes from seconds when your clock displays itself. Defaults to a column(:. Must be a String (in between quotes) and cannot be an empty string or the hours would be hardly distinguishable. |
alternateSeparator |
It is the 9th argument, represents a possible alternate separator to appear at each alternate second to divide hours from minutes and minutes from seconds when your clock displays itself, thus implementing merely a fancy flashing effect. Defaults to a column(:. Must be a String (in between quotes) and cannot be an empty string or the hours would be hardly distinguishable. |
yourPrintFunction |
It is the 10th argument; since you surely want to print the returned hours somewhere, this argument can be either:
- A path to a form object, without the value keyword, for instance:
document.aFormName.aFieldName
If so, the clock will take care of printing on such form field.
- Can be a function tailored by you and meant to accept one argument alone, which will be the returned String of hours minutes and seconds and milliseconds from your chronometer, formatted as a string and thus ready to be printed. Thus your function will determine what to do with it (say, print it on a specific layer).
To pass the function, pass just the function name as an Object, not in between quotes and without the round brackets, say just like, if your function mae is myFunc: myFunc.
Like that!
|
yourEndFunction |
It is the 11th argument; entirely optional, must be either zero to bypass it, or a function crafted by you passed by its name (that is, just pass the name of the function without ending round brackets and not in between quotes).
It represent the optional task to execute as soon as the chronometer finishes ticking; for instance, just a mere function holding an alert box:
fooFunc(){alert("Time Over.");};
|
showMilliseconds |
It is the 12th argument; by default the printed time will not include (show) the milliseconds. Pass this argument as number 1 to display milliseconds too.
|
AVAILABLE METHODS for each chronometer |
run() |
foo.run()
When you invoke run on your initialized chronometer, it triggers and prints on a support accordingly to the yourPrintFunction argument (see section above about arguments).
If you have set neither hours minutes seconds or milliseconds, the function will not trigger because it is impossible to perform either a countdown or a count up whose boundary time is zero: from now on, zero is precisely now!
|
stop() |
foo.stop()
When you invoke stop on your initialized chronometer, it stops the clocker. |
executeDOWN()
executeUP() |
Do not meddle with these: they are just the internal methods that get executed at your given speed to update the chronometer. I report that they exist just for completeness' sake. |
result |
This is a property not a method:
foo.result
It just stores the time as your chronometer clicks on. Your chronometer must have been triggered by calling run on it at least once to have this property store something (defaults to an empty string). |
originalTime |
This is a property not a method:
foo.originalTime
It holds a String with the starting data (time arguments) separated by a column:
"hh:mm:ss:mmss" |
|