How to hide the button after clicking

andalousy · Feb 12, 2015

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

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

thanks in advance

skype andalousy47

DanDanger · Feb 12, 2015

<a href="#" onclick="this.style.display='none'">

<a href="#" onclick="toggle_visibility('g-ytsubscribe');">

I would try those.

andalousy · Feb 12, 2015

thanks man but that didn't work

moanon · Feb 12, 2015

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.

moanon · Feb 12, 2015

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';
  }
}

Gogol · Feb 12, 2015

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

andalousy · Feb 12, 2015

guys none of them workd

Debugger · Feb 12, 2015

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>

SimonRohde · Feb 12, 2015

<div onclick="display='none'">

This should work.

Megha120 · Feb 12, 2015

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.

Debugger · Feb 12, 2015

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

lightning37 · Feb 12, 2015

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

andalousy · Feb 12, 2015

Debugger said:
Ok try this one

Code:

<!DOCTYPE><html> <head> <script src="****//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:

*******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

did you test it cos i does nothing

andalousy · Feb 12, 2015

the whole idea is to make that button disappears after clicking
by any way

andalousy · Feb 12, 2015

lightning37 said:
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

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

lightning37 · Feb 12, 2015

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?

andalousy · Feb 12, 2015

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 .

lightning37 · Feb 12, 2015

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).

andalousy · Feb 12, 2015

lightning37 said:
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 man for your great help

still need that function

Debugger · Feb 13, 2015

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>

How to hide the button after clicking

Registered Member

Junior Member

Registered Member

Registered Member

Registered Member

Elite Member

Registered Member

Junior Member

Regular Member

Junior Member

Junior Member

Newbie

Registered Member

Registered Member

Registered Member

Newbie

Registered Member

Newbie

Registered Member

Junior Member

Main Menu

Marketplace

Making Money

BlackHatWorld

Other