Develop Reference

jquery.InstagramFeed not showing properly

I'm trying to use a library called 'jquery.instagramFeed' that allows me to display images from a user's feed without using an access token. So, I've been trying to use it, but, for some reason, it's not showing me anything.
I've been researching for some weeks now, and I've tried A LOT of solutions proposed in many posts here (and in other forums as well), like these ones:
TypeError: $ is not a function when calling jQuery function
"Uncaught TypeError: $ is not a function" with instafeed
Is there still a way to fetch instagram feed without using access token now (06/2016)?
Some of them did work for me, but as soon as I refreshed the page, it disappeared again. And now, I can't make it show again, regardless of what I do.
I've been checking the developer console to see if there was something wrong, and I noticed that there it always showed me this message:
Uncaught TypeError: $.instagramFeed is not a function
at <anonymous>:3:16
at m (jquery.js:2)
at Re (jquery.js:2)
at w.fn.init.append (jquery.js:2)
at Object.<anonymous> (onepage:633)
at Function.each (jquery.js:2)
at percorrerOnepage (onepage:591)
at Object.success (onepage:663)
at u (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
At this point, my code was like this:
JQuery and jquery.instagramFeed imports
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
The JQuery Function that shows Instagram Feed
<script type="text/javascript">
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
</script>
And this is the container the functions searches for
<div class="instafeed"></div>
So, after looking at some posts on how to fix this error, I made some changes in my jquery.instagramFeed function, and it's currently like this:
<script type="text/javascript">
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
});
})(jQuery);
</script>
With that, I was finally able to make the error disappear, but it's still not showing like it's supposed to. I thought that maybe, it still wasn't being recognized as a function, so to make sure everything was working, I checked the jquery.js and the jquery.instagramFeed on the console... And to my surprise, it is.
Me checking if something is being returned
This is how it's supposed to be like
Instagram Feed working
But this is what it's showing right now
Instagram Feed not working
I've been stuck for a month now because of this problem, and I'm honestly out of ideas at this point. I'm still very new to programming, so I might be doing something wrong.. Can someone please tell me what the problem is?
Update (27/04)
Hello again, everyone. I'm still trying to fix this stupid problem.. I was caught up in other projects, so I wasn't able to properly focus on this. But now that I'm back to it, I noticed something kinda weird..
You see, everytime that I access the website for the first time in a day, it loads the feed, but, as soon as I refresh the page, it disappears and never loads the feed again. Is it something that has to do with cache or something like that?
As you can see, it's working
But as soon as I refresh the page it stops working...

I've attempted to re-create the feed with the code examples you've given, and it appears to work as expected
Check out the fiddle here
<div class="instafeed"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
});
})(jQuery);
</script>
In this screenshot It looks like you have a different version of jQuery loading (3.3.1), but in your examples here you're including 3.5.1, which suggests you're including it multiple times. Check your project for any other instances of jQuery being inserted, and remove the appropriate one.
Also order of these import statements is important, so make sure jQuery loads first, then the instagram widget, followed by your custom script.

UPDATE
It seems that the API itself is having some issues. I've been stuck for too long with this problem, so unfortunately, I'll have to choose another API that works. This one is too unstable, and it has a lot of problems..
I want to thank all the helpful answers and for all the help provided in this post.

fancybox-1.3.4 doesn't work in iE8

I have following sample of code i want to open video in a fancybox it works fine almost across all browsers except when i try to test it in IE 8 standard mode.
It works fine in IE 9 and above.
Based on this solution i added following line of code but this doesn't make it work either iframe: { preload: false }
HTML Deceleration code is as
<!DOCTYPE html >
<html lang="en">
<head id="Head1" runat="server">
<title></title>
.........
Sample Code
<div class="video-icon">
<img src="coorporate-video-icon.jpg"/>
</div>
$("a.fancybox-video").fancybox({
width: 600,
height: 440,
closeClick: true,
hideOnOverlayClick: true,
type: 'iframe',
iframe: { preload: false // fixes issue with iframe and IE
}
});
I am not sure what breaks it i cant create a fiddle example as fiddle doesn't work in IE 8 any help in this regard is appreciated.
UPDATE: i tried it with fancybox Version 2.1.3 but i still face the same problem..

it doesn't work doesn't really tell what the problem is.
If it didn't even work with v2.1.3, then you may have other issues. This is your check list for troubleshooting IE:
Make sure you have a proper DOCTYPE, and the DOCTYPE is the first line of your html document so IE won't switch to quirks mode.
Make sure you are wrapping your custom script inside the .ready() method.
Make sure you are using the right fancybox options
Make sure you don't have any extra trialing comma after the last option
Check for other script conflicts (syntax errors of other scripts may stop fancybox from working)
Make sure you don't have any other js error. Check IE isn't showing this icon (bottom-left corner of the browser) :
Otherwise, this html
<img src="coorporate-video-icon.jpg"/>
and this jQuery code, both work fine in IE[7-9] using fancybox v1.3.4 :
jQuery(document).ready(function ($) {
$("a.fancybox-video").fancybox({
width: 600,
height: 440,
hideOnContentClick: true, // closeClick: true, // this for v2.x
hideOnOverlayClick: true,
type: 'iframe'
});
}); // ready
See DEMO at http://www.picssel.com/playground/jquery/youtubeEmbedIframe_07jan14.html

jQuery Function GIving Odd Error

