Omnislide question

[wanapitei]

I'm using Omnislide from this site as my primary navigation bar. However the only URLs I've been able to make work are absolute ones — the full string from http right through to .html. I've failed to attach a URL in this form.

<a href="../contactUs.html">comments </a>

Question: Is there a way to insert URLs which navigate to a following document in a series? I ask this because this will be a text heavy website. I'd like to be able to identify a document by number and thus what should be the next one to be viewed in series. I'd prefer to have a single MenuItems.js file giving the user, on whatever document they're viewing, a button to jump to the next in the series.

I hope I've made that clear. Is there a way to accomplish this within the Omnislide environment?

Much appreciated,

[jscheuer1]

There is no href= in OmniSide's menuItems.js file, but like most javascript, it will work with relative paths where paths are used (in the menuItems:[ // REQUIRED!! section of menuItems.js), as long as they are accurate in relation to the page(s) that use the script.

Many people make the mistake of trying to make the path relative to the script file. But since the code of the script is being run on the page, it is the page's location on the site that the links will be relative to, not the script's location.

Regardless of that, an absolute path on a site:

http://www.some.com/pages/page2.htm

can also be represented thus:

/pages/page2.htm

(note the leading /) and still be absolute from the root of the domain.

Another way - You could set some kind of base path variable on the page before the external script tags for the menu:

<script type="text/javascript">
var pagePath='../pages/';
</script>

Then use:

pagePath+"page2.htm"

in the menuItems.js file:

["What's New", pagePath+"page2.htm",""],

This pagePath variable could be different on different pages to get the same menuItems.js to work differently on different pages.

[wanapitei]

Excellent, I'll begin working on that.

In the meantime, is there some way I can put the identity of the current page into a javascript variable as the user arrives at that page? This I could then use to identify where to go when jumping to the previous or succeeding page. I'm thinking of simply numbering my pages, 1.html, 2.html, 3.html, etc. Extract the characters preceding .html and add or subtract from that.

Help much appreciated.

[jscheuer1]

The identity of the page is:

window.location.href

To see what it gets you, put this little script on a page and try it out:

<script type="text/javascript">
alert(window.location.href);
</script>

In most case, using the naming convention you propose, the number could be retrieved:

window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1')

So try:

<script type="text/javascript">
alert(window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1'));
</script>

If there is no number where expected, it will alert the entire window.location.href value.

So, you could do:

var pNum=window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1');
if(isNaN(pNum-0))
pNum="put a default value here";
put code to use the pNum variable here, or later on in the code flow

[wanapitei]

There is no href= in OmniSide's menuItems.js file, but like most javascript, it will work with relative paths where paths are used (in the menuItems:[ // REQUIRED!! section of menuItems.js), as long as they are accurate in relation to the page(s) that use the script.

Many people make the mistake of trying to make the path relative to the script file. But since the code of the script is being run on the page, it is the page's location on the site that the links will be relative to, not the script's location.

Regardless of that, an absolute path on a site:

http://www.some.com/pages/page2.htm

can also be represented thus:

/pages/page2.htm

(note the leading /) and still be absolute from the root of the domain.

The above works very well, however two supplementary questions.

1. The above causes a new window to be created. On this site I'd prefer to maintain the existing window and simply switch in the new content.

2. To jump up one level, to the site's root, requires the full URL, or is there something more terse available?
No, on further consideration, the likely answer is:

/page2.htm

Am not at the moment in a situation where I can put this to the test.

Appreciated,

[wanapitei]

The identity of the page is:

window.location.href

To see what it gets you, put this little script on a page and try it out:

<script type="text/javascript">
alert(window.location.href);
</script>

In most case, using the naming convention you propose, the number could be retrieved:

window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1')

So try:

<script type="text/javascript">
alert(window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1'));
</script>

If there is no number where expected, it will alert the entire window.location.href value.

So, you could do:

var pNum=window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1');
if(isNaN(pNum-0))
pNum="put a default value here";
put code to use the pNum variable here, or later on in the code flow

Not sure what I've misunderstood or have done wrong, but it's not working. Here's the URL to my test pages. Should be able to navigate forwards and back from pages 1 through 4, from the bottom item of the Dharma Talks menu.

Here's the code I've added to the TOP of the menuitems.js file in order to set a variable for the current page. It works correctly in my "Alert" tests.

var pNum=window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1');
if(isNaN(pNum-0))
pNum="1";

And here's what I added to the "Dharma Talks" menu, to the bottom item which is intended to take the user to the previous page or to the following one.

["Backwards & Forwards", "", ""], //create header
["<<< Talk", "/" & pNum - 1 & ".html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Talk >>>", "/" & pNum + 1 & ".html", "", 1] //no comma after last entry

I'm intending to place the single slash, so navigation is to the current page's folder, append the variable for the current page number, add or subtract a value of one and then append the .html.

I'm clearly confused about the required syntax or I've missed something else.

Appreciated.

[jscheuer1]

The above causes a new window to be created. On this site I'd prefer to maintain the existing window and simply switch in the new content.

New windows are controlled by the target field of the entry:

["Dynamic Drive", "http://www.dynamicdrive.com", ""],

Leave it blank as shown for same window, but leave it there, if you remove it entirely, you could cause a new window. Also, links in the menu will follow the base target for the page if any is set, to override that, use _self:

["Dynamic Drive", "http://www.dynamicdrive.com", "_self"],

[jscheuer1]

I've answered the target question in my post just before this one, I needed to think about this next/previous thing so am answering twice in a row here. I think it should look like so:

["Backwards & Forwards", "", ""], //create header
["<<< Talk", "/" +( pNum - 1 )+ ".html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Talk >>>", "/" +( pNum -0 + 1 )+ ".html", "", 1] //no comma after last entry

But in your other code, the part that gets pNum from the href, you will probably want to think about what to do if pNum-1 or pNum+1 are out of range and how to determine that.

[jscheuer1]

Thinking about this, you would probably want something like so:

var nPage, lPage,
pNum=window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1'),
lastP=24, //set to highest page number available
firstP=0; //set to lowest page number available
if(isNaN(pNum=pNum-0))
pNum=1; //default value
lPage=pNum-1<firstP? lastP : pNum-1;
nPage=pNum+1>lastP? firstP : pNum+1;

and:

["Backwards & Forwards", "", ""], //create header
["<<< Talk", "/" +lPage+ ".html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Talk >>>", "/" +nPage+ ".html", "", 1] //no comma after last entry

[wanapitei]

Thinking about this, you would probably want something like so:

var nPage, lPage,
pNum=window.location.href.replace(/.*\/(\d+)[^\/]*$/,'$1'),
lastP=24, //set to highest page number available
firstP=0; //set to lowest page number available
if(isNaN(pNum=pNum-0))
pNum=1; //default value
lPage=pNum-1<firstP? lastP : pNum-1;
nPage=pNum+1>lastP? firstP : pNum+1;

and:

["Backwards & Forwards", "", ""], //create header
["<<< Talk", "/" +lPage+ ".html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Talk >>>", "/" +nPage+ ".html", "", 1] //no comma after last entry

I can somewhat read the above but am too green to follow all of it. Nevertheless, have inserted your code into menuitems.js, modified the lastP to 4 and firstP to 1, the current test series.

The menu commands are now functional. I'm starting from this page, 3.html in the series, and am attempting to go to back to 2.html or forward to 4.html. Both result in a 404 error.

Kind regards,