Develop Reference

Conflict between jquery and bootstrap.js

I am having some problems with multiple js files. When I tried adding the lightgallery plugin to a page I noticed it didn't work for some reason. After a long while I found out it was because of bootstrap.js , when I remove it the lightgallery works, but now my fixed menu stops working.
So depending on what file I comment out, different things start and stop working. I would like that everything works with both files.
My list of js files:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="js/appear.js"></script>
<script type="text/javascript" src="js/featherlight.min.js"></script>
<script type="text/javascript" src="js/jquery.shuffle.modernizr.min.js"></script>
<script type="text/javascript" src="js/spsimpleportfolio.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/rev-tool.js"></script>
<script type="text/javascript" src="js/revolation.js"></script>
<script type="text/javascript" src="js/count-down.js"></script>
<script type="text/javascript" src="js/parallex.js"></script>
<script src="js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
The errors I get in the console:
When I click on the first error it points to this part:
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
I added my bootstrap.js file here.

SB Admin 2 Sidebar Not collapsing

Ok so I am trying to load sb-admin-2 and the menu is not collapsing, I browsed for some solutions and none of them work for me, also as you can see the data-table is not working too and my tags looks like this:
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-messages.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-validate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload-shim.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload.min.js"></script>
<!--SB ADMIN FILES-->
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/metisMenu.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.responsive.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/sb-admin-2.min.js"></script>
can you help me out guys.
ps: I am loading sb-admin through angularjs and django

gentos - i had a similar issue (sidebar not collapsing) and it turned out that i had overlapping jquery's. Once i removed the calls to both jquery and jquery.min files and just used a jquery link:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
collapsible sidebar returned. I also reordered jquery and put the above link at the top of my HTML file (above bootstrap, metisMenu, etc.)

Trying to get an AngularJS / SCSS codepen to run locally...?

Here's the codepen: http://codepen.io/jjmartucci/pen/DlCmy
I'm using Brackets. I copied and pasted the CSS into my style.css, the JS into my init.js, and the HTML part into the body of my index.html...
I also modified the head of my HTML document to say:
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.js"></script>
</head>
and I'm still struggling to get it going. The CSS seems to be working, but the functionality is messed up. Is there any obvious step I'm missing?

You're loading way too many instances of the same scripts. And your init.js needs to come after your 3rd party libraries.
Try this:
<head>
<!-- style -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!-- libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<!-- app -->
<script src="js/init.js"></script>
</head>

While copying javascript from codepen, it may be adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code own code. Hopefully this solves the javascript problems.

what is the squence of jquery files

i have these jquery files included but some plugins work and some are not when i change squence then some plugins work but other give error. Please tell me best squence of these files. Thanks
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>

This would work.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
Also note that you do not need to include normal and minified versions (*.min.js). And since jquery-ui.js depends on jquery core code, it could be kept down to jquery core.
Also please note that you may not require two or more versions of a jquery core thing as it might not make any sense. Instead if you really wish to have some recently added functionality, please make your own custom file by going to jquery custom build at this link.

Just because a version of jQuery requires a certain version doesn't mean it won't work with a later version.
I would try to remove:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
I would also completely remove this since there's no way for a plugin to work after you remove jQuery as a global.
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
Also, you're free to remove the type="text/javascript" from your script tags, no issue with it but it's not needed.
I'd put your site functions after all the other scripts are include as well, and I'd put jquery.cookie.js before the ui stuff, just as preference.
So, I'd end up with:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/urdutextbox.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/jquery-ui-sliderAccess.js"></script>
<script src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>

What js files do I need to include to use ExtJs Calendar?

I want to play around with the ExtJs calendar and was wondering which js files i will need to include to do so?
The example from the Ext website includes many js files and I am wondering which ones are necessary and which ones are not. I'm assuming it depends on what functionality I wish the calendar to have, so lets just say I want to expose all of its functionality for now.
the following is a list of js and css files from the example on the Ext website:
<!-- Calendar-specific includes -->
<link rel="stylesheet" type="text/css" href="resources/css/calendar.css" />
<script type="text/javascript" src="src/Ext.calendar.js"></script>
<script type="text/javascript" src="src/templates/DayHeaderTemplate.js"></script>
<script type="text/javascript" src="src/templates/DayBodyTemplate.js"></script>
<script type="text/javascript" src="src/templates/DayViewTemplate.js"></script>
<script type="text/javascript" src="src/templates/BoxLayoutTemplate.js"></script>
<script type="text/javascript" src="src/templates/MonthViewTemplate.js"></script>
<script type="text/javascript" src="src/dd/CalendarScrollManager.js"></script>
<script type="text/javascript" src="src/dd/StatusProxy.js"></script>
<script type="text/javascript" src="src/dd/CalendarDD.js"></script>
<script type="text/javascript" src="src/dd/DayViewDD.js"></script>
<script type="text/javascript" src="src/EventRecord.js"></script>
<script type="text/javascript" src="src/views/MonthDayDetailView.js"></script>
<script type="text/javascript" src="src/widgets/CalendarPicker.js"></script>
<script type="text/javascript" src="src/WeekEventRenderer.js"></script>
<script type="text/javascript" src="src/views/CalendarView.js"></script>
<script type="text/javascript" src="src/views/MonthView.js"></script>
<script type="text/javascript" src="src/views/DayHeaderView.js"></script>
<script type="text/javascript" src="src/views/DayBodyView.js"></script>
<script type="text/javascript" src="src/views/DayView.js"></script>
<script type="text/javascript" src="src/views/WeekView.js"></script>
<script type="text/javascript" src="src/widgets/DateRangeField.js"></script>
<script type="text/javascript" src="src/widgets/ReminderField.js"></script>
<script type="text/javascript" src="src/EventEditForm.js"></script>
<script type="text/javascript" src="src/EventEditWindow.js"></script>
<script type="text/javascript" src="src/CalendarPanel.js"></script>

Calender is not included with the main extjs javascript files. You can use the calendar-all.js with the CSS instead of having the individual files added from the src directory. The calendar-all.js file is available in the calendar example folder itself.
So, you will require:
<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resources/css/calendar.css" />
<!-- Scripts -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="calendar-all.js"></script>

FYI, you can also check out Ext Calendar Pro as well, which is the full product version of the example that shipped with 3.3. (Full disclosure: I am the author)
It has additional examples and complete docs and many bugs have been fixed since that example was created.
But yes, if you just want to play around with the one in 3.3 simply include calendar-all.js as mentioned above.

I think you only need this ones:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
Everything else is loaded by Ext JS by itself.