To specify my question in detail, I have 2 divs. One of them is the main navigation and below my navigation I have a carousel (bootstrap). I want the carousel to fit perfectly to the bottom of the page when the user visits the page. Just for the aesthetics sake. I know I can set the height of the carousel to be e.g. 400px but each device's screen is different and I think it will look more professional and polished if the carousel's bottom will fit to the bottom of the screen regardless of the size of the window.
You could consider taking advantage of CSS's viewport-based units like vh and vw, which use a percentage of the available viewport width and height respectively :
.your-carousel {
/* This will occupy 100% of the available viewport */
height: 100vh;
}
This is supported in most modern browsers, so if you are already using Bootstrap, you should be fine.
This is my html by the way:
<body>
<!-- nav -->
<div class="container">
<a id="logo" class="font-raleway text-center" href="#">Denley</a>
<br>
<nav class="navbar navbar-default bold">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WOMEN</li>
<li>MEN</li>
<li>SHOES</li>
<li>ACCESSORIES</li>
<li>SALE OFF</li>
<li>COLLECTIONS</li>
<li>CONTACTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container -->
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-5">
<div class="col-xs-3 icons"><img src="images/icons/account.png"></div>
<div class="col-xs-3 icons"><img src="images/icons/wish_list.png"></div>
<div class="col-xs-3 icons"><img id="cart-icon" src="images/icons/cart.png"></div>
<div class="col-xs-3 icons"><img src="images/icons/search.png"></div>
</div>
</div><!-- /col-xs-12 -->
</div><!-- /row -->
<div class="row">
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/test.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Related
Hello I am trying to put a carousel in my modal. everything was working fine until I put it. can someone please tell me what's wrong?
gallery.html
{% for photo in gallery %}
×
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="{{photo.imageURL}}" alt="First slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
please change below photo url path
<img src="{{photo.image.url}}" alt="First slide">
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.
Django data is saved in the database but, when access the data in template its display nothing.the models.py, views.py and home.html file code is below, when I entered data in the field and print it in add function it display but does not display in the template. Im using the modal to display the data
models.py
from django.db import models
class ToDo(models.Model):
title = models.CharField(max_length=100)
detail = models.TextField()
published_date = models.DateTimeField()
def __str__(self):
return self.title
views.py
from django.shortcuts import render, HttpResponse, redirect
from django.utils import timezone
from todoapp.models import ToDo
def home(request):
todo_items = ToDo.objects.all()
context = {'todoItems': todo_items}
return render(request, 'todoapp/home.html', context)
def add(request):
if request.method=="POST":
addTitle = request.POST['addTitle']
addDetail = request.POST['addDetail']
current_date = timezone.now()
addedObject = ToDo.objects.create(title=addTitle, detail=addDetail, published_date=current_date)
return redirect('home')
return render(request, 'todoapp/home.html')
home.html "Template file"
{%load static%} {%include 'header.html'%}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="{% url 'home'%}">todo application</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" data-toggle="modal" data-target="#addModal" href="add">add new</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="{%url 'home'%}">todo list</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image -->
<img class="masthead-avatar mb-5" src="{%static 'images/avataaars.svg' %}" alt="">
<!-- Masthead Heading -->
<h1 class="masthead-heading text-uppercase mb-0">Todo Application </h1>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading -->
<p class="masthead-subheading font-weight-light mb-0">Web Developer - Web Designer - Coder</p>
</div>
</header>
<!-- Portfolio Section -->
<section class="page-section portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">portfolio</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items -->
<div class="row">
<!-- Portfolio Item 1 -->
<div class="col-md-6 col-lg-4">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="{% static 'images/portfolio/cabin.png'%}" alt="">
</div>
</div>
</div>
<!-- /.row -->
</div>
</section>
<!-- About Section -->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content -->
<div class="row">
<div class="col-lg-12 ml-auto text-center">
<p class="lead">Hi! Im Zeeshan Tariq. I have 3 plus years of experience in web Application Development, Software Development, Front End Development, WordPress theme customization , woocommerce customization, wordpress security, SEO, keywords research, on-page seo, off-page seo,speed optimization, custom web application development using python django web framework, API design, database design and development.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Modals -->
<!-- add Modal -->
<div class="portfolio-modal modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Add Todo</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<!-- Portfolio Modal - Text -->
<p class="mb-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<form action="{% url 'add'%}" method="post">
{%csrf_token%}
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Title </label>
<input class="form-control" id="addTitle" name="addTitle" type="text" placeholder="Title" required="required" data-validation-required-message="Please enter the title.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Detail</label>
<input class="form-control" id="addDetail" name="addDetail" type="text" placeholder="Detail" required="required" data-validation-required-message="Please enter the description.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Add</button>
</div>
</form>
</div>
</div>
</p>
<button class="btn btn-primary" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i> Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">{{todoItems.title}}</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<img class="img-fluid rounded mb-5" src="img/portfolio/cabin.png" alt="">
<!-- Portfolio Modal - Text -->
<p class="mb-5">{{todoItems.detail}}</p>
<button class="btn btn-primary" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i> Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%include 'footer.html'%}
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'm working on a form using the Ember-Data Fixture adapter. My save method is in the edit route as follows:
actions: {
save: function () {
var visit = this.get('currentModel'),
self = this,
store = this.store;
visit.setProperties({
'notes': $('#notes textarea').val()
});
console.log('Visit Changes: ' + visit.changedAttributes());
visit.save();
console.log('Visit saved!');
self.transitionTo('planning.visits.visit', visit);
}
The notes field is referenced in the template simply as {{notes}} and is in the model as a DS.attr('string')
visit.changedAttributes() shows that the notes value changed and if I throw a breakpoint on the afterModel hook in the planning.visits.visit route I can get the object and see that the field was updated but the template itself never updates to reflect the change.
What am I missing?
*** EDIT ***
The view template is
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<span style="font-weight: normal; color: #666;">Visit </span>{{visitNumber}}
</span>
<span class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
Options
<i class="fa fa-caret-down fa-lg"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>{{#link-to 'planning.visits.edit' this}}<i class="fa fa-pencil-square-o"></i><span style="padding-left: 10px;">Edit Visit</span>{{/link-to}}</li>
<li><i class="fa fa-plus"></i><span style="padding-left: 10px;">Add Tasks</span></li>
<li class="divider"></li>
<li><a {{action 'delete'}}><i class="fa fa-trash-o"></i><span style="padding-left: 10px;">Delete Visit</span></a></li>
</ul>
</div>
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<p>
<label>Date:</label><br />
<strong class="value">{{startDate}}</strong> to <strong class="value">{{endDate}}</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<label>Notes:</label><br />
<strong class="value">{{notes}}</strong>
</p>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-lg-12">
<ul id="detail-tabs" class="nav nav-tabs">
{{#link-to 'planning.visits.visit.tasks' this tagName="li"}}{{#link-to 'planning.visits.visit.tasks' this}}Tasks{{/link-to}}{{/link-to}}
{{#link-to 'planning.visits.visit.requirements' this tagName="li"}}{{#link-to 'planning.visits.visit.requirements' this}}Requirements{{/link-to}}{{/link-to}}
{{#if hasIssue}}
{{#link-to 'planning.visits.visit.issues' this tagName="li"}}{{#link-to 'planning.visits.visit.issues' this}}Problems<span style="margin-left: 10px;>" class="badge pull-right alert-danger">1</span{{/ link-to}}{{/link-to}}
{{/if}}
</ul>
</div>
</div>
<div class="row">
<div id="tab-content" class="col-lg-12">
{{outlet tabs}}
</div>
</div>
</div>
</div>
And the edit template is
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<span style="font-weight: normal; color: #666;">Edit Visit </span>{{visitNumber}}
</span>
<span class="pull-right">
<button class="btn btn-default" {{action 'save'}}>
<i class="fa fa-check green" style="margin-right: 5px;"></i>Save Changes
</button>
{{#link-to 'planning.visits.visit' this tagName="button" classNames="btn btn-default"}}
<i class="fa fa-ban red" style="margin-right: 5px;"></i>Discard Changes
{{/link-to}}
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<p>
{{date-picker-with-label label="Start Date" value=startDate id="startDate"}}
</p>
</div>
<div class="col-lg-4">
<p>
{{date-picker-with-label label="End Date" value=endDate id="endDate"}}
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<label>Notes:</label>
{{textarea property=notes rows=3 id="notes"}}
</p>
</div>
</div>
</div>
</div>
Problem solved. PEBKAC error on my end. Helps if both the template field and the field you are updating are the same.