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.

Why not working the on_close_popup_ui function in OneAll social plugin?

I built a custom login page for users here.
If a user tries to close the popup window before he/she registered, I want the div with ID "uzenet" to have a shake effect, like in a Wordpress login-form.
The good news is, the plugin has a good api function, which is documented: here.
The function I need to use is: on_close_popup_ui, but it isn't working for me, and I don't know why.
If I understand the documentation, the correct code should look like this:
<!-- The plugin will be embedded into this div //-->
<div style="margin-top: 23px;" id="oa_social_login_container"></div>
<div style="margin-top: 23px;" id="oa_social_login_container"></div>
<script type="text/javascript">
var _oneall = _oneall || [];
_oneall.push(['social_login', 'do_popup_ui']);
_oneall.push(['social_login', 'set_callback_uri', 'http://neocsatblog.mblx.hu/']);
_oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'steam', 'twitter', 'windowslive', 'wordpress']]);
_oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);
/*
Signature
<scope> : string (social_login)
<function> : JavaScript function to be executed
*/
_oneall.push(['social_login', 'set_event', 'on_close_popup_ui', 'my_on_close_popup_ui']);
/* Example */
var my_on_close_popup_ui = function() {
alert("You have closed the popup user interface");
}
_oneall.push(['social_login', 'set_event', 'on_close_popup_ui', 'my_on_close_popup_ui']);
</script>
But unfortunately, this doesn't work, and I don't know why.
I don't get any syntax errors in chrome console, and I also don't get the alert popup, which means to me the function is stuck, before receiving themy_on_close_popup_ui named.

_oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);
This line must always come last. Any _oneall.push(...) commands made after it are not take into consideration.

fraction slider not working

I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!

A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>

You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593

FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!

How to manipulate a DOM element while running a perl mechanize script?

This post discusses how to inform the user via a progress bar by calculating the percentage of the file being downloaded by a www::mechanize Perl script.
I need to inform my user of a www::mechanize script's progress but not necessarily in percentage remaining. The script is migrating through a user's account and picking up data, which can vary significantly in size so the percentage factor is unknown.
If I can show "progress" via some js DOM div writing (in the dialog that shows a "loader" image while the perl script is running) then that would suffice.
Can I inject js script like:
<script>
$('#formboxtext').html('Logging into account ...');
</script>
into the Perl script to show progression to my user? Or does the Perl script have to return before the DOM will get updated? (The answer appears to be "no".)
Are JavaScript::SpiderMonkey and WWW::Scripter modules I need to make this happen, or is the solution more simple?
EDIT:
I am expanding a PHP-based CMS. I have written a screen-scraping script using Perl and the module www::Mechanize which traverses several pages of a user's account on another site for retrieval into mySQL databases. I will display the collected content in a php form for the user to save once the Perl script is completed. The collection process will range from 10 seconds to a minute. I would like to display progression as the script navigates the user's account pages collecting information.
To begin, I supply the user a jQuery modal dialog (calling a php file to fill it's contents with a form of username and password inputs) used to login to their personal account. I show a loader image in this dialog and a sentence asking for patience, but I would like to use jQuery to rewrite this sentence (div) as the Perl script navigates through pages, sending back progress to display; such as, "I'm here now. Now I'm over here." If an error occurs (i.e. bad login) then I can rewrite the modal dialog and offer solutions per usual. If success, then I would close the dialog and display the collected information in form inputs ready for saving into my database - on the php page that spawned the modal dialog.
If all of this entails multiple DOMs, forking processes and returning control from one script execution to another... then I am definitely over my head. BUT, I would like to learn it. :) I would appreciate an overview on what to read and learn. If it's actually much simpler than I realize then I would appreciate that answer too.
Thanks to daxim and reinierpost for their patience and advice. Thanks for any help.
The Answer:
Recap: For me, I decided to fake the progress bar showing progression by estimating the time it would take. That has worked nicely. This post shows how you can dup output from a perl script back to the calling php script, but then feeding that information back to the original DOM was becoming too complex for it's worth. It was made more complex by various parameters passed to the perl script which changed the progression and output. "Faking it" proved a nice solution. Hey, now I see why my girlfriend does it! :)
PS. I gave the green checkmark to daxim because he has answered other questions of mine and been a big help to me, even though he was sort of shooting in the dark on this one.

