Detect PageBuilder with Javascript

Beaver Builder
1

I need to include some jquery to hide and move some elements ONLY when the page is viewed live. If the jquery executes while in the pagebuilder, it basically hides things from me permanently and I can no longer edit them. My thought is if I had a javascript conditional to detect if the pagebuilder is active then I can wrap my code and only show it when live.

I was told how to do this for php conditional but I need a javascript option for front end tweaking if possible. Any help here? Thank you in advance!

2

Hey Karena,

Welcome to the BB forums! :slight_smile:

I’ve already assigned another member of the team to assist you with your concern. :slight_smile:

Ben

3

Hi Karena,

You could check for the existence of the builder interface object like this…

if ( typeof FLBuilder != 'undefined' ) {
    // The builder is active.
}

Let me know if you have any questions about that.

Justin

4

ok that helped me! Thank you so much!

5

Great, I’m glad that helped!

Justin

6

The code above detects
if the Page Builder is active.
Does this mean in Edit mode or Live page?

Either way can you define code that will only active when in Edit mode, and code that will only activate when the page is live?

7

Hi Jason,

When you say “Live” do you mean when a page that has been built with the builder has been published? If so, then why would you need to use script when the page is published?

Or have I got the wrong end of the stick?

Thanks,
Danny

8

Hi Danny,

Like the OP, I want to execute some JS/JQuery code only when page is published and displayed on the front end.
While editing the page, if the code executes the page (editor) gets all messed up. And I end up where I can no longer edit the page properly.

Note: in both cases the page is build with BB.

9

Hey Jason!

This code will detect if the builder UI is active…

if ( typeof FLBuilder != 'undefined' ) {
    // The builder is active.
}

If you want to detect if it’s enabled for the current page, but the UI is not active, you could use this…

if ( typeof FLBuilder == 'undefined' && typeof FLBuilderLayout != 'undefined' ) {
    // The builder is enabled but not active.
}

Let me know if you have any questions about that.

Justin

10

Hi Justin,
I am having the same issue mentioned above. Once I add some javascript it kills the page builder so I can’t edit. I see the code you mentioned above, but I’m not quite sure where that is supposed to go. I tried putting in my header.php but didn’t have any luck. Would you mind letting me know the exact location I should be inserting that in order for it to work?

Thank you much!

11

Hey Nick,

Where are you adding JS? Under Tools > Layout Settings? If so, your JS would go in between the brackets here if you need it to run when the builder isn’t active…

if ( typeof FLBuilder == 'undefined' && typeof FLBuilderLayout != 'undefined' ) {
    // Your JS here.
}

And here if you need it to run when the builder is active…

if ( typeof FLBuilder != 'undefined' ) {
    // Your JS here.
}

Let me know if you have any questions about that.

Justin

12

Thanks for the quick reply, Justin. I tried adding my js code directly into the header.php after body tag and also putting the js file in my /js folder and enqueueing it from the functions.php using wp_enqueue_script. Both methods give me the same error results with BB not working.

In my dashboard when I go to “tools” I don’t have a “layout settings” as mentioned above so I’m not sure how to go about doing that!

Thanks,
Nick

13

[Content Hidden]

14

Got this all resolved…just wanted to update so you know that no response is necessary. Thanks again!

15

Hey Nick,

My apologies for the delay and thanks for the heads up. I’m glad to hear you got it sorted!

Thanks,
Justin