Really Useful Javascript


by Dale Stubbart

Expressive Websites

To make certain that you&';re up-to-date on the latest changes to my Expressive Websites Javscript Library, either check back here every six months or so; or subscribe to my blog.
Version 4.0 Chrome deprecated document.write to the point that I needed to modify some x_press functions. Three functions required passing a target element as a new last parameter, so I created three new functions and left the others. That parameter is where you want the text to show up. x_d_w - shortcut for document.write was replaced by x_ih - shortcut for innerHTML. Does the same thing. x_script was replaced by x_script_ih. x_contact was replaced by x_contact_ih. There are still some document.writes in other functions, but that statement will only be executed if something else went wrong due to your code - can&';t find the element it&';s looking for.



If you want your website to be more expressive - use fancy/curly quotes, emoji, arrows, upside-down question marks, etc. - please use my x_press.js javascript library. If you do use it, attributions are helpful, links are more helpful, posting articles is most helpful, and donations are always helpful. (Helpful to me and to others who could benefit from this library.) x_press.js contains several functions which are explained below. To use any x_press function, place <script src="https://stubbart.com/code/x_press.js"></script> and <link rel="stylesheet" type="text/css" href="https://stubbart.com/code/x_press.css" /> in the <head> of your html. x_press.js is < 50KB which should load fast enough without being minified. The javascript code is explained here.

Note: No longer maintaining x_soc - see Version 2 changes. Use the free internet app Social 9 instead.
No longer maintaining x_d_w (use x_ih instead) or x_script (use x_script_ih instead) or x_contact (use x_contact_ih) instead. The new functions - see Version 4 - need to be passed the target element as a new last parameter. That parameter is where you want the text to show up. That element should be in your html before you refer to it in these functions.
x_soc, x_d_w, x_script, and x_contact all use document.write which Chrome is deprecating to the point that it either already doesn&';t work; or won&';t shortly. So, upgrade your code to use the new functions.
document.write &n-; don&';t use.

Global Variables set in x_press_init

x_press()

