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.
Related
I just wanna ask why my JQUERY DateTimePicker looks like below image
I don't know why it doesn't have any design
Site.Master
<script src="Scripts/jquery-2.2.3.min.js" type="text/javascript" ></script>
<script src="Scripts/jquery-ui-1.11.4.min.js" type="text/javascript" ></script>
<script src="Scripts/jquery.ui.datepicker-en-GB.min.js" type="text/javascript" ></script>
<script src="Scripts/jquery-ui-timepicker-addon.min.js" type="text/javascript" ></script>
Javascript:
$(function () {
$(".frmdate").datepicker($.datepicker.regional["en-GB"]);
});
Let me know what causes the datetimepicker to look like that...
try to insert this
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
So I recently transfered over my files from one server to another. For some reason on the new
server I am getting odd errors in chrome under the network tab such as:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: autoResize is not defined
Some pages even stopped working!
I was messing around with the order of my script links.
Here is my current order:
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
How should I order this and is there any way to make it so the order doesnt matter?
Thanks I have no idea what to search for this so I am stuck.
EDIT: New order. Less errors. http://prntscr.com/3y98gt
<!---JQuery/Javascript-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
1rst place: JQuery
2nd place: JQuery Migrate
3rd place: JQuery UI
4th place: Bootstrap
Order of the rests are less important, but pay attention to don't call function before is loading by the script tag, eso
Another advice: separate CSS and JS files. It's a bad idea to mix everything.
Pay also attention: for performance reason, it's better to load JS at the end of the page. But CSS have to take place in the head section.
For starters, every script which uses jQuery should be loaded after your jQuery include. So, putting jquery-1.11.1.min.js on top should be a quick fix.
I have problem with columns filter dialog not showing in IE
it works fine in all other browsers
I have had already great trouble with
<!DOCTYPE html>
in IE
I suspect something related to the order of these definitions
<link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/scripts/demos.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxvalidator.js"></script>
thanks to jqwidgets team for great work :)
you can look at this sample: jQWidgets Grid Filtering. Works fine with IE on my side. According to me, the <!DOCTYPE html> should be always used in your web pages.
thanks
the problem is that the grid is within window jqxWindow
i just defined div as in the example without embedding it within other divs
I have a html file with some code and jquery and js files my problem is if that scripts files are bottom of the page its working fine but if i put that files in top of the file i mean in header tag its not working.
<html>
<head>
<meta charset="utf-8" />
<title>Testing</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/style-default.css" rel="stylesheet" id="style_color" />
</head>
<body class="fixed-top">
/*some html code here*/
<div id="footer"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="assets/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="js/jquery.sparkline.js" type="text/javascript"></script>
<script src="assets/chart-master/Chart.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<!-- END JAVASCRIPTS -->
</body>
</html>
help me out,
kiran
Most likely there are dependencies in the scripts on DOM elements that are not loaded yet.
You can wrap your JavaScript in a document.ready handler if you want the scripts to be loaded in the head tag
$(document).ready(function(){
//do your JS stuff here
});
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.