I have a jQuery function that works without error on a Desktop browser, but throws an error on an iPad or iPhone. When I run the console to find the error I get this message. I'm sorry I not giving you guys much to go on. I can provide more information if you let me know what you are looking for.
EDIT: I've disabled all other plugins. Take note that this code works fine on computer browsers, but not on mobile devices; specifically iPads and iPhones.
EDIT_2: I just found this code in my page. It seems that if the browser is from a mobile device it won't load some of the plugins. New question, is there a reason why my theme would restrict the loading of these plugins?
var ismobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if(!ismobile){
/** ONLY EXECUTE THESE CODES IF MOBILE DETECTION IS FALSE **/
/* REQUIRED: Datatable PDF/Excel output componant */
document.write('<script src="js/include/ZeroClipboard.min.js"><\/script>');
document.write('<script src="js/include/TableTools.min.js"><\/script>');
document.write('<script src="js/include/select2.min.js"><\/script>');
document.write('<script src="js/include/jquery.excanvas.min.js"><\/script>');
document.write('<script src="js/include/jquery.placeholder.min.js"><\/script>');
TypeError: 'undefined' is not a function (evaluating '$(".themed select.with-search").select2()')
Here is the code it is complaining about:
$(document).ready(function(){
setup_custom_form_elements();
});
function setup_custom_form_elements() {
if ($('.themed').length) {
$(".themed input[type='radio'], .themed input[type='checkbox'], .themed input[type='file'].file, .themed textarea").uniform();
$(".themed select.with-search").select2();
/* some demo buttons for select 2 */
$("#disable-select-demo").click(function() {
$("#select-demo-js select").select2("disable");
});
$("#enable-select-demo").click(function() {
$("#select-demo-js select.with-search").select2();
});
}// end if
}

Here is the answer:
As mentioned above, my theme was restricting the loading of the plugin's source file. Stupid mistake, I should have noticed it. I have taken the Select2 plugin out of the if(!mobile) statement and now everything works just fine.
Thanks for all the help guys!

Masonry not working in IE 7. SCRIPT5009: 'Element' is undefined masonry.pkgd.min.js, line 9 character 6316

I have a strange issue with the latest version of masonry. Got it to work before but for a new project I downloaded the latest versions of both jQuery and Masonry, and all works fine. Except IE7 won't load the Masonry library due to an error in the plugin so it seems.
I got this error in the IE7 console:
This is the entire code of my test-file, so anybody can quickly reproduce it:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type='text/javascript' src='jquery-1.10.1.min.js'></script>
<script type='text/javascript' src='masonry.pkgd.min.js?ver=3.0.0'></script>
</head>
<body>
Test
</body>
</html>
Am I missing something obvious or is Masonry no longer compatible with IE7? I didn't find anything about this on the website.
As you can see I'm using jQuery 1.10.1 and Masonry 3.0.0
Edit: I tried with the non-minimized version, and I get
SCRIPT5009: 'Element' is undefined
masonry.pkgd.js, line 914 character 1
Strange, because there is nothing called Element on that line..
here's a snippet of masonry.pkgd.js:
911 /*jshint browser: true, strict: true, undef: true, unused: true */
912 /*global define: false */
913
914 ( function( global, ElemProto ) {
915
916 'use strict';
917
918 var matchesMethod = ( function() {
919 // check un-prefixed
920 if ( ElemProto.matchesSelector ) {
921 return 'matchesSelector';
922 }

Read about the library support on their FAQ page
What is Masonry’s browser support?
Masonry works in IE8+ and modern browsers, including mobile browsers
on iOS and Android.

In case this can still be useful to anyone, Masonry really doesn't support IE7 - there is also a won't-fix issue about this on github - https://github.com/desandro/masonry/issues/356.
Still I wanted to prevent the javascript from breaking entirely for IE7 users, so I've added the following (which helps if you are using masonry as a jQuery plugin):
if(navigator.appVersion.indexOf("MSIE 7.")!=-1{
$.fn.masonry = function() { };
}else{
<!-- ORIGINAL MASONRY CODE GOES HERE -->
...
...
}
This will create an empty jQuery plugin called Masonry in case of IE7 and will prevent the script from breaking the entire javascript of the page (of course the Masonry stub does nothing in that scenario but at least we prevented the error and other stuff can still work)

FF javascript woes

Zoom.addEventListener('click', function(){$(document).ready(function(){$("#draggable").draggable({containment: '#imgContainer', scroll: false});});});
let me first explain the code. Zoom is a handler/button on clicking which i am enabling the dragging of an image object.
the above code works fine with Chrome but FF is finding errors. Let me quote Firebug:
[Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://localhost/slide/script.js :: anonymous :: line 69" data: no]
[Break on this error] Zoom.addEventListener('click', functio... '#imgContainer', scroll: false});});});
i am getting it to work fine in Chrome but in Firefox i cannot click the button.
pls help me out...

Assuming Zoom is a button object you've set somewhere, if I understand what you're trying to do correctly, then what you need is:
$(function() {
$(Zoom).click(function() {
$("#draggable").draggable({
containment: '#imgContainer',
scroll: false
});
});
});
If Zoom is already a jQuery object, then Zoom.click(... will be sufficient.

Check Mozilla documentation at https://developer.mozilla.org/en/DOM/element.addEventListener.
You need to add a third parameter to the function call. Just try adding the value false, like this:
Zoom.addEventListener('click', function(){$(document).ready(function(){$("#draggable").draggable({containment: '#imgContainer', scroll: false});});},false);

It seems a little strange that you are doing a document ready inside the click event. It would make more sense to do it like this.
$(function(){//Document ready
$('zoom button').click(function(){
$("#draggable").draggable(
{containment: '#imgContainer',
scroll: false
});
});
});
I think thats what you need from the code provided. Maybe that will solve the issue.