Single Navbar for all pages

**Teedee** · 17 June 2014, 06:33 AM

The site contains over 100 pages generated by over 10 .XAR files and periodically more will be added. At the moment the Home page has a top level Navbar in the first .XAR and the other .xars each have their own Navbar.
I have prepared a single Navbar which covers all pages. Now I want to just insert the same navbar into all pages, say, via a placeholder. However my HTML coding is almost non-existant.

I have tried using an iFrame in a placeholder but although I can get the menu page to display in the placeholder there appear to be two problems

1. Scroll bars are displayed even tho I tried scrollbars="no" meaning that the navbar has to be scrolled. Increasing the height of the placeholder does not seem to make any difference
2. The submenus drop down within the placeholder and are not visible over the main page.

Two questions please
Is this the way to accomplish it
Where can I find a reference please (I am working my way thru WWW Schools)
tia
td

**gwpriester** · 17 June 2014, 02:04 PM

Why not just create your own nav bar in Xara. Create a button shape. Add text (center align the text if you want the text to be centered on all buttons).

Group the two. Copy the button and paste it onto the MouseOver layer. Modify as desired.

Select the MouseOff layer and marquee select both buttons (the status line in the lower left corner will indicate two groups on two layers) and from Arrange, select Apply Soft Group.

Open the Website Properties fly out on the Infobar and click the Create Nav Bar button.

In the Nav Bar Properties dialog, check Site Navigation Bar.

With all the pages you have you can delete the pages you don't want to appear on the nav bar (in the Nav Bar Properties dialog only) and add them to sub menus. You can also change the words on the buttons in the Nav Bar Properties dialog.

If you press Help in the Nav Bar Properties dialog you get a context sensitive explanation of all the options features and how to info.

**Acorn** · 17 June 2014, 06:34 PM

td, you are almost there. You don't need a Placeholder.
For each NavBar, you need to change the link from the Link to value to a filename-based Link to Web or Email Address one.

You need to Export each .XAR file to the same folder structure as the published site.

Working with the main NavBar you would change the Link to pagenn to pagenn.htm,the filename of the page. The htm extension is essential.
To access the pages in the other .XAR design files, you need to include the path relative to the folder where index.htm is.
Say, you have a Fred.XAR file and you are going to be publishing it to a Fred folder, then its index.htm's relative path will be Fred\index.htm.

You would then Export the sites with the NavBar in the main site and check each link opens the right page.
When happy, you Repeat on all pages and copy the NavBar into each .XAR.

Finally, you publish.

Acorn

**Egg Bramhill** · 17 June 2014, 10:22 PM

Not completely sure what's required here but I'm assuming the 100 page + site is too large for a single site so it's being split into 10 different sites (sub-sites). Is this correct?

You now require to create a single site that has one menu that can link to all 10 indvidual sites and their individual pages?

**Egg Bramhill** · 18 June 2014, 01:33 AM

I've looked a bit further into this and I've reversed your process. Instead of placing the global menu into an iframe, I placed the global menu into every page and had an iframe load the individual html pages.

This may take a lot of individual pages but 90% are duplicates and only the url requires altering on the placeholders.

Personally I'm not a great lover of this single menu displaying all the available sites pages, but I suppose if you want to do it this way, it's fairly mean filesize wise.

I've attached a mock-up, I couldn't do 100 pages but you should get the idea

Just load it and do a preview. The 2 left most buttons work.

**Teedee** · 18 June 2014, 11:35 AM

Thanks to Everybody
The problem is we do a major trip each year (we head to warmer places in winter) lasting two to three months & take lots of pics for lots of places . As well we do minor trips of one or two weeks at various times during the year. A XAR (sometimes two or more when the XAR size bloats) is used for each trip. XAR files are typically 150MB. The site has many pages, each full of photos. So the XAR files get very big very quickly & I find that much over 150MB starts to cause problems. If I did one navbar on each XAR I would have to update ten or more navbars each time I add another trip.

At the moment I have a main menu on the Home page and each XAR has a Navbar with a Home button & buttons for the places in each XAR or groups of XARs.

Gary: I have already prepared a single navbar covering all pages with the other header graphics on a custom size (960x90) page.

The solution proposed by Egg could be a possibility & I will look long & hard at it. Is was going to be next on my agenda for displaying photos of wildflowers from the trips.
Egg's comment about filesize is correct; by having the navbar on each page means duplication of the navbar code on each and every page - huge duplication. A single link is required for the navbar on each page.
EDIT: Sorry I misunderstood. I thought that it was going to have a single page with a navbar whose menuitems changed the content of the iFrame. Having looked at it I realise that the XAR would be a page for every page generated by the XARs but it does mean a single navbar.

Acorn's approach was one I have tried but requires too much updating after each trip.

I will download Egg's files & study them (Done). Thanks to all for your input which is very much appreciated.
td

**Egg Bramhill** · 18 June 2014, 03:31 PM

Hello again TD

I've done some hunting around the tinternet & found some JavaScript code to dynamically load pages into an iframe.

The particular one I used is supposed to also dynamically change the iframes height but I couldn't get this to work but it isn't required anyway. I had to include height: 1000px into the code to force the iframe to be lage enough (it was defaulting to 150px)

Had a bit of bother getting it to work at first but it works fine in the attached xar. Obviously you'll need to change the button links to folders on your computer to view them in action.

The JavaScript source code

Watch in HD

**Acorn** · 18 June 2014, 10:56 PM

td, could you not use a gallery application and iframe that.
I have used my service provider for CPanel to access Mojo Marketplace to use a Gallery photo album.
Gary Priester uses and mentions HiSlider a lot.
They probably aren't what you want but they might be pointers to another approach.

Acorn

**letsgofishing** · 19 June 2014, 07:47 AM

Like your solution Egg!

**Teedee** · 21 June 2014, 09:13 AM

Egg you wizard
This is absolutely marvellous. Thanks very very much for the trouble you have gone to.
You mention on the video that you had dynamic resizing; I too have tried to no avail to get any dynamic page sizing working for some other applications, due to my lack of web programming skills, but that is on the back burner for now.
This solution will also be of huge worth to me in a next stage for displaying photos of wildflowers. The galleries dont cut it for the heaps of photos I have.
Thanks again
TD

PS. I wondered how you could put script functions into a navbar. Thanks too, for that little gem