Code inseration into placeholder from menu code generator

**bwood** · 17 February 2024, 04:46 PM

Further to some messages to Acorn and Egg I'm using https://www.cssportal.com/css3-menu-generator/ Egg has supplied a terrific video and Acorn has helped considerably.

I'm missing something.

CSS code goes into the website > head and the opening and closing <style> tags

HTML goes into the placeholder body.

Javascript code goes into the website body with the opening and closing <script>

JS placeholder requires the <script> opening and closing.

Questions - is the JS code placed within the HTML body? or can it be added below the HTML.

I realize this is elementary coding, but on preview I've got a blank page with a paragraph of coding on top.

Thx
Bill

**Acorn** · 17 February 2024, 05:26 PM

Originally Posted by bwood

Further to some messages to Acorn and Egg I'm using https://www.cssportal.com/css3-menu-generator/ Egg has supplied a terrific video and Acorn has helped considerably.

I'm missing something.

CSS code goes into the website > head and the opening and closing <style> tags
HTML goes into the placeholder body.
Javascript code goes into the website body with the opening and closing <script>
JS placeholder requires the <script> opening and closing.
Questions - is the JS code placed within the HTML body? or can it be added below the HTML.
I realize this is elementary coding, but on preview I've got a blank page with a paragraph of coding on top.
Thx Bill

Bill, there is no JS Placeholder.
Whatever you are doing is not terminating the code or have fluffed its syntax in one of the input areas.

Have you checked out my example file?
It has a Placeholder with HTML <nav></nav> Tags in both Main and Variant.
In Website Head, you'll find the <style></style> Tags.
In Website Body are the <script></script> Tags.
I would carefully check all your quotes to see if you copied across some handed ones.

If you placed the menu detail in a layer that layer has to be visible of have a ! prefix if closed.

Acorn

**bwood** · 17 February 2024, 05:33 PM

Okay I think I may have this. - in @acorns example if you add code thru the web properties > website tab > body and head, one can see the code

Now if you go to website properties > placeholder - one can see the code for the head - but no the body.

I believe that is my confusion.

**bwood** · 17 February 2024, 07:58 PM

Originally Posted by Acorn

Bill, there is no JS Placeholder.
Whatever you are doing is not terminating the code or have fluffed its syntax in one of the input areas.

Have you checked out my example file?
It has a Placeholder with HTML <nav></nav> Tags in both Main and Variant.
In Website Head, you'll find the <style></style> Tags.
In Website Body are the <script></script> Tags.
I would carefully check all your quotes to see if you copied across some handed ones.

If you placed the menu detail in a layer that layer has to be visible of have a ! prefix if closed.

Acorn

I think I realize my confusion., but I'm not quite there. In web properties there is a placeholder tab > head and body boxes where you can place code.

Also in web properties there is a website tab > which also contains Head and Body boxes where you can place code.

In your example, when I open the widget I see a simple HTML code box, not head or body. then I click advanced to see where you put the code.

That my confusion. If one uses the placeholder tab only -- the html goes in the body, javascript goes into the body, and the CSS goes into the head. My confusion is more the difference between the placeholder > body and head and the website > body and head. Ive include 4 pics - the first two are the placeholder boxes -- and the last pics are the website tab and body and head.

**Acorn** · 17 February 2024, 09:33 PM

Website Head - anything here is added to the bottom of the <head> section for every page.
Website Body - anything here is added to the bottom of the <body> section for every page.
Page Head - anything here is added to the bottom of the <head> section for that page.
Page Body - anything here is added to the bottom of the <body> section for that page.
Placeholder Head - anything here is added to the bottom of the <head> section for that page.
Placeholder Body - anything here is added in situ at the Placeholder's position for that page.

Visible HTML usually has to therefore go into a Placeholder. Anywhere else and you have no control on where it is positioned.
CSS usually goes into the Website or Page Head as the styling can be applied as the DOM is rendered. Some Xara set-ups may require CSS to be in the Body.
JavaScript should always be called after the DOM is fully loaded so putting it in the Website or Page Body ensures that.
Code into a Placeholder will work but you need to work out its position so that it is applied after the DOM elements affected have actually been created.

Xara has recently confused the quick access to code which is usually fine for third party widgets but it is always safest to go via Web Properties.

Acorn

**bwood** · 17 February 2024, 11:25 PM

Excellent. Thank you for the clarification. i think I should be able to handle this now. I noticed on one of eggs videos there were two placeholders and one contained a script or a style sheet. Thanks again.

-Bill

**Acorn** · 18 February 2024, 02:27 PM

Originally Posted by bwood

Excellent. Thank you for the clarification. i think I should be able to handle this now. I noticed on one of eggs videos there were two placeholders and one contained a script or a style sheet. Thanks again. -Bill

Bill, you should now be able to see that Egg's placeholder use is page-specific. It provides a handy widget to drag and drop across designs.
If it was used over 10 pages, that's 10 Placeholders you have to track Better then to use the code inserted into the Website.

A better overall approach is to make the code modules external assets and link into them through statements in all or any of the above. Harder to explain but great to easily modify without having to republish an entire site.

It does get squirrely as JS, CSS and HTML all have different approaches to 'includes' or embedding.

Say, you think you are going to change the NavBar labelling and Links then you could add the HTML and save as navigate.html and bring in as an external asset.
You would use a Placeholder sized similarly to your current set up for the NavBar but replace all the HYML with:
<iframe src="index_html_files/navigate.html" onload="this.before((this.contentDocument.body||th is.contentDocument).children[0]);this.remove()"></iframe>

Thereafter all you do is make changes to navigate.html and save. A browser refresh and you have a new NavBar.

Acorn

**bwood** · 18 February 2024, 03:24 PM

Copied and noted. One more question. lets say you've got all your pages built. And your using the CSS nav bar generator - https://www.cssportal.com/css3-menu-generator/ > design. In the menu url - is the full address of the page necessary? - conversely one could place code in the nav bar code.

I'll be brushing up on my style sheets. I know my html, but a little rusty on CSS.

**Acorn** · 18 February 2024, 03:27 PM

Originally Posted by bwood

Copied and noted. One more question. lets say you've got all your pages built. And your using the CSS nav bar generator - https://www.cssportal.com/css3-menu-generator/ > design. In the menu url - is the full address of the page necessary? - conversely one could place code in the nav bar code.

I'll be brushing up on my style sheets. I know my html, but a little rusty on CSS.

Bill, no you do not need to use fully qualified URLs. Use relative URLs. Jump to Contact Us page would just be contacts.htm(l).

Acorn

**bwood** · 19 February 2024, 10:22 PM

Yahoo! Made a menu Acorn and @Egg- following your instructions. Just had to know where to place everything.

Now - for a mobile menu variant. One could go with one button with pages nested below it. It works well but the big HOME button for the drop down pages is going to look pretty gamely.

I did think of @chris M for a pop up, but theres quite a few pages. I could use that for a 4 or 5 pager. Is there a way to work that hamburger symbol in there.