PLAYGROUND:
...should have been populated by set_title
with the value of DOM_LOAD_TAG

div1
div1_1
div1_1_1
pre1
pre2
pre3
div2
div2_1
pre1
pre2
pre3
div3
div4
div5

Google Keep — dom_load (180906:15h)

  1. dom_load
  2. seeker123-OR- seekarea + lightweight seeker
  3. glow onWork_EL
  4. scroll-after-select issue
  5. fade-in-css with ::before fade-out
  6. show misclick with a glow
  7. solve misclick+move issue
  8. sel_bag: truncate pattern with ellipsis
  9. add and copy buttons on first containers clipboard button
  10. node_to_hide: add display:none after masked-invisible states
  11. overlap quadrant layout while moving pannels
  12. doc-select: discard short-lived select-unselect .. instead of…

Google Keep — Android (180706)

  1. postpone-toast (new node) — rephrase: node-label first
  2. Find a substitute to e.shift for move_cooldown_short
  3. toast .. no RTabs label when app is the active one
  4. Cart add-del ..bacground click should exit edit-mode
  5. allow finger lift then resume ... within some delai
  6. edit cart red-green label: copy-paste instead of add-extract

OVERFLOWWALL OF TEXT
• However, The rules above it win, because IDs/class selectors have higher specificity than element selectors (you'll learn more about this in the next section).
• Both elements have a class of better, but the 2nd one has an id of winning too. Since IDs have an even higher specificity than classes (you can only have one element with each unique ID on a page, but many elements with the same class — ID selectors are very specific in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.
OVERFLOWLONG LINE
• The 2nd element does get the red background color, but no border. Why? Because of the !important declaration in the second rule — including this after border: none means that this declaration will win over the border value in the previous rule, even though the ID has higher specificity.

WOT_1_align_contents
        -_1_------------wall of text ------------------
        -_1_------------wall of text ------------------
        -_1_------------wall of text ------------------
WOT_2_align_manual
        -_2_------------wall of text ------------------
        -_2_------------wall of text ------------------
        -_2_------------wall of text ------------------
        -_2_------------wall of text ------------------
WOT_3_ align_usage
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
WOT_4_align_maps
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
WOT_5_align_history
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------


escape(`
/*{{{*/
/* dom_prop_js "use strict"; {{{*/
let DOM_PROP_JS_ID        = "dom_prop_js";
let DOM_PROP_JS_TAG       = DOM_PROP_JS_ID  +" (181017:03h)";
/*}}}*/
let prop_init    = function(id, value, onchange) { return _tcb_set  (id, value, onchange)        ; }; /* returns a  TCB   */
let prop_set     = function(id, value, onchange) { return _tcb_parse(id, value, onchange)        ; }; /* returns a  TCB   */
let prop_get     = function(id                 ) { return _tcb_get  (id                 ).value  ; }; /* returns a  value */
let prop_toggle  = function(id                 ) { return _tcb_parse(id,"toggle"        ).value  ; }; /* returns a  value */
let prop_set_el  = function(id, el             ) { return _tcb_get  (id                 ).el = el; }; /* returns an el    */
let prop_get_el  = function(id                 ) { return _tcb_get  (id                 ).el     ; }; /* returns an el    */
let prop_set_GUI = function(gui_cb             ) {                            TCB_gui_cb = gui_cb; };
let prop_get_MAP = function(                   ) { return                                 TCB_map; }; /* returns a  Map   */
let prop_log_MAP = function(_caller)
/* {{{*/
{
/*{{{
logBIG("prop_log_MAP .. CALLED BY "+ _caller);
}}}*/
console.dir(TCB_map);

    let count = 0;
    for(let [id, tcb] of TCB_map)
    {
/*{{{
logXXX((count+1)+" id=["+id+"]")
}}}*/
        tcb.log(++count +" "+ _caller);
    }
};
/*}}}*/

/* TCB private */
/*_TCB new {{{*/
/*{{{*/
const NO_ID   = "no_id";
let   TCB_map = new Map();
let TCB_gui_cb;
/*}}}*/
let TCB = function(id, value, onchange)
{
    this.id        = id;
    this.value     = (value == "toggle") ? true      : value        ;
    this.onchange  = onchange;
    this.el        = null;
    /* this.toString {{{*/
    this.toString = function() {
        return ""
            +  "["+                  this.id
            +  " "+                  this.value         +"]"
            +  "["+ (this.onchange ? this.onchange.name : "")
            +  " "+    get_id_or_tag(this.el)           +"]"
        ;

    };
    /*}}}*/
    /* this.log {{{*/
    this.log = function(prefix="") {

        let lfv = (this.value ==  null) ? lf8
            :     (this.value == false) ? lb6
            :     (this.value ==  true) ? lb5
            :                             lb7;

        let lfe = (this.el            ) ? lf4
            :                             lf2;

        console.groupCollapsed( "%c"+ mPadEnd  (               prefix     , 42)
                       +       " %c"+ mPadStart(               this.id    , 24)
                       +       " %c"+ mPadStart(               this.value , 16)
                       +       " %c"+ mPadStart( get_id_or_tag(this.el   ), 24)
                       +       " %c"+ (this.el ? " "+this.el.className : "")
                       ,       lbH
                       ,       lbL+lfe
                       ,       lbC+lfv
                       ,       lbR+lfe
                       ,       lbH+lf3
                              );

        log_key_val(this, lf3);
        console.trace();
        console.groupEnd();
    };

    /*}}}*/
};
/*}}}*/
/*  _tcb_set {{{*/
let _tcb_set = function(id, value="toggle", onchange)
{
/*{{{*/
let   caller = "_tcb_set("+id+", "+value+")"; if(typeof dom_hide_log_pulse != "undefined") dom_hide_log_pulse(caller);
let log_this = LOG_MAP.T3_LAYOUT;

if( log_this) log("%c"+caller, lbH+lf3);
/*}}}*/

    let tcb = _tcb_get(id, value, onchange);

    if(onchange &&  (tcb.onchange  != onchange )) { tcb.onchange       = onchange;  }
    if(             (tcb.value     != value    )) { tcb.value = (value == "toggle") ? !tcb.value : value ; }
    else if( log_this) log("...unchanged");

    if(TCB_gui_cb) TCB_gui_cb(id, tcb.value);

    return tcb;
};
/*}}}*/
/*  _tcb_get {{{*/
let _tcb_get = function(id, value, onchange)
{
    let tcb = TCB_map.get(id);
    if(!tcb) {
        tcb = new TCB(id, value, onchange);
        TCB_map.set  (id, tcb);
    }
    return tcb;
};
/*}}}*/
/*  _tcb_parse {{{*/
let _tcb_parse = function(id, value, onchange)
{
/*{{{*/
let   caller = "_tcb_parse("+id+", "+value+")";
let log_this = LOG_MAP.T1_DOM_LOAD;

if( log_this) log(caller);
/*}}}*/

    let tcb = _tcb_get(id, value, onchange);

    if(     onchange && (onchange != tcb.onchange ))
        tcb.onchange  =  onchange;

    if(  tcb.value != value) {
        _tcb_set(id , value);

        if(tcb.onchange)
            tcb.onchange(id, tcb.value);
    }
else if( log_this) log("...unchanged");

if( log_this) tcb.log(caller);
    return tcb;
};
/*}}}*/

/*}}}*/
//# sourceURL=dom_prop.js
`

escapeXXX(`
`

escapeXXX(`
`
RTabs playground Google
checkbox_css_tag

playground_css_tag

data_image

data_image

B
Y
R

traces


0 1 2 3 4 5 6 7 8 9 A B
pat_sort
NODE_BEFORE cc[0-3] NODE_AFTER ...TEXT_AFTER...
 SPACES  	 CpAccountApp.app        
 WORDS Cp-Account-App.app extra-word 
 Jurassic Park                                   
 Skull of Velociraptor mongoliensis Osborn, 1925.
    

h2

nested_div_parent_TEXT
nested_div_3_TEXT

100037 TOP HOLD-0200URF 0102

sample_div

sample_div
cc1 TEXT SEGMENTS:
cc2 12345678901234
cc3 1234567890 1234567890
cc4 123 456 7890
cc5 ABCDEFGHIJKLMNOPQRSTUVWXYZ
cc6 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ cc7 a .. def (__) klmno ;:''"" vwxyz
cc8 a bc def ghij klmno pqrstu vwxyz

cc9 Next line contains no word

--- !! @@ ## $$ %% ~~ ^^ ** (( ))
   pre 2 id="bom"
   html
   .head
   .body
   ..title h1 h2 h3 h4
   ..sample_div
   ...parent
   ....child
   .....kid
   ..note1
   ..domtree
   ...dom_tree_link
   ...firstHeader
   ...secondHeader
   ...lastParagraph
   ...div_ul
   ...div_table
   ...myDiagramDiv
   ...otherInfo
   ..ul li
   
   pre 3 id="small"
   html
   .head
   .body
   ..title h1 h2 h3 h4
   ..sample_div
   ...parent
   ....child
   .....kid
   ..note1
   ..domtree
   ...dom_tree_link
   ...firstHeader
   ...secondHeader
   ...lastParagraph
   ...div_ul
   ...div_table
   ...myDiagramDiv
   ...otherInfo
   ..ul li
   

parent
-child1
--kid

--kid --kid_sep

--kid_p2 // single-line comment
/* multi-line comment line2 */

--kid_sep --kid_s1 --kid_sep --kid_s2 --kid_end
-child1_end
parent_sep
-child2
-child2

-child2_p1

-child2_s1-child2_s2-child2_end
parent_end
pre 1 id="note1"
If the startContainer is a Node of type Text,
Comment, or CDATASection, then startOffset
is the number of characters from the start of the startContainer
to the boundary point of the Range.
For other Node types , it is the number of child nodes
between the start of the startContainer
and the boundary point of the Range.
   
  1. index.html
  2. stylesheet/dom_host.css
  3. stylesheet/dom_tools.css
  4. mloi.html.lnk
  5. playdom.html
  6. playground.html
  7. dom_host_css.html
  8. dom_select.html
  9. dom_tools.html
  10. dom_tools_css.html
  11. dom_dash_css.html
  12. twiddler.html
  13. javascript/dom_load.js
  14. javascript/dom_wording.js
  15. javascript/dom_log.js
  16. javascript/dom_util.js
  17. javascript/dom_select.js
  18. javascript/dom_hide.js
  19. javascript/dom_store.js
  20. javascript/dom_tools.html
  21. javascript/dom_tools.js
class className classList
Class ClassName ClassList
CLASS CLASSNAME CLASSLIST
csv1,csv2,_,csv3
sel1 213 sel2 435 sel3 213 sel4 435 sel6 213 546
123456789 123456789 123456789 123456789
123456789_123456789_123456
hotspot.html
index.html
playground.html

javascript/dom_grid.html
|          dom_grid.js
|          dom_load.js
|          dom_log.js
|          dom_util.js
|          dom_select.js
|          dom_hide.js
|          dom_store.js
|          dom_tools.html
|          dom_tools.js
|_________ dom_wording.js

stylesheet/dom_host.css
|__________dom_tools.css

   

SYMBOLS




🔍
🔎

























25CF BLACK CIRCLE
26AB MEDIUM BLACK CIRCLE
26AA MEDIUM WHITE CIRCLE
2B55 HEAVY LARGE CIRCLE
2718 HEAVY BALLOT X
26AB
23E9
23EA
2590
25B6
25BA
25FE
  1 - Tangled Up In Blue
  2 - Simple Twist Of Fate
  3 - You're A Big Girl Now
  4 - Idiot Wind
  5 - You're Gonna Make Me Lonesome When You Go
  6 - Meet Me In The Morning
  7 - Lily, Rosemary And The Jack Of Hearts
  8 - If You See Her, Say Hello
  9 - Shelter From The Storm
 10 - Buckets Of Rain
   
     ,   , 
     '    '  
   

In terms of ITS numbering
The ITS issued by ABS_TOP in the room ABS_TOP-URFCPY is numbered :
- ABS-CCTOP-OTOP-TURF-ITS-000001 where CCTOP is TOP contract code and OTOP is TOP contractor code

This ITS duplicated to the room ABS_URF1-TOPCPY is numbered :
- ABS-CCTOP-OTOP-URF1-ITS-000001 where URF1 is the URF1 contractor code

This ITS duplicated to the room ABS_URF2-TOPCPY is numbered :
- ABS-CCTOP-OTOP-URF2-ITS-000001 where URF2 is the URF2 contractor code

Whoever the supplier ABS_URF1 or ABS_URF2, the sequential number of the duplicated ITS shall be the same as the initial ITS

                                                                                             ABS_URF1-TOPCPY
        ABS_TOP-URFCPY
                                                                                        ABS_URF1ABS-CCTOP-OTOP-URF1-ITS-000001

        ABS_TOP ABS_URFCPY                duplication      ABS_TOPCPY
         ABS-CCTOP-OTOP-TURF-ITS-000001
                                                                                        ABS_URF2ABS-CCTOP-OTOP-URF2-ITS-000001
                                                                                             ABS_URF2-TOPCPY
    

w3 intro w3_WAI w3_FAQ w3_aria w3_wcag
w3 TR w3_tech w3_wcag w3_API w3_perso w3_ARIA
✔ in iframe ✔ taller ✔ smaller
  1. words_1
  1. words_2
  2. words_2
  1. words_3
  2. words_3
  3. words_3
  1. words_4
  2. words_4
  3. words_4
  4. words_4
  1. words_5
  2. words_5
  3. words_5
  4. words_5
  5. words_5
  1. words_6
  2. words_6
  3. words_6
  4. words_6
  5. words_6
  6. words_6
  1. words_7
  2. words_7
  3. words_7
  4. words_7
  5. words_7
  6. words_7
  7. words_7
  1. words_8
  2. words_8
  3. words_8
  4. words_8
  5. words_8
  6. words_8
  7. words_8
  8. words_8
  1. words_9
  2. words_9
  3. words_9
  4. words_9
  5. words_9
  6. words_9
  7. words_9
  8. words_9
  9. words_9
  1. words_A
  2. words_A
  3. words_A
  4. words_A
  5. words_A
  6. words_A
  7. words_A
  8. words_A
  9. words_A
  10. words_A
words_[0-9] words_[0-A] word[^ ]+
_words words words_
hidden
pre display:none:
hidden
hidden

📌 P_START
CODE 1 (short) not a code_container
CODE 2 (short) not a code_container
CODE 3 (long)
is code_container
123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789
Operations at L3 level(Incident / Problem / Change)
P_END

cc[0-3]
cc[4-5]
cc[6-9]
pattern_1
pattern_2
pattern_3
pattern_4
pattern_5

pattern_6
pattern_7
pattern_8
pattern_9
pattern_A
pattern_B
pattern_C
pattern_D
pattern_E
pattern_F
pat1 toggle_innerText
pat2 toggle_innerText
pat3 toggle_innerText
pat4 toggle_innerText
pat5 toggle_innerText


pat6 toggle_innerText
pat7 toggle_innerText
pat8 toggle_innerText
pat9 toggle_innerText
patA toggle_innerText
patB toggle_innerText

page_or_site_toggle
log_storage
store_csv
MASK
HIDE
HIDE or MASK

LOG EVENTS LOG HIGHLIGHT LOG TOOLBAR EV0_LISTEN EV1_DOWN EV2_MOVE EV3_UP EV4_LONG_PRESS EV5_TOOL_CB EV6_CHANGED EV7_DISPATCH EV8_FLOATLOG S1_RANGE S2_SELECT S3_SLOT T0_STORE T1_DOM_LOAD T2_GRID T3_LAYOUT T4_PIVOT T5_SPREAD T6_SLOT § scroll_smooth show_seekzone 📌 log_seekspot ☀ ☽ clear
A positioned element is an element whose computed position value is either
Page end