IF condition for javascript:history.back(-1)

[zawadil]

Hi Acorn,
I really appreciate your intensive considerations regarding my problem, but the relations between number of products and features are exactly the opposite as I have tried to show with my 3 page sample.
Which means, I have between 10 to 40 models within each product family spread over 2, 3 or 4 product pages.
These 10 to 40 models share 3-4 features, like "Reliability/Connectivity/Scalablity". A description of these main features easily fit in a clear form on an associated product-family overview page.
With your very detailed "To Prove if it is working" you posted above, you have already described everthing in a perfect and clear manner.
I hope we can find a solution from this point.
Kind regards
Erwin

[Acorn]

Erwin, it is nice for a change to be able to discuss a problem.

You are describing a hierarchy:

• Product Family
  
  • Overview Product 1 with Feature List (F1, F3, F4)
    
    • P1 - Model 01 - Model 10 with Summary (F1, F3, F4) to link to full Feature List item
    • P1 - Model 11 - Model 20 with Summary (F1, F3, F4) to link to full Feature List item
    • P1 - Model 21 - Model 30 with Summary (F1, F3, F4) to link to full Feature List item
    • P1 - Model 31 - Model 40 with Summary (F1, F3, F4) to link to full Feature List item
    
    
  • Overview Product 2 with Feature List (F1, F2, F3)
    
    • P2 - M01 to M26 with Summary (F1, F2, F3) to link to full Feature List item
    
    
  • Overview Product 3 with Feature List (F1, F2, F3, F4)
    
    • (P3M01, P3M02, ...) with Summary (F1, F2, F3, F4) to link to full Feature List item

At any point, in looking from the Overview Product, you want to be able to drill down to a Feature List item but be able to back up and stop at the Overview product page, regardless of the number and direction of dives made.

Effectively, you want the Back Button to work in the above hierarchy but never show in the Overview Product page.
It should be possible to check the URL for the word 'product' and hide the button.

Do correct if I am off-track.

Acorn

[Acorn]

I have build the above approach based on you use of Anchors but moved each separate Feature to its own page.
Features are only called from the Model section and the Back Button returns to that Model Feature link.

I renamed the Back Button to make its purpose a bit clearer.

The code I offered previously could still be used.
It would hide all navigation links if directly accessed so rather than hide it, I suggest it would be better to make it jump to your Home page.

The following example has no code other than the back() link.

I would make each feature page modal in that a jump to one opens in a new Tab.
I have added such Links to each feature heading under the Model.
Doing it that way, you do not have need for a back() function; the viewer can open and close a collection of Feature Tabs for examination without moving away from the Model.

JS - Back Button only on Features pages.xar

Acorn

[Egg Bramhill]

Interesting exercise. Just thought I'd give it a bash and see the way I'd do it.

I've created a Products page which can be used as a template for all products by just duplicating that page and adjusting a few things. The reliability, connectivity and scalability I create on seperate pages which are called into placeholders on popup layers within the products pages.

[zawadil]

Hi Acorn,
you are too fast for me. The idea to separate the features on separate pages is fine.
According to this idea I will test it with one product group.
Many thanks so far, your support is great.

During the time you already finished this suggestion a prepared some more description and had maybe an idea with some JavaScript code.
I´ll send this in a separate reply and you can give me a comment if you want.

Kind regards
Erwin

[Acorn]

@Egg, i had thought of this way too but the issue arises when you change some of the Features; you then have a shedload of changes in all the pop-up layers.

Then then thought why not have a single pop-up layer holding an IFRAME that you alter to the Feature URL from the clicked Link - still thinking that through as it is quite messy.

Another approach is a semi-modal one in that each feature Link opens into a new window:

javascript: var f01m = window.open("feature01.htm", "Feature 01 pop-out", "width=960,height=480, left=110, top=110").focus();
javascript: var f02m = window.open("feature02.htm", "Feature 02 pop-out", "width=960,height=480, left=220, top=220").focus();
javascript: var f03m = window.open("feature03.htm", "Feature 03 pop-out", "width=960,height=480, left=330, top=330").focus();
javascript: var f04m = window.open("feature04.htm", "Feature 04 pop-out", "width=960,height=480, left=440, top=440").focus();

Variant calls would have different widths and heights and JS variables f01v, ...

Acorn

[zawadil]

Hi Egg,
I'll say it honestly you two are amazing.
Thanks for your suggestion, I really like it too. You make me now really unsure whether I should implement Acorn's or your variant. But that's O.K. :-)

I've been using Magix/Xara WebDesigner on and off since about 2015, and I've been looking for answers on "TalkGraphics.com" as well. In the German forum mainly only basics are treated and thus little helpful.
Now I asked a question here for the first time and the speed and quality you both deliver here is really TOP !!!!
A big compliment from my side for this achievement and thanks again !
Kind regards
Erwin

[Egg Bramhill]

but the issue arises when you change some of the Features; you then have a shedload of changes in all the pop-up layers.

No Acorn there is only one single feature page, for example b-scalability. Change that one page and it's loaded across the site, no need to change popup layers. The popup layers placeholder just loads b-scalability.htm page.

