Laravel 5.3, Custom Css/Js not working - javascript

I am new to Laravel and working on a product. The issue I am facing is with loading JS and CSS files.
I have placed all the CSS and JS files inside assets folder and accessing them following way :
CSS :
<link href="{{asset('css/bootstrap.min.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/bootstrap-select.css')}}">
<!-- Font Awesome CSS -->
<link href="{{asset('css/font-awesome.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{asset('css/ionicons.css')}}" rel="stylesheet" type="text/css">
<!-- Owl carousel -->
<link href="{{asset('css/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/owl.theme.css')}}" rel="stylesheet">
<link href="{{asset('css/owl.transitions.css')}}" rel="stylesheet" type="text/css">
<!-- Custome CSS -->
<link rel="stylesheet" href="{{asset('css/nanoscroller.css')}}" type='text/css'>
<link href="{{asset('css/jquery.bxslider.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/menu.css')}}">
<link href="{{asset('css/all.css')}}" rel='stylesheet' type='text/css'>
and
JS :
<!-- JS -->
<script src="{{asset('js/jquery-1.12.0.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/bootstrap-select.js')}}"></script>
<script type="text/javascript" src="{{asset('js/jquery.nanoscroller.js')}}"> </script>
<script defer src="{{asset('js/bx.js')}}"></script>
<script src="{{asset('js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{asset('js/menu.js')}}"></script>
<script src="{{asset('js/owl.carousel.js')}}" type="text/javascript"> </script>
<script src="{{asset('js/custom.js')}}"></script>
This is exact the same way as it was working fine with the default js & css files come with fresh laravel installation like this :
Default CSS & JS (working) :
<link href="{{asset('/css/app.css')}}" rel="stylesheet">
<script src="{{asset('/js/app.js')}}"></script>
What I am missing here ? Do I have to use the gulp and compile all of js and css into default app.css and app.js files ?
Thanks


This points to the public dir not to the assets dir, move your files to public/css and public/js, use assets dir when your are using gulp.
If you would like to combine some plain CSS stylesheets into a single file, you may use the styles method. Paths passed to this method are relative to the resources/assets/css directory and the resulting CSS will be placed in public/css/all.css :
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
]);
});
for js use mix.scripts


Add /
<link href="{{asset('/css/bootstrap.min.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('/css/bootstrap-select.css')}}">
<!-- Font Awesome CSS -->
<link href="{{asset('/css/font-awesome.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{asset('/css/ionicons.css')}}" rel="stylesheet" type="text/css">
<!-- Owl carousel -->
<link href="{{asset('/css/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('/css/owl.theme.css')}}" rel="stylesheet">
<link href="{{asset('/css/owl.transitions.css')}}" rel="stylesheet" type="text/css">
<!-- Custome CSS -->
<link rel="stylesheet" href="{{asset('/css/nanoscroller.css')}}" type='text/css'>
<link href="{{asset('/css/jquery.bxslider.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('/css/menu.css')}}">
<link href="{{asset('/css/all.css')}}" rel='stylesheet' type='text/css'>
And JS
<script src="{{asset('/js/jquery-1.12.0.min.js')}}"></script>
<script src="{{asset('/js/bootstrap.min.js')}}"></script>
<script src="{{asset('/js/bootstrap-select.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jquery.nanoscroller.js')}}"> </script>
<script defer src="{{asset('/js/bx.js')}}"></script>
<script src="{{asset('/js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{asset('/js/menu.js')}}"></script>
<script src="{{asset('/js/owl.carousel.js')}}" type="text/javascript"> </script>
<script src="{{asset('/js/custom.js')}}"></script>

Related

CSS and JavaScript files in Laravel 5 website

I have a lot of CSS and JavaScript files in my Laravel 5.5 website and that leads to slow loading. How can I solve that? Here are the files:
<link rel="stylesheet" href="css/EdusecCustome.css">
<link rel="stylesheet" href="css/thead.css">
<link rel="stylesheet" href="css/AdminLTE-rtl.css">
<link href="/css/AdminLTE.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="css/bootstrap-rtl.css">
<link href="css/jquery.dataTables.min.css"rel="stylesheet">
<link rel="stylesheet"href="css/responsive.dataTables.min.css">
<link href="css/fixedColumns.dataTables.min.css"rel="stylesheet">
<link href="css/buttons.dataTables.min.css" rel="stylesheet">
<link href="css/stylepanel.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.timepicker.min.css">
<link href="css/dataTables.tableTools.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/pdfmake.js" charset="utf-8"></script>
<script src="js/vfs_fonts_times_new_roman.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/app.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/datatables.bootstrap.js"></script>
<script src="js/dataTables.buttons.js"></script>
<script src="js/buttons.flash.js"></script>
<script src="js/buttons.html5.js"></script>
<script src="js/buttons.colVis.min.js"></script>
<script src="js/buttons.print.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/dataTables.fixedColumns.min.js"></script>
<script src="js/dataTables.rowReorder.min.js"></script>
<script src="js/dataTables.tableTools.js"></script>
<script src="js/jquery.timepicker.js"></script>

I believe Laravel Mix can solve your issue. It uses Webpack and npm to compile your assets, you can read about Webpack here and npm here.

