We Keep Coding

Jquery show hide issue on server

I am creating a simple show/hide all toggle button for my images in my instagram feed. It works fine in the fiddle but when I put the same code on my server nothing works with no error. Can anyone help me troubleshoot why this isn't working.
Here is the HTML
<div class="btn btn-success toggleAll">
Show All/Hide All
</div>
Here is the Javascript
$('.toggleAll').on('click',function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});
and here is the jsfiddle that works
https://jsfiddle.net/galnova/ua0ojhhe/5/
Here is my site where it doesn't work
http://galnova.com
Any help is welcome guys.

Try
$(document).on('click', '.toggleAll', function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});

I don't see this code in your website's code:
$('.toggleAll').on('click',function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});
I ran this in the console and the show/hide button started working fine.

magnific popup not working In shopify

I am working on custom magnific popup with shopify site.In my header.liquid file am calling the magnific popup content.
<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
popup content here.
</div>
Here i have added the script in theme.js.liquid
$('#open-popup').magnificPopup({
items: [
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
But It shows the following error
TypeError: $(...).magnificPopup is not a function
If anyone please tell me if am i miss something like js library files.
Thanks in advance.

I am found the actual problem for this issue.Some of the themes having default magnific pop-up library in theme.js.liquid file.
My new theme brooklyn was having magnific pop-up library already.So it was working fine now.
So check with theme.js.liquid file having magnific popup library present or not.

are you sure that jQuery is included? if so, is it imported before magnificPopup?

I had a similar issue even though the magnificPopup code was included in my theme.js.
Don't ask me why - after wrapping the magnificPopup call in the window.onload it started working.
<script>
window.onload = function() {
$('.open-popup').magnificPopup({
type:'inline',
midClick: true
});
}

Execute custom script after page loaded with Ratchet\Push.js

So on the GitHub documentation for Ratchet 2.0.2 I found the following statement.
Script tags containing JavaScript will not be executed on pages that
are loaded with push.js. If you would like to attach event handlers to
elements on other pages, document-level event delegation is a common
solution.
Can someone please spell out exactly how to get a custom <script> to execute after being loaded by Push.js?
On my first page, I have a Table view, with several links to other pages, one of them being a link to a second page with a Twitter Feed widget on it.
<li class="table-view-cell media">
<a class="navigate-right" href="Twitter.php" data-transition="slide-in">
<span class="media-object pull-left icon icon-person"></span>
<div class="media-body">
Twitter Feed
</div>
</a>
</li>
The second page only contains the twitter feed widget code. When I browse to this page directly (without being loaded by Push.js) everything loads correctly, but when it is loaded via Push.js, the script is not executed.
Can someone please explain what I need to do to get this script to execute after being loaded by Push.js? I've searched Google, Stack Exchange, and Github\Ratchet issues and have not been able to find a good example of how to accomplish this.
One solution would be to add data-ignore="push" to the link, but I want to know how to do with WITH push.js.
<div class="content">
<a class="twitter-timeline" href="https://twitter.com/XXXX" data-widget-id="XXXX">Tweets by XXX</a>
</div>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

EDIT: below was how I originally solved this problem, which worked fine, but I came up with a better solution, which I posted as the answer to this question.
I finally figured it out.
On your first page, you need to do the following...
var checkPage = function(){
//Only run if twitter-widget exists on page
if(document.getElementById('twitter-widget')) {
loadTwitterFeed(document,"script","twitter-wjs");
}
};
window.addEventListener('push', checkPage);
checkPage() will execute for every time a new page is loaded via push.

Just made a change for Ratchet.js to make individual js works for each page more elegant.(https://github.com/mazong1123/ratchet-pro)
By using the new ratchetPro.js, we can do followings:
(function () {
var rachetPageManager = new window.RATCHET.Class.PageManager();
rachetPageManager.ready(function () {
// Put your logic here.
});
})();

how to remove or change the popup automatic message

I display a popup to ask confirmation of delete a record, the popup displays but with a "system message" like "the page at the address mywebsite show:" follows by my message "are you sure ....".
I want to display only my message 'Are you sure ?'Not the message 'the page at the address mywebsite show:' just above my message.
How can do this please ?
Thank in advance.
<img src="images/Cancel16x16.png">

The Title for the JavaScript confirm() is unfortunately unchangeable (See this SO question: Changing the default title of confirm() in JavaScript?) , That's the same for the changing any of the style & looks for it too.
To allow you to use common scripts such as callbacks, change of text or event changes etc. on JavaScript confirm()s. These better left for helpers such as jQuery UI Dialog (There are many others too) which uses <div>s to mimic the confirm() behaviour and provide much, much more control for a Web Developer.
<script>
$(function() {
$( "#userconfirm" ).on('click', function() {
$('#dialog').dialog({
title: "Your new Title"
});
});
</script>
<a href="php/Delete.php5?" id="userconfirm">
<img src="images/Cancel16x16.png">
</a>
<div id="dialog" title="Basic dialog">
<p>Are you sure?</p>
</div>

You can use jquery ui dialog for such purposes

You could able to use jquery-ui modal to perform this message instead of javascript's confirm().
The following link shows you how to get it from the official documenation of jquery-ui: http://jqueryui.com/dialog/#modal-confirmation
Edit
You are able to checkout this demo which is a modification from the official docs example:
http://jsbin.com/iBApeKe/2/

pinterest button stopped working on Blogspot site

I had successfully implemented the pinterest pin it button on my site, but it has recently stopped working. Could anyone tell me why?
My website is http://www.lookbookcookbook.com and I am using the following code
<div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
<data:post.body/>
<script type='text/javascript'>
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>

Looks like you have managed to sort out your issue?
If not this link may be helpful or to others that want to implement it in their Blogspot site.
http://www.way2blogging.org/2012/06/add-dynamic-pinterest-pin-it-button-for-blogger-blogspot.html