We Keep Coding

Show and hide content once tweet

I am working on a way to hide the twitter button once clicked on show new content, I thought I had it working but its still not. I am not sure why if someone could point out my mistake that would help.
Thanks.
----UPDATE----
its when I add this script it stops working
<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----
Here's the code:
(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) {
// If a popup window is already shown,
// do nothing;
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(',');
// Opening a popup window pointing to the twitter intent API:
win = window.open('http://twitter.com/intent/tweet?' + $.param(options),
'TweetWindow', config);
// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {
try {
// Opera raises a security exception, so we
// need to put this code in a try/catch:
if (!win || win.closed) {
throw "Closed!";
} else {
setTimeout(checkWindow, 100);
}
} catch (e) {
// Executing the callback, passed
// as an argument to the plugin.
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.
Tweet to #your_twitter
</p>
<p class="hidden-text">thank you for tweeting !</p>
UPDATE
Optimised some js
$(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
Ok looking at the console I seem to be getting error
Uncaught TypeError: $(...).tweetAction is not a function
I have updated my Jquery CDN, when i click on Tweet to #your_twitter it now dose not open in a new window but changes the url in the same window. any ideas ?
Solved
I had to remove some CDN's
<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>-->

If it stops working when you add these scripts, add the scripts one by one and check your js console for errors. This should give you the hints to know where to search for the error.
Also check if those libraries are not loaded twice. If you've already loaded another jQuery library e.g., it will not work.

I see two syntax here but they don't have to do with your problem.
<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><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> <!--Closing the tag-->
$('.hidden-text').show(); //class picker

Jquery 2 scripts aren't cooperating

I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.

This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.

ReferenceError: jQuery is not defined (Metis Theme Template)

I'm new using jQuery and I'd like to get a little bit of help with this.
I'm trying to test a theme template and the following jQuery code is trouble me (this code is for default):
<!--jQuery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('.list-inline li > a').click(function() {
var activeForm = $(this).attr('href') + ' > form';
//console.log(activeForm);
$(activeForm).addClass('animated fadeIn');
//set timer to 1 seconds, after that, unload the animate animation
setTimeout(function() {
$(activeForm).removeClass('animated fadeIn');
}, 1000);
});
});
})(jQuery);
and I'm always getting the same error:
ReferenceError: jQuery is not defined
})(jQuery);
Do you have any idea? This code is from a theme template (Metis Bootstrap Admin Template).

The CDN url of jQuery library is not working.
Use:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
// ^^^^^^

If you are using it from local, specify the protocol:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

WordPress Blink Codes Doesn't Work

I use codes with blink;
Jquery;
<script type="text/javascript">
var blink = function(){
$('#blinker').toggle();
};
$(document).ready(function() {
setInterval(blink, 100);
});
</script>
Page;
[full_column align="center"][su_button url="#basvuru" class="fancybox" background="#b21f30" size="6"] <div id="blinker">ÜCRETSİZ PROGRAMA BAŞVUR</div>[/su_button][/full_column]
Website: www.varsiteam.com

