Hide Element

Dick Honing

I tried to hide an element with the following Javascript code:

<script>
    window.onload = function hideid() {
        document.getElementById("dfj1u22k1j7").style.display = "none";
        //document.getElementById("dfj1u22k1j7").style.visibility = "hidden";
    }
</script>

Unfortunaly, I did not get this to work.

I then set the element's opacity to 0 and that seems to hide the element just fine.

Just want to make sure that this is an acceptable work-around ...

Dick Honing

I've got it to work

window.onload = hide("id");

function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    //document.getElementById(id).style.display = "none";
}

visibility hidden works ... display none doest not !?

Dick Honing

P.s.: I'm fairly new to Javascript and I'm probably trying to run before I can even walk ... please apologise for this

Daniel Mulroy

Hey Dick,

AppDrag loads jQuery, so you could do something like:

window.onload = function setup() {
      $("#dfj1u22k1j7").hide()
      //$("#dfj1u22k1j7").show() // to reverse
}

Note if you're trying to make something simply show in PageBuilder, but not when it's on the public site, there is an easier way to do that via CSS.

See this topic: https://community.appdrag.com/topic/167/hidden-input-fields/3?_=1604922119868

Essentially, add this rule via a CSS source code element in your header or something that will appear on all pages:

body:not(.pagebuilder-edition) .hidden-live {
  display:none;
}

Then simply apply the 'hidden-live' class to any element you want this behavior to apply to (which you can do via the PageBuilder paintbrush tool -> Identification)

Dick Honing

@Daniel-Mulroy thanks! I also like the .hidden-live trick. Just curious what you're using it for ... comments?

Daniel Mulroy

@Dick-Honing I use it for elements I want to be able to modify/edit in PageBuilder, like steps 2-X of a multi-step process, or a Internet Explorer warning, or text that should only appear after something else has happened.

That way, it shows in PageBuilder, I can edit/modify it via the CMS, but then I can later reveal it with javascript or an additional css rule.

REMINDER

Hide Element