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

Here is a short explanation, why I´m looking for such a function:

I do have
P1) a PRODUCT FAMILY PAGE page which describes the "main features" of the whole product family, ie.
P1. a) reliability
P1. b) expandability
P1. c) ...
plus several PRODUCT PAGES like
P2) entry level models with detail specifications and pictures
P3) mid range models with detail specifications and pictures
P4) high end models with detail specifications and pictures

To avoid extensive page size of every product page by repeating the "main features" I can use on every product page a back link to the product family page (> 1) either to a specific headline or anchor.

I can guarantee a continous reading for the visitor with a back/continue button with "javascript:history.back(-1)", which bring the visitor back exactly to the point of the product page, where he has clicked the link.

So far so good.

My problem is, that it makes no sense to have this special "back/continue button" all the time visible on the PRODUCT FAMILY PAGE, as it would only work correctly if "history.back(-1) = P1, P2, P3

My idea was to but the special "back/continue button" on a separate layer, who becomes only visible, if the IF Condition is correct otherwise it is hidden for all visitors starting to read the PRODUCT FAMILY PAGE 1st from top to the end.

I would be very happy, if there is a way to do it.

THX in advance.

Best regards
Erwin
Greatings from Vienna/Austria

Erwin, would it work for you if you put each Product as a pop-up layer in the Product Family page?

If you have a large number of Product pages, the better way might to include them as content of a single IFRAME on the Product family page.
Each would have a Link to Product (page) but the Link target would be the name of the IFRAME Placeholder.

Here is a mock-up: Attachment 132495

I would not rely on the browser's handling of a javascript call alone.
The code you want is either window.history.back() or window.history.go(-1), history.back() has no parameter.

Acorn

Hi Acorn,
thank you for your quick reply and the mock-up as well.

I found the information of the back-button here in an old Thread named "Create 'BACK' button to emulate browser back button"

Conerning your mock-up:
Basically it´s an interesting approach, but I have some concerns to do it that way
1) some of the product pages include more than 20 model numbers (PN´s) now as H2, which should be found by a search engine, as customers often search about a specific pn to get an alternate source or offer, which means I´am afraid to lose this benefit
2) it is hard enough to find a layout, which works with 960px as well as 480px mobile friendly, which has become most important in the meantime and is the main reason for a complete redesign of the site. Out of my experience, I try to keep the design straight and simple and use layers and popups very sparingly. To share a maximum of content between 960px and 480px is the main goal, otherwise it ends up in creating each page twice, which becomes a never ending story, as the website, I currentyl work on is about 40 pages large.

Beside your concerns about the different behaviour of browsers using one of the forms of javascript for a back button (see "Create 'BACK' button to emulate browser back button"), is there a way to have some lines of code in the header to make a layer visible if the result of the "IF" is that last page was P2, P3 or P4. The worst it might happen, is that the layer, where I hide the back-button does not become visible, with some browsers. In this case the visitor still has the possibility to get back to the specific product page, through my top navigation.

Thank you in advance for your help.

Best regards
Erwin

Erwin, relying on back() might cause problems.
Initially, I thought window.history.length would be useful to check if the back() button needed to be visible; its value never decreases!

You might be able to use document.referrer.
If a viewer opens a browser tab from a typed in link, the referrer is an empty string so the Back Button would be hidden.
If they have followed a link then the referrer would be away from your site and the Back button would be hidden.

I think this covers it: Attachment 132499 - DO NOT USE. There is an updated version in Post#6.

Acorn

How about making your back link a home button shared on every page linked to index page and just draw a rectangle above it to hide it on the index page or am I missing something?

Quote:

---

Originally Posted by Egg Bramhill

How about making your back link a home button shared on every page linked to index page and just draw a rectangle above it to hide it on the index page or am I missing something?

---

Egg, I think Erwin is asking to step back through all prior pages until the initial page, which could be any of the site, is reached.

I have just discovered the uploaded design file does not have each Back Button with Name of 'back' properly added.
I did have a XPro+ crash when building the design and I thought I had recovered everything.

Corrected design file: Attachment 132504

To prove it is working:

• Preview Website
  
  • Back Button is hidden on index page.
  
  
• Navigate to any pages with Next/Previous or page pick.
  
  • Keep pressing the Back Button until it vanishes.
  • Check this is the index page.
  
  
• In the design, move to a page other than index.
• Preview Web Page
  
  • Back Button is hidden on opened page.
  
  
• Navigate to any pages with Next/Previous or page pick.
  
  • Keep pressing the Back Button until it vanishes.
  • Check this is the opened page.
  • Also check that any visit to the index page shows the Back Button.
  
  
• Without closing your XDA.
  
  • Open a new browser Tab.
  • Copy in any of the sites page addresses.
  • Check this page does not show the Back Button.
  
  
• Navigate to any pages with Next/Previous or page pick.
  
  • Keep pressing the Back Button until it vanishes.
  • Check this is the page with the copied address.

Acorn

Hi Acorn,
your JS - Back Button.xar is already very close to the solution.
Unfortunately I´am not familar with Java script, but I understand the logic. It would be the solution, if lcl value gets the value >=1 if document.referrer ="product1" or "product2". It would not be a problem to do it less elegant, which means hard coding the complete page URL, like "https://www.mysite/vendor1/product1.htm".

From the response from Egg Bramhill (also thank you) I learned that my initial description has space for missunderstanding.
I prepared a small .xar with 3 pages, which should make clear everything.
Unfortunately I see no way here to upload this file. Can you please tell me how I can send you my sample .xar.

Kind regards
Erwin

Erwin, you need to Post a reply and click on the Go Advanced button; there is an attachment icon.

Acorn

Found it, hopefully it works.

Erwin, it works.

