Does the media query operator "not" actually work?

2022-05-02 19:10 Cyril imported from Stackoverflow

I actually want to trigger :hover effect only on PC that have mouse, but not on hybrid ones (mouse + touch). My query is :

@media not (any-pointer: coarse) {
tag:hover { some effect }
}

What I want to say is : apply hover to PC that have not at least one coarse pointer (touch). But it doesn't work, neither on chrome nor on firefox or edge. What I am missing ?

Thanks a lot!

1 answer

answered 2022-05-02 20:34 A Haworth
According to MDN

if you use the not or only operators, you must explicitly specify a media type.

This snippet adds screen to the media query in your question.

On a laptop without touch screen it appears to work, that is hovering over the div does change it to cyan. If you change the 'coarse' to 'fine' then the hover does not work because the laptop's mouse is considered a fine pointer.
```
div {
  width: 20vmin;
  height: 20vmin;
  background: pink;
}

@media not screen and (any-pointer: coarse) {
  div:hover {
    background: cyan;
  }
}
```
```
<div></div>
```

See also questions close to this topic

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Javascript: Change element class if button has a certain value
```
        <div class="main-div main-div2"> 
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>
```
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

Thank you.

Boostrap vertical sizing with different style width and height

I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

Anyway is there any way how to resize bootstrap icons except display-1???

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

How to add current UTC Time in MKV file metadata using ffmpeg?
I am not sure if it's possible, but is there anyway we can add current UTC time inside the mkv metatag using ffmpeg? i read https://wiki.multimedia.cx/index.php?title=FFmpeg_Metadata but i could not find anything.
```
-metadata "Creation Time"="Need to add time tag/code"
```
output will show
```
Creation Time: UTC 2020-06-04 02:40:29
```
How can I get additional photos in a post that people swipe on Instagram via the media URL? All photos in the same post

The example below shows how to get the first photo in a post on Instagram in a large size via a URL. What I need is to use the same method to get additional photos in the post, for instance, a post that has multiple photos that people swipe on. Is it possible?

https://www.instagram.com/p/Ccii9fOJcNO/media?size=l
Temary-operator does not work with float/double comparison?

I tried using the temary operator "?:" on a comparison with double and float Somehow it doesnt work, even with casts. IntelliJ wont even recognize the variable "Y". Now here is the funny part. Using a normal if else statement works just fine. Any clue why this is happening? Couldn't find an answer myself.

x is a float

y is a double

(Doesnt work) (x <= y) ? (true) : (false);

(Works) if(x <= y){} else{}

How do I overload the << operators for my vector class?

So this is my own Vector class, which I have written:

#ifndef VEKTOR_HPP
#define VEKTOR_HPP

#include <iostream>

template<typename T>
class Vektor
{
    T* tomb;
    size_t meret;
    size_t kapacitas;
public:
    Vektor() : tomb(NULL), meret(0), kapacitas(0) {}

    Vektor(Vektor const& v)
    {
        meret = v.meret;
        kapacitas = v.kapacitas;
        tomb = new T[kapacitas];
        for(size_t i = 0; i < meret; i++)
        {
            tomb[i] = v.tomb[i];
        }
    }

    void berak(T adat)
    {
        if(meret >= kapacitas)
        {
            T* temp = new T[kapacitas+=10];
            for(size_t i = 0; i < meret; i++)
            {
                temp[i] = tomb[i];
            }
            delete [] tomb;
            tomb = temp;
        }
        tomb[meret] = adat;
        meret++;
    }

    size_t getkapacitas() const {return kapacitas;}
    size_t getmeret() const {return meret;}

    Vektor& operator=(Vektor const& v)
    {
        if(this != &v)
        {
            delete[] tomb;
            meret = v.meret;
            kapacitas = v.kapacitas;
            tomb = new T[kapacitas];
            for(size_t i = 0; i < meret; i++)
            {
                tomb[i] = v.tomb[i];
            }
        }
        return *this;
    }

    T& operator[](size_t idx)
    {
        if(idx >= meret)
        {
            throw "Tulindexeles!";
        }
        return tomb[idx];
    }

    T const& operator[](size_t idx) const
    {
        if(idx >= meret)
        {
            throw "Tulindexeles!";
        }
        return tomb[idx];
    }

    void kiir()
    {
        for(size_t i = 0; i< meret; i++)
        {
            std::cout << tomb[i] << " ";
        }
        std::cout << std::endl;
    }

    ~Vektor()
    {
        delete[] tomb;
    }
};

#endif // VEKTOR_HPP

And this is the problem, I keep getting, and I can't quite figure out how to solve it exactly. I do know I have to overload the << operator, but I couldn't find a solution.