You can use webpack.mix.js and it'll build those files css in one file with minimization(with js the same action). Look at my example bellow:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.styles([
'resources/assets/admin/bootstrap/css/bootstrap.min.css',
'resources/assets/admin/font-awesome/4.5.0/css/font-awesome.min.css',
'resources/assets/admin/ionicons/2.0.1/css/ionicons.min.css',
'resources/assets/admin/plugins/iCheck/minimal/_all.css',
'resources/assets/admin/plugins/datepicker/datepicker3.css',
'resources/assets/admin/plugins/select2/select2.min.css',
'resources/assets/admin/plugins/datatables/dataTables.bootstrap.css',
'resources/assets/admin/dist/css/AdminLTE.min.css',
'resources/assets/admin/dist/css/skins/_all-skins.min.css'
], 'public/css/admin.css');
mix.js('resources/assets/admin/bootstrap/js/bootstrap.min.js','public/js')
mix.scripts([
'resources/assets/admin/plugins/jQuery/jquery-2.2.3.min.js',
'resources/assets/admin/bootstrap/js/bootstrap.min.js',
'resources/assets/admin/plugins/select2/select2.full.min.js',
'resources/assets/admin/plugins/datepicker/bootstrap-datepicker.js',
'resources/assets/admin/plugins/datatables/jquery.dataTables.min.js',
'resources/assets/admin/plugins/datatables/dataTables.bootstrap.min.js',
'resources/assets/admin/plugins/slimScroll/jquery.slimscroll.min.js',
'resources/assets/admin/plugins/fastclick/fastclick.js',
'resources/assets/admin/plugins/iCheck/icheck.min.js',
'resources/assets/admin/dist/js/app.min.js',
'resources/assets/admin/dist/js/demo.js',
'resources/assets/admin/dist/js/scripts.js'
], 'public/js/admin.js');
mix.copy('resources/assets/admin/bootstrap/fonts', 'public/fonts');
mix.copy('resources/assets/admin/dist/fonts', 'public/fonts');
mix.copy('resources/assets/admin/dist/img', 'public/img');
mix.copy('resources/assets/admin/plugins/iCheck/minimal/blue.png', 'public/css');
mix.styles([
'resources/assets/front/css/bootstrap.min.css',
'resources/assets/front/css/font-awesome.min.css',
'resources/assets/front/css/animate.min.css',
'resources/assets/front/css/owl.carousel.css',
'resources/assets/front/css/owl.theme.css',
'resources/assets/front/css/owl.transitions.css',
'resources/assets/front/css/style.css',
'resources/assets/front/css/responsive.css'
],'public/css/front.css');
mix.scripts([
'resources/assets/front/js/jquery-1.11.3.min.js',
'resources/assets/front/js/bootstrap.min.js',
'resources/assets/front/js/owl.carousel.min.js',
'resources/assets/front/js/jquery.stickit.min.js',
'resources/assets/front/js/menu.js',
'resources/assets/front/js/scripts.js'
], 'public/js/front.js');
mix.copy('resources/assets/front/fonts', 'public/fonts');
mix.copy('resources/assets/front/images', 'public/images');
mix.copy('resources/assets/admin/dist/img', 'public/img')
And in my layout:
<link rel="stylesheet" href="/css/admin.css">
.....
<script src="/js/admin.js"></script>

Bootstrap, jQuery, Popper, and CSS load order

I'm not sure my load order is correct. Can someone make sure it is?
In "head" :
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In "body" :
<script src="js/bootstrap.js"</script>
<script src="js/jquery-3.2.1.min.js"</script>
<script src="js/jquery-slim.min.js"</script>
<script src="js/popper.min.js"</script>
<script src="js/custom.js"></script>

In "head" :
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In "body" :
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.min.js"></script>
Try using the minified version they are much smaller therfore much faster to load

Check this out !
In head :
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<!-- CUSTOME STYLE CSS-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
In Body :
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>

Froala Editor 2 basic init Uncaught TypeError: undefined is not a function

I just follow froala documentation and mix it with current layout using metronic.
Here is my css order.
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/components-md.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/plugins-md.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/themes/grey.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_style.min.css" />
and here is my JS order
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/coeg-editor/js/froala_editor.min.js"></script>
<script>
$(function() {
Metronic.init(); // init metronic core componets
Layout.init(); // init layout
$('a[href="{{ Request::url() }}"]').parent().addClass('active');
$('textarea#content').editable({inlineMode: false});
});
</script>
and I get Uncaught TypeError: undefined is not a function right at the $('textarea#content').editable({inlineMode: false});
But there is no error if I comment $('textarea#content').editable({inlineMode: false}); section.
How I can fix it ?

See https://www.froala.com/wysiwyg-editor/v2.0/docs/migrate-from-v1 for using
froalaEditor()
instead of
editable()
never mind the html which contain example still using v1 syntax instead of v2 :D

Ajax loader (.gif) file keeps on sniping at the start of a page?

I am just importing the below javascript file and css but when i run this page the ajax-loader just keeps on spinning.
Note: there is no body or content in the file at all other than what is mentioned below.
Any idea why the ajax-loader.gif spins ?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
.However when i try the below links it works fine without the loader spinning.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

why two jquery mobiles just add one:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script> //<---either this
<script src="js/jquery.mobile-1.4.2.min.js"></script>//<--or this
you have to pick only one of it, so update to this:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
and you have loaded all the non-minified and minified css files too.

twitter Bootstrap nav-bar not working

I am using twitter Bootstrap nav bar.
I am trying to make the nav bar behave properly for the mobile devices(i.e when the screen size is small).
nav-collapse works fine in this jsfiddle. But for the same code, in the browser when I reduce the window size it does not work. I don't know what seems to be the problem. Please help me.
Edit : included the content of the head
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css" />
<script src = "jquery-1.9.1.js" type = "text/javascript"></script>
<script src = "jquery-ui.js" type = "text/javascript"></script>
<script src = "jquery.validate.js" type = "text/javascript"></script>
<script src = "1.3.1.js" type = "text/javascript"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-wysihtml5.css"/>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.com/bootstrap-wysihtml5/lib/css/bootstrap.min.css"></link>
<script src = "bootstrap.min.js" type = "text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.com/bootstrap-wysihtml5/lib/css/prettify.css"></link>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.com/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="css/job.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

Categories