Highlighted

Navigation between two Captivate projects (stop a page from reloading?)

Engaged ,
Sep 24, 2018

Copy link to clipboard

Copied

I'm working in Captivate 2017 in a non-responsive project. I have multiple projects that I'd like to 'link' together, which I've been able to do using my custom next and back navigation buttons built in Adobe Animate. The code for loading up a new project looks like this -

window.parent.window.location.href("https:/www.urlfornextpagehere/index.html");

(If you know a better piece of code for doing this, please let me know, I'm new to javascript).

This works well for loading up the next project, however for going back to a previous project (the goal is for users to have complete navigational control going back and forth as much as they want), I've used the same method, but I want the "previous" course to open up to it's last slide, so that it feels more fluid (even though the lack of autoplay allowed in browsers kind of kills the fluidity, not much I can do about that). So I've used a # at the end of the URL to identify when the users is clicking backwards in the project. Something like this -

window.parent.window.location.href("https://www.urlforpreviouspagehere/index.html#load-stuff");

Then on the first slide of the previous project I have some code -

function pageLoad(){

if (window.location.hash === "#load-stuff") {

// jump to last slide

window.cpCmndGotoSlide = 21;

}

}

pageLoad();

This sends the user to the last slide. The issue now is that the #load-stuff is still on the end of the URL, so now if the user goes through the Table of Contents and navigates to the first slide of that project, they will be sent to the last slide of it instead.

I've tried clearing out the #load-stuff tag when reaching the last slide of the project, by adding this to the final slide -

function getRidHash(){

window.location.href = location.href.replace(location.hash, "");

}

getRidHash();

Which does clear the tag, however, then the page reloads entirely without the tag and returns back to the first slide.

Is anyone familiar with a better method for accomplishing this? Or is there a way I can stop the page from refreshing after executing my code on the last slide?

I did try adding window.stop(); to my code, but then it doesn't complete loading all the web objects I have on the slides (some web objects I just place on the first slide and then set to last for the rest of the project).

Any advice is much appreciated. 

If anyone comes across this thread with the same/similar issue -

I was able to solve it by changing my function on the first slide of the previous module to:

function pageLoad(){

if (window.location.hash === "#load-stuff" && cpInfoLastVisitedSlide ==0) {

// jump to last slide

window.cpCmndGotoSlide = 21;

}

}

pageLoad();

This way it will run when you go back to the previous project URL, but it won't run again when trying to navigate within the previous project.

Hope that's helpful!

** also note that window.location.href("urlhere"); doesnt work,

need to use window.location.assign("urlhere");

Views

73

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Navigation between two Captivate projects (stop a page from reloading?)

Engaged ,
Sep 24, 2018

Copy link to clipboard

Copied

I'm working in Captivate 2017 in a non-responsive project. I have multiple projects that I'd like to 'link' together, which I've been able to do using my custom next and back navigation buttons built in Adobe Animate. The code for loading up a new project looks like this -

window.parent.window.location.href("https:/www.urlfornextpagehere/index.html");

(If you know a better piece of code for doing this, please let me know, I'm new to javascript).

This works well for loading up the next project, however for going back to a previous project (the goal is for users to have complete navigational control going back and forth as much as they want), I've used the same method, but I want the "previous" course to open up to it's last slide, so that it feels more fluid (even though the lack of autoplay allowed in browsers kind of kills the fluidity, not much I can do about that). So I've used a # at the end of the URL to identify when the users is clicking backwards in the project. Something like this -

window.parent.window.location.href("https://www.urlforpreviouspagehere/index.html#load-stuff");

Then on the first slide of the previous project I have some code -

function pageLoad(){

if (window.location.hash === "#load-stuff") {

// jump to last slide

window.cpCmndGotoSlide = 21;

}

}

pageLoad();

This sends the user to the last slide. The issue now is that the #load-stuff is still on the end of the URL, so now if the user goes through the Table of Contents and navigates to the first slide of that project, they will be sent to the last slide of it instead.

I've tried clearing out the #load-stuff tag when reaching the last slide of the project, by adding this to the final slide -

function getRidHash(){

window.location.href = location.href.replace(location.hash, "");

}

getRidHash();

Which does clear the tag, however, then the page reloads entirely without the tag and returns back to the first slide.

Is anyone familiar with a better method for accomplishing this? Or is there a way I can stop the page from refreshing after executing my code on the last slide?

I did try adding window.stop(); to my code, but then it doesn't complete loading all the web objects I have on the slides (some web objects I just place on the first slide and then set to last for the rest of the project).

Any advice is much appreciated. 

If anyone comes across this thread with the same/similar issue -

I was able to solve it by changing my function on the first slide of the previous module to:

function pageLoad(){

if (window.location.hash === "#load-stuff" && cpInfoLastVisitedSlide ==0) {

// jump to last slide

window.cpCmndGotoSlide = 21;

}

}

pageLoad();

This way it will run when you go back to the previous project URL, but it won't run again when trying to navigate within the previous project.

Hope that's helpful!

** also note that window.location.href("urlhere"); doesnt work,

need to use window.location.assign("urlhere");

Views

74

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2018 0
Engaged ,
Sep 25, 2018

Copy link to clipboard

Copied

If anyone comes across this thread with the same/similar issue -

I was able to solve it by changing my function on the first slide of the previous module to:

function pageLoad(){

if (window.location.hash === "#load-stuff" && cpInfoLastVisitedSlide ==0) {

// jump to last slide

window.cpCmndGotoSlide = 21;

}

}

pageLoad();

This way it will run when you go back to the previous project URL, but it won't run again when trying to navigate within the previous project.

Hope that's helpful!

** also note that window.location.href("urlhere"); doesnt work,

need to use window.location.assign("urlhere");

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2018 0