I'm trying to incorporate the Carousel example template into my project: http://getbootstrap.com/examples/carousel/
This is my HTML. The CSS and JS files load fine. To give you a good idea of what exactly is missing, here is my page: http://i.imgur.com/OvcSKsj.png
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<script src="{{ STATIC_URL }}js/jquery.min.js"></script>
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/bootstrap-theme.min.css">
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<title>Carousel Template for Bootstrap</title>
</head>
<!-- NAVBAR
================================================== -->
<body>
# The body was directly copy-pasted, except that the bootstrap.js and jquery.js
# files were moved to the top of the page from the bottom for debug convenience
</body>
Edit: I forgot that you have to initialize it with $('.carousel').carousel();. I added that just before the carousal HTML, but it still does not work.
Answered in another post
I will quote it here as I think this might be your problem.
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page .
The code to run the carousel is
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
You can put it either in the after the two other scripts
or where the other scripts are now.
Related
<!doctype html>
Multi Level Dropdown
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
...................
<script type="text/javascript" src="scripts.js"></script>
it is hard to understand your problem based on the context you gave. Consider to be more precise and share all of your code. However a couple of ideas:
Your <script> tag should be placed within the <body> ... </body> tag
Use <script type="text/javascript" src="./scripts.js"></script>
Check/ confirm whether your stylesheet "style.css" is working
Check for valid javascript code by testing with simple code such as alert('Test'); in your scripts.js file
I am writing a web app with Flask in Python and I want to style my HTML pages with CSS but I can't manage to create a link between HTML and CSS. I've tried several times to move some files and folders and to use other means but nothing has worked.
Here is my directory:
App (folder):
- main.py
- website (folder)
__init__.py, auth.py, models.py, views.py
- static (folder) -> styling.css (inside)
- templates (folder) -> base.html, home.html (inside)
In my 'base.html' template, I've written:
<script
type="text/css"
src="{{ url_for('static', filename='styling.css') }}"
></script>
But it doesn't work (when I click on the link in VSCode, it tells me that the file doesn't exist (it searches in the template folder). Do anyone see any error please?
You are using wrong tag for including css file. You have to use link tag.
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
Edit:
Another problem after including the file is that browsers save cache and sometime doesn't pick up changed static files.
For that you to hard reload or sometime clear cache.
Here is a article for major browsers on how to hard reload.
To see different options of reloading, open inspect tab and right click on reload button at side of search bar.
not familiar with Python, but in HTML you have to import the css with the <link/> tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../static/styling.css"> //relative link to the css
</head>
<body>
</body>
</html>
reference: https://www.w3schools.com/css/css_howto.asp
I hope it works
Do you have a <head> section in your base.html file?
It should look like this...
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
</head>
<body>
<!--Your Body Content Here -->
</body>
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I have several web development projects hosted online. I decided it was important to get the projects into source control, so I created copies of the files on my local machine. The way the projects are hosted online, the css and js are inserted by the website and they don't need to be added to the html code. To develop on my machine, I require the js and css files to be added directly to the html, but I don't want to add anything unnecessary to the code that will be placed back online. My solution is an abstracted html file called main. The css and js are added to the main.html file and the original html file is linked in. Like so...
<!-- main.html-->
<head>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<link rel="stylesheet"href="bootstrap.min.css">
This works great if the head section is added to the original html file. If the head section is removed, there is unwanted css that suddenly afflicts the original html file.
<!--original.html-->
<head>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body> ... </body>
works fine, but contains the code that I want to abstract.
<!--original.html-->
<body>...</body>
has messed up margins from unwanted CSS
in the main.html file, the original html is linked from a git hub page with
<div w3-include-html="github.com/original.html"></div>
Any Ideas?
I have one page in particular that uses a stylesheet however none of the other pages within my website use it so I do not want to put it in the global main.scala.html file as all pages will then reference it. How can I make an IF statement in the play framework to say that when testpage.html is active, use teststylesheet.css?
According to the official docs you can use moreScripts and moreStyles equivalents approach:
#(title: String, css: Html = Html(""), scripts: Html = Html(""))(content: Html)
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<!-- common stylesheets <link rel="stylesheet"> -->
#css
<!-- common scripts -->
<script src="xyz.js")
#scripts
</head>
<body>
#content
</body>
</html>
and in sub template
#css = {
<link rel="stylesheet" media="screen" href='#routes.Assets.at("stylesheets/teststylesheet.css")'>
}
#scripts = {
<script src='#routes.Assets.at("javascripts/test.js")' type="text/javascript"></script>
}
#main("title", css, scripts) {
<div class="bodyOfView">rest of templating...</div>
}
Other option is using separate layouts containing only required JS / CSS for the given page.
Figured out what I needed was this in the main.scala.html:
#if(activeMenu.equals("pricing")){
<link rel="stylesheet" href="#routes.Assets.at("stylesheetname.css")">}