I am using a call to smoothscroll.init() which looks like this:
new WOW().init();
//smoothScroll
smoothScroll.init();
But I am getting the following error:
Uncaught ReferenceError: smoothScroll is not defined
at main.js:136
at main (main.js:140)
at main.js:144
Could anyone help me figure out why?
These are my javascript libraries:
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
First add this to your project:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Second: make sure your path to smoothscroll is correct.
Third: identify each of your html you want to use smoothscroll on with the class class="smoothScroll".
Fourth: the smoothscroll you are using now isn't editable in another javascript directory, it's only used for inside your html, as it already uses the smoothscroll.
EDIT:
If you want to use your own smoothscroll, I'd recommend you to look at this.
Related
my imports for modal are
<script type="text/javascript" src="../../resources/js/checkbox_hide.js"></script>
<script type="text/javascript" src="../../resources/js/jquery.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="application/javascript" src="../../resources/js/bootstrap.min.js"></script>
and i am calling it as..
function showPandLModal(){
$('#vehiclePandLModal').modal('toggle');
};
i am making some small error but unable to find it.
Change
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
to
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Add this too:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
i used "js" imports from other page where modal was working. It worked but i am still not sure about what imports are needed for modal. Any Explanation is welcomed.
I am doing various modifications to my NGINX Magento server and part of this is to do front end optimisations
I am currently using a CDN plugin to host my JS but Magento always calls JS lines (huge massive calls to JS libariries which looks ugly in the code view) that I want to combine to one line.
I know you can use Admin > Developer to merge JS files but I dont want to do this. I want to make this:
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
Change to
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
I think is what you're looking for. I tested this with Magento 1.9.2.1.
In this file Mage_Page_Block_Html_Head, function getCssJsHtml() on line 210 character 112-119 you'll find this . "\n". Remove that from the function and your JS files will be rendered in one line as you requested.
Keep in mind not to modify core files but to extend the class and override only this function to maintain rest of functionality.
Today i wanted to add datepicker() to my page.So I downloaded jqueryui and added then in the sequence below.
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
It didn't work. It took me whole day to figure out what is wrong. it was the SEQUENCE of js files included!!! To work my code i had to include them like bellow.("jquery.js" position had to change)
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
Can some one explain this please. Please give me a Source so I wont make this mistake again.
Normal jQuery (core)
jQuery migrate if you have
jQuery UI
jQuery mobile
Scripts that need jQuery / scripts that are jQuery plugins
Other scripts like bootstrap
You own scripts depending which is needed first
First you have to include normal jQuery library.After that You have to include other jquery library like jquery ui and jquery mobile and all finally you have to include your own javascript files.
As mentioned in comments you have to mention the scripts in the order you use that.
Simply anything used Jquery will goes after jQuery, anything that depends on jQuery UI goes after jQuery UI etc.
I have a jQuery Mobila app wrapped with Cordova that I test on my Android device. It is fine when I launch it normally, but when I use a web intent (https://github.com/Initsogar/cordova-webintent) to launch it, the console debug shows random errors coming from the jQuery Mobile js file:
D/CordovaLog(24140): file:///android_asset/www/jquery/jquery.mobile-1.4.0.min.js: Line 7661 : Uncaught TypeError: Object # has no method 'addClass'
D/CordovaLog(22727): file:///android_asset/www/jquery/jquery.mobile-1.4.0.min.js: Line 10116 : Uncaught TypeError: Object # has no method 'each'
I am aware that these bugs are properly caused by the code I am trying to render on startup, and I'm guessing that the js files I include in the tags in index.html might be in the wrong order. Here is my current setup:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="jquery/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<script src="jquery/jquery.ui.touch-punch.min.js"></script>
<script src="jquery/jquery.mjs.nestedSortable.js"></script>
<script src="js/json2.js"></script>
<script src="js/jstorage.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
app.initialize();
</script>
I have also tried putting jquery.mobile-1.4.0.min.js under jquery-1.9.1.min.js, but similar things have happened.
Afterwards, I re-ordered them into this:
<script src="jquery/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<script src="jquery/jquery.ui.touch-punch.min.js"></script>
<script src="jquery/jquery.mjs.nestedSortable.js"></script>
<script src="js/json2.js"></script>
<script src="js/jstorage.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript" src="js/app.js"></script>
And it seemed to work fine for a while or so, but am still seeing jQuery Mobile bugs here and there.
I include a javascript file that displays a chart and I get this message : TypeError: $(...).visualize is not a function
I tried with jQuery().visualize and this is the same thing.
Here is my code :
<script type="text/javascript">
$(function () {
$('table').visualize({ type: 'line' }).appendTo('body');
});
</script>
Libraries :
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
I'm new in javascript, I don't understand.
The problem is you include visualize library before you include jQuery. Swap the includes in places as follows:
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
Change the order of your including - JQuery must be added first.
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
You need to include the jquery.visualize.plugin.js AFTER jQuery. It's dependent.
You can also remove the language="javascript".
Like this:
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>