My playlist plug-in with jQuery UI works fine alone, but when I include it on the index page, it gives me this error:
Uncaught TypeError: Object [object Object] has no method 'sortable' /868
Here is my index page at Pastebin
My page's link
Your problem is likely this:
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
That's a relative path, so while js/jquery-ui.min.js might point to the right place in the first location, if there isn't a similar file there in the second location you're going to get the problem you see (ie. no jQuery UI).
I rearranged all my js includes and put them to the top of the index.php. Now it's working...
Related
I've incorporated a Magento ecommerce site into our existing website and all is OK, but there are various different jQuerys and prototypes being used along the way.
I wanted to improve the site's mobile navigation and found the awesome jQuery.mmenu plugin. I've integrated this into the site and it looks and mostly works great, but there are certain pages within the magento part of the site that have their js broken by the menu and as such the menu ceases to exist.
Looking at the code of a working page and non-working page I have found some differences in the js they use but I can't figure out how to rectify the issue:
Working page: http://www.doble-shop.co.uk/shop/boots.html
Non-working page: http://www.doble-shop.co.uk/shop/richa-monza-waterproof-leather-boots-black.html (notice that the menu doesn't show on the mobile size of the site and that the js tabs are broken as is the dropdown quick access, also the error message of Uncaught TypeError: Cannot read property 'blocker' of undefined is shown in the console)
When comparing the code of the two pages and paying attention to the js used the following are included on the broken page but not on the working page:
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/varien/product.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/infortis/jquery/plugins/jquery.cloudzoom.min.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/infortis/jquery/plugins/jquery.colorbox.min.js"></script>
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ); from the second version will return the globally scoped jQuery variables to those of the first version.
<script>
var $ = jQuery.noConflict();
</script>
Place this snippet right after including of the jQuery in your page.
Read more here.
I am trying to make a lightbox gallery and have used the example source code.
Here is the documentation I read over: http://dimsemenov.com/plugins/magnific-popup/documentation.html
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: $ is not defined
I am not sure what the errors mean or what to do with them.
In a video tutorial I watched, they said something about a jquery conflict being a potential problem. On a different page of the website, I used a Kwicks sliding menu (which also used jquery). That's the only thing I can think of.
I would really appreciate any help you would be able to give me!
Thank you! There are no more errors, but now I need to make the hovering on the image work with the zooming in magnifying cursor.
I have made the hovering work, now I need to make the zooming in magnifying cursor work. I have attached a page of what I what the cursor to be when it hovers.
Example: http://dimsemenov.com/plugins/magnific-popup/
I have figured out the zoom cursor! Thanks for all the help!
The documentation of the plugin Magnific popup you are using suggests -
Including files
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
Remember : You need to include jQuery file reference, for the plugin to work; rather every jQuery plugin. And in the specified order. This is the sole reason behind $ not defined and undefined in not a function.
I've been having this issue with fullpage.js not allowing me to scroll properly. Please see the issue at https://www.rewardslive.com/test
I have jQuery 1.10 loaded onto the site already, but the javascript code that is in question here is inline on the page, after along with the initialization code which is an extension of the document ready with no conflict in the rewardslive.js inline script.
Going to the page does not pose an issue, but when i try to scroll down, the url bar changes to https://www.rewardslive.com/test#secondPage - but there is no actual scrolling downward and no new content is updated. I want to keep the header as seen, in there for all intents and purposes.
Is there something I am missing here? All i want is the basic fullpage, 'scroll down function to see more' feature.
Thanks again,
George
The javascript console shows this error:
Uncaught TypeError: Object # has no method 'easeInQuart'
Which means you are not importing the jQuery UI library which is needed by the plugin as specified in the documentation.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Also, you have problems in your HTML markup as you can see highlighted in red here.
If you do not want to include the whole jquery UI library for just that single effect, you can use the easings file provided by fullPage.js that includes all of the jquery UI easings.
I am trying to get flexslider up and running but I am getting the following error.
Uncaught TypeError: Object [object Object] has no method 'flexslider' maximizesocialmedia.wordpresslochness.com/:234
It looks like the most common problem with that error is jQuery is loaded twice. I have been looking and can't find where it would be loaded twice on my site. When I view the source I can't find it loaded twice and I am not seeing anything in the chrome web inspector. Could there be a different reason as to why it's not working? Here is the site
If I need to update this post with any code please let me know.
You're not loading the flexslider plugin in your page, try adding it in a script tag, after jQuery.
It's probably named jquery.flexslider.min.js.
that console error could mean that the jquery/js for the flexslider haven't loaded so the flexslider give an error that the flexslider object for the settings is not defined as an object
i guess...
Seems like the jQuery flexslider is not loaded. I just looked at your site and I couldn't find the javascript file related to flexslider.
Include the flexslider javascript in you page and it should work.
I also noticed that the site used slidesjs
I am having trouble implementing a jquery slider (flexslider)
I feel like I am missing something very basic, but for some reason I just cannot put my finger on it. Any help would be amazing. The link to the test site is below.
I am trying to get the slider to appear in the empty green area.
I am also working in Gumby responsive framework
http://4grain.bmdigitalgroup.com/
This is your issue:
Uncaught TypeError: Object [object Object] has no method 'flexslider'
...also looks like your loading your jquery file after the flexslider file. try keeping all your .js files in one place, with your jquery file on top of all of them.
You have 2 jquery files loaded on the same page. you should only need one, unless you are intentiontally trying to load 2 of them..
try placing your script...
$(window).load(function() {
$('.flexslider').flexslider();
});
at the bottom of the page, wrapped in a script tag, before the body ends, instead of inside the head of the page. the script is waiting until the page is loaded anyway.
UPDATE!
Hey good job so far! i'm seeing what you have done on your page via the web console.
And if you want to get rid of that...
Uncaught TypeError: Object [object Object] has no method 'on'
...then remove the jquery 1.6.2 file from the top of your page, and place the fexslider.js file at the bottom of your page.
As noted, you are having a double reference to the jquery library. Try doing this which will stop the dual references:
<script type="text/javascript" charset="utf-8">
$.noConflict();
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Give #maincontentbody a height, perhaps 75px, then all of the children need to have a defined height and width, even id it's width:100%. min-height is not an appropriate value in this case
Your images appear to be much larger than the green bar area, do you think it will animate as well?