adding css and js file in laravel 5.3 - javascript

I want to include a css all css and js in single page and load it in all page.Now If I want to include bootstrap.css and bootstrap.js in welcome page I have included in welcome.blade.php page and if i want to add in another page I have included in second.blade.php page also.I want to include it in master page
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">

Crate header.blade.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="csrf-token" content="{{ csrf_token() }}" />
<meta name="description" content="">
<meta name="author" content="">
<title>dhinchakwale</title>
<!-- Bootstrap Core CSS -->
<link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('/css/datepicker.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('/css/dataTables.bootstrap.css') }}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ asset('/css/admin.css') }}" rel="stylesheet">
<!-- 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]-->
<!-- jQuery -->
<script src="{{ asset('/js/jquery.min.js') }}"></script>
</head>
<body id="page-top">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img alt="Brand" src="{{asset('/images/logo.png')}}" class="img-brand"></a>
</div>
</div>
</nav>
<div class="content-div">
#yield('content')
</div>
<div class="clearfix"></div>
<!-- Bootstrap Core JavaScript -->
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('/js/bootstrap-timepicker.min.js') }}"></script>
</body>
</html>
And use like this
First extends header
Second Section of your content
#extends('layouts.header')
#section('content')
<section class="content-header">
<h1>
Hello
</h1>
</section>
#stop

Here is the steps you can follow
Create a master template layout
Extend the master template in all pages and paste your link into header section
To create a master template
//master.blade.php
<html lang="en">
#yield('header')
<body>
#yield('page-body')
</body>
</html>
Now Extend this layout in second.blade.php
#extend('master.blade')
#section('header')
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
#endsection
#section('page-body')
{{!-- content of body --}}
#endsection

Define a common layout and include all .js and .css file on that layout and than bind your page with this layout.
Layout:
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
Where: #yield directive is used to display the contents of a given section.
View:
#extends('layouts.default')
#section('content')
i am the home page
#endsection

You can define a master layout view file then define your CSS and JS there. Then all of your view file will extend that layout file. See documentation here: https://laravel.com/docs/5.3/blade

Related

HTML not loading CSS in Django

I have a problem that my HTML code does not load my css files. The code works if put into the main.html tag, however as outsourced to the separate css files, not working at all.
Link to the project: https://github.com/Svantevith/Python/tree/master/ToDoList
The overall structure of the folder:
The head tag of main.html:
<head>
<title>ToDoList App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
<link id="sheet-theme" rel="stylesheet" type="text/css" href="light.css">
<!-- Nunito Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200&display=swap" rel="stylesheet">
</head>
In my django project, the rest of HTML files extend the main.html file, for example the register view:
{% extends 'base/main.html' %}
{% block content %}
<div class="header-bar">
<h1>Register</h1>
</div>
<div class="card-body">
<form method="POST">
{% csrf_token %}
{{form.as_p}}
<input style="margin-top: 16px" class="button" type="submit" value="Register">
</form>
<p>Already have an account? <a id="plain" href="{% url 'login' %}">Login</a></p>
</div>
{% endblock content %}
What might be the problem?
EDIT:
Solved the problem by adding the base/static/base folder and accessing the css via {% static 'base/file.css' %} as mentioned in the comments and official documentation ;)
You have to just put the {% load static %} on top of your main.html code
And in the Head section, you should change the link as I did in href.
<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static 'light.css'%}">
Your href="light.css" is the problem here. The system is looking for that file in the main folder that you are in. You have to tell the system to go to the base folder in the template folder using Jinja syntax. Your link should be
<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static light.css %}">

Laravel 5.3 include JS Plugins such as jQuery

I'm wondering whats the right way to include js plugins into laravel to use them in every file in project....
I first included them in the file /public/index.php, worked in general but caused some issues that are not acceptable.. So I'm looking for a better way to do it.
I now tried it in my master template master.blade.php that's included in every view.. There I used:
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
But it's not working, getting $ is not defined... Using the CDN doesn't change anything as well, so it doesn't seem to be about the path...
Can anybody help me? Been struggling around for days with this now, testing around different ways, but nothing works....
Edit: That's the complete file master.blade.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Shopping Portal') }}#yield('page')</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<link href="/css/sweetalert.css" rel="stylesheet"/>
<!-- Scripts -->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Shopping Portal') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<!-- some nav items -->
</div>
</div>
</nav>
#yield('content')
<div class="container">
<div class="row">
<footer class="text-center">
© 2016
<ul>
<li class="btn btn-default">Impressum</li>
<li class="btn btn-default">Kontakt</li>
</ul>
#yield('footer')
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
Edit2: I noticed one thing now: When I'm loading jquery again out of a view (so the view starts with that:
#extends('master')
<script src="/js/jquery-3.1.1.min.js"></script>
#section('content')
), then it works (at least in that specific view), but I'm wondering why... Am I wrong that if I load jQuery in the master template its included to every tempalte using the master template as well?
on layout you can add this
#yield('scripts')
and on page.blade.php
#section('scripts')
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
#endsection
if you want script to be on all pages add it to layout
directly like this
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>

