Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly appreciated. Thanks.
----UPDATE----
Adding this script seems to be causing the problem:
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
and
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
----UPDATE END----
Below is the code snippet:
(function($) {
var win = null;
$.fn.tweetAction = function(options, callback) {
// Default parameters of the tweet popup:
options = $.extend({
url: window.location.href
}, options);
return this.click(function(e) {
if (win) {
e.preventDefault();
return;
}
var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;
var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');
win = window.open('http://twitter.com/intent/tweet?' + $.param(options),
'TweetWindow', config);
(function checkWindow() {
try {
if (!win || win.closed) {
throw "Closed!";
} else {
setTimeout(checkWindow, 100);
}
} catch (e) {
win = null;
callback();
}
})();
e.preventDefault();
});
};
})(jQuery);
$(document).ready(function() {
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
}, function() {
$('hidden-text')
.show();
$(".hidden-text").removeClass("hidden-text");
});
});
$(document).ready(function() {
$("p").click(function() {
$(this).hide("slow");
});
});.hidden-text {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tweet to show content.
<a href="https://twitter.com/intent/tweet?screen_name=your_twitter" class="twitter-mention-button" id="tweetLink" data-show-count="false">Tweet to @your_twitter</a>
</p>
<p class="hidden-text">thank you for tweeting !</p>UPDATE Optimized some javascript
$(document).ready(function () {
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
}, function () {
$('hidden-text')
.show("slow");
$(".hidden-text").removeClass("hidden-text");
$("#hide-me").hide("slow");
});
});
UPDATE 3
After checking the console, I noticed an error message:
Uncaught TypeError: $(...).tweetAction is not a function
Also, I updated the JQuery CDN, but now when clicking on "Tweet to @your_twitter," it changes the URL in the same window instead of opening a new one. Any suggestions on how to fix this?
Solved
I had to remove some CDNs
<link href="https://get.gridsetapp.com/35679/" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<!--<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>-->
<!--<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>-->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>-->