To use fancy quotes on your website &l"; &r"; &l'; &r';, you can use &ldquo; &rdquo; &lsquo; and &rsquo; respectively. (left-double-quote, right-double-quote, left-single-quote, right-single-quote.) &xxx; are called HTML entities. However, if you have lots of apostrophes and want them to show as fancy right single quotes, it can be tedious to type lots of &rsquo;s. What if you could just type &'; instead. x_press provides the following x_press entities for fancy quotes &'; (apostrophe), &l'; (left-sigle-quote), &r'; (right-single-quote), &l"; (left-double-quote), &r"; (right-double-quote). (Note: &'; and &r'; result in the same fancy right-single-quote.
HTML provides the following entities (in addition to the fancy quotes (&ldquo;, etc.) just mentioned) which you might find useful. &bigstar;&blacksquare;&cent; ¢ &check;&copy; © &deg; ° &diamond;&frowney; &frowney; &ge; ≥ (greaterthan/equalto) &gg; ≫ (greaterthan/greaterthan) &incare;&iexcl; ¡ &iquest; ¿ &le; ≤ (lessthan/equalto) &ll; ≪ (lessthan/lessthan) &ne; ≠ (notequal) &phone;&reg; ® &smiley; &smiley; &sung; ♪, &trade;&darr;&larr;&lArr;&rarr;&rArr;&uarr;&uArr;&darr;&dArr;&half; ½ &frac12; ½ &...; &frac16;&frac18;&frac23;&frac25;&frac34; ¾ &frac35;&frac38;&frac45;&frac56; ⅚ &famp;rac58; ⅝ &frac78; ⅞. There are many more HTML entities. To use HTML entities, just place them in your HTML or Javascript text, starting with the & and ending with the ;. Don&';t forget the ;. To spell out the HTML entity, replace the & in the entity with &amp;. E.g. &amp;rsquo;. (As per usual.)
Similarly, x_press provides x_press entities which start with & and end with ;. x_press uses shorthand notation. Fancy quotes and dashes, other special punctuation, email, phone, emoji faces, arrows, pointing hands, hearts, and more are provided. The ones I most frequently use are &'; (apostrophe) and &n-; (n-dash).For a complete list of x_press entities, keep reading. Note: x_press entities do not work at all places in javascript text, so test. To spell out the x_press entity, split it up with spans. E.g. <span>&</span><span>';</span>.
x_press also provides shorthand for special stand-alone spans &n-; <indent> which indents one character, <bullet> which writes a bullet followed by an indent, and <indbull> which does an <indent><bullet; slightly faster. These are stand-alone spans in that they don&';t need an end tag. To spell out these spans, replace the < with &lt; (as per usual) and break up the tag with <spans> if necessary.
I use <indent> as follows: I enclose sections of text in <p> tags which I have the css set up to be indented and have a line after &n-; p{text-indent:1em;display:block;margin-top:0em;margin-bottom:1em;}. Then for each paragraph within the <p> block, I end a line with <br> and start the next line with <indent>. This way the paragraphs within each section are single spaced and indented and each section has a line after and is indented. The last line of the section is ended with </p>.
I use <bullet> to simulate <li> with single spacing rather than double spacing. I usually precede <bullet> with <indent>.

To use x_press entities and spans, place <script>x_press_init()</script> in the <head> of your html and <script>x_press()</script> right before <body>. To test, place x_press('test') right before <body> &n-; this will write all the x_press entities at the bottom of your webpage. Alternatively, place x_press('test','here') wherever you want to write all the x_press entities. To override any of these entities or add your own, create arrays x_press_extra_fr and x_press_extra_to (from and to) after calling x_press_init(). x_presss_extra_fr contains your changed and new x_press entities. x_press_extra_to contains html entities, unicode, or other replacements to be written instead of the entity.
You can add your own spans in x_press_spans_extra_fr=[] and x_press_spans_extra_to=[]. If you typically use uppercase html tags, you can replace the lower case provided standalone spans by placing uppercase equivalents in x_press_spans_extra_fr=[]. You can also add your own non-standalone spans by providing the corresponding end tags in x_press_spans_extra_frend=[] and x_press_spans_extra_toend=[]

quotes: use ' or " preceded by l or r for left or right: &'; &l'; &r'; &l"; &r"; &'; &l'; &r'; &l"; &r";
dashes: &m-; &n-; &m-; &n-;
ellipses: &...; &...; upside-down question-mark, exclamation-mark &?v; &!v; &?v; &!v;
contact: envelopes: &env; &env; &env@; or &email; &env@; black phone, white phone, circled phone, mobile phone &b@@; or &phone; &b@@; &w@@; &w@@; &O@@; &O@@; &m@@; &m@@;
faces start with colon: &:)); or &grin; or &lol; or &rofl; &:)); &:'); &:'); &:); or &smile; &:); &heart); &heart); &:((; or &sad; &:((; &:|; &:|; &:*; &:*; &:(; or &frown; &:(; &:zzz; &:zzz; &:'(; &:'(; &:O; &:O; &:; &:;
arrows: left, right, up, down, left-right, up-down &l-; &r-; &u-; &d-; &lr-;&ud-;&l-; &r-; &u-; &d-; &lr-; &ud-; left-down &ld-; &ld-;
double arrows: &2l-; &2r-; &2u-; &2d-; &2lr-;&2ud-;&2l-; &2r-; &2u-; &2d-; &2lr-; &2ud-;
hand arrows: &hl-; &hr-; &hu-; &hd-; &hl-; &hr-; &hu-; &hd-;
thumb arrows: &tu-; or &thumbs_up; &td-; &tu-; &td-;
more hands: &hok; or &ok; or &aok; &h/; &hV; &h^; &^h:; &^h:^h; &hok; &h/; &hV; &h^; &^h:; &^h:^h;
people: &O:); &O:); &O/:); &O/:); &O/:(; &O/:(; &:?; &:?; &:)(:; &:)(:; &:)heart(:; &:)heart(:;
Note: hearts (plural only) is already an html entity. It is just repeated here for inclusiveness. It is interpreted by html, not by x_press.
hearts: &heart; or &ilu; or &love; &heart; &hearts; ♥ &heartheart; &heartheart; &heartheartheart; &heartheartheart; &heartheartheartheart; &heartheartheartheart; &heart/; &heart/; &heart*; &heart*; &heart-; &heart-;
monkeys: &)X; &@X; &:X; &)X; &@X; &:X;
cats: &c:); &c:); &c:'); &c:'); &cheart; &cheart; &c:'(; &c:'(;
search: &searchl; &searchl; &searchr; &searchr;

x_script_ih()

HTML Entities provide for styles of scripting letters: handwriting/script; outline/double-struck; old-english/black-letter; circle/encircled; scrunched; scrunched-stacked. This is intended for short phrases such as titles or subtitles, rather than for entire pages. People who use screen readers will not be able to tell what these characters are, so you may want to enclose them in a <div>, <p>, or <span> which has a title= attribute.To write script letters to your webpage, pass the string and style to output as script to x_script_ih('string','style','element'). Whereas x_press, x_emoji, and x_accent translate any characters within the webpage, x_script_ih translates characters passed to it and outputs them to the element passed (replacing the element text) via innerHTML. The style can be passed as handwriting, script, outline, double-struck, old-english, black-letter, circle, encircled, scrunched, scrunched-stacked. The style can be in upper, lower case, or mixed. Dashes can be written as spaces or omitted.
script, outline, and old-english translate any letter to that style. Other characters remain untranslated. circle translates any letter and the numbers 1 through 9.
scrunched and scrunch-stacked translate 2 and 3 character words. They do not translate contractions and possessives. Do not include beginning and ending single and double quotes, as x_script_ih() may not handle them properly for these x_script_ih styles. If you want to scrunch things other than only 2 and 3 character words, use css letter-spacing style instead. scrunched and scrunched-stacked require using

x_script_ih('This text is script','script','element') results in .
x_script('This text is outlined','outline','element') results in .
x_script('This text is Old English','old-english','element') results in
x_script('This text is encircled 1 time','encircled','element') results in .
x_script('The text is scrunched and small','scrunched','element') results in .
x_script('The text is scrunched-stacked and small','scrunched-stacked','element') results in .

If you only want to script format a string rather than formatting it and writing it out, call x=x_script_fmt('string','style','element') rather than x_script('string','style','element').

x_soc()

This is deprecated. Use Social9 instead. See Version 2 notes at top.


x_date()

x_date() formats and writes a date at the current place in the document. x_date(x_date_in, x_date_fmt_out). x_date_in is the date &n-; can be a date or a string in any date format. x_date_fmt_out is the format you want to write the date in. x_date_fmt_out uses standard date format notation. yyyy for four digit year, yy for two-digit year. mmmm for month name, mmm for , mm for the two-digit month. dddd for the name of the day of week, ddd for the three character day of week abbreviation, dd for the two-digit day of month. hh24 for the 24-hour two-digit hour, hh for the 12-hour two-digit hour. mi or mn for two-digit minutes. ss for two-digit seconds &n-; if ss is zero, the preceding colon or period is suppressed and no seconds are written; to write the seconds even if zero, use sc instead. Use am, pm, or ap where am/pm should be written. Only the first occurrence of any format code is evaluated.
To display the current date, d=new Date();x_date(d,fmt);.
x_date('2001/01/03','dddd mm/dd') writes .
x_date('2001/01/03','ddd mm/dd/yyyy') writes .

If you only want to date format a string rather than formatting it and writing it out, call x=x_date_fmt(x_date_in, x_date_fmt_out) rather than x_date(x_date_in, x_date_fmt_out).

If you don&';t pass a date, x_date defaults it to today. If you don&';t pass a format, x_date defaults it to 'dd-mmm-yyyy'.

x_tip_w

x_tip_w(x_tip_text,x_tip,x_tip_text_disp) writes text with a tip at the current place in the document. x_tip_w(x_tip_text,x_tip,[x_tip_text_display]) x_tip_w required about 20k of code, so I created a separate javascript file for it x_press_tip.js. More info.

classes, x_class

x_rounded_corners, x_rounded
x_transparency
x_reverse, x_reverse_lr (left-right), x_reverse_ud (up-down), x_reverse_lrud
x_reverse_text, x_reverse_text_lr, x_reverse_text_ud, x_reverse_text_lrud

x_class('x_transparency','pct') where pct is a percent between 1 and 99. E.g. x_class('x_transparency','25'). Call x_class after the last occurrence of the class (x_transparency). x_flexbox, x_no_top_margin, x_no_bottom_margin, x_font_sans_serif, x_font_sans_serif_narrow, x_font_serif, x_font_monospace, x_font_cursive, x_font_bold, x_font_italic, x_font_underline.
x_flexbox is a class for an outer div. The inner divs then all line up nicely in rows. The other classes listed are pretty self-explanatory.

x_contact_ih

x_contact_ih('contact_address','contact_msg','contact_type','span_start','span_end','element')
x_contact_ih is most often used for email links. Pass contact_address, changing the @ to ! and adding in x&';s wherever. contact_msg can be left empty if you want to show the email address; or it can contain some message such as click here to email me. contact_type is email or empty. span_start can be used for formatting &n-; or you can add some text or an email emoji. element is the target element where you want to place the contact info.
For phone numbers, contact_address is a phone number. Works best if phone number preceded by + and country code. Specify phone for contact_type. You can specify a phone emoji.
To specify the default emoji for email or phone, use 'emoji' in place of 'span_start'.

Other x_press functions

I wrote these x_press functions to help me write x_press. Since they&';re part of the x_press javascript library, you can use them also.

x_d_w(string) is an abbreviation for document.write(string). Don&';t use it &n-; Chrome has deprecated document.write. It might work for you, but it might not work for your users. Use x_ih(string,element) instead. ih is an abbreviation for innerHTML. x_ih will place your string into the element, replacing all else.
x_pad(string,length) left-pads a string with zeros, producing a string of length (unless string is longer than length, in which case the resulting string is string.
x_getPropertyValue(property,element) returns the propertydocument.body if element is not passed. x_getPropertyValue has to exist in the <body> of the html, so it is placed in a separate javascript file &n-; x_press_in_body.js, as discussed in x_soc(). x_press_in_body.js must be placed before x_getPropertyValue() is called. x_date_fmt(x_date_in, x_date_fmt_out) formats a date, but does not write it.
x=x_element(elementID) will assign the element with elementID to x.
x=x_is_stylesheet_used(x_stylesheet_filename_in) returns true if filename is found in a linked stylesheet.
x_word_to_html(string,convert as x_press entities) will translate Word formatting to HTML formatting. Copy and Paste Word text and convert it to x_press or to html.
Line Breaks (Carriage-Return Line-Feed (CR LF)) are translated to <br>.
Single Quotes are translated as &lsquo; and &rsquo; repectively (&l';; and &'; if convert as x_press entities is true).
Double Quotes are translated as &ldquo; and &rdquo; repectively (&l"; and &r';).
Dashes are translated as &ndash; or &mdash; depending on which it is (x_press entities did not get expressed, so used HTML entities). Hyphens are not translated.
Ellipses, -->, ==>, smile, and frown are also translated from Word versions.
x=x_repeat(string,n,m); will repeat a string round(n/m) times. m is optional, defaults to 1. Alternatively you can pass Math.round(n/m) for n.
x=x_replace_all(string, 'match', 'replace'); will replace all occurrences of 'match' in string with 'replace'. While you can use string.replace(/x/g, 'a') to replace all occurrences of x with a in string in javascript, it gets hard to code the javascript replace function when you have non-printable characters and other characters that need to be enclosed in quotes or escaped.
x_css_display(element_id, x_css_display_property). Pass the elementID that you want to show/hide and the display property. x_css_display_property is none (hide), block, inline, inline-block. block is usually used to show divs, inline to show elements within divs, paragraphs, spans, buttons.

The x_press javascript code explained