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 contact me via Stubbart.com and I will update you when I make changes.
Version 5.1.2 Removed old version of x_contact
Version 5.1.1 Added condensed and expanded to x_emph
Version 5.1 Added x_emph to add emphases to text
Version 5.0 Added x_social_share, x_social_connect. Social9 not working the way I want.
Added x_webpage_title, x_webpage_charset, x_webpage_input_encoding, x_webpage_domain (hostname), and x_webpage_protocol in x_press_init to get document.title, etc.
Added function x_metas to get meta tag value - attribute must be property or name.





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_version
x_webpage - the webpage name (minus the path)
x_webpage_path - the path of the webpage
x_webpage_title - the title of the webpage
x_webpage_charset - the character set
x_webpage_input_encoding, x_webpage_domain (hostname), and x_webpage_protocol
x_os - operating system
x_browser
x_bullet
x_press_extra_fr; x_press_extra_to - extra x_press entitites fr are the entities, to are the values. These arrays are initialized. You have to set them if you want to use them.
x_press_spans_extra_fr, x_press_spans_extra_frend, x_press_spans_extra_to, x_press_spans_extra_toend. extra x_press tags. The end tags are those with /, if they exist.

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;&frac58;&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') after the element where you want the test to appear. This will write all the x_press entities in that element. If no element is specified as the second parameter x_press('test','here'), the test will appear at the bottom of the document. 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;
menu: &menu; &menu; &menu_home; &menu_home; &menu_home_garden; &menu_home_garden; &menu_about; &menu_about; &menu_about2; &menu_about2; &menu_contact; &menu_contact; &menu_contact_inbox; &menu_contact_inbox; &menu_contact_email; &menu_contact_email; &menu_contact_phone; &menu_contact_phone; &menu_chat; &menu_chat; &menu_cart; &menu_cart; &menu_cart_bags; &menu_cart_bags; &menu_search_left; &menu_search_left; &menu_search_right; &menu_search_right;

x_emoji(style)

To use emoji codes on your website, write the emoji code e.g. :\grin: :grin:. Call x_emoji_init() in the <head> of your html and x_emoji() right before <body>. You can pass a style for the emoji codes; e.g. x_emoji('font-size:1.5em;font-weight:bold;').
More Information

x_accent()

To use accented characters on your website such as &e'; and &e`;, write them as entities and call x_accent() before </body>. These entities have the format & followed by the letter to be accented, followed by the accent mark, followed by ;.
More Information

x_script()

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('string','style','element'). Whereas x_press, x_emoji, and x_accent translate any characters within the webpage, x_script 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, scrunched-vowels, vertical. 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() may not handle them properly for these x_script styles. If you want to scrunch things other than only 2 and 3 character words, use css letter-spacing style instead.
vertical should be used inside a block element. Place the styling on that element. text-align:center; for example.

