anno.js - how to custom button in anno.js

Question

I downloaded a plugin called anno.js few days a go, I dont really good in js code. I want to custom a built-in button in this plugin. Is there anyone ever do this before?

All I want to do is to custom this Skip button

become this one

this is my js code

var anno8 = new Anno([{
        target: '.guides',
        position: 'left',
        content: "Add another app or manage existing ones by going to <b>‘My Applications’</b> through this menu button",
        buttons:[{
            text:'Skip',
            click: function(anno,evt){
                anno.hide();
                //$('#dialog').modal('show');
            }
        },AnnoButton.NextButton]

l.g.karolos · Accepted Answer · 2017-11-01T11:23:03.750

2

If you edit the .anno-btn class you will edit all the buttons. You have to add a specific classname to your button so you can then select it through css.

var intro =   new Anno([
              { 
                ...
                buttons:[{
                text:'Skip',
                className: 'anno-btn-skip',
                }]
                ...
              },
            ]);

I would suggest selecting the button with the specific text you want .

$('document').ready(function(){
        var intro =   new Anno([
              { 
                target:'#first',
                content: "Hello world!",
                buttons:[{
                text:'Skip',
                className: 'anno-btn-skip',
                }]
              },
            ]);
      $('#clickMe').on('click',function(e){
        intro.show();
      });
});

.element{
  height:100px;
  width:100px;
  border:2px solid green;
  margin:0px auto;
}

.anno-btn-container > .anno-btn-skip {    
    background-color: white!important;
    color: #0d7fad!important;
    border: 1px solid #0d7fad!important;
    border-radius: 0.6em!important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://rawgit.com/iamdanfox/anno.js/gh-pages/dist/anno.js" type="text/javascript"></script>
<script src="https://rawgit.com/litera/jquery-scrollintoview/master/jquery.scrollintoview.js" type="text/javascript"></script>

<link href="https://rawgit.com/iamdanfox/anno.js/gh-pages/dist/anno.css" rel="stylesheet" type="text/css" />

    <div id="first" class="first element">First Element</div>
    <a href="#" type="button" id="clickMe">ClickMe</a>

edited Nov 01 '17 at 11:23

answered Nov 01 '17 at 09:07

l.g.karolos

1,131
1
10
25

how to add extra class to skip button, because if I inspect them, all button have same class – ronydavid Nov 01 '17 at 09:38
That's why I am selecting only the `skip` button and not all the `.anno-btn` – l.g.karolos Nov 01 '17 at 09:40
this is their html tag if I inspect them – ronydavid Nov 01 '17 at 09:45
For the last time check my answer . I am not selecting `.anno-btn` I am selecting the `button` with class `.anno-btn` AND text `skip` – l.g.karolos Nov 01 '17 at 09:51
Im sorry, but if you use .skip not means 'skip' text, but another class called skip https://stackoverflow.com/questions/2554839/select-element-based-on-multiple-classes cmiiw. – ronydavid Nov 01 '17 at 10:08
Ofcourse I am sorry I thought you already inlucded the class inside anno Check my edited answer – l.g.karolos Nov 01 '17 at 11:19
dang, solved, thank you very much, Ive marked your question, this is perfect – ronydavid Nov 02 '17 at 02:44

score 0 · Answer 2 · answered Nov 01 '17 at 09:05

0

Anon.js has its css file. You either edit the css directly or create yours

.anno-btn {
//define your styles here
}

answered Nov 01 '17 at 09:05

Samuel James

1,528
16
15

I see, so how to add extra class to skip? – ronydavid Nov 01 '17 at 09:40

anno.js - how to custom button in anno.js

2 Answers2