Can you provide complete instructions on how to fix this? ?

Thank You

This cookie banner is featured prominently for visual users, but not for keyboard and screen reader users.

The suggested resolution is to “move the element containing the cookie consent banner to the top of the DOM, preferably directly after the ‘”‘skip to main content'”‘ link”. Regardless of the position settings, the banner remains after the page content in the DOM.

Is there any way I can choose where to insert the banner in my code so it will be above the page content in the DOM?

Thanks.

Activating the PHP dom module fixed the site instantly.

Why is the PHP “dom” module critical to WordPress?

The site uses the Divi theme.

I’m trying since days and I just cant get this to work. Maybe someone can help The idea is, that when user clicks on specific checkbox, a specific div appears.

Because there is no regularity between inputs and display, sometimes more input fields, sometimes two difs to display, I thought it’s maybe better to assign each manually. This was my “Vacation”-Project and i hope i can get this to work… till work starts

Also I’d like this to function with other inputs : textarea, radio, select and input.

The only difference between checkbox element is value=”checkbox1″ full element is: <input type="checkbox" name="versuch1" required="" value="checkbox1">

the divs look like this and I can assign id to it:

<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-71c1c46" data-id="71c1c46" data-element_type="column" id="exampleoclumn1">

What I have:

// Element id
var checkbox1 = document.getElementTagName("checkbox1");
var checkbox2 = document.getElementTagName("checkbox2");
var checkbox3 = document.getElementTagName("checkbox3");

// Column id
var examplecolumn1 = document.getElementsById("examplecolumn1");
var examplecolumn2 = document.getElementById("examplecolumn2");
var examplecolumn3 = document.getElementById("examplecolumn3");

function updateColumnsDisplay() {
  examplecolumn1.style.display = checkbox1.checked ? "block" : "none";
  examplecolumn2.style.display = checkbox2.checked ? "block" : "none";
  examplecolumn3.style.display = checkbox3.checked ? "block" : "none";
}

// event listeners to checkboxes
checkbox1.addEventListener("change", updateColumnsDisplay);
checkbox2.addEventListener("change", updateColumnsDisplay);
checkbox3.addEventListener("change", updateColumnsDisplay);

This was one of the previous attemps:

//element id
var checkbox1 = document.getElementById("checkbox1"); 
var checkbox2 = document.getElementById("checkbox2"); 
var checkbox3 = document.getElementById("checkbox3"); 

//column id
var examplecolumn1 = document.getElementById("examplecolumn1"); 
var examplecolumn2 = document.getElementById("examplecolumn2"); 
var examplecolumn3 = document.getElementById("examplecolumn3"); 

examplecolumn1.addEventListener("change", () => {
    if(checkbox1.checked){
        example-column1.style.display = "block";
    if(checkbox2.checked){
        example-column2.style.display = "block";
    if(checkbox3.checked){
        example-column3.style.display = "block";
    }else{
        example-column1.style.display = "none";
        example-column2.style.display = "none";
        example-column3.style.display = "none";
    }
     })

EXAMPLE

Block template

<!-- wp:shortcode -->
[test]
<!-- /wp:shortcode -->

Shortcode

add_shortcode('test', function() {
  return '<ul>
            <li>
              <a href="#">
                <div class="card">
                  <div><h4>Test</h4></div>
                  <div><p>Test</p></div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="card">
                  <div><h4>Test</h4></div>
                  <div><p>Test</p></div>
                </div>
              </a>
            </li>
          </ul>';
});

Result in page’s generated DOM

<ul>
  <li>
    <a href="#"></p>
      <div class="card">
        <div>
          <h4>Test</h4>
        </div>
        <div>
          <p>Test</p>
        </div>
      </div>
      <p>
    </a>
  </li>
  <li>
    <a href="#"></p>
      <div class="card">
        <div>
          <h4>Test</h4>
        </div>
        <div>
          <p>Test</p>
        </div>
      </div>
      <p>
    </a>
  </li>
</ul>

This doesn’t happen if I add the same shortcode inside a page’s content (through the Pages editor).

We do however are seeing a rendering issue when switching from dark to light mode, you can clearly see the DOM elements on the page switching colours.

Is there any way to stop this and get a clean switch between the modes?

Ive added a webm video and gif to show whats happening

Webm here

Hi everyone,

Newbie question: I’m using the Code Snippets plugin to try and add some simple self made scripting to my site.

In one of these, my objective is to make some edits to the homepage DOM. The script is hooked on ‘shutdown’ in order to be fairly sure the DOM will be rendered allright.

I’m having trouble accessing the DOM however, for instance i have:

$links = document.getElementsByTagName(“a”);

…but it errors, saying: Undefined constant “document”

How can I access the DOM correctly from a code snippet?

On the main search page with the default results, all edit buttons work, but if I do a search, the results are added via an ajax call, then all the image editing buttons no longer work. The javascript is no more connected to the added html content.

How can I bind the javascript with the new content added via ajax?