x_script('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 .
x_script('The text is scrunched-vowels and small','scrunched-vowels','element') results in .

x_script('The text is vertical','vertical','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_social_share()

First, I wrote x_soc. There were issues with it &n-; didn&';t quite work the way I wanted it to. And I didn&';t want to try and keep up with changing requirements of various social network providers &n-; Facebook, et al. So I deprecated x_soc and eventually eliminated it. I recommended people use Social9 instead.
Social9 got an upgrade. That upgrade didn&';t work well with the css on my website. In particular I was breaking any long text into multiple lines to make it fit in its container. I should have placed that css in a class and limited it to where I needed it. That css is specific to my website and has nothing to do with x_press. Second, after the upgrade, I couldn&';t just test my page by double-clicking on it on my laptop. It would hang. I contacted Social9. They responded with answers within a couple of days. That was nice, but I don&';t think they understood my hanging dilemma.
So, I wrote x_social_share. There are plenty of social sharing apps available. But I wanted one which was low footprint, didn&';t slow down my website, and didn&';t hang my website. Also many social sharing apps send your website to marketing sites before sending to the social media site.
x_social_share allows you to use images or icon fonts for your social sharing buttons. I provide icons for Facebook, Twitter, Pinterest, LinkedIn, WhatsApp, Email, Print, Reddit, Telegram, Line, VKontakte, and Weibo. I was going to provide Baidu, but FontAwesome does not include an icon for that website.

If you want to use x_social_share, first call x_social_init. This sets x_preferred_social_share_sites as an array of the social site buttons you want to display. This is set to ['fb', 'tw', 'pi', 'lk', 'wh', 'rd', 'em']. After calling x_social_init, you can override anything which is set before calling x_social_share. x_social_share_sites=['fb', 'tw', 'pi', 'lk', 'wh', 'em', 'pr', 'rd', 'te', 'ln', 'vk', 'wb']. x_social_share_titles=['Facebook', 'Twitter', 'Pinterest', 'LinkedIn', 'WhatsApp', 'Email', 'Print', 'Reddit', 'Telegram', 'Line', 'VKontakte', 'Weibo']. You can use any two character code in x_social_sites in x_preferred_social_share_sites. If you want to add another social media site which is not included in x_social_sites, override x_social_sites and related variables and arrays. x_social_share_urls is an array of the social sharing links. Not all social media websites provide such a link. Facebook&';s is noticably slow. x_social_share_urls_url contains the identifier in the link for the url. Facebook sharing link is https://www.facebook.com/sharer.php?u=yourwebsite. So, x_social_share_urls_url contains u for facebook. x_social_share_urls_title contains the title identifier in the link. Facebook doesn&';t have one, nor is that part of the link. Twitter uses text, Pinterest uses description. This is only of concern to you if you want to add other links. Find the social sharing link for that social media site and see how it&';s constructed.
x_social_share_buttons contains icons for these social media sites. These are official icons that are provided on my website. You can override x_social_share_buttons if you&';re providing your own. My icons are 64px (about 4em). I display them at minimum size - 1.25em. If you&';re displaying at more than 8em, you&';ll want to provide your own to speed up your website. I use the following class, which you can override: .x_class_social_button{display:inline;float:left;height:1.25em;padding-right:.2em}. x_social_share_font_icons contain the font icon information for Font Awesome (after version 4). If you&';re using version 4, override this array. If version 4, the font-awesome code for facebook sharing icon was fa fa-facebook-square, in version 5, it became fab fa-facebook-square. I haven&';t tested the icon fonts, but the code should work. And if you&';re using a different icon font than Font Awesome, you can override this array and it should still work. If it doesn&';t work, contact me. I&';ll see what I can do.
x_social_share_img_i is set to img. If you&';re using icon fonts, set it to the recommended tag - i, or to span.

x_social_share(x_el). After you&';ve called x_social_init and possibly overridden arrays and variables, call x_social_share, passing the element where you want to display these buttons. I tried to make adding other social sharing buttons easy. However, Email, Print, Twitter, and Line required special handling. Twitter has the extra site parm. You pass your twitter handle to this. Line has no equivalent to facebook&';s u= parameter for the url. The url is the first parm. Best practice is to only us a few buttons. So, you probably don&';t need to add any. Most other social sharing links for social media buttons are similar in configuration.

x_social_connect

x_social_connect(string_connector, end_string_connector, x_el). Similar to x_social_share. Call x_social_init first. x_preferred_social_connect_sties is set to ['fb', 'tw', 'lk', 'wh', 'ig']. x_social_connect_sites=['fb', 'tw', 'lk', 'wh', 'ig', 'te', 'ln', 'vk', 'wb', 'yt', 'sc', 'md']; x_social_connect_titles=['Facebook', 'Twitter', 'Pinterest', 'LinkedIn', 'WhatsApp', 'Instagram', 'Telegram', 'Line', 'VKontakte', 'Weibo', 'YouTube', 'snapchat', 'medium']. Set x_preferred_social_connect_urls to the urls of your social media pages. string_connector is what you want to connect the social media icons with &n-; typically comma followed by space. end_string connector usually adds the word and to string_connector = ', and '.

x_metas

x_metas is used by x_social_share. You can use it on its own, if you want. x_metas returns information in meta tags which use the property or name attribute. The name or property is turned into a variable. title value (content) is placed in variable x_meta_title. og:title is placed in variable x_meta_og_titlex_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_el). 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_el);.
x_date('2001/01/03','dddd mm/yy',element) writes .
x_date('2001/01/03','ddd mm/dd/yyyy','element') 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_ih

x_tip_ih(x_tip_text,x_tip,x_tip_text_disp, x_el) writes text with a tip at x_el element. x_tip_ih(x_tip_text,x_tip,[x_tip_text_display],x_el) x_tip_w required about 20k of code, so I created a separate javascript file for it x_press_tip.js. More info.
x_hint(x_hint_text,x_hint,x_el). x_hint is a simple version of x_tip_ih, so that you don&';t have to include x_press_tip_w.js, if you&';re only displaying simple hints (tips).

classes, x_class_modify

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_modify(class,attribute,value) attribute and value can be single values or arrays. attribute can be transparency, rather than opacity. If transparency, value is a percent between 1% and 99%. If color, one value sets color attribute. An array of two values sets background-color, then color. Call x_class_modify after the last occurrence of the class.
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

x_contact('contact_address','contact_msg','contact_type','span_start','span_end','element')
x_contact 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_w(string,element). x_w 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_color(elementID,foreback) will return the foreground or background color of the element. Foreback can be 'text','foreground', 'fore', 'fg' for foreground. Foreback can be 'background','back', 'bg' for background. Any other value will return the background color.
x=x_color_shift(rgb,redshift,greenshift,blueshift) will shift the color. Use positive value for shift for lighter, negative for darker. Specifying 16 or -16 will go slightly lighter or darker.
x=x_fontsize(elementID,to_em_px) will return the fontsize of the element in em or px.
x=x_is_stylesheet_used(x_stylesheet_filename_in) returns true if filename is found in a linked stylesheet.
x=x_is_text_case(string,case) returns the string in the specified case. If case=upper, Uppercase. lower, Lowercase. sentence, first character is uppercased. title, all words except those typically not capitalized -> first letter is uppercased. titleall, all words -> first letter is uppercased. For title, first word is also uppercased.
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.
x=x_text_case(string,toCase); will change a string to various text cases: upper, lower, sentence, title, titleall. sentence capitalizes first letter of string. title capitalizes first letter of every word except some small 1, 2, and 3 letter words. titleall capitalizes every word. words are strings of characters followed by a space (and the last set of characters following the last space.
x_emph(x_emphasis_attributes,x_el); will change element x_el text, emphasizing it. Pass an array of emphasis attributes: bo:bold, it:italic, un:underline, ca:capitalize (every word), up:uppercase, lo:lowercase, sm:smallcaps, co:condensed, ex:expanded. The abbreviation or the entire name can be used in the array.

The x_press javascript code explained