I was trying to tidy up the inline js scripts for a template I'm modifying and combining them into an external js file when I noticed some errors in the console. They are not doing any harm to the site's functionality but I am wondering what I'm doing wrong and how to fix it.
My external js file is:
<script type="text/javascript" src="web/js/init.js"></script>
Link 1 throws the following error:
Uncaught TypeError: Object [object Object] has no method 'owlCarousel'
(I don't use that carousal on that page...)
Link 2 where I do use the carousal throws this error:
Uncaught TypeError: Object [object Object] has no method 'nivoSlider'
(I don't use the slider on that page)
Link 3 I left the inline scripts (no external js file) in place and no js errors relating to external/internal js.
Thanks!
You are calling nivoslider() and not using its js file that why you are getting error for nivoslider, remove the below lines from your init.js From your puppies page
$(window).load(function() {
$('#slider').nivoSlider();
});
Same problem with you owlcarousel remove the below code from init.js for your index page
$("#owl-example").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
If your id slider and owl-example used for nivoslider and owlCarousel only then you can do it by checking length of your elements like,
$(function() {
if($('#slider') && $('#slider').length){// must be on puppies page only
$('#slider').nivoSlider();
}
if($('#owl-example') && $('#owl-example').length){// must be on index page only
$("#owl-example").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
}
});
1) You are targeting an element that does not exist on the page. There is no element with an ID of owl-example, so jquery returns nothing and a method is being called on this null value. ( See here on SO how to test for null first )
2) Same as above but with an element with the ID of slider. It doesn't exist on this page, so a method is being called on null.
Your code looks like
$(function(){
//Code..
})
These functions are all being called when the DOM loads. See this SO question.
3) You are not getting errors on this page because the jquery selectors you are using are returning elements in the page that match. This doesn't have anything to do with inline/external.
Related
So, I am following the tutorial to implement infinite scroll: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/comment-page-3/
In my footer, I added <script type="text/javascript" src="http://example.com/js/jquery.infinitescroll.min.js"></script>
In the javascript.js file, I added the following (identical to the tutorial):
// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#content div.post"
// selector for all items you'll retrieve
});
However, I am getting Uncaught TypeError: jQuery(...).infinitescroll is not a function error.
So, I added the js file and added the script pretty much identical to the tutorial. I can see that both js file and scripts are shown on the page, but still getting the error.
Could someone help me why I am getting an error?
Thanks!
You should make sure your initialization code is inside a $(function(){}), because you need the DOM to be ready before running infinitescroll. Then you have to make sure there is an element with id="content" in your page. So, make sure you have something like this:
<div id="content">...</div>
<script src="jquery.infinitescroll.js"></script>
<script>
$(function() {
// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#content div.post"
// selector for all items you'll retrieve
});
});
</script>
Did you add the plugin file in the page header?
You have to download it from the plugin page you have provided and add it as:
<script src="jquery.infinitescroll.js"></script>
in the head section of the page after the script tag where you load jQuery
Please adapt the src to the path to the directory you have placed the js into.
If you use webpack then use this code
var InfiniteScroll = require('infinite-scroll');
var infScroll = new InfiniteScroll('.container', {
// options
path: ".pagination__next",
append: ".post",
history: false
});
I keep getting the error TurnJsError: This selector has more than 1 element i have made a few checks in Firebug and i know that my Jquery is being loaded as are all my libraries/scripts i need.
The error appears after my page has loaded, if i add the following part of my javascript to the console and run it before the page has fully loaded then its ok but still returns the same error as above, however if i let the page load (get the error from above again) and then run that script in console i get another error TypeError: Argument 1 of Node.insertBefore does not implement interface Node.:
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:922,
// Height
height:600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
$(document).ready(function() {
yepnope({
test : Modernizr.csstransforms,
yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
});
Could i be missing something thats the cause for throwing these errors?
when i add .first() so its like $('.flipbook').first().turn({ after the page has fully loaded i get slight movement in my image, but still getting the error TypeError: Argument 1 of Node.insertBefore does not implement interface Node. When i click on my image it dissapears but the next image is not displayed instead i get another error TypeError: c is null
turn.js work with a single element. Use the .each function.
$('.flipbook').each(function(){
$(this).turn(...);
})
Note that turn may need a unique id on the container.
I am working on a eCommerce project at work which has two sides to it both different websites
The starting point for them both are the same the have all the same jQuery files linked and are identical if in view source.
On one site jQuery imgelens plugin works fine you scroll of the image and it zooms in
On the other site i get the following error:
Uncaught TypeError: Object [object Object] has no method 'imageLens'
which refers to this peace of code
jQuery(function () {
jQuery("#img_product_1").imageLens({
lensSize: 200,
borderSize: 1,
borderColor: '#666666',
imageSrc:"http://koolkiddz.co.uk/images/main/11456/1.gif?state=0.1646016"
});
});
Both sites call imageLens the same way with the same attributes and both can see the main jQuery file and the imageLens file.
Can someone come up with a possible reason or solution for why this is happen
http://koolkiddz.co.uk/item.asp?optProduct=172&txtItem=11456 here is the site with the error
http://wholesale.koolkiddz.co.uk/item.asp?optProduct=170&txtItem=11412 Here is the site without the error
There are little differences with the code but as you will see all the jquery and javascript are called the same
When I look into your jquery.imageLens.js file I see $.fn.imageLens1
Try to download the jquery plugin again at
http://www.dailycoding.com/Uploads/2011/03/imageLens/jquery.imageLens.js
and overwrite the existing one, or just try to remove the 1 after $.fn.imageLens
there is missing html tag "<"html">" in the page with error fix it and check.
IE7 is showing this error message: (no other browser is showing any error except ie7)
Message: Object doesn't support this property or method
Line: 97
Char: 2
And line 97 has this:
$('.megamenu').megaMenuCompleteSet({
The complete javascript code is this:
<script>
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 200, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Can somebody advice me what is wrong with line 97?
Thanks!
UPDATE SOLVED:
i was using the latest one, i fixed it myself, it was all my fault, i had the jquery lib loaded two times with different versions, it was not making any trouble on other browsers except IE7. But after debugging i found the multiple lib loading and removed and there were no errors :)
Thank you everyone!
What version of the MegaMenu script are you using? I can see this in their changelog:
06/23/2012 – Version 2.11
Fixed an issue occurring under IE7 in megamenu.js
I am not sure if this is the issue but you don't need to pass JQuery as an argument since it is global so:
$(document).ready(function($){
should be:
$(document).ready(function(){
This may be the issue since your JQuery plugin appears to be what is not working properly.
I have used Fancybox on multiple occasions and never run into this problem. I have included both jQuery and Fancybox files in the header, linked up the first order button the the page to open up an iframe in a Fancybox. However I cant seem to get it to work at all. It doesn't open an iframe and instead goes straight to the page I was trying to open inside the Fancybox iframe.
Can somebody point out whatever blindingly obvious mistake I've made this horrible Monday morn?
Testing server can be found here:
http://www.designti.me/testing/flipstick/original.php
The error message is: Uncaught TypeError: Object #<an Object> has no method 'fancybox'
Which implies that fancybox hasn't loaded. Taking a close look at your source we see <script type="text/x-ecmascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> which you can see uses x-ecmascript rather than javascript. Change that and you should be fine.
You didn't put your code into the ready handler:
$(function() { // <-- you need this
$("a.iframe").fancybox({
//...
});
}); // <-- and this
Maybe to put it in document.ready?
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Use this:
jQuery(document).ready(function() {
jQuery("a.iframe").fancybox({
'type' : 'iframe', //<--missing comma here
'width':750,
'height':500 //<-- removed last comma here
});
});