Geek Answers Handbook

Hide the plus button after clicking

I want to hide the google +1 button after the user clicks on it using jQuery; this is the code i am using but it seems like it is not working properly:

JS:

$(function() { $("#button").click(function() { $(".HIDE").hide(); }); return false; });

HTML:

 <div class="HIDE"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="small" class="plusone"></g:plusone> </div>
+4
source share
4 answers

Use the + 1 tag callback parameter to trigger the hide function. This is probably the best way to select the +1 button, but this works for the purpose of demonstration.

 <g:plusone size="tall" callback="poHide"></g:plusone> <script src="http://apis.google.com/js/plusone.js"></script> <script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>

Demo: jsfiddle.net/Gju6T

+3
source

I think this is what you need, but put it at the end of your page just above </body>

 $('g\\:plusone').live('click',function (){ $(this).remove(); });

ELSE try this ...

 $('iframe').contents().find('#plusone').live('click',function (){ $(this).remove(); });

orrr

 <script> function mycall(str){ console.log(str); //$(str).hide();//??? } </script> <g:plusone size="small" class="plusone" callback="mycall"></g:plusone>
0
source

You might want to try the equivalent HTML5 syntax:

 <div class="g-plusone" data-size="standard" data-count="true"></div>

In general, rendered HTML will be considered.

0
source

The button is displayed in an iframe to which you do not have access. The <g:plusone> is replaced with JS with an iframe, and you cannot watch this button through jQuery, for example, using live () or bind (). You should use the button API, which can be found here . There you will find the callback option, which you can use as follows:

 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {"parsetags": "explicit"} </script> <script type="text/javascript"> // Call the API method after the page loaded $(document).ready(function() { gapi.plusone.render("HIDE", {"size": "standard", "count": "true", "callback" : "hideTheButton"}); }); // Method to remove the element function hideTheButton() { $("#HIDE").hide(); } </script> <div id="HIDE"> <g:plusone></g:plusone> </div>
0
source

More articles:


All Articles