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.
Related
jQuery("body").delegate('[title][title!=]', 'mouseover',function (event){
$('[title][title!=]').tooltipster({
animation: 'grow',
theme: 'tooltipster-punk'
});
jQuery(event.target).mouseover();
})
This is the error:
The problem is when I generate HTML with JavaScript. First time I put the cursor over the element I don't get any error in the browser console, but the second time I repeat it i get this errors:
If anybody knows what I'm doing wrong it would be of help. Thank you very much in advanced!!
I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.
"Uncaught TypeError: undefined is not a function"
My nivo-slider.js code is-
(function ($) {
Drupal.behaviors.nivoSlider = {
attach: function (context, settings) {
// Initialize the slider
$('#slider').nivoSlider({ *//here I am getting error mentioned above*
'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
'slices': Drupal.settings.nivo_slider.slices, // For slice animations
'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
});
}
};
}(jQuery));
Help me to sought out this error..thanks!!
Include jquery.js main file in header before any js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
When you use two different versions of jquery (which is not recommended), you can use
jQuery.noConflict
api.jquery.com/jQuery.noConflict/
I had encountered a similar problem before. This issue can be fixed by making use of Jquery Update module in Drupal 7 & setting the version of jquery library to 1.9 & above.
Do let me know in case of any doubts
Also please note that in Drupal you should never add Jquery library explicitly because Drupal core by default adds a jquery library.
When you try to add a jquery.js in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
There will be 2 jquery libraries now & which will conflict.
So we need to use jquery update module to upgrade the library
Another likely candidate is referring to jQuery with $ (dollar):
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#main-content").fitVids();
});
If you instead use the no-conflict reference in your script, as below, this may fix the error
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
jQuery("#main-content").fitVids();
});
I just ran into some issues configuring Nivo View Slider on Drupal 7.
I didn't read the module's documentation at first but it looks like Nivo Slider's library isn't included in the package, you need to upload it manually to your server.
Here is the documentation : https://www.drupal.org/project/views_nivo_slider
To sum it up :
install/enable Library API
download Nivo Slider libs from https://github.com/gilbitron/Nivo-Slider/downloads
unzip the archive to sites/all/libraries/nivo-slider
At step 2, you'll have to choose between version 2.x or 3.x
On the module's project page, it says that version 3.x might be broken on Google Chrome, I didn't have any issue myself...
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.
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.