Lay Theme Forum

DavidProjects

That makers a lot of sense, I'll have look at the parent function.

Cheers!

DavidProjects

Okay, so I managed to fix the saving problem by editing the theme in css_html_options.php and removing the '.$html_content.' code from line 113 below so it wouldn't return the broken code and I could save it as a blank again.

Screen Shot 2020-08-12 at 11.22.47 am.png

After some experimentation I've discovered that it breaks every time I use the <textarea> html tag. Is it related to the fact that line 113 is a text area and my code is interacting with what is being echoed in the php? I can put the code into the page but I guess it's interesting that the textarea tag breaks the custom html boxes.

DavidProjects

When I click the save changes button in the custom CSS & HTML section nothing happens. It doesn't redirect me anywhere or do anything at all. It get errors in the console that relate to the name of some of the elements in the form are not focusable.

Screen Shot 2020-08-11 at 1.24.07 pm.png

It's definitely a problem in the Custom HTML at top form, the two invalid controls that arre throwing up the error don't show up in the editable box but they do show up in the code if you click the admin.php? link on the right in the console like so:

Screen Shot 2020-08-11 at 1.26.39 pm.png

If I edit the theme and delete the highlighted code from the css_html_options.php file I can save the custom HTML & CSS section again but it removes the ability to add any custom HTML which is definitely not ideal.

Screen Shot 2020-08-11 at 1.17.36 pm.png

I there a way to reset the custom HTML? I have no idea why this seems to have broken. I tried swapping themes to see if that would reset things but to no avail, is it best just to delete laytheme and reinstall it? Will I need to rebuild my pages if I do that?

DavidProjects

Okay so I've gone a bit deeper to try to figure it out but still no luck. I've managed to get rid of any errors the console was throwing up. I had a look at the documentation for javascript and tried to copy what was in there and this was the code I ended up using in the custom <head> content section:

<script>
jQuery(document).on("click", ".clickme", function growDiv() 
    { 
    var growDiv = document.getElementById('grow'); 
    if (growDiv.clientHeight) 
        { 
        console.log("shrink!");
        growDiv.style.height = 0; 
        } 
    else 
        { 
          console.log("grow!");
          growDiv.style.height = growDiv.scrollHeight+'px'; 
        } 
    console.log("yay!");
    console.log(growDiv.style.height);
    }
);
</script>

All the console logs show up when they should, but for some reason when in the mobile site the log for "growDiv.style.height" never changes from 0. Works on the regular site though. As far as I can tell the "growDiv.style.height = growDiv.scrollHeight+'px';" isn't actually changing the height on the mobile version but I'm not sure why it's different.

DavidProjects

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:

Screen Shot 2020-08-06 at 11.31.14 am.png

Lay Theme Forum

DavidProjects

Posts