Problems with Masonry, jQuery and imagesLoaded - javascript

Web noobie here. I'm having a problem getting Masonry to work properly with the site I'm building. Here is the code I'm trying to execute:
$( document ).ready(function() {
...
var $article_display = $('#article_display');
$article_display.imagesLoaded(function() {
$article_display.masonry({
columnWidth: Math.floor($('#article_display').width() *.3) + 2,
itemSelector: '.article',
isAnimated: !Modernizr.csstransitions
});
});
...
});
I'm getting this error: "Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' ." I've looked around for the past two days to find some kind of solution to this before posting this question here and have been unsuccessful so far. It seems like my browser isn't recognizing that I've included the imagesloaded.pkgd.min.js file...? According to the reference material here: http://masonry.desandro.com/appendix.html this code should work.
Any help would be greatly appreciated, I can try to get a jsfiddle set up if that would make a difference.
Thanks!
Edit: Here's a JSFiddle showing the issue: http://jsfiddle.net/DDQtD/

Figured it out. I had a typo when I was loading my scripts, it looked like this:
<script type="filepath/imagesloaded.pkgd.min.js"></script>
I needed to switch out type with src. So many simple mistakes!

I would try Salvattore, it works in a different way so images don't have to load before the script is loaded, and you can configure the script with CSS and HTML.
http://salvattore.com/

Related

$.alert is not a function in Jquery in console error

I'm executing an alert with Jquery as like $.alert(param); The console is providing as $.alert is not a function.
How to overcome it ?
function AlertModelPoupMast(param) {
$.alert(param); //It's custom alert. dont suggest normal alert() here please.
return false;
}
If I place $.noConflicts() it is working for first time , but after that again not working.
function AlertModelPoupMast(param) {
$.noConflict(); //working for 1 time. not working from 2nd time.
$.alert(param);
return false;
}
Replace
$.alert();
to
alert();
This can happen when you not included jquery file or $ is conflicted with some other plugin, changing $ with Jquery may solve that problem,
I think you are using craftpip custom alert like here
here you look with the issue
https://github.com/craftpip/jquery-confirm/issues/32
me also faced similar issue. And the issue was jquery.min.js loaded twice which caused conflict. Make sure jquery and all other js files loaded once. It may fix the problem. Also put jquery.min.js at the top of other js files if possible, because jquery plugin may be needed by other plugins.
Hope it'll help someone.
Use
alert("Your message");
Please ask for clarification if needed.

jQuery Datepicker okay on first load of a page but fails thereafter

This is the second time I have asked this question. Neither the responses I received initially nor any of the myriad of other answers to similar questions have helped me to solve the problem.
The problem is that once a datepicker object is initialized, a second initialization causes it to fail. I have tried all sorts of blurring and destroying but nothing has worked for me.
Please take a look at this simple page which demonstrates the problem
Here is the javascript for the page that contains the datepicker input elements...
$(document).ready (function(){
sp = " ";
lf = '\n'
$(function (){
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
})
})// document ready
I would truly appreciate any help to get this working. I've already spent about eight hours with no success.
Thanks,
-dmd-
Your code is obsolete. you got a document ready function inside of an document ready function ( $(function(){}) is a shorthand of $(document).ready(function(){}). But this isn't the Problem. Use the following code in your divtest.html and remove the calls in datepicker.html:
$(function(){
$(document).on('DOMNodeInserted','input#datepicker,input#datepicker2', function(){
$(this).datepicker();
});
}
Finally, I have a solution and it is simple.
On the datepicker page, before initializing datepicker, add this line
$('#ui-datepicker-div').remove();
then
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
This works for me and I truly hope it works for everyone else who has been bogged down with the issue.

Ajax load php into div giving me issues

I've been hammering away at this for a couple of days trying to resolve it before turning to StackOverflow. But I simply can't see where I'm going wrong.
All I want to do is on document load, bring in dansearch.php into the "displayresults" Div with the following code.
Can anyone shed any light here on how to fix this and more importantly why so I can fully understand the issue? Thanks in advance!
<script>
$(document).ready(function() {
$("#displayresults").load("dansearch.php");
});
</script>
<div id="displayresults"></div>
There are only 2 possibilities, if your code is not working,
Jquery inclusion may not proper.
Your php page or its location is not correct.
Use a .get
<script>
$(document).ready(function() {
$.get("dansearch.php", function(data) {
$("#displayresults").html(data);
});
});
</script>
<div id="displayresults"></div>

JQuery Isotope not triggering

I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?
I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.

Stacking Images When Page Loads

I've read through a number of similar questions but nothing has worked for me yet. The url is here: http://www.promotion1.com/home-wmc-slide
I've installed a slider and the images are stacking before the script, I do not know JavaScript...
Would anyone be willing to look at the site and see if there might be a quick fix? I seriously need the help.
Thank you!
Try changing your javascript from $(window).load(...) to $(document).ready(..)
$(document).ready(function (){
$("#pikame").PikaChoose();
});
Make sure you're using the newest version of PikaChoose and then do the following.
For your css:
#pikame{ display:none; }
In your js:
$(document).ready(function (){
var showUL = function(){ $("#pikame").show(); };
$("#pikame").PikaChoose({buildFinished:showUL});
});

Categories