Highlighted

Move Play Icon in HTML

Explorer ,
Mar 03, 2020

Copy link to clipboard

Copied

I dislike the limitations to make a nice start page in HTML. It has been helpful that the support group has helped in making changes to the Play Icon and to get rid of the dimming, but is there a way to move the Play Icon? As it is now, it is in the middle of the page, not very nice on top of many illustrations. I would prefer it in the lower right corner. Does anybody know how to move it?

Thanks.

Jan

Topics

Advanced

Views

555

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

Move Play Icon in HTML

Explorer ,
Mar 03, 2020

Copy link to clipboard

Copied

I dislike the limitations to make a nice start page in HTML. It has been helpful that the support group has helped in making changes to the Play Icon and to get rid of the dimming, but is there a way to move the Play Icon? As it is now, it is in the middle of the page, not very nice on top of many illustrations. I would prefer it in the lower right corner. Does anybody know how to move it?

Thanks.

Jan

Topics

Advanced

Views

556

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
Advocate ,
Mar 03, 2020

Copy link to clipboard

Copied

You could do this by adding a few lines of code to the index.html file. Feel free to play with the pixel values to position it however you desire based on the size of your project. Below is an example.

This would need to be inserted at line 96 just after the  cp.init();  on line 95 making your line 99 become   initialized = true;

Change nothing that is already there - simply insert these lines only.

    $(document).ready(function() {
        $("#playImage").animate({left: "+=450px", top: "+=250px"});
    });

 

 

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...
Explorer ,
Mar 04, 2020

Copy link to clipboard

Copied

Thanks. That was great, it worked perfectly and will make my start pages much better.

Jan

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...
Explorer ,
Mar 07, 2020

Copy link to clipboard

Copied

Hi again

An unexpected problem was that when I added the code mentioned and started the program, the background picture has disappeared.

It     works find with the illustration when the program is started as it is generated, with the icon in the middle, but when I add the code, I see theicon in the middle moving down to the right bottom and no picture.

It's a pity, since I was very happt with the code, moving the icon to a more suitable place. Hope uou can help.

Kind regards

Han

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...
Advocate ,
Mar 09, 2020

Copy link to clipboard

Copied

Hmm... saw your post and tested this with a poster image and my image was still visible.

My initial thought is that the published file is not "finding" your poster image.

 

Did you move the image?

Is there a typo in the file path?

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...
Adobe Community Professional ,
Mar 07, 2020

Copy link to clipboard

Copied

Another great example of your skills Greg. I love this. I just added this to my eLearning toolbelt. You should have a YouTube channel about stuff like this. Thank you.

Paul Wilson, CTDP | https://captivateteacher.com

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...
Advocate ,
Mar 09, 2020

Copy link to clipboard

Copied

Thanks, Paul.

I only thought of this in response to the question.

It is one of the reasons I enjoy being a part of the community - the questions that come in allow me to think creatively about many things that have never crossed my mind before.

You may already be aware of my displeasure of the play button as a whole.

I personally choose to bypass the play button altogether in my own projects.

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...
Explorer ,
Mar 11, 2020

Copy link to clipboard

Copied

Hi

Thank you for your answer. The error is strange, but has obviously nothing to do with your code, it works fine.

After publishing the HTML file and clicking the Play icon, I sometimes get a blank screen, but after trying a few times, it works normally. This happens before inserting your code and after. Then I see the play icon in the middle for a second before it moves down to the right.

You mention that you bypass the Play button in your own projects. How do you do that?  I find this system with a Start page with a fixed play and a dimmed picture on the start page as very strange in a modern program. I am not a regular user, but use Captivate now and then and find this very annoying and it should be quite easy to offer a better solution.

Anyway thanks to you and Paul that told me how the change the Play icon and someone else that told me how to remove the dimming – changing the opacity, and you with the solution on how to move the icon, everything works better with a bit of work.

Back to my question. How can I bypass the play button. I thought og solution of making a large, invisible button that cover the whole page. Is that possible.

Anyaay, thanks for your help. It is people like you that makes it a lot easier to create new programs.

Jan

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...
Advocate ,
Mar 11, 2020

Copy link to clipboard

Copied

To bypass the play button, review this thread.

 

Bypass Play Button 

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...
Explorer ,
Mar 12, 2020

Copy link to clipboard

Copied

Thanks a lot. I watched the video and it was worth every second. Now my users can go directly to wjat it's all about and I don't have to stress with dimmed picture. play icon and so on.

Thanks again - it was a a very clear instruction on how to make life easier for Vaptivate programmers.

Jan

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...
Resources
Captivate User Guide
New Group