Try with :
<script type="text/javascript">
$(document).ready(function() {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
</script>
If you look at console you will see this error:
Uncaught TypeError: undefined is not a function
To fix that you have to put your function inside of $(document).ready event. When you call $('#blinker').toggle(); it tries to use jQuery object which is undefined if you not put it in $(document).ready event. That is how jQuery works.

When you're working in WordPress, jQuery is loaded in a no-conflict mode.
So, you'll need to use jQuery and not $.
Your code should be:
var blink = function(){
jQuery('#blinker').toggle();
};
Or if you want to wrap everything in your document ready event:
jQuery(document).ready(function($) {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});

Using Firebug debugger to solve script conflict

My page was working perfectly and suddenly, the hero image is not loading and I am seeing an error message in the console "ReferenceError: imagesLoaded is not defined" on wine-cheese.js, which is preceeded by another error "Error: multipleDefine" on dojo.js. I have not changed the files since the content launched 6 weeks ago.
Some external developers have been doing some work on the site and I believe they have introduced a conflict. But I am stumped as to how to figure it out. I tried setting breakpoints in Firebug but that isn't helping me because I'm not really sure what I'm doing. All of the tutorials I find about how to use the debugger focus on one script within a page rather than debugging a page that is part of a CMS and merged with many other scripts you have no control over.
When I check the content locally, everything works OK (I used absolute links to reference all the scripts and files to be sure they are actually on the server), so I think there is a conflict with dojo, or maybe even something else.
I have been trying to figure this out all day and feel like I am going in circles.
Any help or advice would be much appreciated. The page in question is here.
Here is the code in the javascript file that causes the error. The site I work on has jQuery 1.3.2 so we have to use noConflict to run a newer library in parallel (hence the jwc)
$.fn.tabs = function() {
return this.each(function() {
var $el = $(this);
var $panels = $el.find('> div');
var $tabs = $el.find('> ul a');
$tabs.click(function() {
setTimeout(function() {
if (window.location.hash) {
window.scrollTo(0, 489);
}
}, 1);
$tabs.removeClass('active');
$(this).addClass('active');
$panels.fadeOut(250);
$panels.filter(this.hash).animate({
opacity:1},
250, 'linear', function(){
$(this).show();
});
animateHeader(this.hash);
//window.location.hash = this.hash;
//return false;
});
if(window.location.hash != 'undefined' && window.location.hash != '') {
//alert(window.location.hash);
tabId = '[href*="' + window.location.hash + '"]';
$tabs.filter(tabId).click();
} else {
$tabs.filter('[href*="#party-tips"]').click();
}
});
};
jQuery.easing.def = "easeInCubic";
function animateHeader(tab) {
if (tab == "#party-tips") {
$('#party-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#party-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#pairing-guide") {
$('#pairing-guide #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#pairing-guide #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#quick-tips") {
$('#quick-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#quick-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
}
}
function laodAnimation() {
imagesLoaded('img#sipbg', function(){
$('#loadblock').hide();
$('img#sipbg').animate({
opacity:1
}, 250, 'linear');
$('#top-block').delay(250).animate({
top:0
}, 350, 'swing', function(){
$('h1#wc-logo').animate({
top:30,
left:84
}, 750, 'linear', function(){
$('span#wine-glass').animate({
top:105,
left:136
}, 500, 'swing', function(){
$('span#text-sip').fadeIn(250, function(){
$('span#text-savor').delay(500).fadeIn(250, function(){
$('span#text-repeat').delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$('span##text-endless').delay(500).fadeIn(350);
$('#bottom-block').animate({
bottom:0
}, 350, 'swing', function() {
$('#bottom-block h1').delay(350).fadeIn(750);
});
});
});
});
});
});
});
});
});
});
});
$('#main-grid').delay(400).animate({
opacity:1
}, 1200, 'linear');
});
}
The first part of the content I plug into the CMS looks like this; imagesLoaded is defined in the second script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/retina.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/wine-cheese.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53d6affc389982ed"></script>
<script type="text/javascript">
var jwc = jQuery.noConflict(true);
jwc(document).ready(function() {
jwc("a#box").fancybox({
maxWidth : 800,
maxHeight : 680,
fitToView : true,
width : '70%',
height : '90%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
laodAnimation();
});
</script>

I recommend using either chrome/chromium or safari for their web console. You can then open up the web inspector and set the inspector to catch all errors.
The tools there should help you figure out where the problem is.
Update:
Looking at the link you provided I saw the problem is with the imageloader.js call. It seems to be defining multiple times the same object. You could try wrapping it in a js check.
Update 2:
Ok so I tested your scripts in jsfiddle. I found the problem to be based in a conflict between dojo and the imagesloaded script. I set up a jsfiddle to test out the scripts to see if the class imagesLoader is defined. In the left toolbar if you change in the settings on the left between jQuery and Dojo frameworks the imagesLoaded js script stops working. The problem is that since it is packaged it doesn't signal an error. Either you make a new script from scratch or find an alternative.
if(!alreadyDefined) {
alreadyDefined=true;
//Rest of your code.
}