Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40098

Re: Browser-dependent JavaScript problem

Show all headers | View raw

Andrew Poulos wrote:

> On 24/05/2021 1:58 am, John Stockton wrote:
>> I have not been able to access this newsgroup for a while.

It shows :-D

>> The following code was written in Firefox, and works there; it is called
>> in a script element which immediately follows <BODY>. it puts something
>> like
>>            × FREDERIC.HTM - saved @ LCT 2021-05-22 Sat ×
>> in the bottom right-hand corner of the window.
>> 
>> But it does not work in Chrome, Vivaldi, Opera, AVG Secure Browser, or
>> Edge.

Of those, Chrome, Opera, _Avast_ Secure Browser, and Edge are now Chromium-
based, i.e. use Blink as layout engine.  Vivaldi is an attempt to preserve 
the original Opera’s Presto layout engine.

>>   In IE11, the style setting has no effect, and the unadorned string
>>   appears top right.  OS is Windows 10.

IE 11’s layout engine is still MSHTML.

Note:

“Internet Explorer 11 follows the OS component lifecycle,[7] which means it 
remains supported with technical and security fixes while operating systems 
including it as a component are shipped. This means that there is no date 
for end of support for Internet Explorer 11.[8] On August 17, 2020, 
Microsoft published a timeline indicating that the Microsoft Teams product 
would stop supporting Internet Explorer 11 on November 30, 2020, and 
Microsoft 365 products will end Internet Explorer 11 support on August 17, 
2021.[9]”

<https://en.wikipedia.org/wiki/Internet_Explorer_11>

