Really Useful Javascript


by Dale Stubbart

Expressive Websites

Version 3.9 Added x_press_print.css stylesheet to complement x_press.css stylesheet.
Version 3.8 Added styles 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.
Version 3.7.1 Added searchl, searchr for left and right search (magnifying glass).
Version 3.7 Added emoji and texting abbreviations as entities: email, phone, grin, lol, rofl, smiley, sad, frowney, thumbs_up, ok, aok, ilu, love. Note: smile and frown are HTML entities resulting in simple smile/frown without face.
Version 3.6 Added x_contact function for email and telephone links.
Version 3.5.1 Fixed x_tip_w to correctly display flags.
Version 3.5 Added defaults to x_date, x_date_fmt. If date is not supplied, defaults to today. If format is not supplied, defaults to 'dd-mmm-yyyy'.
Version 3.4 Added several classes. Added x_class function.
Version 3.3 Replaced several expressive entities. All arrows now end in -. Less than, greater than were not working.
Version 3.2.1 Added x_pathArray which contains all the elements of the path.
Version 3.2 Moved x_webpage to get set within x_press_init. Added x_webpage_path to return the relative path. Added x_os to return operating system. Added x_browser to return the Browser name.
Version 3.1 Added variable x_webpage to return the current webpage with extension, minus the path. For this webpage, x_webpage is index.html. Also added html tags of <level1> thru <level10>. These new tags will devolve back to <div>. End level tags are required, as are end div tags. The level tags will help you keep track of how deeply nested your div is.
Version 3.0 Moved from YellowBearJourneys.com to Stubbart.com. The previous version is still at YellowBearJourneys.com, so you don&';t need to change your website unless you want to use the newer features.


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.

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()

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'). 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 webpage via document.write. 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() 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. scrunched and scrunched-stacked require using

x_script('This text is script','script') results in .
x_script('This text is outlined','outline') results in .
x_script('This text is Old English','old-english') results in
x_script('This text is encircled 1 time','encircled') results in .
x_script('The text is scrunched and small','scrunched') results in .
x_script('The text is scrunched-stacked and small','scrunched-stacked') 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') rather than x_script('string','style').

x_soc()

If you want to add buttons on your website, so that people can easily post your page on their favorite social media site like facebook, you can go to the social media site, find the code, and add it to your website. Then you can watch your website load more slowly. That code you added to your website does a lot of tracking and other things you may not need. So, I created x_soc() to create simple links to social media sites.
To use x_soc, first, make sure you have the opengraph (og) and twitter meta tags in the <head> of your webpage.
<meta property="og:title" content="Useful Javascript" /> (Limit to 55 chars.)
<meta property="og:url" content="https://stubbart.com/code/index.html" />
<meta property="og:image" content="https://stubbart.com/menu/fb_hats.png" /> (200px by 200px. Should not be the same on every page of your website.)
<meta property="og:description" content="Expressive Websites" /> (Limit to 115 chars.)
<meta property="og:site_name" content="Yellow Bear Journeys" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ybecojourney" />
<meta name="twitter:title" content="Useful Javascript" /> (Uses og:title if not specified.)
<meta name="twitter:description" content="Expressive Websites" /> (Uses og:description if not specified.)
<meta name="twitter:image" content="https://stubbart.com/menu/tw_hats.png" /> (120px by 120px. Should not be the same on every page of your website.)

Next call x_soc_init() in the <head> of your website. Then place <script src="https://stubbart.com/code/x_press_in_body.js"></script><script>x_soc_init2();x_soc()</script> where you want the social media buttons to show. Actually, if there is poor network activity, you may be blocked from accessing x_press_in_body.js from a different website (like stubbart.com/code). You should copy that script into your own website&';s directory and reference it there.

