My css and js files are not loading when i launch my project i already included the link of my files in the stylesheet of my code where it is located. I already trided several methods but it is not working
The components is directly in my public folders directory
public folder contains:
bower_components
build
css
dist
documentation
pages
plugins
my head.blade.php
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BET ADMIN | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/dist/css/skins/_all-skins.min.css'">
<!-- Morris chart -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/morris .js/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/jvectormap/jquery-jvectormap.css">
<!-- Date Picker -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="{{URL::to('/')}}/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
my footer-scripts.blade.php
<!-- jQuery 3 -->
<script src="{{URL::to('/')}}/public/bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{URL::to('/')}}/public/bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="{{URL::to('/')}}/public/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="{{URL::to('/')}}/public/bower_components/raphael/raphael.min.js"></script>
<script src="{{URL::to('/')}}/public/bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="{{URL::to('/')}}/public/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="{{URL::to('/')}}/public/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="{{URL::to('/')}}/public/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="{{URL::to('/')}}/public/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="{{URL::to('/')}}/public/bower_components/moment/min/moment.min.js"></script>
<script src="{{URL::to('/')}}/public/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="{{URL::to('/')}}/public/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="{{URL::to('/')}}/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="{{URL::to('/')}}/public/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{URL::to('/')}}/public/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="{{URL::to('/')}}/public/dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{URL::to('/')}}/public/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{URL::to('/')}}/public/dist/js/demo.js"></script>
demo.blade.php
#extends('layouts.mainlayout')
#section('content')
<div>
HELLO
</div>
#endsection
web.php /routes
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/demo', function () {
return view('demo');
});
Auth::routes();
//Route::get('/demo', 'HomeController#index')->name('demo');
Route::get('demo', 'HomeController#index');
HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
return view('demo');
}
}
If your project working fine but css and js not working follow this steps
1.Open your file in chrome and press ctrl + u then open any link if link open then css working fine error something else
use this {{ asset('css/min.css') }} or <script src="{{ URL::asset('js/bootstrap.js') }}"></script> Laravel’s URL::to() vs URL::asset()
check your chrome console through inspect element, probably the system cant find the file path..
Related
I downloaded a theme providing html, css3, js file
and I added the path as below source
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Porto - Responsive HTML5 Template 7.5.0</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Porto - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Theme CSS -->
<link rel="stylesheet" href="/static/css/theme.css">
<link rel="stylesheet" href="/static/css/theme-elements.css">
<link rel="stylesheet" href="/static/css/theme-blog.css">
<link rel="stylesheet" href="/static/css/theme-shop.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/settings.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/layers.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/navigation.css">
<!-- Demo CSS -->
<!-- Skin CSS -->
<link rel="stylesheet" href="/static/css/skins/skin-corporate-5.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="/static/css/custom.css">
<!-- Head Libs -->
<script src="/static/vendor/modernizr/modernizr.min.js"></script>
It works well when I approach at first
However, when i move using router it doesn't run some css and JavaScript.
so I tried to add a javascript path on component file
<template>
<div role="main" class="main">
test
</div>
</template>
<script>
import "/static/js/theme.js"
</script>
When I try like this I can see this error
This dependency was not found:
* /static/js/theme.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/parents/Robot.vue
To install it, you can run: npm install --save /static/js/theme.js
is there the way to load whole index.html again? or another way to resolve this issue?
Instead of writing static in the index.html files path, use <%= BASE_URL %>.
For example instead of adding all css and script files with href="/static/vendor/modernizr/modernizr.min.js", write like this href="<%= BASE_URL %>/vendor/modernizr/modernizr.min.js"
Really nooby question, but couldn't find it on this site, and just can't get it to work.
How can I get javascript and jquery to work when putting CDN into headers / footers?
My javascript is working when I include the CDN and the tags right in with the HTML, but I want to have my javascript on other pages, rather than in with the HTML view pages.
I can't see what is wrong. Maybe you can help?
this is working
<div class="form-group">
<label for="caption">Event Description</label>
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
<textarea class="form-control" name="event_description" id="body" cols="30" rows="20"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
</script>
</div>
However this is not
I have
<?php require_once("includes/header.php"); ?>
<?php require_once("includes/footer.php"); ?>
on all tops and bottom of HTML view pages.
Here are my headers and footers
<?php ob_start(); ?>
<?php require_once("init.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
footer
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
</body>
</html>
here is the scripts.js page
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
$(document).ready(function(){
alert('hello');
});
not sure why nothing works from the scripts.js page. The alert is not working. I have JQuery.js referenced also..
Thank you
You should put <script src="js/scripts.js"></script> after JQuery and other dependencies. Because your script.js is using JQuery before you imported it.
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
<!-- MY JS -->
<script src="js/scripts.js"></script>
</body>
</html>
Just make the following changes in your footer and everything will work fine.
Regarding to keep JS in header and footer
<script>-tag over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
It was trends before to put JavaScript code in the header but now because of SEO and site performance, it is better to put JavaScripts in the footer. yes, that means all the js code.
How to avoid such issues in future?
you first need to include the dependencies required by your code and other libraries. like jQuery is required by most of the libraries bootstraps, fancybox, jQuery full calendar and so on. so first include jQuery library then other js libraries if they have any other dependencies than include them before your custom javascript. it is just same as in your code you define something above. what if you try to use it before defining it? no way it will never work...
Now what about CSS dependencies?
always include them in the header inside tags.
I have a folder structure like below
angular-src
src
index.html
bootstrap
css
app.js
In my app.js file I have set this static folder like:
// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
I want to set css and bootstrap files inside the index.html.
Here's index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Alpha Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery UI -->
<link href="https://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet" media="screen">
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- styles -->
<link href="./css/styles.css" rel="stylesheet">
<link href="./css/stats.css" rel="stylesheet">
</head>
<body>
<app-root>Loading...</app-root>
<footer>
<div class="container">
<div class="copy text-center">
Copyright 2014 <a href='#'>Website</a>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./vendors/morris/morris.css">
<script src="./vendors/jquery.knob.js"></script>
<script src="./vendors/raphael-min.js"></script>
<script src="./vendors/morris/morris.min.js"></script>
<script src="./vendors/flot/jquery.flot.js"></script>
<script src="./vendors/flot/jquery.flot.categories.js"></script>
<script src="./vendors/flot/jquery.flot.pie.js"></script>
<script src="./vendors/flot/jquery.flot.time.js"></script>
<script src="./vendors/flot/jquery.flot.stack.js"></script>
<script src="./vendors/flot/jquery.flot.resize.js"></script>
<script src="./js/custom.js"></script>
<script src="./js/stats.js"></script>
</body>
</html>
For directory structure :
use single dot(.) for current directory
use double dots(..) jump out the current directory
Now coming to your question to set path of your css and bootstrap files use in index.html :
<!-- Bootstrap -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- styles -->
<link href="../../css/styles.css" rel="stylesheet">
<link href="../../css/stats.css" rel="stylesheet">
What is wrong with my code below?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoSystem - SBM ITB Jakarta</title>
<!-- Core CSS - Include with every page -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- Page-Level Plugin CSS - Dashboard -->
<link href="../css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
<link href="../css/plugins/timeline/timeline.css" rel="stylesheet">
<!-- SB Admin CSS - Include with every page -->
<link href="../css/sb-admin.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- Core Scripts - Include with every page -->
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- Page-Level Plugin Scripts - Dashboard -->
<script src="../js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="../js/plugins/morris/morris.js"></script>
<!-- SB Admin Scripts - Include with every page -->
<script src="../js/sb-admin.js"></script>
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script src="../js/demo/dashboard-demo.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
My bootstrap modal dialog is not working when I use SbAdmin template. But, when I use general template from bootstrap, my modal dialog is working properly.
Hahaha.. how stupid I am...
Just remove this code :
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script src="../js/demo/dashboard-demo.js"></script>
I'm using javascript to control a modal for a log in and registration page.
However I cant seem to get the javascript to fire.
Here is the header for my page:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site </title>
<link rel="icon" href="myfavicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Landing Page CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery - UI CSS - Both v 1.11 and 2.1 -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- Starts all the Javascript-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<!-- Javascript for the admin page -->
<script src="js/sb-admin-2.js"></script>
<!-- jQuery - Both v 1.11 and 2.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Validator-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<!-- The Validator for the forms-->
<script src="js/validator.js"></script>
<!-- My Custom Javascript functions-->
<script src="js/mymain.js"></script>
My Login Function are held within the /js/mymain.js script. I also have the following call to the login function in a document.ready() within the <head> of this page.
$('#loginBtn').click(function(e){
alert('cliked');
e.preventDefault();
login();
});
The problem is that the alert given above is not firing, which suggests that there is something broken in the javascript, but I cant work out what it is.
All the Modals are as per the Bootstrap site, and are ID'd appropriately. Its just a problem with the Javascript/Jquery.