[zawadil]

Hi Acorn,

as posted, below my last description, with maybe some simplehearted ideas about JavaScript coding. Although I think I will follow your or Eggs suggestion (or both in some kind of manner), would be interested about your comment on this idea, what´s possible with some lines of JavaScript.

Kind regards
Erwin

-----------

Hi Acorn,

you are very close to my hierachy. I modified it slightly to clear up hopefully everything

Each vendor is basically a small website on its own, placed in a seperate subdirectory.

Vendor 1 - Start Page (What&Why)

Product Family 1 (PF1): desired back button [window.history.back()] either hidden or visible
Family 1 Overview/Summary includes the description of the main Family Features (F1, F2, F3, F4) and a short description of avaible series A/B/C/D with links down to series pages (series pages also reachable via top navigation)
PF1-A - Fam 1, Series A, contains 12 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 1] overview page (F1, F2, F3, F4 ancor)
PF1-B - Fam 1, Series B, contains 16 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 1] overview page (F1, F2, F3, F4 ancor)
PF1-C - Fam 1, Series C, contains 12 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 1] overview page (F1, F2, F3 ancor)
PF1-D - Fam 1, Series D, contains 8 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 1] overview page (F1, F2 ancor)

Product Family 2 (PF2): desired back button [window.history.back()] either hidden or visible
Family 2 Overview/Summary includes the description of the main Family Features (F1, F2, F3) and a short description of avaible series A/B with links down to series pages (series pages also reachable via top navigation)
PF2-A - Fam 2, Series A, contains 4 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 2] overview page (F1, F2, F3 ancor)
PF2-B - Fam 2, Series B, contains 16 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 2] overview page (F1, F2, F3 ancor)

Product Family 3 (PF3): desired back button [window.history.back()] either hidden or visible
Family 3 Overview/Summary includes the description of the main Family Features (F1, F2, F3, F4) and a short description of avaible series A/B with links down to series pages (series pages also reachable via top navigation)
PF3-A - Fam 3, Series A, contains 4 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 3] overview page (F1, F2, F3, F4 ancor)
PF3-B - Fam 3, Series B, contains 8 models each with a picutre and technical specification, just Keywords for main Features with a Link back to [Product Family 3] overview page (F1, F2, F3, F4 ancor)

What I want to avoid is, to repeat the related Family Features on every product series page to keep the size of the series pages shorter (totally 3x Family feature descrption, instead of 11x).
Additionally this special hidden/visible "back button" should give the visitor a smoother reading experience, if he jumps from product specification back to Family features.

Let´s have a look to some possible ways to reach [Product Family 1], [Product Family 2], [Product Family 3] overview page.
1) From an external link > document.referrer ≠ PF1-A, PF1-B, PF1-C, PF1-D, PF2-A, PF2-B, PF3-A, PF3-B - Back-Button hidden
2) From any other page of my website > document.referrer ≠ PF1-A, PF1-B, PF1-C, PF1-D, PF2-A, PF2-B, PF3-A, PF3-B - Back-Button hidden
3) From one of the specific product pages (PFn-X), after choosing one of the Keywords with a Link back to [Product Family x] overview page (Fx ancor)
a) as the visitor has not seen the feature description on the related [Product Family x] before
b) as the visitor forget what he already had read
c) as the visitor reached the specific product page (PFn-X) from an external link or from a Google search result
in any of this cases document.referrer = PF1-A or PF1-B or PF1-C or PF1-D or PF2-A or PF2-B or PF3-A or PF3-B - Back-Button visible
After reading the Feature Description the Back button will bring him directly back to the position on the specific product page (PFn-X)

I´m not familar with JavaScript and had just a quick view about the functions and commands, What I meant yesterday with "hard coding" is something like this

a) defining an array
const source = [];
source[0] = "https://www.mysite.com/vendor1/PF1-A.htm";
source[1] = "https://www.mysite.com/vendor1/PF1-B.htm";
source[2] = "https://www.mysite.com/vendor1/PF1-C.htm";
source[3] = "https://www.mysite.com/vendor1/PF1-D.htm";
source[4] = "https://www.mysite.com/vendor1/PF2-A.htm";
source[5] = "https://www.mysite.com/vendor1/PF2-B.htm";
source[5] = "https://www.mysite.com/vendor1/PF3-A.htm";
source[7] = "https://www.mysite.com/vendor1/PF3-B.htm";

b) Find a match with the value of "document.referrer"

c) IF condition
no match (value <0) = button hidden
match (value >=0) = button visible

I neither know if this is possible nor I´m able to write this lines of codes correctly without spending a lot more time to become a little bit more familar with JavaScript.
Therefore let me ask, what do you think about this way.

Kind regards
Erwin

[Acorn]

No Acorn there is only one single feature page, for example b-scalability. Change that one page and it's loaded across the site, no need to change popup layers. The popup layers placeholder just loads b-scalability.htm page.

Thanks.
I hadn't checked that you were using IFRAMEs in each Feature layer. I was thinking along similar lines but only into one pop-up layer.

Acorn