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.
Related
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
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">
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 some help in order to capture all the links from this kind of source:
<div class="rc" data-hveid="64">
<h3 class="r">Exploit-ID » admin</h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">www.exploit-id.com/author/admin/page/192</cite>
<div class="action-menu ab_ctl"><a class="_Fmb ab_button" href="#" id="am-b5" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQ7B0IQjAF"><span class="mn-dwn-arw"></span></a>
<div
class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQqR8IQzAF">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:YjSqy1rHChIJ:www.exploit-id.com/author/admin/page/192+&cd=6&hl=en&ct=clnk&gl=ro" onmousedown="return rwt(this,'','','','6','AFQjCNG68C2DPiAcZmzMREpEY6Jr6vk_yA','FxEOdBFVsvQ3dMMfmjFVHA','0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQIAhEMAU','','',event)">Cached</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Oct 4, 2011 - </span>Email : f3arm3d3ar#gmail.com Google-<em>Dork</em> : :) Guess it. <em>Tested</em> on : Ubuntu 10.04 Web-App ... <em>2</em>] The Blue Genius : My Boss. 3] str0ke ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="70">
<h3 class="r">The Script Thread - Ars Technica OpenForum</h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">arstechnica.com/civis/viewtopic.php?t=472903</cite>
<div class="action-menu ab_ctl"><a class="_Fmb ab_button" href="#" id="am-b6" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQ7B0ISDAG"><span class="mn-dwn-arw"></span></a>
<div
class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQqR8ISTAG">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:5Jwa1Yuai-UJ:arstechnica.com/civis/viewtopic.php%3Ft%3D472903+&cd=7&hl=en&ct=clnk&gl=ro" onmousedown="return rwt(this,'','','','7','AFQjCNFlNrbGfSbSV-iPPPi8IxcUqzktPw','EbLNu4w0MQUwTey84xbfNA','0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQIAhKMAY','','',event)">Cached</a>
</li>
</ul>
</div>
</div>
</div>
<div class="f slp">Jul 19, 2004 - 40 posts - 23 authors</div><span class="st">objResultsFile.WriteLine "<TR><TH COLSPAN='<em>2</em>'>Click Server Name For Detailed " _ ... REM - It is recommended to <em>test</em> in a lab first. REM</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="76">
<h3 class="r">Is it possible to get a page when a process is started - Ars ...</h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">arstechnica.com/civis/viewtopic.php?f=17&t=624507</cite>
<div class="action-menu ab_ctl"><a class="_Fmb ab_button" href="#" id="am-b7" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQ7B0ITjAH"><span class="mn-dwn-arw"></span></a>
<div
class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQqR8ITzAH">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:PyKSd_PhIsoJ:arstechnica.com/civis/viewtopic.php%3Ff%3D17%26t%3D624507+&cd=8&hl=en&ct=clnk&gl=ro" onmousedown="return rwt(this,'','','','8','AFQjCNG4l4bXQwnIsp196jLQbxNEql_zKQ','JZ-s6VvMPwHVE6iqZBs2HQ','0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQIAhQMAc','','',event)">Cached</a>
</li>
</ul>
</div>
</div>
</div>
<div class="f slp">24 posts - 8 authors</div><span class="st">Posted: Thu Oct 02, 2003 <em>2</em>:17 pm ... "the <em>dork</em> formerly known as Spiff" .... Also, in my brief <em>test</em> it would only send a message once and not constantly while the ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="82">
<h3 class="r">Psychology | Akinbode Olanike - Academia.edu</h3>
<div class="s">
<div>
Sorry for the huge source. Anyways, I want to capture all the links between
<h3 class="r"><a href="
And
" onmousedown="return rwt
Can someone help me with the regex expression?
This should work to capture all strings inside href attribure: href="([^"]+)"
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.