Instead of printing progress to STDOUT as in https://stackoverflow.com/a/1938448, expose the number as a Web service. This should suffice:
sub {
return [200, [Content_Type => 'text/plain'], [$PROGRESS]]
}
On the client side, use jQuery get to poll the Web service every half second or so and jQuery Progressbar to display it.
Edit: code example
use 5.010;
use strictures;
use DBI qw();
use Plack::Request qw();
use POSIX qw(floor);
use Forks::Super qw(fork);
use WWW::Mechanize qw();
sub db_connect {
return DBI->connect('dbi:SQLite:dbname=/var/tmp/progress.db');
}
sub {
my ($env) = #_;
my $req = Plack::Request->new($env);
if ('/progress' eq $req->path_info) {
return [200,
[Content_Type => 'text/html'],
[db_connect->selectrow_array('select progress from progress')]
]
} else {
fork(sub => sub {
state $total = 0;
my $dbh = db_connect;
$dbh->do('delete from progress');
$dbh->do('insert into progress (progress) values (0)');
WWW::Mechanize->new->get(
'http://localhost:5000/VBoxGuestAdditions_4.0.4.iso', # large-ish file
':read_size_hint' => 1024**2,
':content_cb' => sub {
my ($data, $response, $proto) = #_;
$total += length($data);
my $size = $response->header('Content-Length');
$dbh->do(
'update progress set progress = ?', {}, floor(($total/$size)*100)
);
sleep 1;
},
);
}) unless defined db_connect->selectrow_array('select progress from progress');
return [200,
[Content_Type => 'text/html'],
[q~<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<style>
#progress { width: 80em; height: 5em; border: 1px solid black; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
jQuery(document).ready(function() {
// TODO: stop the timer if progress == 100 or no response
var timer = setInterval(function() {
jQuery.ajax({ async: false, cache: false, dataType: 'html', url: 'http://localhost:5001/progress' }).done(function(progress) {
jQuery('#progress').progressbar({ value: parseInt(progress) });
});
}, 500);
});
</script>
</head>
<body>
<h1>downloading your stuff</h1>
<div id="progress"><div>
</body>
</html>~]
]
}
};

JQuery JSTree loads as open and THEN minimizes

Fist off, been lurking for years, hopefully this post will be helpful to more than just me.
So I have a jstree that is generated for my site using very a small amount of JavaScript. Ideally, I would like for the page to load and show the 2 top folders only.
However, currently the page displays all of the names of the folders, subfolders, files, etc. for about 0.5 seconds before switching to the proper view. There are probably about 200 items in the tree structure
I added a manual tree.bind which does a "close_all", and I also tried hiding the DIV that it eventually appears in. Even though I put the code to show the DIV after I create the tree, it still shows everything before hiding itself.
I am using jsTree 1.0-rc3
Anyone have any thoughts?
<script type="text/javascript">
(document).ready(function () {
var tree = $("#sharepointHierarchy");
tree.bind("loaded.jstree", function (event, data) {
tree.jstree("close_all");
});
$("#sharepointHierarchy").jstree({
'plugins' : [ "themes", "html_data", "types", "ui" ],
'core' : {/* core options go here */},
});
document.getElementById("sharepointHierarchy").style.display="block";
});
</script>

I was able to mask this issue by adding the following code to the end of the function(). It is fairly straight-forward and simply gives the table time to load before showing it.
setTimeout(function() {
$("#sharepointDiv").show();
},1200);
I hope this helps someone else also.