Expressive Websites
Define your own shortcodes or entities to make your website more expressive. Easily place curly / fancy quotes and other non-typable characters on your website. The main function is x_press(). There are also many other helpful functions so that you can easily style your website the way you want. These functions are written in javascript, but you don&';t really need to know any (or much) javascript to use them on your website.
You can pass the id of the element that you want to update to several of these functions. If you don&';t pass it, x_press(), x_accent(), and x_emoji() will update the entire body of your webpage. If you&';re using javascript from some other source (payments / shopping cart, social media buttons, or others), they may not work with x_press (or x_accent or x_emoji). The easy solution is to separate the code so that it&';s outside of your main text. Then assign an id to a div which encompasses your text, but not that code. Then pass that id to x_press (or x_accent or x_emoji). You can also call x_press (...) multiple times. Calling it too many times might slow down your webpage. So I suggest calling it to change as much of your webpage at once, as you can.
Use graphics, forms, animation, colors, emojis, and special characters like curly quotes on your Website easily.
Version 7.5.2 Added x_object_to_string function to display object
Version 7.5.1 Added x_floor_precision to floor to a certain precision
Version 7.5.0 Added x_press tags for google fonts:
Version 7.4.0 Added x_press tags for websafe fonts: <fontname:garamond>, <fontname:times>, <fontname:georgia>, <fontname:arial>, <fontname:tahoma>, <fontname:trebuchet>, <fontname:verdana>, <fontname:courier>, <fontname:trebuchet>
Version 7.3.1 Added x_press tags for simple styles:<bold>, <italic>, <underline>, <nbspace> (non-breaking space), <nbdash> <nbhyphen> (non-breaking hyphen)
Version 7.3 Added x_press tags for symbols: <^> (straight single quote), <-^> (left single quote), <^-> (right single quote), <^^> (straight double quote), <-^^> (left double qoute), <^^-> (right double quote), <-> (n-dash), <longdash> (n-dash), <backslash>
Version 7.2.10 Changed Twitter hover text (title) to X;added x_social_connect_titles_lowercase, x_social_share_titles_lowercase array for lowercase titles for case independent matching
Version 7.2.7 Handled missing twitter:site metatag
Version 7.2.6 Fixed x_webpage for default webpage within folder (index.html normally)
Version 7.2.4 Changed twitter logo from bird to X.
Version 7.2.3 Fixed x_webpage and x_webpage_path variables. Added x_webpage_hash, x_webpage_array.
Version 7.2.2 x_social_init, x_social_connect: modified so website editor can specify own buttons, font-icons for social media not in list. Also can have separate follow list.
Minified x_color_random,x_date_fmt,x_word_to_html,x_replace_all,x_class,x_who_won
Version 7.2.1 Renamed x_merge_styles to x_styles_merge
Version 7.2 Minified x_press.js by changing document.getElementById to x_element where appropriate
Version 7.1.2 Added dc:creator to x_blog_to_rss; fixed x_color_contrast_per_background
Version 7.1.1 Added function x_array_to_table to allow copying the non-displayed rows to the clipboard
Version 7.1 Added function x_array_table_goto_link, x_webpage_parm_value
Version 7.0.1 Added function x_str_lengths
Version 7 Added functions x_url_online, x_blog_to_rss, x_copy_to_clipboard. Added UTC format to x_date_fmt. Added functions x_mime_type_audio, x_mime_type_image, x_mime_type_video.
Version 6.7 Added function x_filter_table
Version 6.6 Added function x_array_to_table and x_merge_styles.
Version 6.4.2 Enhanced x_social_share. Added x_social_share_direction. Defaults to h (horizontal), change to v for vertical. Added parameter button_class to x_social_share.
Version 6.4.1 added x_array_unique to limit array to unique values.
Version 6.4.0 added x_copy_contents to copy contents of one element to another and rename all ids that are copied so that they're unique.
Version 6.3.4 improved x_to_unicode to handle any character, not just emoji
Version 6.3.3 added menu_dots entity
Version 6.3.2 added x_to_unicode(str)
Version 6.3.1 added uppercamel and snake case to x_text_case()
Version 6.3.0 added x_code()
Version 6.2.1 added camel and camelall case to x_text_case
Version 6.2.0 added x_array_in_out(array,value,in_out,idx) to put,get,switch array values
Version 6.1.1 added x_error to x_substr for try/catch method, rather than using alert to display errors
Version 6.1.0 added x_substr - generic substring routine; just in case substr is ever no longer supported
Version 6.0.3 reduced size by combining var statements.
Version 6.0.2 reduced size by removing unnecessary space and ;. Noting just in case that messed something up.
Version 6.0.1 added <apost> tag to x_press
Version 6.0.0 added x_under_construction() Version 5.9.2 allowed default_webpage to be a parm of x_press_init. Otherwise, the default webpage is index.html when no webpage is returned from window.location.href. Added x_webpage_default. Version 5.9.1 added x_webpage_parts()
Version 5.8.1 added global variables x_webpage_url, x_webpage_url_encoded, and x_webpage_url_encoded_fully
Version 5.8 added x_storage()
Version 5.7 added x_cookie_set() and x_cookie_get()
Version 5.6.2 added global variable x_webpage_online
Version 5.6.1 added global variables x_webpage_previous_page, x_webpage_parms, and x_webpage_parms_array to x_press_init()
Version 5.6 updated x_press, x_emoji, x_accent so that ...test parm can contain the id to be updated, rather than the test_here parm.
Version 5.5.5 fixed issues with x_color_random_array_init, changed the parms to integers
Version 5.5.4 fixed issues with x_who_won
Version 5.5.3 fixed issues with x_array_randomize
Version 5.5.2 fixed issues with x_array_repeat
Version 5.5.1 x_color_primary_15_array is now x_color_primary_18_array, since there were 18 colors in that array
Version 5.5 Fixed issues with x_array_find_in_range
Version 5.4.9 Fixed issues with x_array_math
Version 5.4.8 Added auxiliary function x_array_find_in_range
Version 5.4.7 Added auxiliary function x_who_won
Version 5.4.6 Added auxiliary function x_array_randomize
Version 5.4.5 Added auxiliary functions x_array_math, x_array_find, and x_array_repeat
Version 5.4.4 Added auxiliary function x_random_between. Changed x_color_random to call x_random_between.
Version 5.4.3 Added # to color returned from x_color_random
Version 5.4.2 Added global vars x_color_black, x_color_white. You can change x_color_black and x_color_white to whatever you consider to be black and white - which is probably your text and background colors.
Version 5.4.1 Corrected x_color_primary_array and added black at the beginning and gray and white at the end. Added x_color_primary_n_array, where n=5,8,15. These try to sort n primary colors as they would be sorted in a crayon box.
Version 5.4.0 Added x_color_random_array and x_color_random_array_init to return a random hex color array.
Version 5.3.0 Added x_color_random to return a random hex color.
Version 5.2.1 Added x_color_primary_array of primary, secondary, and tertiary colors. Also added corresponding x_color_primary_names_array. Also added x_color_official_names and x_color_official_values_hex arrays.
Version 5.2 Added x_alert. x_alert_limit and x_alert_i set in x_press_init. x_alert() will no longer alert after hitting x_alert_limit.
Version 5.1.3 Added sleeping emoji entity -
&:zzzz;, &2heartbeat; - 2 beating hearts, &2heart; - 2 hearts, &heart3; - triple heart.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.
Version 4.9.3 Removed x_soc. Use Social9 instead.
Version 4.9.2 Added x_bullet to x_press_init. After calling x_press_init, you can override the default value of x_bullet. x_bullet is used in <bullet> and in <indbull>.
Version 4.9.1 Added x_w which calls x_ih (wanting non _ih names). x_script overlay for x_script_ih. x_date overlay for x_date_ih. x_contact overlay for x_contact_ih. x_tip overlay for x_tip_ih.
Version 4.9 Added x_hint - simple version of x_tip_ih. In x_press.js, rather than in x_press_tip_w.js
Version 4.8.5 Removed x_script - use x_script_ih instead.
Version 4.8.4 Removed x_date - use x_date_ih instead. Removed x_tip_w - use x_tip_ih instead.
Version 4.8.3 Removed x_d_w - use x_ih instead
Version 4.8.2 Allowed color to set either text color or both background and text (foreground) color.
Version 4.8.1 Corrected Transparency calculation in x_class
Version 4.8 Deprecated x_class. Created x_class_modify - modifies attribute values of class.
Version 4.7 Replaced MS Flag image with image of new flag from Mississippi Department of Archives and History
Version 4.6.1 removed div from within x_script vertical
Version 4.6 Added x_script vertical
Version 4.5 Added x_script scrunchedvowels
Version 4.4 Added menu entities
Version 4.3 Added x_text_case to change case of text
Version 4.2.4 Added x_color_convert function to convert color
Version 4.2.3 Added x_color_shift function to shift color in form rgb(r,g,b). x_color_shift(rgb,redshift,greenshift,blueshift). Shifts can be positive for lighter, negative for darker.
Version 4.2.2 Added x_color function to return text or background color of element. e.g. x_color(x_el,'text'). Second parameter can be text, fg, foreground, background, or bg.
Version 4.2.1 Added x_fontsize function to return fontsize of element in pixels or ems. For converting px to em or vice-versa. e.g. x_fontsize(element_id,'em') or x_fontsize(element_id,'px').
Version 4.2 Replaced test_here parameter in functions which had it with element id where the test will be displayed. It was previously just 'here', but that required
document.write which is degraded and may not work in Chrome.Also, modified x_press and other functions which use test_here parameter slightly. Now you can pass any element in test_here, without specifying 'test'. This allows you to x_press elements which are initially hidden on the screen, but which will show up later.
Also modified x_press so that you can pass a string and return the modified string. Specify 'javascript'. Pass the string as the second parameter. Replace & with % in the string before you pass it. This is because the function is written in javascript. Also watch for quotes and double quotes. Either quotes must be outside of double quotes or double quotes must be outside of quotes. And I would suggest not passing websites as part of the string. I did not modify other functions which use test_here to be able to pass a string.
¡Note: If you call x_press too many times, for long strings, it will slow down your webpage!
Version 4.1 Replaced x_tip_w with x_tip_ih. 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. Hopefully Chrome isn&';t just scanning for document.write.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.
Note: No longer maintaining x_soc. Am using Social9 instead, at least for now. Very light weight buttons. Works on websites (which they call Code Your Own. 7 horizontal styles; 4 vertical. 34 various social networks, though you can only display buttons from the 14 most popular social networks. The other buttons will show up, if the user clicks the more button and selects More .... That might be a little clunky, but do you really care about those networks? It&';s more than x_soc has. The counter counts even if the user changes their mind and doesn&';t actually post to a social network, but again, do you really care if your count increases incorrectly on occasion? Social9 also works on Wordpress and other platforms. Also, I tried other social share buttons, but they didn&';t show up on my website, at least not immediately.
Social9 lets you choose and configure your buttons on their website. Then they give you two pieces of code. One goes at the bottom of your webpage. The other goes where you want the buttons to go. Change this piece of code to
<div id="smb"></div><script>if (window.location.protocol == 'file:'){smb.innerHTML='<p>***Social Media Buttons***</p>'}
else{smb.innerHTML='<div class="oss-widget-interface" style="padding-left:2em"></div><br>'}</script>
The style=... is optional. If you just add their code <div class="oss-widget-interface"></div> and test your page from your laptop/Windows, your page will just spin. You have to upload your webpage to see the social media buttons.Version 2.6 - Added x_soc_button_size. Set to x-large for slightly smaller social network buttons. Initially set to xx-large.
Note: Instructions incorrectly referenced x_soc_init_2 rather than x_soc_init2 - this has been fixed
Version 2.5.4 - x_tip_w: Added x_flag_emoji to always display the country&';s flag emoji regardless of platform.
Version 2.5.3 - x_tip_w: For Windows Platform, display the image for x_flag
Version 2.5.2 - x_tip_w: Provided country (and region) flags at ../code/noto_flags. Added state flags for US, CA, MX, GB at ../code/noto_flags/states.
Version 2.5.1 - x_tip_w: Added a few missing countries to x_tip_w. Added Mexican states and UK provinces and territories as states. Added AC: Antartica; EU: European Union; UN: United Nations. Added AA, AE, AP for Armed Forces USPS designations. Return N/A for pop, area, etc when not applicable &n-; such as UN, AA, etc.
Version 2.5 - Added x_tip_w.
Version 2.4.1 - Added divisor to parms you can pass to x_repeat.
Version 2.4 - Added x_css_display to show/hide elements.
Version 2.3 - Added x_repeat to repeat a string n times.
Version 2.2 - Added x_word_to_html form where you can convert Word (and possibly Wordpress) to HTML. Try it!
Version 2.1 - Added x_replace_all to replace all occurrences of non-printable and other characters.
Version 2.0.1 - Added
:(. Also added smile, frown, rarr, rArr, and ellipses to x_word_to_html. Also discontinued updating x_press.min.js. You can minify x_press.js on your own or just use x_press.js. It&';s still really tiny.Version 2.0 - Added x_word_to_html.
Version 1.6 - Emoji ate my Unicode. Various browsers now use various emoji graphics to overwrite unicode characters. Due to that and to Social Media sites being particular about how their logos are displayed, I updated x_soc to take advantage of that. Dropped Google+ as a default social media site as it is becoming less and less of one. Changed the Printer Emoji to one that works better. Removed the leading 𝕖 and 𝕡 labels for email and printer since labels were removed for the other social media sites due to possible conflicts with their logos.
Version 1.5 - Used shorter local variable names to load faster. Also provided minified version to load even faster.
Version 1.4 - Added scrunched and scrunchedstacked as styles for x_script()
Version 1.3.2 - Allowed for non-standalone spans in x_press()
Version 1.3.1 - Added <indbull> as a standalong span to x_press()
Version 1.3 - Incorporated x_press.css using class= rather than style= where practical
Version 1.2 - Added x_press.css, x_is_style_sheet_used(), global var x_press_version.
Version 1.1.1 - Added x_script_fmt().
Version 1.1 - Added x_element(). Made the following changes:
Version 1.0 - Added x_press(), x_emoji(), x_accent(), x_script(), x_soc(), x_date(), x_d_w(), x_pad(), x_getPropertyValue().
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. x_press.js does that and provides much more functionality. If you do use x_press.js, etc., attributions are helpful, links are more helpful, posting articles is most helpful, and donations (link at top of page) are always helpful. (Helpful to me and to others who could benefit from this library. Donations offset my webhosting and usage costs which go up when more people use my code.)x_press.js contains several functions which are explained below. You have two options for using x_press.js. You can download files to your desktop and upload them to your website, or you can link directly to my code.<script src="yourpath/x_press.js"></script> and <link rel="stylesheet" type="text/css" href="yourpath/x_press.css" /> in the is where you upload these to on your website.<head> of your html. yourpath<indent> which indents 1em.https://stubbart.com/computer_consulting/code/ in place of yourpath/ above.
Files to Download:
x_press.js is < 100KB which will load fast enough without being minified. Minifying won&';t reduce the total size much. And I&';d rather keep the code readable. The javascript code is explained here.
Global Variables set in x_press_init
x_press_version
x_press()
To use fancy quotes on your website &l"; &r"; &l'; &r';, you can use “ ” ‘ and ’ 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 ’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.
“, etc.) just mentioned) which you might find useful. ★ ★ ▪ ▪ ¢ ¢ ✓ ✓ © © ° ° ⋄ ⋄ &frowney; &frowney; ≥ ≥ (greaterthan/equalto) ≫ ≫ (greaterthan/greaterthan) ℅ ℅ ¡ ¡ ¿ ¿ ≤ ≤ (lessthan/equalto) ≪ ≪ (lessthan/lessthan) ≠ ≠ (notequal) ☎ ☎ ® ® &smiley; &smiley; ♪ ♪, ™ ™ ↓ ⇓ ← ← ⇐ ⇐ → → ⇒ ⇒ ↑ ↑ ⇑ ⇑ ↓ ↓ ⇓ ⇓ ½ ½ ½ ½ &...; ⅙ ⅙ ⅛ ⅛ ⅔ ⅔ ⅖ ⅖ ¾ ¾ ⅗ ⅗ ⅜ ⅜ ⅘ ⅘ ⅚ ⅚ ⅝ ⅝ ⅞ ⅞. 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 &. E.g. &rsquo;. (As per usual.)
& 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>.
<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 < (as per usual) and break up the tag with <spans> if necessary.
<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>.
<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.
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=[]. You might want to add tags for company-specific icons or motto or commonly used short statement.
quotes: use ' or " preceded by l or r for left or right: &'; &l'; &r'; &l"; &r"; &'; &l'; &r'; &l"; &r";
&m-; &n-; &m-; &n-;
&...; &...; upside-down question-mark, exclamation-mark &?v; &!v; &?v; &!v;
&env; &env; &env@; or &email; &env@; black phone, white phone, circled phone, mobile phone &b@@; or ☎ &b@@; &w@@; &w@@; &O@@; &O@@; &m@@; &m@@;
&:)); or &grin; or &lol; or &rofl; &:)); &:'); &:'); &:); or ⌣ &:); &heart); &heart); &:((; or &sad; &:((; &:|; &:|; &:*; &:*; &:(; or ⌢ &:(; &:zzz; &:zzz; &:'(; &:'(; &:O; &:O; &:; &:;
&l-; &r-; &u-; &d-; &lr-;&ud-;&l-; &r-; &u-; &d-; &lr-; &ud-; left-down &ld-; &ld-;
&2l-; &2r-; &2u-; &2d-; &2lr-;&2ud-;&2l-; &2r-; &2u-; &2d-; &2lr-; &2ud-;
&hl-; &hr-; &hu-; &hd-; &hl-; &hr-; &hu-; &hd-;
&tu-; or &thumbs_up; &td-; &tu-; &td-;
&hok; or &ok; or &aok; &h/; &hV; &h^; &^h:; &^h:^h; &hok; &h/; &hV; &h^; &^h:; &^h:^h;
&O:); &O:); &O/:); &O/:); &O/:(; &O/:(; &:?; &:?; &:)(:; &:)(:; &:)heart(:; &:)heart(:;
&heart; or &ilu; or &love; &heart; ♥ ♥ &heartheart; &heartheart; &heartheartheart; &heartheartheart; &heartheartheartheart; &heartheartheartheart; &heart/; &heart/; &heart*; &heart*; &heart-; &heart-;
&)X; &@X; &:X; &)X; &@X; &:X;
&c:); &c:); &c:'); &c:'); &cheart; &cheart; &c:'(; &c:'(;
&searchl; &searchl; &searchr; &searchr;
&menu; &menu; &menu_dots; &menu_dots; &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;').
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 ;.
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.
letter-spacing style instead.
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.
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_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(element_id,button_class). 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,connect_follow). Similar to x_social_share. Call x_social_init first. x_date() formats and writes a date at the current place in the document. If you only want to date format a string rather than formatting it and writing it out, call 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'. 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_preferred_social_connect_sites 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 the profiles 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 '.
The following allows you to add or override social media sites:
+ followed by a letter. That ensures that it&';s not in the list.
x_preferred_social_connect_urls. The url of your profile on this social media site.
x_preferred_social_connect_titles. Use '' if this social media site is in x_social_connect_sites. Otherwise, enter the title.
x_preferred_social_connect_buttons. Use '' if this social media site is in x_social_connect_sites. Otherwise, enter the button image file.
x_preferred_social_connect_font_icons Use '' if this social media site is in x_social_connect_sites. Otherwise, enter the font icon name.
connect_follow as 'follow'.
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(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.
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 .x=x_date_fmt(x_date_in, x_date_fmt_out) rather than x_date(x_date_in, x_date_fmt_out).x_tip
x_tip(x_tip_text,x_tip,x_tip_text_disp, x_el) writes text with a tip at x_el element. x_tip(x_tip_text,x_tip,[x_tip_text_display],x_el) x_tip required about 40k 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, so that you don&';t have to include x_press_tip.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_lrudx_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.
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.
'emoji' in place of 'span_start'.Other x_press functions
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=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_color_primary_array contains primary, secondary, and tertiary colors.x_color_primary_names_array contains the names. x_color_primary_n_array and ... names array contain primary colors in sorted order where number of colors is n and n=5,8,18. Brown is actually a red-violet shade, so not included.
x_color_black, x_color_white - black and white, but you can change them to whatever you use for black and white. I was going to set x_color_text and x_color_background to document.body.style.text and document.body.style.backgroundColor, but these would be set in x_press_init. And x_press_init is usually called in <head>. And document.body.style.... is undefined in head. You would need to set your own variables for these in a script after <body>. You might also want to set a variable for document.body.style.borderColor. You can of course you document.body.style.... The only reason for corresponding variables, would be if you can&';t recall document.body.style....
x=x_color_convert(fromcolor,tocolor_type) will convert color from one type to another. From type is name, hex, or rgb and is derived from fromcolor. tocolor_type needs to be specified if rgb, otherwise it defaults to hex. tocolor is the returned value.
x=x_color_random returns a random color.
x=x_color_random_array_init(allowgray,allowblack,allowwhite,tooclose) loads an array of up to 1000 random colors. allowgray, allowblack, allowwhite, and tooclose all default to 16. Set them higher to exclude more colors. But beware that setting them much high quickly reduces the number of colors in the array. Values of 48,64,16,24 work well, but only return about 200 colors in the array. To allow gray, black, white, set those values to 0. You can also set tooclose to 0, but you&';ll think you&';re getting duplicate colors even with that value set to 16. Increasing tooclose to 32 will only return about 100 colors in the array. tooclose is the parameter which really controls how many colors are returned.
x=x_color_contrast(color) returns a contrasting color. Typically, you have a background color and you want to contrast the (foreground / text) color.
x=x_color_contrast_per_background(x_el,settextcolor=false,setbordercolor=false) returns a contrasting color based on an element&';s background. Optionally sets text and/or border colors. This works for elements. It does not work for document.body. To set, document.body.style.color=x_color_contrast(document.body.style.backgroundColor)
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. camel does titleall, but lowercases first letter. camelall does camel and removes all space, _, and -. Actually camel case comes in lowercamel and uppercamel. So, I allowed for those variations. There is also snake case. CamelCase, grammatically speaking, only removes spaces between words. However programmers use camel case for lowercamel case. Snake case replaces spaces between words with hyphens. You can use snakeall to also replace - with _. And use can use snake- to replace spaces with -. snake all to also replace _ with -. Snake~ and Snake= work similarly.
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.
&l';; and &'; if convert as x_press entities is true).
&l"; and &r';).
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.
x=x_array_math(array_in,func) returns the math function value for the array. E.G. If func='min', the minimum value in the array is returned. func can be 'min','max','avg','mean','mode','median','sum','product','antilog','powerproduct'. mean is the same as avg. mode is the most populous (favorite) value. median is the middle value after the array is sorted in ascending order. product takes takes the values in the array and multiplies them together. So product is same thing as sum, except it multiplies rather than adds. antilog and powerproduct are the same. These raise the first value to the second value and that result to the third value, etc. So, powerproduct is product, but uses power, rather than multiplication.
x=x_array_find(value_in, array_in, alternate_values_array_in). Finds the first occurrence of the value in the array and returns that index. If alternate_values_array_in is specified, the corresponding value in that array is returned.
x=x_array_find_in_range(value_in, range_array, return_values_array). range_array contains the starting value of each range. The ending value of each range is just below the starting value of the next range. This routine looks for value within a range and returns the corresponding value from return_values_array.
x=x_array_repeat(array_in,len,exclude_indexes_array). Repeats the array to the specified length, first excluding the indexes in exclude_indexes_array.
x=x_array_randomize(array_in) Returns an array with the elements of array_in randomized.
x=x_array_in_out(array_in,value_in,in/out/switch,index) Generic Push, Pull, Shift, Unshift, Switch routine. Puts value in array or Gets value from array. Returns another array where [0]=value_from_array, [1]=array_after_in/out/switch. index can be index, 'first', 'last'.value and another for index. Both value and index can be index, 'first', 'last'.
x=x_array_unique(array_in) returns an array of unique values from all the values in array_in.x_array_to_table(array_in,div_out,table_id,table_border_style,table_style_class,table_headings) moves an array to a table. array_in is the array. This array contains rows and columns just like the table. div_out is the id of the div which will contain the table. table_id is the id of the table. table_border is the border styling for the table &n-; border:... or however you want to specify it. table_style_class is the rest of the styling style="..." or the class class="..." for the table. If there is none table_style_class=''. table_headings is an array containing the heading row.
table_headings contains one column for each column in the table. Each column in this array is an array. The first item in this column array is the heading. Next is another array containing first the heading style or class and secondly the non-heading style or class. These might be the same, but normally the heading style will also contain font-weight:bold. The last item tells what type of data this column contains &n-; value,link,combine_array. value means this column contains a value &n-; text / number / formatted date / etc. link means this column contains a an array describing the link. combine_array means that this column is an array and you want the values in the array listed as a comma-separated list in the table column.
array_in. If a column contains a value, just enter that value. If a column contains a link, enter an array. The first item in this link array is the displayed value. The second is the url. The third is what&';s display when the user hovers of the link. Specify '' if you don&';t want anything to be displayed. If a column contains a combined array, enter that array.
x_filter_table(filter_value,table_id,column_number) filters a table. column_number is 1,2,3,4,etc. column_number is the column to search for filter_value.x=x_who_won(high_low_wins,score_array,result_array) Returns the index in score_array of the winning score. If result_array is specified, returns corresponding value in that array instead. high_low_wins is high or low.
x_filter_table(filter_value,table_id,filter_column) Filter&';s table based on value in column. Column is the column number, 1, 2, 3, 4, etc.x_storage accesses storage which is a modern, simpler alternative to cookies. x_storage(getsetremoveclear,key,value,session). session is true/false - keep key, value only for length of session. getsetremoveclear is get, set, remove, or clear.x_webpage_parts(url) returns an array containing protocol,domain,path,page,extension,searchparms,hashx=x_to_unicode(str) returns the unicode equivalent of an emoji string.x=x_styles_merge(style_class,style2) combines two styles. style_class is '' for nothing, style="...", or class="...". style2 just contains the style border:... for example.x=x_url_absolute(url_relative) returns the absolute url, given a relative urlx=x_url_online(offline_url,offline_directory_for_domain,online_protocol,online_domain) returns the online equivalent of an offline urlx_filter_table(filter_value,table_id,column_number) filters an HTML tablex_copy_to_clipboard(copy_string,alert_msg) copies a string to the clipboard. If alert_msg is not '', it then displays a message. This function does not work if alert messages are encountered before it copies to clipboard.x=x_mime_type_audio(ext), x=x_mime_type_image(ext), x=x_mime_type_video(ext) return the mime type, given the extension.x=x_str_lengths(str) returns array of [string length, unicode length, twitter length]The x_press javascript code explained