I am trying to integrate a custom html SaaS template in Laravel 7. I have put the template JS and CSS files in public directory and created a master blade in which I have link these js and css files. But somehow it is not working correctly. I do know that there is some issue with the app.js file but I am unable to identify the actual reason.
I will appreciate if anyone can guide me in this regard.
CSS Files Path:
<head>
<meta charset="utf-8" />
<title>{{ config('site_name')}} | Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App favicon -->
<link rel="shortcut icon" href="{{url('images/favicon.ico')}}">
<!-- Bootstrap Css -->
<link href="{{ url('css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{ url('css/icons.min.css')}}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{ url('css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
#yield('theme_style')
</head>
JS Files Path:
<script src="{{url('libs/jquery/jquery.min.js')}}"></script>
<script src="{{url('libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{url('libs/metismenu/metisMenu.min.js')}}"></script>
<script src="{{url('libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{url('libs/node-waves/waves.min.js')}}"></script>
<!-- apexcharts -->
<script src="{{url('libs/apexcharts/apexcharts.min.js')}}"></script>
<script src="{{url('js/pages/dashboard.init.js')}}"></script>
<!-- App js -->
<script src="{{url('js/app.js')}}"></script>
#yield('theme_script')
The blade is loading but functionality related to some css and js is not working. All the files are linked correctly and loading in view page source.
Note: I also try 'npm run dev' to compile the files.
I found a solution to this question, actually I was using url() helper function for linking css/js path. I made two changes to my files:
1) I put all files in a folder as it was placed in a default html template.
2) I used URL::asset() OR asset() helper function to link my files.
After that i clear the cache and run the project. It just worked.
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"
If I copy the code from W3Schools to my webserver then the "sticky" menu works as long as I am referencing the CDN path for the script and
stylesheet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If I change it to the location of the Bootstrap files that I have downloaded to the server then it doesn't work, although all other bootstrap
styles and javascript functions work when referencing the local files. I have tried downloading the latest from Bootstrap as well.
Sorry as I am probably missing something obvious, but is it possible to download the function and styles necessary for this to work?
i suggest try this: first you need set your static files in this case Bootstrap(css, js, etc):
static
....Bootstrap
......CSS
.........bootstrap.min.css
......JS
.........jquery-3.3.1.slim.min.js
.........popper.min.js
.........bootstrap.min.js
....etc
..etc
in this case we has the posible structure folder for static into this folder put the folder that content css an js files of bootstrap.
the next is set your links for css and js files in you template similar to this:
{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'Bootstrap/css/bootstrap.min.css' %}">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'Bootstrap/js/jquery-3.3.1.slim.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/popper.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
now you need this on your settings.py:
..
..
..
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
...
..
that is all for load bootstrap or other static files in yout template, please try and good luck.
For download Bootstrap4 , 3..etc.. go to the official website:
Official site Bootstrap
I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
I am very new to using templates. My CSS is not working if I put my html in another folder.
I have realised the css was being applied through JavaScript which I am also new too. I have guided the link for css/js the correct folders and files but it still wont work.
The relevant files are /Linear/index.html and /Linear/builds/index.html(where the error is) and the js and css folders
https://www.dropbox.com/s/cmmdybvbhvff0w4/Linear.zip?dl=0
In your template used skel.js and the style base path defined into it. So if you want your other html file that exist in other child folder work well, you must change the skel.js file.
Also in your index.html file used "noscript" tags. Its mean is if your browser dose not support JavaScript then load the css file, So if you remove this tags it works well like file that exist in root Folder.
<script type="text/javascript" src="../js/skel.min.js"></script>
<script type="text/javascript" src="../js/skel-panels.min.js"></script>
<script type="text/javascript" src="../js/init.js"></script>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</head>
Removing the noscript tag around the css link will solve this;
So, instead of
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
You have;
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
You can download the modified version here
https://www.dropbox.com/s/lewnpt0iy980i53/Linear-Modified.zip?dl=0
I am using Bootstrap Validator(bootstrapValidator.js) for form validations. With this I added jQuery UI Multiselect component in to my bootstrap page. But this component requires 1.5.1/jquery.min.js and Bootstrap Validator requires jquery-1.10.2.min.js, Because of this two different version on the same page validator is not working. If I use only updated version of Js (jquery-1.10.2.min.js) then Multiselect component stops working. Please help....
try to add the files in the order:
js/jquery-1.10.2.min.js
js/jquery-ui.js (if file exists in the project :))
jquery.min.js (1.5.1)
js/bootstrap.min.js (if file exists in the project :))
js/bootstrapValidator.min.js (if file exists in the project :))
other js
if it does not work http://api.jquery.com/jQuery.noConflict/
Have you tried inncluding all js and css files in the head tag, and include order is critical: first include jquery library, next bootstrap, next plugin for validator. Then check your html code for errors. I found this tutoral online [http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html]
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
</head>