Click-through

Sciter Forums Layout Click-through

This topic contains 11 replies, has 2 voices, and was last updated by  Andrew 1 month ago.

  • Author
    Posts
  • #51057

    Mikanoshi
    Participant

    Does Sciter have an attribute similar to pointer-events: none?
    Element should be click-through (and hover-through too).

  • #51060

    Andrew
    Keymaster

    Attribute disabled and corresponding state flag element.state.disabled = true; does that.

    <html>
        <head>
            <title>Test</title>
            <style>
    
              #container {
                size:200dip;
                background:gold;
                padding:10dip;
                cursor:pointer;
              }
    
              #container > div {
                size:*;
                background:rgba(255,0,0,0.5);
                cursor:default;
              }
    
            </style>
            <script type="text/tiscript">
           
               $(div#container) << event mousemove (evt) {
                  stdout.println("mouse over", evt.target);
               }
    
            </script>
        </head>
        <body>
           <div#container> 
              <div disabled>
              </div>
           </div>
        </body>
    </html>
    • #51061

      Mikanoshi
      Participant

      But if div has position: absolute it does not.

  • #51063

    Andrew
    Keymaster

    I cannot reproduce it with this:

    html>
        <head>
            <title>Test</title>
            <style>
    
              #container {
                size:200dip;
                background:gold;
                padding:10dip;
                cursor:pointer;
              }
    
              #container > div {
                size:100dip;
                background:rgba(255,0,0,0.5);
                cursor:default;
                position:absolute;
              }
    
            </style>
            <script type="text/tiscript">
           
               $(div#container) << event mousemove (evt) {
                  stdout.println("mouse over", evt.target);
               }
    
            </script>
        </head>
        <body>
           <div#container> 
              <div disabled>
              </div>
           </div>
        </body>
    </html>
  • #51064

    Mikanoshi
    Participant

    There shouldn’t be a container, absolutely positioned div is on the same level as other content.

  • #51066

    Andrew
    Keymaster

    Not clear what this “on the same level as other content” means.

    DOM is a tree with single root element that has no siblings – not a flat structure to have “level as other content”.

    • #51067

      Mikanoshi
      Participant

      Link should work when mouse is hovering overlay.

      <html>
          <head>
              <title>Test</title>
              <style>
      
                #container {
                  size:200dip;
                  background:gold;
                  padding:10dip;
                  cursor:pointer;
                }
      
                #overlay {
                  size:100dip;
                  background:rgba(255,0,0,0.5);
                  cursor:default;
                  position:absolute;
                  top:20dip;
                  left:30dip;
                }
      
              </style>
          </head>
          <body>
             <div#container>
                    <a href="#">LINK!</a>
             </div>
             <div#overlay disabled></div>
          </body>
      </html>
  • #51068

    Andrew
    Keymaster

    No pointer-events: none but there are other options.

    What are you trying to achieve by that overlay? Does it cover body in full?

    • #51070

      Mikanoshi
      Participant

      Not in full, it’s just positioned over everything else.
      Content underneath it is scrollable, so any element can be there.

    • #51071

      Andrew
      Keymaster

      Do you have any content inside that overlay or is it just a solid color?

    • #51072

      Mikanoshi
      Participant

      div has border, background color and a plain text inside

    • #51073

      Andrew
      Keymaster

      Two options:

      A. You can draw your overlay element “manually” on top of everything by using Element.paintOutline on body element.
      B. If that element has static content then you can draw it into image and bind that image with foreground-image of the body element. It will be drawn on top of everything.

You must be logged in to reply to this topic.