Bootstrap navbar links don't work

My friends have asked me to make a website for their production company, which I've been working on, but as I am not a professional web designer, I've run into some issues. I've worked on this site by customizing a template I found online. However, I've come across an issue that I can't seem to fix despite searching here and on several other sites. The links in the navbar do not function when clicked. I was hoping someone could take a look and see if they've got any suggestions. The site can be found here.
This is my index HTML file-
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="robots" content="all,follow">
<meta name="googlebot" content="index,follow,snippet,archive">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Great Red Spot Productions | New Orleans, LA</title>
<meta name="keywords" content="">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100' rel='stylesheet' type='text/css'>
<!-- Bootstrap and Font Awesome css -->
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme stylesheet -->
<link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes -->
<link href="css/custom.css" rel="stylesheet">
<!-- owl carousel css -->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<!-- CSS Animations -->
<link href="css/animate.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png">
<!-- Mordernizr -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- Responsivity for older IE -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navigation" data-offset="120">
<!-- *** NAVBAR ***
_________________________________________________________ -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
<div id="all">
<!-- *** INTRO IMAGE ***
_________________________________________________________ -->
<div id="intro" class="clearfix">
<div class="item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<span class="pull-left"><h1 data-animate="fadeInDown">Great Red Spot Productions</h1><span>
</div>
</div>
</div>
</div>
</div>
<!-- *** INTRO IMAGE END *** -->
<!-- /#all -->
<!-- #### JAVASCRIPT FILES ### -->
<!-- js base -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- for demo purpose -->
<script src="js/jquery.cookie.js"></script>
<!-- waypoints for scroll spy -->
<script src="js/waypoints.min.js"></script>
<!-- maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/gmaps.js"></script>
<!-- masonry layout -->
<script src="js/masonry.pkgd.min.js"></script>
<!-- owl carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- jQuery scroll to -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- jQuery counter -->
<script src="js/jquery.counterup.min.js"></script>
<!-- jQuery parallax -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- main js file -->
<script src="js/front.js"></script>
</body>
</html>
I'm not sure what other files would be necessary for help, please just let me know if you need any other info.
There are errors in your javascript.Open the developer tools you can view that.That errors may be preventing that links from functioning.
The problem is your jquery.Please use of the latest jquery version 3.1.1,it may help you,And define them in the correct place of your code.Download the bootstrap and set it in your html page.
It looks like the tutorial/example you used had the links scroll to the section it referred to. We can see this is the case as when we click on a link the error comes from jquery.scrollTo.min.js.
There must be a function that is called every time you click the menu items. This would either be inline in your index file, or in one of the many js files you included.
One debug method would be to comment out js files included until the links correctly, this should work as when javascript on the page is turned off the links work just fine.
Good luck!

Bootstrap responsive not working after including Viewport meta

As the title says the responsive feature of Bootstrap 3.0 is not working on any mobile device (Android, iPad) in my website. It works perfectly in chrome and firefox by making the window smaller.
I know a common problem is forgetting to include the
<meta name="viewport" content="width=device-width, initial-scale=1">
but I already have it inside my header tag like this:
Full HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
Custom CSS Code
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
Am I missing something else? I have found a lot of posts related to this problem but all seem to be solved by adding the meta tag.
I even tried with two default templates from getbootstrap.com adding the meta tag manually and other meta tags found on other websites but it wont work. Any idea why?
Also I already added the root for the javascript functions at the bottom of the code (not sure if this helps but it enabled the slide menu coming from the 3 line button of the responsive feature).
Website
Your site pulls in http://sales-person-fish-27838.bitballoon.com/ via an iframe. Go directly there and it works fine. What host or how are you loading your content.

Bootstrap Tooltips Not Displaying On Hover

I've tried a few different ways to get Bootstrap tooltips working. I can't seem to find what's wrong with this. I've used Bootstrap tooltips before and it seems I always have an issue getting them going. Am I missing something obvious here? I'm not getting any JS errors or anything.
<!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">
<title>Quick Links</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script> -->
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type='text/css'>
</style>
</head>
<body>
<div class="container" style='text-align:center;'>
<h1>Quick Links</h1>
<div class='well'>
Quick links
</div>
<div>
<div class='row'>
<div class='col-md-3 hidden-xs'>
</div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3 hidden-xs'>
</div>
</div> </div>
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('.qtooltip').tooltip({'placement': 'top'});
});
</script>
</body>
</html>
I have found the issue.
Working fiddle here: http://jsfiddle.net/8dfwcL98/
In your case you forgot to add a title property to your element. Title is what is displayed as the tooltip.
<a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca' title="Awesome Tooltip">google</a>

Categories