I am currently in the process of building a website and I'm having trouble with some javascript when I try to set up a custom mobile layout for a page. I've created a form inside a div that expands and contracts when you click on a link. The javascript is used to set the height so that I don't have to define it exactly so that I can change the form however I like and the animation will be responsive and adjust automatically.
I've set up a form in a div using the Lay Theme html element. I styled the div in the custom css section and have some javascript code that I have added to the custom html section of the site under the lay options section in wordpress. It all works perfectly fine on the desktop version and the mobile version if I let Lay Theme do the default of automatically creating the mobile version of the site.
The trouble is when I go to lay options, activate custom phone layouts and try to create a custom layout for the page the javascript stops working. I click the link and nothing happens.
html:
<div>
<a href="#" onclick="growDiv()">Submit an EOI.</a>
<div id='grow' class="_Default">
<form name="submit-to-google-sheet" onsubmit="submitted()" action="/thankyou" method="POST">
<label for="first_name">First Name:</label>
<div class="padding"><input type="text" id="fname" name="first_name" class="_Default" required></div>
<label for="last_name">Last Name:</label>
<div class="padding"><input type="text" id="lname" name="last_name" class="_Default" required></div>
<label for="contact">Email Address:</label>
<div class="padding"><input type="email" id="contact" name="contact" class="_Default" required></div>
<label for="what">What would you like to do?</label>
<div class="padding"><textarea id="what" name="what" class="_Default" required></textarea></div>
<label for="when">When would you like to do it?</label>
<div class="padding"><textarea id="when" name="when" class="_Default" required></textarea></div>
<label for="contact">If you have an exact date in mind let us know here:</label>
<div class="padding"><input type="date" id="date" name="date" class="_Default" required></div>
<button type="submit" class="_Default">Submit EOI</button>
</form>
</div>
</div>
css:
#grow {
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s;
height: 0;
overflow: hidden;
}
javascript
<script>
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
}
else {
growDiv.style.height = growDiv.scrollHeight+'px';
}
}
</script>
The weird thing is that it works if Lay Theme just stacks all the elements for the mobile site but as soon as I click the custom mobile layout it all breaks.
You can see the WIP site at http://www.twosixty.com.au/welcome-test
I've tried it on my phone and in my desktop browser, chrome and safari. It stops working as soon as you resize the browser window to mobile sizes.
Any help on a work-around would be appreciated, thanks!
edit:
I'm not a web developer so I have no idea how to interpret this but I noticed in the console when clicking on the link that this error popped up on the mobile site, specifically the uncaught DOMException: