Is there something wrong with this code, i have been checking the code for errors but it does not seem to display the required CSS and JS on the web page.
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Network Scanner</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<h2>Test to see if this works</h2>
</body>
</html>
If you're loading stylesheets/scripts, try just putting the path to them inside the href attribute. (No brackets). I just looked at the jinja docs and it says that expressions should be used using {{ }}
Related
Using Django {% load staticfiles %} I'm trying to load an app.js file in my base.html template.
I've seen several questions on StackOverflow about this and I also tried to follow this tutorial: https://www.techiediaries.com/javascript-tutorial/ but no of them actually helped with my issue.
It seems strange as well because on dev tools I see a 200 GET on the static/js/js.app and when I actually open the path the javascript is there.
Additionally, when I put the js code in a at the end of the body it seems to work. But I want to load the js from a file.
Below is the latest that I've tried, but still no luck.
base.html
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'js/app.js' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- jquery -->
</body>
</html>
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Put the following script after the body tag.
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
Why? When loading JavaScript files, it tends to fall under one of two cases.
The Javascript file contains functions which are needed while the page is loading OR
The Javascript file contains functions which should be used after the page is loading.
Conclusion
If the JS file contains functions referencing HTML elements then you should put it after the body tag so the page's DOM elements can finish loading first before the script. Else, putting it in the head works as well.
P.S - You should also consider performance, as there is a difference in that aspect when importing JS files in the head and after the body
Adding <script type="text/javascript" src="{% static 'js/app.js' %}"></script> below my </body> fixed the problem I had with the js file not loading.
Im trying to upload templates from HTLM5 UP into the Django framework. However I'm not sure where to place some of the supporting CSS, SASS, Webfonts, Javascript files. Link to the template I downloaded below. Files I'm referring to are in the "Assets" folder.
https://html5up.net/strata
I've tried placing them in the path below. I'm using the Pycharm IDE if that changes anything.
ProjectName/mysite/templates/mysite/assets
I've been trying to call them with href="mysite/assets/css/main.css" with no success.
IDE: PyCharm
At first, you need to {% load staticfiles %} top of the .html file
And link your file like :
CSS = <link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
img= <img src="{% static 'images/rakib.jpg' %}" alt="" />
Js= <script src="{% static 'assets/js/jquery.min.js' %}"></script>
Full code:
Filename: base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title> {% block head_title %} Blog {% endblock head_title %} </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href=href="{% static 'assets/css/main.css' %}" />
<style>
{% block style %} {% endblock style %}
</style>
{% block head_extra %} {% endblock head_extra %}
</head>
I have seen so many questions and answers on this but nothing is working.
I have a base.html which looks like so:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Django</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static "css/style2.css" %}">
<script src="{% static 'js/jquery.1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static "js/main.js" %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
{% block js %}{% endblock %}
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
I then have a template which looks like so:
{% extends "base.html" %}
{% block javascript %}
<script>
alert("hello");
</script>
{% endblock %}
{% block content %}
In both cases, 1) The JavaScript file main.js is not loaded in. If I look at the DOM, the JavaScript file is not there. If I add in another CSS file, that works fine. Its just JavaScript.
2) The JavaScript in the block in the template doesn't run either.
Structure:
Your main template declares a block called "js" but your child template has a block called "javascript". These need to be the same.
Well my template code.
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="{% static 'website/staffaddproblem.js' %}"></script>
<title>Dashboard</title>
<link href="{% static 'website/style.css' %}" rel="stylesheet" type="text/css"/>
</head>
<body>
body
</body>
<html>
As you can see it has a css file. which is working properly, but java script file does not work.
when i load the page its source looks like this.
When i click the link it loads the file too its there its linking fine but its not working . there is no problem in code js code working fine when written in same file.
Have you changed the settings.py file to include staticroot?
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Here's a part of my template which works with both js and css files.
{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'css/stylesheet.css' %}">
<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<title>
The directories are as follows:
- static
-js
- jquery-1.11.3.min.js
-css
- stylesheet.css
- materialize.min.css
- templates
-index.html
I cannot make Lightbox2 (http://lokeshdhakar.com/projects/lightbox2/) work with Django. When I click on member's picture I would like to see the lightbox appear. Instead it displays the downloaded image. Also hover does not work on the image. Here is what I've done so far:
I have downloaded Lightbox2 and copied files in js, img and css folders.
base.html
<head>
<link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</head>
<body>
<link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
<link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</body>
member_details.html (Django template)
<div class="members">
{% if userprofile.profile_picture %}
<a href="{{ MEDIA_URL }}
{{userprofile.profile_picture.url|default_if_none:'' }}" lightbox="{{userprofile.user.first_name }}" >
<img class="lightbox" src="{{ MEDIA_URL }}{{ userprofile.profile_picture.url|default_if_none:"" }}" alt="{{ userprofile.user.first_name }}" />
</a>
{% endif %}
</div>
Can someone please suggest how to fix this please.
Whilst you have added some example code there is not enough information in your question to give an accurate answer. There are a number of problems with the code blocks you have included in your question also:
Your example code has numerous spelling mistakes which means your CSS will give you 404.
There is no javascript included
The data attributes on your image <img> and link <a> tags are not named correctly.
Look through the how to use guide not using dynamic data (use a static image) get it working then replace the images with server side template generated content.
HOW TO USE
Step 1 - Load the Javascript and CSS
Download and unzip the latest version of Lightbox.
Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first.
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
Look inside the css folder to find lightbox.css and load it.
<link href="css/lightbox.css" rel="stylesheet" />
Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
Step 2 - Turn it on
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">
Image #1
</a>
Optional: Add a data-title attribute if you want to show a caption.
If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
Image #2
Image #3
Image #4
Thanks #MattWritesCode and #cbergmiller.
Following #MattWritesCode advice I now have in my template:
<div class="row">
<div class="col-md-4 col-xs-6">
<a href="{% static 'img/8marc.jpg' %}" data-lightbox="8marc" data-title="My caption">
<img src="{% static 'img/8marc.jpg' %}" /></a>
</a>
</div>
</div>
base.html
<head>
<title>TrackCat - {% block title %}TrackCat{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,300">
<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">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" >
{% block custom_css %}{% endblock %}
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static 'js/jquery.datetimepicker.js' %}"></script>
<script type="text/javascript" src="{% static 'js/lightbox.min.js' %}"></script>
I managed to activate lightbox functionality using
<script type="text/javascript" src="{% static 'js/lightbox.js' %}"></script>
instead of lightbox.min.js in my base.html.