>> […]
>> function Show_Age() { // Needs INC-DATE.JS or do not use YMDDstr
>>    var ND = new Date(), LM = new Date(document.lastModified)
>>    if ((ND-LM) > 1500 && +LM > 1e12) {
>>      var El = document.createElement("div")
>>      El.style = "bottom: 0px; right: 0px; position: fixed; background:
>>      silver; width: auto; text-align: center; border-radius: 1ex;
>>      padding: 0.3ex 1.2ex; font-family: sans-serif;"
>>      El.className = "NPR"		// assumes styles-a.css
>>      El.appendChild(document.createTextNode("\xD7 " +
>>      location.pathname.replace(/.*\//, "").toUpperCase() +
>>        " - saved @ LCT " + LM.YMDDstr() + " \xD7"))
>>      El.onclick = function() { this.style.display = "none" }
>>      }
>>    document.body.appendChild(El) }

True programmers can write Pascal code in any programming language :-D

Compare: <https://github.com/airbnb/javascript>
 
>> Any suggestions?
> 
> I don't think you can set an element's style the way you are doing it.

That is correct.  “style” is historically a *read-only* *object* 
property[1], and has been FOR 20 YEARS NOW [2].

Only as per the WHATWG DOM one may assign a string value to it, as a 
shorthand.[3]

A backwards-compatible possibility would be to set the “style” attribute to 
that primitive string value.  But it is better to append a stylesheet, and 
then format based on CSS class names.

[1] <https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style>

[2] <https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html>
    <http://www.w3.org/TR/2000/CR-DOM-Level-2-20000510/html.html#ID-58190037>
    <http://www.w3.org/TR/2000/CR-DOM-Level-2-20000510/css.html#CSS-htmlelementcss>

[3] <https://html.spec.whatwg.org/multipage/dom.html#the-style-attribute>

> Maybe try this
> 
> function Show_Age() { // Needs INC-DATE.JS or do not use YMDDstr
>    var ND = new Date(),
>        LM = new Date(document.lastModified);
>    if ((ND-LM) > 1500 && +LM > 1e12) {
>      var El = document.createElement("div");
>      El.style.bottom       = "0px";
>      El.style.right        = "0px";
>      El.style.position     = "fixed";
>      El.style.background   = "silver";
>      El.style.textAlign    = "center";
>      El.style.borderRadius = "1ex";
>      El.style.padding      = "0.3ex 1.2ex";
>      El.style.fontFamily   = "sans-serif";
>      El.className = "NPR"; // assumes styles-a.css
>      El.appendChild(document.createTextNode("\xD7 " +
>        location.pathname.replace(/.*\//, "").toUpperCase() +
>        " - saved @ LCT " + LM.YMDDstr() + " \xD7"));
>      El.onclick = function() { this.style.display = "none" };
>      document.body.appendChild(El);
>      El = null;

This line is pointless, unless *perhaps* you want to support IE < 7.

>    }
> }

The above can be greatly simplified:

  function show_age()
  {
    var
      now = new Date(),
      last_mod = new Date(document.lastModified);

    if (!((now - last_mod) > 1500 && +last_mod > 1e12)) return;

    var el = document.createElement("div");
    Object.assign(el.style, {
      bottom: "0px",
      right: "0px",
      position: "fixed",
      background: "silver",
      textAlign: "center",
      borderRadius: "1ex",
      padding: "0.3ex 1.2ex",
      fontFamily: "sans-serif",
    });
        
    el.className = "NPR";

    el.appendChild(
      document.createTextNode("\xD7 "
        + window.location.pathname.replace(/.*\//, "").toUpperCase()
        + " - saved @ LCT " + LM.YMDDstr() + " \xD7"));
    el.onclick = function() { this.style.display = "none" };
    document.body.appendChild(el);
  }

But, AISB, for a consistent layout it is better to append a stylesheet (if 
that is supported in the target environments):

    let style_source = `.npr2 {
      bottom: 0px;
      right: 0px;
      position: fixed;
      background: silver;
      width: auto;
      text-align: center;
      border-radius: 1ex;
      padding: 0.3ex 1.2ex;
      font-family: sans-serif;
    }`;

    let style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(style_source));
    document.head.appendChild(style);

    el.className = "NPR npr2";

In case it cannot be assumed that template strings are supported, 
Array.prototype.join() may be used instead to avoid spaghetti code.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Re: Browser-dependent JavaScript problem Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-05-24 02:24 +0200
  Re: Browser-dependent JavaScript problem John Stockton <dr.j.r.stockton@gmail.com> - 2021-05-28 15:36 -0700
    Re: Browser-dependent JavaScript problem John Stockton <dr.j.r.stockton@gmail.com> - 2021-05-29 13:24 -0700
    Re: Browser-dependent JavaScript problem Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-06-07 03:05 +0200
      Re: Browser-dependent JavaScript problem "Mark-" <nospam@mapson.xyz> - 2021-06-07 02:13 +0000
        Re: Browser-dependent JavaScript problem Andrew Poulos <ap_prog@hotmail.com> - 2021-06-07 15:24 +1000
          Re: Browser-dependent JavaScript problem "Mark-" <nospam@mapson.xyz> - 2021-06-07 12:15 +0000
            Re: Browser-dependent JavaScript problem Andrew Poulos <ap_prog@hotmail.com> - 2021-06-08 07:35 +1000
              Re: Browser-dependent JavaScript problem "Mark-" <nospam@mapson.xyz> - 2021-06-08 12:33 +0000
                Re: Browser-dependent JavaScript problem Andrew Poulos <ap_prog@hotmail.com> - 2021-06-09 09:40 +1000
                Re: Browser-dependent JavaScript problem "Mark-" <nospam@mapson.xyz> - 2021-06-09 00:36 +0000
                Re: Browser-dependent JavaScript problem Andrew Poulos <ap_prog@hotmail.com> - 2021-06-09 13:14 +1000
                Re: Browser-dependent JavaScript problem "Mark-" <nospam@mapson.xyz> - 2021-06-09 03:27 +0000
                Re: Browser-dependent JavaScript problem Andrew Poulos <ap_prog@hotmail.com> - 2021-06-09 20:57 +1000
      Re: Browser-dependent JavaScript problem The Natural Philosopher <tnp@invalid.invalid> - 2021-06-07 07:52 +0100
      Re: Browser-dependent JavaScript problem John Harris <niam@jghnorth.org.uk.invalid> - 2021-06-07 18:18 +0100
    Re: Browser-dependent JavaScript problem Arno Welzel <usenet@arnowelzel.de> - 2021-06-07 09:56 +0200
  Re: Browser-dependent JavaScript problem Arno Welzel <usenet@arnowelzel.de> - 2021-05-31 07:30 +0200
    Re: Browser-dependent JavaScript problem JJ <jj4public@gmail.com> - 2021-06-01 18:40 +0700

csiph-web