JavaScript Integration in Blocs 3?


#1

Hey @Norm, just a thought.

So, I have been using the custom HTML and CSS text editors built into Blocs (which I love) to achieve some really cool effects. I also find myself adding code to the JavaScript files after I export my project. The problem is; I have to re-add my custom JavaScript code everytime I make an update to my website and export it.

I was just wondering if there will be a section to input custom JavaScript code inside of Blocs (similar to how we can add custom HTML and CSS code).

Maybe in Blocs 3…

I understand if this is not a very important feature to add to Blocs any time soon. It is just a thought.

Thanks in advance. :smiley:


#2

Why not just attach this JS via the page header settings? Either as a page attachment or a snippet in the head code section?

Blocs 3 has a code widget which is a step up from the html widget, basically it can handle any type of code as it prevents rendering code in the design environment which stops the code being effected by the canvas dom rendering and being executed. It’s a big improvement for JS and PHP.


Safari-Vimeo video not displaying
#3

Oh WOW!!

I didn’t know I could do this, I thought that in the page settings it is only for html and css.
I will try it later today.

Thanks, you must have thought of this before hahah :smiley:


#4

Hey @Norm, I just tried it and I am running into a problem.

Here are my page settings:

Here is my code which I am adding to the page header:

Here is what appears on my website:

Thanks in advance again hahah.


#5

Did you wrap your JS in a script tag?


#7

OK, I managed to fix it.

I had to wrap it in a script tag (I feel like an idiot hahaha :joy:)
And I had to put it under ‘Footer’ not ‘Header’

Thanks, helped me out. It a great thing knowing that we can implement Javascript easily inside of Blocs itself.


#8

Yeah you can also just attach JS files to the page settings too.


#9

@gadusidup, you refer to html and css text editors built right in to Blocs. Would you be so kind as to explain how I access those? Thanks in advance


#10

It is easy…

On Blocs go to: Navigation Bar (at the top of your screen) > Page > Settings. Then there is a button called ‘Add Code’


#11

@gadusidup, ok thanks very much. I’ve used this area, and it works fine, but only applies the css to each page individually. I thought perhaps you might be referring to something else where we could attach an external css style sheet that applied the styling to the entire project.