I understand now that you are in the Product page and you want to read more about one or more of its Features without losing the ability to go back to the same Product and possibly view another Feature.

For exaggeration, say you have a total of 100 Features across the complete Family and some Products have 10 to 20 from these as different subsets.

I suggest the correct approach is to have the 100 Features as 100 pages - feature001 through to feature100.

Each has a Back Button.

The index page has a summary of all 100 Features as Links to each one.
This could be a 10 x 10 grid of images or labels so would be quite small.
The Product pages have similar images or text Links for their subset of Features.

So you click forward into a Feature and you Back link from a Feature to the calling page.

If you think you need to see all the Features together then you create the Features as a Scrolling website.
This is published into the same folder as your main site but the links would require more work.
You would add your bookmarks to the top of each page or use the Heading links or normal bookmarks to images.
Each page has a Sticky Back Button.

The viewer clicks a Feature Link in the main site and is taken to the bookmark in the features website.
They can read top to bottom or just that page. Regardless of where they are, a click on the Back Button returns them to exactly where they clicked from.

There is no need to hide the Back Button at any point.
If someone has bookmarked a features page then you might need a Products Family (index) Link as well.

Acorn

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

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

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.

Attachment 132508

Acorn

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.

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

@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

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

Quote:

---

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.

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

Quote:

---

Originally Posted by Egg Bramhill

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

Quote:

---

Originally Posted by 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

-----------

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

---

Erwin, it will take a bit of time to check over things but I will get back when I can.

Acorn

Hi Acorn,

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();

it´s interesting too.

I modified the [back button] from "javascript: window.history.back();" to a [close-button] and tried with "javascript: window.close();" works.

Kind regards
Erwin

Quote:

---

Originally Posted by zawadil

Hi Acorn,

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();

it´s interesting too.

I modified the [back button] from "javascript: window.history.back();" to a [close-button] and tried with "javascript: window.close();" works.

Kind regards
Erwin

---

Erwin, thank you for advising.
This would be my preference as it is generally the cleanest and simplest.

Acorn

I tried to get my head round this 'challenge' and started with a simple table; may not be accurate, but looks at product families, series and feature groups. The latter is important because it reduces (I think) the complexity.

Attachment 132514

There are here only three feature groups, (f1,f2,f3 & f4), (f1,f2,& f3) and (f1 & f2) - similar to Egg, one can create feature group pages which can be called from anywhere through a popup that contains a sticky iframe (which then presents the feature group).

The back-button concept could still be applied, but the features group that corresponds to the family/series/product would always be available from the top menu bar (which would be sticky).

Attachment 132515

In this example the placeholder height is shorter than the incoming features page and the visitor can simply scroll up and down to view the applicable features without the leaving the page being viewed.

Different approach maybe? Attachment 132516

Yes, that's a great method too Gary. It's a fun challenge and interesting how it can be approached by individuals.

Hi Initiostar,
thank you for this idea, which gives me another option to simplify the design, not even with less windows/ layers but also with the opporunity to use a format for the Feature-Window, which fits for 960px and 480px as well.
Maybe I will combine it with Ancor´s semi-modal approach
Kind regards
Erwin

Erwin, I think the need for coding a back() has greatly receded with the range of examples you now have.
Keeping code to a minimum is probably for the best.

I do like the Sticky pop-up of all relevant Features, but it might become too tall and require a vertical scrollbar.
You may be able to get round this by adding Sticky buttons to scroll to the top of each Feature Placeholder.

The advantage of the semi-modal window is it can be moved around and out of the way or closed when not needed.
It gives a bit more control to the viewer.

Do come back with further questions and I think we would like to see the finished design/site sometime.

Acorn

I thank for all contributions and will post the final URL after finishing.
Kind regards
Erwin

Hi Acorn,

I played around with the various suggestions we already discussed. By the end I was not really happy as every version has some disadvantages as well. Your last suggestion with independet windows was my favorite but it gave me less controll of the positioning specially im a combined 960/480px (desktop/mobile) version. Therefor I started to play around using iframes with a single placeholder. Generally this works great as long as I just have a 960px version > see my sample file "iframe_ph2.xar". From this point I have just added a 480px version (see "iframe_ph2b.xar" and strange things happens.

1) the iframe size changes in both version, which means, 960px alone (iframe_ph2.xar), just has the vertical scroll bar, whereas the combined 960/480px version (iframe_ph2b.xar) shows a horizontal scroll bar too and I cannot find any reason for this.
2) On the top of the popup I do have the links to jump directly to a specific iframe (feature) and additionally a <forward> and <back> navigation within the iframes. With the 960px only version (iframe_ph2.xar) both works fine. With the combined 960/480px version (iframe_ph2b.xar), the links on the top of the popup stopped working, although the <forward> and <back> navigation within the iframe is still working.

This is very strange, as described, I have changed nothing. I finished the 960px version (iframe_ph2.xar) and everything is fine. I used the option in Xara to add the 480px format to this few pages. The program generated all the pages and I just corrected some text blocks to fit, nothing more.

The effect is reversibel, which means if you take the combined 960/480px version (iframe_ph2b.xar) and delete the 480px format, everything becomes fine again,

I´m going round circles and I hope you can tell me, if it´s a buck of a feature ;.) and maybe you know a workaround too.

Kind regad
Erwin

Edwin, you have to change your Placeholder code for width to 100%; I would do the samee for height.
The Yellow Placeholder then defines the size of the IFRAME.

In Main you make the Yellow Placeholder wider.
In Main, you then make the page widths wider to ensure the code knows to switch to the right Placeholder.

I would include Scale to Fit Width at 1280px.

Finally the start/Relaibility/Connectivity links in the variant are failing as the Placeholder name needs to be different.

Acorn