{% 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel/001.jpg">
</div>
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My bootstrap doesn't work for carousels neither does for Materialize. What could be the problem? Is the Javascript causing problem or what is it? I'm getting broken carousels. Ignore the images in the code.
The class of the <div>s around the images must be carousel-item, not just item. See the Bootstrap documentation for carousels.
Related
I was writing an html page with bootstrap and then I come across some sort of kind of error the navbrand is too long. It takes up a whole lot of space in my navbar at the point when I view it on mobile It takes up a whole line and the hamburger icon goes to the bottom. This problem doesn't occur with text only with images.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urci</title>
<!-- BOOTSTRAP -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- CSS -->
<!-- CSS -->
<link rel='stylesheet' href="{% static 'home/css/custom.css' %}">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald:wght#300&family=Roboto+Condensed&display=swap" rel="stylesheet">
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
<div class="container-fluid">
<a class="navbar-brand urci-brand" href="{% url 'home' %}"><img class="branding "src="{% static 'home/images/Urci-Logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav custom-navbar">
<a class="nav-link" href="{% url 'bod' %} ">Board of Directors</a>
<a class="nav-link" href="#">Events</a>
{% if user.is_authenticated %}
<div class="navbar-nav ml-auto">
<a class="nav-link" href="{% url 'announcement:create' %}">Create Announcement</a>
<a class="nav-link" href="#">Create Events</a>
{% endif %}
</div>
</div>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
enter image description here
In your home/css/custom.css add the following...
.urci-brand{
width: fit-content !important;
}
This would mean that the width of the anchor tag would be the width of the content within it.
And the !important is used to overwrite some bootstrap styling.
I am trying to create a website using django and bootstrap. I am extending base.html into index.html. I have implemented navbar(from bootstrap) in base.html and want to implement owl carousel in index.html. Both base.html and index.html are in templates folder of my project. I tried placing css and js files like owl.carousel etc in
<!-- THIS IS base.html-->
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/owl.carousel.css">
<link rel="stylesheet" href="/static/css/owl.theme.green.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
templates folder,static folder, created separate folder but nothing worked. Tried removing and adding forward slash/ in path every possible way that i know of
<!-- THIS IS index.html-->
{% extends 'base.html' %}
{% block title %}
Home
{% endblock title %}
{% block body %}
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
{% endblock body %}
I AM GETTING FOLLOWING ERROR SEEN IN CONSOLE AFTER PRESSING F12
[1]: https://i.stack.imgur.com/KgD7n.png
jquery-3.5.1.slim.min.js:2 jQuery.Deferred exception: $(...).owlCarousel is not a function TypeError: $(...).owlCarousel is not a function
at HTMLDocument.<anonymous> (http://127.0.0.1:8000/:126:26)
at e (https://code.jquery.com/jquery-3.5.1.slim.min.js:2:30211)
at t (https://code.jquery.com/jquery-3.5.1.slim.min.js:2:30513) undefined
E.Deferred.exceptionHook # jquery-3.5.1.slim.min.js:2
jquery-3.5.1.slim.min.js:2 Uncaught TypeError: $(...).owlCarousel is not a function
at HTMLDocument.<anonymous> ((index):126)
at e (jquery-3.5.1.slim.min.js:2)
at t (jquery-3.5.1.slim.min.js:2)
:8000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Add owl.carousel.min.js file in your home page and before the file in which you are using add the following code:
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
--
$("#owl-demo").owlCarousel({
navigation : true
});
Try this way,the recommended way in Django for loading static files by using this way
{% load static %}
<!-- THIS IS base.html-->
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.green.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
all other code write same I'm not compile the code just tell you if you feel any problem feel free to ask
As I am locally adding Javascript files
i don't need add them again just before body tag ends. So i removed javascript files added at the end of body tag and it worked perfectly.
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/owl.carousel.css">
<link rel="stylesheet" href="/static/css/owl.theme.green.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
https://i.stack.imgur.com/KgD7n.png
This error comes when you not initialize the owl carousel.
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items: 4, // no. of items
nav: true, // if you want navigation arrows make it true otherwise false
dots: true // if you want pagination dots make it true otherwise false
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
I found an example how to copy text to clipboard with ZeroClipboard. However, I tried to convert the original code to flask and I run into TemplateSyntaxError: expected token 'end of statement block', got 'onload' because of {% block body onload="init();"%}. How is it possible to use onload="init();" with Jinja?
Here is app.py
#app.route("/table/", methods=["GET"])
def table():
return render_template('table.html')
Here is base2.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">
<title>flask-bootstrap example</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}" >
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='tooltip.css') }}">
<style>
.clip_button {
background:#063;
padding:4px;
width:100px;
}
</style>
<!-- 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]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
<a class="navbar-brand" href="{{ url_for('index') }}">test</a>
</div>
<!--/.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home-url">Home</li>
<li id="about-url">About</li>
<li id="contact-url">Contact</li>
</ul>
<!--/.navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<div class="container">
{% block body %}{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="//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 type="text/javascript" src="{{url_for('static', filename='bootstrap/js/bootstrap.js')}}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" >
$("a.my-tool-tip").tooltip();
$('.selectpicker').selectpicker();
$("#reference_select").selectpicker("refresh");
</script>
<script type="text/javascript" src="{{url_for('static', filename='ZeroClipboard/ZeroClipboard.js')}}"></script>
<script language="JavaScript">
////copy to clip
var clip = null;
function $(id) { return document.getElementById(id); }
function init()
{
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
}
function move_swf(ee)
{
copything = document.getElementById(ee.id+"_text").value;
clip.setText(copything);
if (clip.div)
{
clip.receiveEvent('mouseout', null);
clip.reposition(ee.id);
}
else{ clip.glue(ee.id); }
clip.receiveEvent('mouseover', null);
}
</script>
<script type="text/javascript">
{% block js %}{% endblock %}
</script>
</body>
</html>
Here is the (table.html):
{% extends 'base2.html' %}
{% block body onload="init();"%}
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table">
<tbody>
<tr>
<td><input type='text' id='textid5_text' value='your text 5' /></td>
<td><div id='textid5' onload="init();" onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
onload is an HTML attribute. It has nothing to do with Jinja. You can simply place it right on your <body> tag.
<body onload="init();">
If you don't need it in every page where you use this base template, you'll need to add a block inside the <body> tag
<body {% block body_attrs %}{% endblock %}>
And then override it in your child template
{% block body_attrs %} onload="init();" {% endblock %}
I am new in EmberJS and flowing on www.codeschool.com the Warming Up With Ember.js ...
I am stuck at level 1.4 Named Template, They ask me to: Move the content unique to our homepage into a new template and give it a template name that will be shown on the homepage of our site.
for this code,
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/' />
<link href='bootstrap.css' rel='stylesheet' />
<link href='application.css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224' /></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
<div class='container'>
<h1>Welcome to The Flint & Flame!</h1>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
I did it but it still don't work after trying this:
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/' />
<link href='bootstrap.css' rel='stylesheet' />
<link href='application.css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224' /></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
<div class='container'>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to The Flint & Flame!</h1>
</script>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
You forgot to add an outlet to your application template and you nested your index template inside your application template, which is wrong.
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/'/>
<link href='bootstrap.css' rel='stylesheet'/>
<link href='application.css' rel='stylesheet'/>
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224'/></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type='text/x-handlebars' data-template-name='index'>
<div class='container'>
<h1>Welcome to The Flint & Flame!</h1>
</div>
<footer class='container'>
<hr/>
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
My navbar is supposed to collapse to a select-list when the screen is resized below threshold. It works for my home page, but not for the others, i.e. on other pages besides home page, when the screen is resized until the sites collapsed, the navbar disappears completely (the select-list element that's supposed to be there is not there). I have a submenu below my navbar, and it collapses just fine. I wonder what's the problem? Could it be scripts conflict (but collapse is bootstrap css right)?
My navbar is of class navbar, with a logo of tag at the left and for the link buttons.
I use jQuery and django alongside bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!--
<link rel="stylesheet" type="text/css" href="/static/global.css">
-->
<link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->
<link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
<link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet"/>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="/static/bootstrap/js/modernizr.custom.js"></script>
<script src="/static/js/jquery-1.9.0.js"></script>
<script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
<script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="/static/highcharts-3/js/highcharts.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/superfish.js"></script>
<title>CoAssets Platform (BETA)</title>
</head>
<body>
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="topmenu">
{% block topmenu %}{% endblock %}
</div>
</div>
<div class="row-fluid" style="background-color:#ffad37">
<div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
<ul class="nav nav-pills">
{% block submenu %}{% endblock %}
<li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
<li class="pull-right">Account</li>
</ul>
</div>
</div>
<!--/div-->
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="main">
{% block main_body %}{% endblock %}
</div>
</div>
<!--/div-->
</br>
<div class="container-fluid" id="copyright">
<div class="row-fluid">
<div class="span4">
<p>Legalise</p>
<p>Contact Us</p>
</div>
<div class="span4">
<p>Partners</p>
<p>FAQ</p>
<p>Definitions</p>
</div>
<div class="span4">
<p>Admin</p>
</div>
</div>
<div class="row-fluid" id="copyright">
<div class="span12" id="footer">
<p>Copyright of CoAssets.com © 2013</p>
</div>
</div>
</div>
<script>
//script conflicts with some other jQuery scripts, so need to handle this script
jQuery.noConflict();
$(document).ready(function($){
$('.nav li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
//alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath == currentPath && !$(this).hasClass('active')) {
$(this).addClass('active');
};
});
$('#menu li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
var len = thisPath.length;
//alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath != '/' && thisPath == currentPath.substring(0,len)
&& !$(this).hasClass('active')) {
$(this).addClass('active');
} else if (thisPath=='/' && currentPath == '/')
{
$(this).addClass('active');
};
});
});
</script>
</body>
</html>
{% extends "base.html" %}
{% block topbar %}
{% endblock %}
{% block topmenu %}
<section class="navbar">
<div class="navbar-inner main-menu">
<div class="row-fluid">
<div class="span2">
<img src="/public_media/index_01 edited4.png" alt="">
</div>
<div class="span10">
<nav id="menu" class="pull-right" >
<ul>
<li class="active">Home<br/><span>CoAssets</span></li>
<li>News</li>
<li>Portfolio</li>
<li>Opportunities</li>
<li>New Opportunities</li>
<li>Transaction</li>
<li>Research</li>
<!--li>Account</li-->
<!--li>Admin</li-->
</ul>
</nav>
</div>
</div>
</div>
</section>
{%comment%}
<div class="label label-warning offset2">
<p>CoAssets Beta</p>
</div>
{%endcomment%}
{% endblock %}
Using bootstrap 3.0, navbar-inner is no longer a class, and in my case, when experiencing this issue, removing that class resulted in the correct behavior.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar navbar-inverse ">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsing-nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsing-nav">
<ul class="nav navbar-nav">
<!-- dropdown items go here -->
</ul>
</div>
</div><!--/.navbar -->
</div><!-- /.container -->
</nav>
alternatively, you could add the following into your style declarations to self-support this
.navbar-inner {
min-height: 50px;
}
The issue is cause by a combination of things:
no text in navbar when in collapsed mode (most common is navbar-brand item)
this leaves on floated elements in the layout
removal of navbar-inner class from the bootstrap library
the dev team fixed this here, however there are a lot of example pieces of code out there where users who needed to use a nav inside of a .container, and recommended using .navbar-inner... which no longer exists.
The use of that non-existent class throws off your css because bootstrap compiles the css from less, and that property is assigned to the .navbar property, but not .navbar-inner, so basically the min-height property does not wind up being assigned assigned to your navbar, and you're left with no height on the nav, no text to give the element a calculated height, and only floating elements that are outside of the flow and don't get calculated in height computations.
I had a similar problem , but just I added "position:fixed " for container and it works. Try , maybe it works for you.