I am currently on a python / Django project, I am also using bootstrap.
I have a display bug only with google chrome. When I load my page everything is fine then when I scroll, the bug occurs:
When I reload the page everything is back to normal:
This bug is not present on the project locally, only from production on a server (ubuntu with Gunicorn and Nginx). When I hover the mouse over this white block, the text displays randomly. This is not the only place where it happens. I don't know if this problem is known but I have absolutely no idea what it might be.
here is the part of the code that we see in picture :
<!-- Description content -->
<div class="container-fluid main-color-dark-bg pb-4">
<div lass="row">
<div class="col-lg-8 col-md-10 col-12 mx-auto mb-3">
< Précèdent
Suivant >
</div>
</div>
<!-- Description -->
<div class="row col-lg-8 col-md-10 col-12 mx-auto">
<div class="">
<p class="theoretical-watch-p ext-md-left text-center">
{{ video.description }}
</p>
</div>
</div>
<!-- Sous parties et Ressources -->
<div class="row mx-auto col-lg-8 col-md-10 col-12">
<!-- Sous parties-->
<div class="col-lg-7 col-12 px-0">
<h4 class="theoretical-subpart-title main-color-white text-md-left text-center ">Sous parties</h4>
<ul class="list-unstyled text-md-left text-center">
{% for s in subparts %}
<li class="">
<a href="{{s.subpart_url}}" class="subpart-link">
{{s.subpart_title |title}}
<span class="subpart-hook">[<span>
{% if s.subpart_time.hour == 0 %}
{{ s.subpart_time|time:"i:s" }}
{% else %}
{{ s.subpart_time|time:"H:i:s" }}
{% endif %}
<span class="subpart-hook">]<span>
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- Ressources -->
<div class="col-lg-5 col-12 my-md-0 my-4 text-center mx-auto">
TÉLÉCHARGER LES RESSOURCES
</div>
</div>
</div>
<!-- End Description content -->
</div>
<!-- TAB Menu header mr-lg-auto mx-md-auto mx-sm-auto mx-auto -->
<div class="row col-12 px-0 mx-auto">
<ul class="nav mx-auto d-flex d-inline-flex" id="myTab" role="tablist">
<li class="d-inline-flex">
<a class="nav-link theoretical-tab-link active" id="tab-memo" data-toggle="tab" href="#content-memo" role="tab" aria-controls="content-memo" aria-selected="true">
Les points clés du chapitre
</a>
</li>
<li id="header-tab-program" class="d-inline-flex">
<a class="nav-link theoretical-tab-link" id="tab-program" data-toggle="tab" href="#content-program" role="tab" aria-controls="content-program" aria-selected="false">
Contenu du cours
</a>
</li>
<li class="d-inline-flex">
<a class="nav-link theoretical-tab-link" id="tab-definitions" data-toggle="tab" href="#content-definitions" role="tab" aria-controls="content-definitions" aria-selected="false">
Lexique
</a>
</li>
</ul>
</div>
<!-- TAB Menu content -->
<div class="">
<div class="tab-content w-100" id="myTabContent">
<!-- MEMO -->
<div class="tab-pane fade active show" id="content-memo" role="tabpanel" aria-labelledby="tab-memo">
<!-- Title vidéo et description -->
<div class="col-lg-8 col-12 mx-auto mb-5">
<!-- Title -->
<div class="row px-0 section-title my-auto col-12 mx-auto">
<div class="col-12 mx-auto my-auto">
<h1 class="mx-auto section-title text-center">
<hr class="main-color-grey-bg">
<img class="img-left" width="2%" height="auto" src="{% static 'images/pictograms/clover-black.svg' %}">
MÉMO
<img class="img-right" width="2%" height="auto" src="{% static 'images/pictograms/heart-red.svg' %}">
<hr class="main-color-grey-bg">
</h1>
</div>
</div>
<!-- APERCU - SECTION LEXIQUE -->
<div class="row mx-0">
<!-- colonne contenu -->
<div class="col-12">
<ul class="list-unstyled mt-5">
{% for sp in subparts %}
{% if sp.subpart_memo%}
<li class="theoretical-tab-content-p-memo">
<h4 class="">{{ sp.subpart_title |title }}</h4>
<p class="theoretical-tab-content-p-memo">
{{ sp.subpart_memo | safe | linebreaks}}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<!-- END MEMO -->
I don't use anything in particular in the code. I hope that someone could help me!
After multiple tests I finally identified the problem and solved.
The display bugs (as a reminder, only on google chrome), as seen in the videos and images came from a line that I had placed in my css file.
in my body I had the line overflow: overlay;
body{
font-family: 'main-font-medium', Fallback, serif;
font-weight: 0;
font-style: normal;
/*overflow: auto;*/
overflow-x: hidden!important;
scroll-behavior: smooth;
}
thanks to you JuhonRutila !
I hope this can help other people.
I need to set Auto Play a Mp3 Audio on the HTML website. I am not sure which code or class should I add. Please help. Here is my codings.
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul>
<li> </li>
</ul>
</div>
<div class="jp-gui jp-interface">
<span class="jp-stop wm-bgcolor"><i class="flaticon-power"></i></span>
<div id="current-track1" class="song-title">Song Name is here</div>
<div class="jp-controls">
<span class="jp-shuffle"><i class="flaticon-arrows-2"></i></span>
<span class="wm-bgcolor-one jp-previous"><i class="flaticon-arrows-1"></i></span>
<span class="jp-play"><i class="fa fa-pause"></i> <i class="fa fa-play"></i></span>
<span class="wm-bgcolor-one jp-next"><i class="flaticon-arrows-1"></i></span>
<span class="jp-repeat"><i class="flaticon-arrows-3"></i></span>
</div>
<div class="wm-player-wrap">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls">
<span class="jp-mute"><i class="fa fa-volume-up"></i> <i class="fa fa-volume-off"></i></span>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
<i class="flaticon-music-1"></i>
</div>
</div>
</div>
Just use an audio tag:
<audio src="track.mp3" autoplay></audio>
Note that autoplay is subject to the policies of the browser. Mobile browsers, for example, don't typically allow autoplay.
I am new at django and I have an app in django project. My base.html has navigation bar through which you can redirect to "about", 'contact us', 'home'.
The first page when app starts (after loging in) is home.
<!DOCTYPE html>
<html lang="en">
<head>
{%load staticfiles%}
<meta charset="utf-8">
<title>Ekyam: India's First Entrepreneurial Ecosystem</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{% static "visit/lib/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="{% static "visit/lib/font-awesome/css/font-awesome.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.carousel.min.css" %}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.theme.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.transitions.min.css" %}" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="{%static "visit/css/style.css"%}" rel="stylesheet">
<!--Your custom colour override - predefined colours are: colour-blue.css, colour-green.css, colour-lavander.css, orange is default-->
<link href="#" id="colour-blue" rel="stylesheet">
</head>
<body class="page-index has-hero">
<!--Change the background class to alter background image, options are: benches, boots, buildings, city, metro -->
<div id="background-wrapper" class="city" data-stellar-background-ratio="0.1">
<!-- ======== #Region: #navigation ======== -->
<div id="navigation" class="wrapper">
<!--Hidden Header Region-->
<div class="header-hidden collapse">
<div class="header-hidden-inner container">
<div class="row">
<div class="col-md-3">
<h3>
About Us
</h3>
<p>Ekyam is dedicated to support and nourish Startups and accelaration</p>
<i class="fa fa-plus"></i> Learn more
</div>
<div class="col-md-3">
<!--#todo: replace with company contact details-->
<h3>
Contact Us
</h3>
<address>
<strong>EKYAM</strong>
<abbr title="Address"><i class="fa fa-pushpin"></i></abbr>
MMMDU, Mullana, Ambala- Haryana
<br>
<abbr title="Phone"><i class="fa fa-phone"></i></abbr>
8219984448
<br>
<abbr title="Email"><i class="fa fa-envelope-alt"></i></abbr>
info#ekyam.com
</address>
</div>
<div class="col-md-6">
<!--Colour & Background Switch for demo - #todo: remove in production-->
<h3>
Theme Variations
</h3>
<div class="switcher">
<div class="cols">
Backgrounds:
<br>
Benches Boots Buildings
City Metro
</div>
<div class="cols">
Colours:
<br>
Orange Green Blue <a href="#lavender" class="colour lavender "
title="Lavender">Lavender</a>
</div>
</div>
<p>
<small>Selection is not persistent.</small>
</p>
</div>
</div>
</div>
</div>
<!--Header & navbar-branding region-->
<div class="header">
<div class="header-inner container">
<div class="row">
<div class="col-md-8">
<!--navbar-branding/logo - hidden image tag & site name so things like Facebook to pick up, actual logo set via CSS for flexibility -->
<a class="navbar-brand" title="Home" href = "{% url "visit:index"%}">
<h1 class="hidden">
<h1>EKYAM</h1>
</h1>
</a>
<br/>
<div class="navbar-slogan">
Hub Of StartUp
<br> By The Brogrammers
</div>
</div>
<!--header rightside-->
<div class="col-md-4">
<!--user menu-->
<ul class="list-inline user-menu pull-right">
</ul>
<ul class="list-inline user-menu pull-right">
<li class="user-register"><i class="fa fa-edit text-primary "></i> Register</li>
<li class="user-login"><i class="fa fa-sign-in text-primary"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="navbar navbar-default">
<!--mobile collapse menu button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<!--everything within this div is collapsed on mobile-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="main-menu">
<li class="icon-link">
<i class="fa fa-home"></i>
</li>
<li class="dropdown">
Comunity<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu">
<li class="dropdown-header"> </li>
<li>Services</li>
<li>About Us</li>
<li>Login</li>
<li>Sign-Up</li>
<li class="dropdown-footer">Connect</li>
</ul>
</li>
<li>Join Us</li>
<li class="dropdown dropdown-mm">
Mega Menu<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu dropdown-menu-mm dropdown-menu-persist">
<li class="row">
<ul class="col-md-6">
<li class="dropdown-header">Websites and Apps</li>
<li>Analysis and Planning</li>
<li>User Experience / Information Architecture</li>
<li>User Interface Design / UI Design</li>
<li>Code & Development / Implementation & Support</li>
</ul>
<ul class="col-md-6">
<li class="dropdown-header">Enterprise solutions</li>
<li>Business Analysis</li>
<li>Custom UX Consulting</li>
<li>Quality Assurance</li>
</ul>
</li>
<li class="dropdown-footer">
<div class="row">
<div class="col-md-7">Like the lite version? <strong>Get the extended version of Flexor.</strong></div>
<div class="col-md-5">
<i class="fa fa-cloud-download"></i> Get It Now
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
</div>
<div class="hero" id="highlighted">
<div class="inner">
<!--Slideshow-->
<div id="highlighted-slider" class="container">
<div class="item-slider" data-toggle="owlcarousel" data-owlcarousel-settings='{"singleItem":true, "navigation":true, "transitionStyle":"fadeUp"}'>
<!--Slideshow content-->
<!--Slide 1-->
{%block content%}
{%endblock%}
</div>
<div class="col-md-6 hidden-xs">
<img src="img/slides/slide2.png" alt="Slide 2" class="center-block img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="block block-bg-grey-dark" data-block-bg-img="img/bg_footer-map.png" data-stellar-background-ratio="0.4">
<div class="container">
<div class="row" id="contact">
<div class="col-md-3">
<address>
<strong>JunityMe Inc</strong>
<br>
<i class="fa fa-map-pin fa-fw text-primary"></i> Maharishi Markendeshver Engineering College
<br>
<i class="fa fa-phone fa-fw text-primary"></i> 8219984448
<br>
<i class="fa fa-envelope-o fa-fw text-primary"></i> info#junity.com
<br>
</address>
</div>
Top
</div>
</footer>
The problem is, only this template is getting rendered. When I click on the other options on the navigation bar, the url changer(/incubator/) but the template remains the same.
urls.py:
from django.conf.urls import url
from . import views
app_name = 'main'
urlpatterns = [
url(r'^', views.home, name='home'),
url(r'incubators/', views.incubators, name='incubators'),
url(r'about/', views.about, name='about'),
]
I don't see any kinds of error. Somehow I think my urls are unable to connect to views.py.
views.py:
from django.shortcuts import render
from django.http import HttpResponse
def home(request):
return render(request, 'main/home.html')
def incubators(request):
return render(request, 'main/incubators.html')
def about(request):
return HttpResponse("dsfsddsf")
Please suggest edits if I can make it as simple as possible.
The problem is
url(r'^', views.home, name='home'),
The ^ sign means start of url so that matches all urls that have a start, i.e every url. So any URL will be rendered by views.home.
move that one to the bottom of the list, Then it will only match anything when all the other URLs have tried and it will do what you want.
If you really want to match only / then add
url(r'^$', views.home, name='home'),
$ means the end of an url, so that matches where there is nothing at all between the start and the end, i.e a empty url path
I have 3 templates:
- main template for rendering some basic stuff,
- second template which renders whole tree
- third template which should render each eleement of that tree
When I include row_renderer.html then my variable called subItem is not visible in included template. When I copy that template to second template called nodes_renderer.html then everything seems fine.
How do I pass subItem variable to row_renderer.html?
Main template
{% verbatim %}
<div ui-tree data-drag-enabled="false" class="">
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node class="table">
<div ui-tree-handle class="header row" data-toggle="collapse">
<div class="col-sm-4 col-md-2" style="">
<input type="checkbox" />
{{item.name}} ({{item.submission_count}})
</div>
<div class="col-sm-4 col-md-2">
<i class="icon" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
{{item.last_submission_date}}
</div>
<div class="col-md-6">
<i class="icon icon-file"></i> Pobierz raport
<i class="icon icon-times"></i> Zakończ zgłoszenie
<i class="icon icon-envelope"></i> Wyślij SMS
</div>
<div class="clearfix"></div>
</div>
<ol ui-tree-nodes="" ng-model="item.children">
<li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</li>
</ol>
</div>
{% endverbatim %}
Last fragment of main template:
<ol ui-tree-nodes="" ng-model="item.children">
<li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
nodes_renderer.html
{% verbatim %}
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="row" ng-include="'row_renderer.html'" >
<ol ui-tree-nodes="" ng-model="subItem.children">
<li ng-repeat="subItem in subItem.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</div>
</script>
{% endverbatim %}
row_renderer.html - reusable template
<script type="text/ng-template" id="row_renderer.html">
<div class="clearfix"></div>
<div class="col-md-12" >
Rodzaj Awarii: {{subItem.type_name}}
</div>
<div class="clearfix"></div>
<div class="col-sm-4 col-md-2">
<input type="checkbox" />
{{subItem.name}} ({{subItem.submission_count}})
</div>
<div class="col-sm-4 col-md-2">
<i class="icon" ng-if="subItem.children" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
{{subItem.last_submission_date}}
</div>
<div class="col-sm-4 col-md-2">
<i class="icon icon-star"></i> Przypisz do mnie
</div>
<div class="col-md-6">
<i class="icon icon-file"></i> Pobierz raport
<i class="icon icon-times"></i> Zakończ zgłoszenie
<i class="icon icon-envelope"></i> Wyślij SMS
</div>
<div class="clearfix"></div>
</div>
</script>
ng-repeat creates a new scope for each element, ng-include also creates a new scope.
In the case of nodes_renderer.html, you use subItem which is inherited from your parent scope when you specify ng-repeat="subItem in item.children". That's why it works for nodes_renderer.html
How do I pass subItem variable to row_renderer.html?
Try onload="subItem=$parent.PropertyToPass" :
<div ui-tree-handle class="row" ng-include="'row_renderer.html'" onload="subItem=$parent.PropertyToPass">
For more information: How to get parent element inside ng-include when iterating in ng-repeat recursively
Do you know how to force django bootstrap toolkit to be responsive? I mean e.g the change of navbar when width is small.
I have in base.html:
{% bootstrap_stylesheet_tag %}
{% bootstrap_stylesheet_tag "responsive" %}
what is "translated" to when checked in view source of page:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
full base.html content here: https://gist.github.com/andilab/785133e800f023c89689
example rendered # jsfiddle here: http://jsfiddle.net/andilab/4Jqab/
Find here the updated jsfiddle http://jsfiddle.net/4Jqab/1/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://dogspot.dyndns.org/static/lapa_icon.png">dogspot</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Dogs</li>
<li>Form</li>
<li class="dropdown">
Forms<b class="caret"></b>
<ul class="dropdown-menu">
<li>create</li>
<li>contact</li>
<li>Inline</li>
<li>Search</li>
<li>Using template</li>
</ul>
<li>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form></li>
<li>create</li>
<li>contact</li>
<li>Pagination</li>
<li>Buttons</li>
</ul>
</div>
</div>
</div>
</div>
A couple of things were missed:
A fluid container for the nav
You need to specify the collapsible part of the navbar
A navbar toggle button
See http://getbootstrap.com/2.3.2/components.html#navbar