Move Play Icon in HTML

[jann52725068]

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

[Stagprime]

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"});
    });

[jann52725068]

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

Jan

[jann52725068]

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

[Stagprime]

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?

[Paul Wilson CTDP]

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.

[Stagprime]

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.

[jann52725068]

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

[Stagprime]

To bypass the play button, review this thread.

Bypass Play Button 

[jann52725068]

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

[Jacob Hokland]

Well... the other init solution apparently do not work anymore ... 

But have you tried the 'move trick' with a scalable project? For me the play icon jumps back to the middle as sone as I make my browser window bigger.

/Jacob

/Jacob

/Jacob

[mauriceford@usa.net]

Best snippet of code I've seen all year, Worked perfectly!!!!!!!! 

Thank You!!!!!!!