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

How to implement addthis share with infinte scroll and masonry

i had implemented infinite scroll with masonry i got stucked in addthis share button not working when i scroll to next loading images the addthis button getting displayed but it is not sharing appropriate images.
if i remove following three lines from masonry function
addthis.toolbox('.addthis_toolbox');<br/>
addthis.counter('.addthis_counter');<br/>
addthis.init();
i am only able see addthis share button on first list of images after i scroll to next list of images the addthis share gets hidden
Javascript Code
<script type="text/javascript">var addthis_config = { "data_track_addressbar": false ;</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e142f1d185c5361"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.box',
columnWidth: 95
});
});
$container.infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more photos to load.',
img: 'http://i.imgur.com/6RMhx.gif',
}
},
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');
addthis.init();
});
$('.listing_img_wrapper').hover(
function () { $(this).find('.hover_img').fadeIn("slow"); },
function () { $(this).find('.hover_img').fadeOut("slow"); }
);
// console.log("called");
// window.addthis.toolbox('.addthis_toolbox');
}
);
});
</script>

i had solved the solution by adding
addthis.counter('.addthis_counter');
and
if (window.addthis) {
window.addthis.ost = 0;
window.addthis.ready();
}

JS: Slide open multiple divs

So I found a script to slide open multiple divs but I can't seem to get it to work. I thought it was something wrong with my main page, but I created a separate page and still can't seem to get it to work.
No messages in debugger, and no errors; but the DIV doesn't appear.
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript'>
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>

It is working, for me. You forgot to call function showHide(), actually, and you can do it on this way:
$(document).ready(function() {
$('.show_hide').showHide();
});
http://jsbin.com/amuhom/1/edit
I have added one div and one button more. I guess this is expected behavior?

Swipe effect sensibility

i trying to use the swipe effect for a mobile app. i have tested and works to change page. but its very sensitive. lot of times i want only to scroll and he change the page.
it is possible to fixed the sensibility on touchscreen on this event?
here is my code:
$(document).on('swipeleft', '[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $(this).next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});

In jQuery Mobile, you need to set new values for the horizontal and vertical drag distance horizontalDistanceThreshold and verticalDistanceThreshold.
Note that you need to bind the change to mobileinit event and the code should be placed into <head> after loading jQuery js file and before loading jQuery-Mobile js.
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.event.special.swipe.horizontalDistanceThreshold = '100'; // default 30px
$.event.special.swipe.verticalDistanceThreshold = '150'; // default 75px
});
</script>
<script src="jquery-mobile.js"></script>
Reference: Swipe event - jQuery Mobile

adjust the swipe thresholds like this
$.swipe.defaults.threshold.x = '30'; //for horizontal swiping sensitivity
$.swipe.defaults.threshold.y = '10'; //for vertical swiping sensitivity
just add these codes to change the global sensitivity of the swipes of your application and do your usual codes after putting the code above
to directly change the sensitivity on a certain element you can do something like this
$('[data-role="page"]').swipe({ threshold: {x: 30, y: 20},
swipeLeft: function() { alert('swiped left') },
swipeRight: function() { alert('swiped right') }});

jQuery Cycle plugin IE6/7 issues

I've implemented a slideshow using the Cycle plugin, which is working in all browsers except IE6&7, where the images just show up in a list, and the #page_copy div is not hiding. I've been going through the code all day without any luck, and not exactly sure how or what I should be looking for.
What would be the best way to go about debugging this issue? I know that the #page_copy div is hiding when I remove the rest of the code, and I've tried the reverse (which had no result)
<script type="text/javascript" charset="utf-8">
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('#page_copy').hide();
$('a#info_close_button').click(function() {
$('#page_copy').fadeOut(200);
return false;
});
$('a#info_button').click(function() {
$('#page_copy').fadeToggle(200);
return false;
});
});
$(window).load(function() {
// vertically center single image
var $image_cnt = $("#images > img").size();
if($image_cnt < 2) {
var $single_img = $("#images").children(':first-child');
var h = $single_img.height();
$single_img.css({
marginTop: (620 - h) / 2,
});
$(".next").css("display","none");
$(".prev").css("display","none");
}
});
// wait until images have loaded before starting cycle
$(window).load(function() {
// front image rotator
$('#images').cycle({
fx: 'fade',
speed: 300,
next: '.next',
prev: '.prev',
containerResize: 0,
timeout: 0,
delay: -2000,
before: onBefore
});
});
// hide all but the first image when page loads
$(document).ready(function() {
$('#images img:gt(0)').hide();
});
// callback fired when each slide transition begins
function onBefore(curr,next,opts) {
var $slide = $(next);
var w = $slide.width();
var h = $slide.height();
$slide.css({
marginTop: (620 - h) / 2,
marginLeft: (650 - w) / 2
});
};
</script>

I don't really get why you have multiple $(document).ready and $(window).load..
Maybe you should just try and place everything in a single $(document).ready block.
Additionally move the definition of function onBefore(...) at the very start of the <script> tag. Directly before the jQuery.fn.fadeToggle code.
Try also removing the unneeded comma at the end of this piece of code
$single_img.css({
marginTop: (620 - h) / 2, //<---- remove comma
});
And also remove this unneeded semi-colon
function onBefore(curr,next,opts) {...}; //<--- unneeded