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>
Related
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..
I'm trying to add the clock picker Jquery plugin to my website. I build it first in the extern file, then I migrate the code into my website html, but doesn't work.
I already try to fix the problem with the console, and I see an error 404 with the link, ../css/style.css, but the problem I didn't add any link about a file "style.css".
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap - CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/reservation.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!--Font-->
<!-- Jquery JS & CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Time-Picker CSS -->
<link rel="stylesheet" href="src/css/datetimepicker/clockpicker.css">
<!-- Time-Picker JS -->
<script type="text/javascript" src="src/js/clockpicker.js"></script>
<script type="text/javascript" src="src/js/mesfonctions.js"></script>
<title> Réservation - Café Restaurant du Chemin de Fer</title>
I expect that the trouble doesn't come from my html file actually. Can have a problem with the clocktimer.js (the plugin I mean?)
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">
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).
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.