error: no match for 'operator<<' (operand types are 'std::ostream' {aka 'std::basic_ostream'} and 'Jatekos')|

web.config match and redirect urls from root file to folder
I moved my blog posts from the root of my website to a folder. I want to include a rule in my site's web.config that redirects permanently the posts from their old root location to the new folder location.

All posts have filenames of the following form, a form no other files on my website have, and the filenames are the same in the new folder location as they were in the old root location:
ROJR####.htm or ROJR####-#.htm

As a newbie to both web.config and regex, I am struggling to code accurately the pattern for the match url, as well as the pattern for the redirected url.

My current code is:
```
<rule name="redirect ROJR" stopProcessing="true">
  <match url="^(ROJR\d\d\d\d-?\d?\.htm)$" ignoreCase="true" />
  <action type="Redirect" url="^OJRU\/{R:1}" redirectType="Permanent" />
</rule>
```
Here are my questions:

Match URL: Did I accurately describe the pattern? And will the pattern look only for posts previously located in the root (and not find the moved posts with the same name in the OJRU folder)?

Redirected URL: Did I redirect accurately the old URLs to the new location?

FROM: example.com/ROJR####-#.htm
TO: example.com/OJRU/ROJR####-#.htm
and
FROM: example.com/ROJR####.htm
TO: example.com/OJRU/ROJR####.htm

Thanks for your help.

How can I return a rule depending on the res status of the request (ReactJS/AntDesing)

I would like to know how I can return a validation rule depending on the response of a request.

I have an input which, when the user finishes writing, performs a GET where it obtains if the user who is trying to enter already exists, it is like an automatic search that is performing the input. But now what I want to do is that depending on the status of the request return the validation rule

Do you know how I could do something like that?

Currently I return it in an alert message but I would like to return it as I am mentioning them

<FormItem {...formItemLayout} style={{ marginBottom: "-44px" }}>
                    {getFieldDecorator(`userName`, {
                      initialValue: selectedData_.userName
                        ? selectedData_.userName
                        : "",
                      rules: [
                        {
                          pattern: new RegExp("^[a-z0-9_.-]+$"),
                          message: <div className="alertsUserName"><IntlMessages id="message.link.pattern" /></div>
                        },
                        {
                          required: true,
                          message: <div className="alertsUserName"><IntlMessages id="error.required" /></div>
                        },
                        {
                          // Rule that returns the RES of the API
                          message: <div className="alertsUserName"><IntlMessages id="message.link400" /></div>
                        }
                      ]
                    })(<Input name="userName" className="inputLink" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={(e) => { e.persist(); this.update(e); }}
                      placeholder={intl.formatMessage({
                        id: `maintenace.link.suffixIntructions`
                      })} />)}
                  </FormItem>


//Mehod

debounce = (func, delay) => {
    let debounceTimer;
    return function () {
      const context = this;
      const args = arguments;
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(() => func.apply(context, args), delay);
    };
  };

  update = this.debounce(async function (e) {
    console.log(e.target.value);
    console.log(this.state.value);
    try {
      const response = await axios.get(`/dynamicLink/${e.target.value}/findAffiliate`);
      console.log(response);
      const selectData_ = this.state.form
      // this.setState({ userName: e.target.value });
      this.setState({ ...selectData_, userName: e.target.value })
      console.log(this.state.value);

    } catch (error) {
      if (error.response.status === 400) {
        messages.error(this.props.intl.formatMessage({ id: "message.link400" }));
      }
      if (error.response.status === 404) {
        messages.error(this.props.intl.formatMessage({ id: "message.userNull" }));
      }
    }
  }, 3000);

How to find if a string has a character which isn't in another string

For example I can have the string 'acagtcas' and I want to find if the string has any characters that aren't a, c, g or t. I've tried using not but I haven't been able to make it work. How can I implement this?
Equality negation to determine Least Significant Bit
Basically, I want to check if the last significant bit is a 0. I already had a condition to test if the bit is set or not (or at least, I believe so) :
```
cells[x + y * cols] & 1 === 1
```
At some point, I need the negation of this, so I thought :
```
cells[x + y * cols] & 1 === 0
```
But I didn't get the expected result. So I just :
```
(!cells[x + y * cols] & 1 === 1)
```
Which seems more appropriate according to the expected result. I don't get the expected result actualy, in both case. Maybe the problem comes from somewhere else or maybe I'm just misunderstanding the use of the bitwise operator.

So first of all, why these line are differents:
```
console.log(!(4 & 1 === 1)); // true
console.log(4 & 1 === 0); // 0
```
I mean, obviously the LSB of 4 is 0. I would say the first one is the one I need though...

Related questions

Does the media query operator "not" actually work?

1 answer

See also questions close to this topic