Setting up infiniteScroll in angularjs with default code - javascript

here is the link to the full code.
http://binarymuse.github.io/ngInfiniteScroll/demo_async.html#
I copied the code from infiniteScoll's website and it is still not working. The error I am receiving is "$window is not a function". Could someone direct me to a tutorial or maybe something better? Also it fails to instantiate when I add 'infiniteScroll' to angular.module('starter', ['infiniteScroll'])
What am I doing wrong? I tried using my own customized code but that doesn't work. I copy and paste the code from the sample they have there and even that doesn't work.

You can try using this script:
http://binarymuse.github.io/ngInfiniteScroll/

Infinite scroll uses Jquery as dependency. You will need to include Jquery and it will work.

Related

$(...).sparkline is not a function (jQuery Sparklines)

I'm currently running into an issue when using a package called jQuery Sparklines by Gareth Watts. Does anyone have any experience with this package? It seems to be pretty outdated but some people still use it here..
I am importing the package via script tag in a Flask view using regular ol' script tags:
<script src="/custom/css/JS/jquery-sparklines.js"></script>
And have checked the console to make sure jQuery is also installed and loaded before I load the script tag above.
I noticed the issue when I was trying to emulate the example jFiddle in the docs:
I was able to create a working version of the fiddle myself here but only by adding jQuery 1.9.1 on the extensions dropdown, and then toggling the "migrate 1.1.0" slider in the JS section.. pic here
Even with my example working somewhat, AND importing the same things in my html, the HTML doesn't pick up the custom jQuery function in the external code and get:
$(...).sparkline is not a function
Does anyone have any experience with this library? I've followed the docs but theres something i'm obviously missing.
SOS : ( or maybe reccomend other sparkline packages? : (
Thank you soooo much for your time!
UPDATE:
Still fails to recognize sparkline code with the cdn instead of downloaded files : (
Do not know why, but when I put the sparkline reference right before where I use it, the problem's gone.
It looks like:
<script src="~/Scripts/sparkline/jquery.sparkline.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq(".sparkline_bar").sparkline([5,6,7,2,0,-4,-2,4], {
type: 'bar'});
//Some other things.
Solved:
I had JS code that was conflicting with the sparklines code in the tags to initialize the lines.
Fixed by simply initializing the lines FIRST before any other JS stuff.

Plotly Button Click Event not working

I am alien to javascript so pardon me for any naive mistake you find (though that's what I am looking for).
I tried to replicate the code provided for testing the button click event for plotly, but it's not getting fired.
Link from which code is imported:
https://plot.ly/javascript/custom-buttons/#bind-button-events-to-plotlyjs-charts
The way I used it in my html file to test it is shown in the image attached. It works well in code snippet, but due to some mistake of mine in using the javascript in the same page, I am not able to get in work.
Assistance highly appreciated.
the cdn link to jquery wasn't working.
Never rely on the external, keep a local copy of all libraries and call them

Issue with jQuery UI in Blogspot

I'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.
Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.
HTML:
<a id='emailform' href='#'>Click here!</a>
<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>
JS:
$(document).ready(function () {
$("#emailform").click(
function () {
$("#contform").dialog();
})
});
http://jsfiddle.net/mukL3hq8/2/
Any help will be greatly appreciated.
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.
I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:
<script>
//<![CDATA[
jquery here
//]]>
</script>
I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly.
Maybe it'll solve your problem as well.
Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.

jQuery slideToggle doesn't work on joomla, but works on jsbin

So I have a website and I want to use the jQuery slideToggle to move the blocks. The problem is that it doesn't work on my Joomla website. However, when I copy the code to jsbin.com, it works. Here's the link http://jsbin.com/EcObOwex/1/edit
Here's the actual JS I'm using:
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
I don't know what additional information I can provide.
The JS code is in splash.js, link to it works properly (checked it, there's some other script that works from the file)
Edit: I was informed that it was an JS error that I was getting.
Here's the error
Uncaught TypeError: Object [object Object] has no method 'tooltip'
And here's the code. Could anyone help me determine what is it?
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"container": false});
});
I didn't add it manually, it's part of the <jdoc:include type="head" />. Could anyone help me determine how to shake this code off?
EDIT 2:
Some more information:
Here's my full <head> code. http://jsbin.com/aFOZEWI/2/edit
AND YOU CAN ALSO FIND THE FULL SPLASH.JS in the JavaScript part of the Bin.
P.S. The other part of the splash.js works, my overflow element changes just as it's intended.
It might be possible that you have multiple jQuery libraries being imported which may cause conflicts. In addition to that, let's import the scripts and add you code using Joomla coding standards.
<?php
JHtml::_('jquery.framework'); //This calls jQuery in noConflict mode
$doc = JFactory::getDocument();
$doc->addScript(JUri::root() . 'templates/vabankbroker/src/splash.js');
$doc->addScriptDeclaration("
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
");
?>
As for the Tooltip error, open the index.php of your template and if the following doesn't exist, I would recommend you add it:
JHtml::_('bootstrap.framework');
Hope this helps
I found my answer through this post:
My script works in jsfiddle but not site. Cannot call method hover of null?
Thank you for all kinds of notices, I'll make all those fixes, but for this exact problem, I had to include the script in the end of the <body> tag, and it started working.
Cheers :)

JQuery code in another file

before this I wrote all jquery-code into main fail. Now I want to move it into another js-file. The problem is that it doesn't want work correctly.
Here is an error by FireBug:
$ is not defined
$(document).ready(\n
So, as I understand, I have to initialize $-var... But how?
Thanks.
Include jQuery before the file that uses it.

Categories

Resources