0

On a Divi Theme website, I have a WooCommerce category page with three buttons on it using the below code to change the width of a div with id #content-area.

<button id="pixmotebtn1">Set width of div to 479px</button>
<button id="pixmotebtn2">Set width of div to 980px</button>
<button id="pixmotebtn3">Set width of div to 100%</button>

These buttons trigger the below code. The code works correctly and changes the width of the div with the id #content-area but it also breaks the Divi theme code. The module + on the back end builder clears the builder and you can not see anything while this code is active. It also stops sections of Divi from loading on the front end.

What in the below is clashing with Divi's code?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#pixmotebtn1").click(function(){
    $("#content-area").width(479);
  });
  $("#pixmotebtn2").click(function(){
    $("#content-area").width(980);
  });
  $("#pixmotebtn3").click(function(){
    $("#content-area").width("%100");
  });
});
</script>
Stuart Hingston
  • 53
  • 6

1 Answers1

0

The link to Google jquery needed to be removed and $ needed to be replaced with jQuery see Replace "$"(dollar Sign) with "JQuery" for an explanation of why. Below is the changed working code.

BUTTON CODE:

<button id="pixmotebtn1">Set width of div to 479px</button>
<button id="pixmotebtn2">Set width of div to 980px</button>
<button id="pixmotebtn3">Set width of div to 100%</button>

JQUERY CODE (Put in the head):

<script>
jQuery(document).ready(function(){
jQuery("#pixmotebtn1").click(function(){
jQuery("#content-area").width(479);
});
jQuery("#pixmotebtn2").click(function(){
jQuery("#content-area").width(980);
});
jQuery("#pixmotebtn3").click(function(){
jQuery("#content-area").width("100%");
});
});
</script>
Stuart Hingston
  • 53
  • 6