1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to hide the button after clicking

Discussion in 'HTML & JavaScript' started by andalousy, Feb 12, 2015.

  1. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    i got a problem with YT button

    i want this button to disappears after clicking
    this is all what i have done till now

    code
    HTML:
    <head>
    <script src="****//apis.google.com/js/platform.js"></script>
    <script type="text/javascript">
    <!--
    function resettoggle() {
    var e = document.getElementById('channelid');
    e.style.display = 'block';
    }
    
    function toggle_visibility(class) {
    var e = document.getElementById(class);
    if(e.style.display == 'block')
    e.style.display = 'none';
    else
    e.style.display = 'block';
    }
    //-->
    </script>
    </head>
    <body onLoad="resettoggle()">
    <a href="#" onclick="toggle_visibility('channelid');">
    <div class="g-ytsubscribe"  data-channelid="channelid" data-layout="default" data-count="hidden"></div>
    </a>
    </body>
    this is the origenal code of YT button
    HTML:
    <script src="****//apis.google.com/js/platform.js"></script>
    
    <div class="g-ytsubscribe" data-channelid="channelid" data-layout="default" data-count="hidden"></div>
    button picture
    Capture.PNG

    i can give PP 5$ to any one can make that code works

    thanks in advance

    skype andalousy47
     
    Last edited: Feb 12, 2015
  2. DanDanger

    DanDanger Junior Member

    Joined:
    Nov 11, 2010
    Messages:
    129
    Likes Received:
    148

    I would try those.
     
  3. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    thanks man but that didn't work
     
  4. moanon

    moanon Registered Member

    Joined:
    Aug 30, 2014
    Messages:
    92
    Likes Received:
    37
    Location:
    near Vienna, Austria
    Hi,

    The first problem you should look at is that you use the js function getElementById() but there isn't even an element with an id.
    Can you change the code for the button? If yes just add an id, change the id parameter in the getElementById() function and it should be working (maybe change the param name of toggle_visibility(class) to id).
    If not try the js functions getElementsByClassName() or querySelector().
    If you need further assistence I can give you a few more tips but it's not too easy to say something with this little bit of code, i guess thats not the whole page ;)
    Easiest way would be to just write the this.style.display='none' directly into the onclick handler like DanDanger said, but I'm not sure at the moment if this will work and it's not the cleanest way, don't know if you care about this.
     
  5. moanon

    moanon Registered Member

    Joined:
    Aug 30, 2014
    Messages:
    92
    Likes Received:
    37
    Location:
    near Vienna, Austria
    you could also pass the element to the function like this:
    HTML:
    <a href="#" onclick="toggle_visibility(this);">
    and change the function like this:
    Code:
    function toggle_visibility(e) {
      if(e.style.display == 'block') {
        e.style.display = 'none';
      } else {
        e.style.display = 'block';
      }
    }
    
     
  6. Gogol

    Gogol Jr. VIP Jr. VIP

    Joined:
    Sep 10, 2010
    Messages:
    3,476
    Likes Received:
    3,103
    Gender:
    Male
    getElementById will not work with class selectors. It is for ID selectors..
    If you have jquery, it will be easier to select.. but considering you don't

    Try this :

    Code:
    
    <script src="****//apis.google.com/js/platform.js"></script>
    
    <div class="g-ytsubscribe" data-channelid="channelid" data-layout="default" data-count="hidden"></div>
    
    var myEl = document.getElementsByClassName('g-ytsubscribe');
    var myEl = myEl[0];
    
    
    myEl.addEventListener('click', function() {
        this.style.display = 'none';
    }, false);
    
     
  7. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    guys none of them workd
     
  8. Debugger

    Debugger Junior Member

    Joined:
    Aug 16, 2009
    Messages:
    174
    Likes Received:
    34
    Location:
    India
    Code:
    <!DOCTYPE html><html>
    <head>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
    </head>
    <body>
    <div class="g-ytsubscribe" data-channelid="channelid" data-layout="default" data-count="hidden">
    <input type="image" src="Capture.PNG" alt="Submit">  //this is your img button
    </div>
    <script>
    var ytbutton = $(":input");
    ytbutton.on("click",function()
    {
    $(":input").addClass("hide");
    }
    );
    </script>
    </body>
    </html>
     
  9. SimonRohde

    SimonRohde Regular Member

    Joined:
    Mar 28, 2013
    Messages:
    208
    Likes Received:
    31
    <div onclick="display='none'">

    This should work.
     
  10. Megha120

    Megha120 Junior Member

    Joined:
    Aug 13, 2014
    Messages:
    140
    Likes Received:
    6
    Using classes is a great way. i would do the same. If this is not what are you looking for contact me private message and i will do it for you.
     
    • Thanks Thanks x 1
  11. Debugger

    Debugger Junior Member

    Joined:
    Aug 16, 2009
    Messages:
    174
    Likes Received:
    34
    Location:
    India
    Ok try this one

    Code:
    <!DOCTYPE><html>
    <head>
     <script src="https://apis.google.com/js/platform.js"></script>
    </head>
    <body>
    <script>
      function onYtEvent(payload) {
        if (payload.eventType == 'subscribe') {
          document.getElementById("divIdtohide").style.display = 'block';;
        } else if (payload.eventType == 'unsubscribe') {
          // Add code to handle unsubscribe event.
        }
        if (window.console) { // for debugging only
          window.console.log('YT event: ', payload);
        }
      }
     
    </script>
    <div class="g-ytsubscribe"  data-channel="GoogleDevelopers" data-onytevent="onYtEvent" id="divIdtohide"></div>
    </body>
    </html>
    here put name of your function which will be called on click.Use platform.js internal button click event , data-onytevent="onYtEvent".put id in div element .

    if (payload.eventType == 'subscribe') {} here put whatever type of payload .

    reference :
    Code:
    https://developers.google.com/youtube/youtube_subscribe_button
    I also notice that Script should be loaded in head at first then any script inside body but before your div element for platform.js to load stuff in iframe.

    regards
     
    • Thanks Thanks x 1
  12. lightning37

    lightning37 Newbie

    Joined:
    Dec 12, 2014
    Messages:
    21
    Likes Received:
    4
    I can not see any reason that g0g0l's code shouldn't be working, but I went ahead and set up a CodePen with a slight variation.

    hxxp://codepen.io/techsock/pen/pvaoYR
     
    • Thanks Thanks x 1
  13. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    did you test it cos i does nothing
     
  14. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    the whole idea is to make that button disappears after clicking
    by any way
     
  15. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    the imag will not appear when u change the word 'channelid' with the YT Channel ID

    +

    we need to make sure that the user subscribes before closing the button
     
  16. lightning37

    lightning37 Newbie

    Joined:
    Dec 12, 2014
    Messages:
    21
    Likes Received:
    4
    andalousy,
    The channelid issue was from me copy and pasting your code. I thought you were just going to be using images for the button not actually using google's api to generate specific buttons. The script will need quite a bit of changing to work with the iframes generated by the google api. What site will you be showing these on?
     
    • Thanks Thanks x 1
  17. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco
    some of my sites including this ones w**.**** w**.***** and more
    the button is exactly as you said (generated by google's api)
    i realy tried hard to make this work
    but no success


    any other ideas .
     
    Last edited: Feb 13, 2015
  18. lightning37

    lightning37 Newbie

    Joined:
    Dec 12, 2014
    Messages:
    21
    Likes Received:
    4
    Google built the "data-onytevent" attribute into the subscribe button to call another function on subscribe or unsubscribe event, but there are many reports of it not working(hxxps://code.google.com/p/gdata-issues/issues/detail?id=5707). If the ability to call a function on those events is restored, we may be able to accomplish what you requested. Until then, the closest solution would be to use a static image and request a subscription through a url. (I have that part done - hxxp://codepen.io/techsock/pen/pvaoYR) You might be able to then check and see if a user is subscribed by using the Google API(hxxps://developers.google.com/youtube/2.0/developers_guide_protocol#Retrieving_subscriptions).
     
    • Thanks Thanks x 1
  19. andalousy

    andalousy Newbie

    Joined:
    Sep 2, 2014
    Messages:
    45
    Likes Received:
    5
    Location:
    Morocco

    thanks man for your great help

    still need that function
     
  20. Debugger

    Debugger Junior Member

    Joined:
    Aug 16, 2009
    Messages:
    174
    Likes Received:
    34
    Location:
    India
    if whole point is to make button disappear on click event use jquery man.Just add jquery to webpage and try this one.

    Code:
    <!DOCTYPE><html><head>
     <script src="https://apis.google.com/js/platform.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
    </head>
    <body>
    <div class="g-ytsubscribe" id="divIdtohide" data-channel="GoogleDevelopers" data-onytevent="onYtEvent" ></div>
    
    
    <script>
    var ytbutton = $("#divIdtohide");
    ytbutton.on("click",function()
    {
    $("#divIdtohide").addClass("hide");
    }
    );
    </script>
    </body>
    </html>