Error in linking to Css and js file in index.html - javascript

I want to link my css file in my index.html file. The structure of my project is:
MyWeb
Views
-> index.html
css
-> style.css
js
->jQuery.js
I tried the following relative href links but nothing worked.
<link href="../css/style.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<script src="../js/jQuery.js"></script>
Here is the link to the website hosted locally: http://127.0.0.1:5000/

Try <link href="/css/style.css" rel="stylesheet">
its relative to the root

Remove ../ in href
<link rel="stylesheet" href="css/style.css" type="text/css" />

The html files are dynamic if you are using Flask Framework. Try something like:
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
Found here: Flask framework intro

assuming your folder structure is as follows
your app
templates
static
style.css
app.py
or you can also do it like this
<link rel="stylesheet" href="/static/style.css" type="text/css" />

Related

HTML do not load CSS file

I started to develop a web page project with nodejs ejs engine.
It’s my git repo link: https://github.com/FikretAKBAS/teknikhane.git
The problem is when I start my project “npm start” html pages are loading but css file does not load. I tried many different things to figure out that but I didn’t get any solutions for that. In addition to I guess that’s a file path problem. I hope someone could help to solve this problem. Thanks a lot.
enter image description here
Remove /public from your css files path
for example
before
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/public/css/fontawesome.css">
<link rel="stylesheet" href="/public/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/public/css/owl.css">
<link rel="stylesheet" href="/public/css/lightbox.css">
after
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/css/fontawesome.css">
<link rel="stylesheet" href="/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/css/owl.css">
<link rel="stylesheet" href="/css/lightbox.css">
After you started the server
Your public folder become a root folder for localhost:5000

net::ERR_ABORTED 404 (Not Found) Laravel 8 HELPPPP

I'm calling the files as follows
<link href="{{asset('assets/css/themes/layout/header/base/light.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/header/menu/light.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/header/menu/light.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/brand/dark.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/aside/dark.css')}}" rel="stylesheet" type="text/css" />
and
<script src="{{asset('assets/custom/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/custom/js/bootstrap-timepicker.min.js')}}"></script>
the app.blade.php file is on the way: resources\views\Backend\layout
I've already used the commands below that solved some files in the folder auth
composer require laravel/ui --dev
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
but it doesn't work to tidy up the files on the other pages, such as views, which is where I'm having problems.
does anyone here have the solution???? help me please.
Move your assets folder into your public folder.

Laravel 7.6.2 app.js error app.js:3449 Uncaught TypeError: Cannot convert object to primitive value

I using Laravel 7.6.2 as mentioned, and I keep getting the error in browser console as shown in picture below when I click on my navbar toggle button.
Here is the css and script files used:
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css')}}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/jomkurus.css') }}" rel="stylesheet">
<!-- Plugins -->
<script src="{{asset('fontawesome/js/all.js')}}"></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
Thank you for your advice in advance.
I have found the root cause of this issue, seem like it is because of the jQuery 3.5.0 version issue. At this moment, the solution is downgrade jQuery to 3.4.1 version. The discussion can be found here. github.com/twbs/bootstrap/issues/30553 I have tried it and it works!
jQuery released 3.5.1, that fixed this bug (jQuery blog).
You can update this module in your project:
npm install jquery#3.5.1
npm run dev

Cannot link JSX script to html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="login.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="navbar" class="navbar">
</div>
</body>
<script src="/response.js" type="text/jsx"></script>
</html>
I am trying to create a component using ReactJS to set elements in the navigation bar. The problem is that the script I've written does not link to the html file. The value returned to the html tag is a list including nav, ul, and li tags.
How can I solve the problem of linking the script?
Thank you for the help.
Some browsers (e.g. Chrome) will fail to load the file unless it’s served via HTTP, which means that you’ll now need a server to view your page. A good one is http-server which can be installed from npm with the following command:
npm install -g http-server
And started frpm your project’s root directory like so:
http-server
Your page will now be viewable at http://127.0.0.1:8080/

JS and CSS files not loading inside html

My folder structure looks like,
MyProject
|
webcontent
Inside webContent folder I am having my html, js,CSS files.
Here I am loading the js & CSS files directly as below.
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.
It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:
MyProject/
|
webcontent/
|
js/
jquery-1.0.2.js
jquery-ui.js
css/
jquery-ui.css
then
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
The search terms for this are "relative URL" and/or "relative path."
Suppose you have your css file in
WebRoot --> Css
folder then use below line in your html
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
I hope this helps you
for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:
<link rel="stylesheet" href="mystyle/style.css" />
And if your file is in a folder "before" HTML folder, your address your css/js file like this:
<link rel="stylesheet" href="../mystyle/style.css" />

Categories

Resources