x_soc_init() sets the following:
x_soc_base_color=''; If you don&';t override this, it will use the base text color from the color of the <body> later in x_soc_init2(). You can override it with the value of the current div or other element by placing this code between x_press_in_body.js and x_soc_init2()
x = document.getElementById("mydiv");
x_soc_label='&Sopf;&hopf;&aopf;&ropf;&eopf;&nbsp;&oopf;&nopf;&nbsp;'; Label for the social media buttons. Share on ⇨ in outline font. &xopf; makes x outlined. &nbsp; is a non-line-breaking space.
x_soc_button_border_width='3px'; x_soc_button... is for social icon buttons. Border width must be at least 3px for ridge and groove borders.
x_soc_button_border_style='ridge';
x_soc_button_border_color=''; For ridge and groove borders, this must be an Official Color Name, otherwise it will display gray.
x_soc_button_border_radius='0px'; Set to greater than 0px if you want the buttons to have curved borders.
x_soc_button_size='xx-large'; Set to x-large if you want slightly smaller buttons.
x_soc_button_font_size='1.5em';
x_soc_button_min_width='48px';
x_soc_button_min_height='48px';
x_soc_button_logo_size='36px';
x_soc_button_emoji_size='xx-large';
x_soc_button_margin_padding='margin-right:2px;padding-top:14px;';
x_soc_button_background_image='';
x_soc_button_background_color='';
x_soc_button_style_extra=''; Any extra styles for the button
x_soc_border_radius_first_last='0px'; This can be set if you want the leftmost and rightmost top and bottom borders to be round. However, unless you only have a few buttons, when viewed on a phone screen, the buttons will be split over multiple lines and having the beginning and ending corners curved might look weird.
x_soc_twhashtags=''; Twitter hashtags &n-; comma delimited list, no #, no spaces
x_soc_embodylabel='More info at'; The start text of the body of the email. x_soc_embodylabel is followed in the email body text by the opengraph url and description.
x_soc_em_padding_top='16px';
x_soc_pralert=''; an optional alert/message to display before printing the webpage. The alert could be a message to not forget to sign up for the newsletter, a copyright notice, or whatever.
x_soc_piimg=''; Pinterest Image
x_soc_piisvideo='false'; Pinterest IsVideo 'true'/'false' (make sure to enclose in ')

After calling x_soc_init(), you can override any of these settings.

Where you want to write your social icon buttons, call x_soc_init2() which sets the following:
if(x_soc_base_color==''){if(typeof(x_getPropertyValue) == "function"){x_soc_base_color=x_getPropertyValue('color');}} set to color of document if not already set.
x_soc_container_style='font-weight:bold;color:'+x_soc_base_color; style for the container for the social icon buttons.
x_soc_site=['fb','tw','li','tu','em','pr']; social media sites to provide links for &n-; see below for explanation.
x_soc_title=['facebook','twitter','linkedin','tumblr','email','print']; corresponding title to highlight when hovering over button.
x_soc_link_text=['&fopf;<span style="font-size:smaller"><sub>&#x1F4D6;</sub></span>','&topf;<span style="font-size:smaller"><sub>&#x1F426;</sub></span>','<span style="font-size:smaller">&#x1F517;</span>&iopf;&nopf;','&gopf;&#x2719;','&topf;<span style="font-size:smaller"><sub>&#x1f37b;</sub></span>','&eopf;<span style="font-size:smaller"><sub>&#x1F4E9;</sub></span>','&popf;<span style="font-size:smaller"><sub>&#x1F4DC;</sub></span>']; link text using outline letters &xopf; and unicode characters &#x&...;. Some style information for individual characters of the link text is also included.
x_soc_style=['color:#3B5998','color:#55ACEE;','color:#057BAD;font-family:Arial Black,arial,helvetica,verdana,tahoma,sans-serif;','color:#4285F4;','color:#475467;padding-top:16px;min-height:46px;',x_soc_base_color,x_soc_base_color]; button styles, specific to each button.
x_soc_a_style='color:inherit;text-decoration:none;'; style for the a href (link) of each button.
x_soc_button_style='display:inline;float:left;border-width:'+x_soc_button_border_width+';border-style:'+x_soc_button_border_style+';border-color:'+x_soc_button_border_color+';border-radius:'+x_soc_button_border_radius+';text-align:center;font-size:'+x_soc_button_font_size+';min-width:'+x_soc_button_min_width+';min-height:'+x_soc_button_min_height+';'+x_soc_button_margin_padding; builds the button style from the other settings, plus adds background image or color if set to the button style. Then adds any extra style you set in x_soc_button_style_extra.

After running x_soc_init2(), override any of those settings. x_soc_init2() provides Facebook, Twitter, Linkedin, Google+, Tumblr, Email, and Print buttons. Facebook, Twitter, and Linkedin are the most popular social media sites. Then Pinterest, Google+, Tumblr, and Instagram. Then VK, Flickr, and Vine. Pinterest is for sharing pictures, unless you have a lot of pictures on your website, it probably doesn&';t apply. There is no simple link for Instagram, VK, Flickr, or Vine. To add other social media buttons, add the code for that social media site (below) to x_soc_site. Add, the title (which will highlight when hovering over the link) to x_soc_title. Add the link text to x_soc_link_text. And add the style to write the link text in x_soc_style. If you add other social media sites, you&';ll probably add them in the middle of the arrays. The simplest way to do that is to just set each entire array.
Other social media sites you can use with x_soc(): Buffer (code=bu) Digg (code=dg); Delicious (code=dl); Evernote (code=en); Friendfeed (code=ff); Googlebookmarks (code=gb); Newsvine (code=nv); Ping.fm (code=pf); Posterous (code=ps); Reddit (code=rd); Slashdot (code=sd); Stumbleupon (code=su); Technorati (code=tn).

Then call x_soc();. x_soc() requires you putting more than one line of code in your HTML, but this way, it allows the greatest flexibility.

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

x_contact('contact_address','contact_msg','contact_type','span_start','span_end')
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.
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).
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