I'm a bit confused on how this works. I am trying to have the seconds value convereted to a "hh:mm:ss" in the input box when the slider is active.
Here the div displays the start time and end time in seconds. And adjusts as they slide
<div class='slider-example col-xs-12 col-sm-6 col-lg-5 center-block'>
<div class="well">
<input id="ex2" type="text" class="span2" value="[{{ start_length }},{{ end_length }}]" data-slider-min="{{ start_length }}" data-slider-max="{{ end_length }}" data-slider-step="1" data-slider-value="[{{ start_length }},{{ end_length }}]" data-slider-selection="after" data-slider-tooltip="hide"/>
</div> <!-- /well -->
</div> <!-- /slider example -->
<div class = "container col-xs-12 col-sm-6 col-lg-5 center-block">
<form class="form-inline">
<div class = "container col-xs-4">
<div class="form-group">
<label for="bar">Start:</label>
<input type="text" class="form-control" id="bar">
</div>
</div>
<div class = "container col-xs-4 pull-right">
<div class="form-group">
<label for="bar1">End: </label>
<input type="text" class="form-control" id="bar1">
</div>
</div>
</form>
</div>
Here is my javascript
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/bootstrap-slider.js')}}"></script>
<script type='text/javascript'>
function secondsTimeSpanToHMS(s) {
var h = Math.floor(s/3600);
s -= h*3600;
var m = Math.floor(s/60);
s -= m*60;
return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
}
$(document).ready(function(){
/* Example 2 */
$("#ex2").slider({});
$("#ex2").on('slide', function (ev) {
$('#bar').val(ev.value.slice(",")[0]);
$('#bar1').val(ev.value.slice(",")[1]);
document.getElementById('#bar').innerHTML = secondsTimeSpanToHMS('#bar');
document.getElementById('#bar1').innerHTML = secondsTimeSpanToHMS('#bar1');
});
});
</script>
I doubt it's doing what you intended, but here's what it's trying to do
$("#ex2").on('slide', function (ev) {
The slide event triggers when you slide the range handles and returns a 2 element array with the value of each handle
$('#bar').val(ev.value.slice(",")[0]);
$('#bar1').val(ev.value.slice(",")[1]);
This is an attempt to set the value of the element with id bar and bar1 to the range handle values - this will work if bar and bar1 are form elements (like a textbox, textarea...)
document.getElementById('#bar').innerHTML = ...
document.getElementById('#bar1').innerHTML = ...
This attempts to set the innerHTML of elements with id #bar and #bar1 - however since you are using document.getElementById, you should be using bar and bar1 instead of prefixing it with # (like you'd do for jQuery).
... = secondsTimeSpanToHMS('#bar');
... = secondsTimeSpanToHMS('#bar1');
I'd assume the above is an attempt to run the function using the range handle values, but the code is wrongly passing in jQuery selectors to these function - the function expects a value in seconds.
Finally, the secondsTimeSpanToHMS takes a seconds value and converts it to hour:minute:seconds
The below may be a bit closer to what you are looking for
$(document).ready(function () {
/* Example 2 */
$("#ex2").slider({});
$("#ex2").on('slide', function (ev) {
$('#bar').val(secondsTimeSpanToHMS(ev.value.slice(",")[0]));
$('#bar1').val(secondsTimeSpanToHMS(ev.value.slice(",")[1]));
});
});
Or alternatively, you could set another 2 element's innerHTML to the output of secondsTimeSpanToHMS and retain the .val() lines from the original function.
Related
In a form there is a section that shows groups of 4 weeks in each div. See the code below
<div class="form-check" data-weeknr="1,2,3,4"></div>
<div class="form-check" data-weeknr="5,6,7,8"></div>
<div class="form-check" data-weeknr="9,10,11,12"></div>
<div class="form-check" data-weeknr="13,14,15,16"></div>
<div class="form-check" data-weeknr="17,18,19,20"></div>
... This continues until it reaches
<div class="form-check" data-weeknr="49,50,51,52"></div>
I have a code that grabs the current week by the variable weekno so console.log(weekno); returns today: 3
I want to add a class current to the .form-check that has weekno in it's data-attribute data-weeknr.
So I tried to use the attribute contains selector instructions, but I need it to go deeper than these instructions allow.
$links = $(".formplate .form-check[data-weeknr*='3']");
console.log($links.length);
Because the above jQuery code will return in the console the number 7 due to the fact it now grabs every .form-check that has a 3 init. So it grabs not only 3 but also 13,23,[30,31,32],[33,34,35,36],[37,38,39],43 making the total of 7 groups.
So how can I change this line to do 2 things:
$links = $(".formplate .form-check[data-weeknr*='3']");
How to incorporate the variable weekno, how can I properly escape so that the var is allowed?
And how can I make it select only the number 3?
The esiest way for selecting only the one with a value of 3 is to add the separator as well to the start and end of the data attribute, like
<div class="form-check" data-weeknr=",1,2,3,4,"></div>
Then take for selecting the separators into the search, because data-weeknr* seaches for a string somewhere in the data attribute.
$links = $(".formplate .form-check[data-weeknr*=',3,']");
One way would be using $.inArray . So, you can use split(",") this will give you array
then compare if the week value is there inside array if yes add class there.
Demo Code :
var week = '11';
var count = 0;
$(".form-check").each(function() { //loop through form check
var data_ = $(this).data('weeknr').split(","); //get array using split
//check week is in array
if ($.inArray(week, data_) !== -1) {
count++;
$(this).addClass('current') //add class
}
})
console.log("Length --" + count)
.current {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check" data-weeknr="1,2,3,4">A</div>
<div class="form-check" data-weeknr="5,6,7,8">B</div>
<div class="form-check" data-weeknr="9,10,11,12">C</div>
<div class="form-check" data-weeknr="13,14,15,16">D</div>
<div class="form-check" data-weeknr="17,18,19,20">E</div>
<div class="form-check" data-weeknr="49,50,51,52">F</div>
I have created the below example code for the fulfillment of your requirement:
var weekno = "3";
$(".form-check").each(function() {
var dataWeeknr = $(this).attr('data-weeknr');
if (dataWeeknr.indexOf(',') > -1) {
var dataWeeknrArr = new Array();
dataWeeknrArr = dataWeeknr.split(",");
if(dataWeeknrArr.includes(weekno)) {
$(this).addClass('current');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check" data-weeknr="1,2,3,4"></div>
<div class="form-check" data-weeknr="5,6,7,8"></div>
<div class="form-check" data-weeknr="9,10,11,12"></div>
<div class="form-check" data-weeknr="13,14,15,16"></div>
<div class="form-check" data-weeknr="17,18,19,20"></div>
<div class="form-check" data-weeknr="49,50,51,52"></div>
I try to set value and text of my child classes after clicking on one of two buttons in my html code
$(".fce-pool-for > .fce-pool-bar").val($('.fce-pool-bar').val(Math.round(resultFor)));
$(".fce-pool-for > .fce-pool-percentage").text($('.fce-pool-percentage').text((Math.round(resultFor).toString()) + "%"));
$(".fce-pool-against > .fce-pool-bar").val($('.fce-pool-bar').val(Math.round(resultAgainst)));
$(".fce-pool-against > .fce-pool-percentage").text($('.fce-pool-percentage').text((Math.round(resultAgainst).toString()) + "%"));
<div class="fce-pool-against">
<div class="row">
<div class="col-1">
<p class="fce-pool-title">
<?php the_sub_field('vote_against_title')?>
</p>
</div>
<div class="col-8">
<progress class="fce-pool-bar" max="100" value="0"></progress>
</div>
<div class="col-1">
<p class="fce-pool-percentage">0 %</p>
</div>
<div class="col-1 offset-1">
Less
</div>
</div>
<p>
<?php the_sub_field('vote_against_note')?>
</p>
</div>
<div class="fce-pool-for">
<div class="row">
<div class="col-1">
<span class="fce-pool-title"><?php the_sub_field('vote_for_title')?></span>
</div>
<div class="col-8">
<progress class="fce-pool-bar" max="100" value="0"></progress>
</div>
<div class="col-1">
<p class="fce-pool-percentage">0 %</p>
</div>
<div class="col-1 offset-1">
More
</div>
</div>
<p>
<?php the_sub_field('vote_for_note')?>
</p>
</div>
But do not know how to set values when parent class is different... please someone has an advice how to do that ???
I don't know where you get the resultFor and resultAgainst value from so I put an example of that in there, using the commented out functions.
Note the key to your question is "what was clicked, from where". To do that, I attached an event handler to the pools '.fce-pool-against, .fce-pool-for', targeting the buttons within that> '.fce-pool-button' as in:
$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button',
Then, inside the function I use the attached pool (the delegateTarget) and find stuff inside that during the click event handler function execution.
let pool = $(event.delegateTarget);
Documentation: https://api.jquery.com/event.delegateTarget/
Perhaps a better solution is to use a data attribute in each pool, so I put an example of that in there, this makes the code much more generic, and we can attach a button click handler to each pool and then use that, finding the elements we need in each pool when clicked.
Separate thing snippet
let resultFor = 20;
let resultAgainst = 13;
$('.fce-pool-for').on('click', '.fce-pool-button', function(event) {
event.preventDefault();
let pool = $(event.delegateTarget);
let resultValue = Math.round(resultFor);
pool.find('.fce-pool-percentage').text( resultValue + " %");
pool.find('.fce-pool-bar').val(resultValue);
});
$('.fce-pool-against').on('click', '.fce-pool-button', function(event) {
event.preventDefault();
let pool = $(event.delegateTarget);
let resultValue = Math.round(resultAgainst);
pool.find('.fce-pool-percentage').text( resultValue + " %");
pool.find('.fce-pool-bar').val(resultValue);
});
Use the data property/attribute to do something more generic:
$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button', function(event) {
event.preventDefault(); // keep link from executing
let pool = $(event.delegateTarget); // the pool
let votes = pool.data('votes'); // data from the pool
votes = votes + 1;
// store new value
pool.data('votes', votes);
// update the percent and display
$('.fce-pool-button').trigger('showvalues');
});
$('.fce-pool-against, .fce-pool-for')
.on('showvalues', '.fce-pool-button', function(event) {
event.preventDefault(); // keep link from executing
let pool = $(event.delegateTarget); // the pool
let votes = pool.data('votes'); // data from the pool
let totalVotes = 0;
$('.fce-pool-button').each(function(e) {
totalVotes = totalVotes + $(this).closest('.fce-pool').data('votes');
});
let percent = (votes / totalVotes) * 100;
//console.log(totalVotes, votes, percent);
let resultValue = Math.round(percent);
// find the elements in our pool, set them
pool.find('.fce-pool-percentage').text(resultValue + " %");
pool.find('.fce-pool-bar').val(resultValue);
pool.find('.votes-display').text(votes);
})
.find('.fce-pool-button')
.trigger('showvalues'); // trigger initial display
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="fce-pool fce-pool-against" data-votes="25">
<div class="row">
<div class="col-1">
<span class="fce-pool-title">
Against
</span>
</div>
<div class="col-8">
<progress class="fce-pool-bar" max="100" value="0"></progress>
</div>
<div class="col-1">
<p class="fce-pool-percentage">0 %</p>
</div>
<div class="col-1 offset-1">
Less
</div>
</div>
<p>
Against Votes: <span class="votes-display"></span>
</p>
</div>
<div class="fce-pool fce-pool-for" data-votes="43">
<div class="row">
<div class="col-1">
<span class="fce-pool-title">For</span>
</div>
<div class="col-8">
<progress class="fce-pool-bar" max="100" value="0"></progress>
</div>
<div class="col-1">
<p class="fce-pool-percentage">0 %</p>
</div>
<div class="col-1 offset-1">
More
</div>
</div>
<p>
For Votes: <span class="votes-display"></span>
</p>
</div>
I think what you want is to be able to isolate the parent class of whichever fce-pool-button is clicked.
Give the fce-pool-against and fce-pool-for parents a common class like fce-pool along with the classes they already have.
Then you can isolate the parent fce-pool class by traversing to closest('.fce-pool') and use find() within that parent to look for instance specific elements like the <progress>.
You can also use is() to determine whether it is for or against pool so you know how to manage the data for that instance
$('.fce-pool-button').click(function(event){
// "this" is the button that was clicked
var $pool = $(this).closest('.fce-pool'),
// find the progess element in current instance
$progress = $pool.find('progress.fce-pool-bar'),
// set boolean to know which type it is
isForPool = $pool.is('.fce-pool-for');// true/false
// now use logic similar to
$progress.val( isForPool ? resultFor : resultAgainst)
})
I recently created a simple image slider here: http://americanbitcoinacademy.com/test2/
Which has basically a next and prev buttons and slides the image. You can check the codes of that here: https://jsfiddle.net/mmytscuz/
And now I am trying to apply these codes to my new element but this time instead of images I am trying to apply it using div elements.
You can check my current progress work here: https://jsfiddle.net/7808uLpv/
So basically when you click the next button it must slide up on the next list item element. For some reason it won't hide the other elements now also it doesn't slide either.
So far here's how I layout my elements:
<ul class="slider">
<li>
<div class="box center">
<h1>What is your name?</h1>
<input type="text" name="name" placeholder="Your Name.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
<li>
<div class="box center">
<h1>How much money do you have?</h1>
<input type="text" name="money" placeholder="Your Money.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
<li>
<div class="box center">
<h1>Your Birthday?</h1>
<input type="text" name="bday" placeholder="Your Birthday.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
</ul>
And here's my javascript:
(function() {
var container = $('div.slider').css('overflow', 'hidden').children('ul'),
slider = new Slider( container, $('#slider-nav') );
slider.nav.find('button').on('click', function() {
slider.setCurrent( $(this).data('dir') );
slider.transition();
});
})();
function Slider( container, nav ) {
this.container = container;
this.nav = nav.show();
this.imgs = this.container.find('img');
this.imgWidth = this.imgs[0].width; // 600
this.imgsLen = this.imgs.length;
this.current = 0;
}
Slider.prototype.transition = function( coords ) {
this.container.animate({
'margin-left': coords || -( this.current * this.imgWidth )
});
};
Slider.prototype.setCurrent = function( dir ) {
var pos = this.current;
pos += ( ~~( dir === 'next' ) || -1 );
this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;
return pos;
};
Any idea what am I doing wrong when I click the 'NEXT' button why the elements are not sliding as well why are they all showing up at once?
There's a lot wrong with your fiddle.
No jQuery loaded.
No div.slider that you refer to for plugin initialization.
You use id slider-nav like a class. Id must be unique.
In css li.slider needs to be .slider li
You're looking for images within js but there are none in the markup.
Consequently, your plugin is throwing errors, trying to detect width of these images that don't exist: this.imgs[0].width;
Imo, just start over, get a solid html and css base and only then try to write the js plugin.
Just add jQuery because without not working.See the Demo here
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
I am trying to trigger an event with a button that takes text from a textarea and sends it to a panel using the Bootstrap Framework (v.3.3.7). Currently trying to do this using an event listener in Javascript rather than assigning an ‘onclick’ value for the button.
HTML:
<div class="container-fluid">
<div class="row">
<!-- Panel where text will be appended to -->
<div id="mainChatBox" class="panel-body" style="height:435px; overflow-y:scroll"></div>
<!-- Textarea and button -->
<div class="panel panel-footer" style="height:40px">
<div class="form-group col-md-10 col-lg-10">
<input type="text" placeholder="Type your message here" class="form-control" id="messageBar" />
</div>
<div class="input-group-btn col-md-2 col-lg-2">
<button id="sendMessageButton" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
Javascript
var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');
sendMessageButton.addEventListener("click", function (event) {
var message = messageBar.value;
mainChatBox.innerHTML += message + "<br />";
});
I tried debugging by using this code and another version where I instead assign the button an ‘onclick’ value and then keep the function for it.
Here is a link to a reddit post with that version of code where I tried to find a solution with assigning an ‘onclick’ value to the button instead of using an EventListener.
Reddit post link
I need to know why when the event is triggered by the button that the text will not be appended to the mainChatBox when using either the method with the 'onclick' value assignation to the "button" tag for sendMessageButton, or the EventListener in the Javascript.
Not sure if this is possible, I'm just starting to learn javascript and jQuery. If the way that I would like is not possible, I am very open to hearing of different ways I may be able to achieve this.
I want to display a datepicker, the user will click on dates and when they do a dialog box appears which has specific predefined data in it. They can select a different date, and it will open another dialog box with different predefined data in it, and I want to keep track of the dates that they click on.
<div id="tabs">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs-1">
<p>I'm going to have different data applying to only this day</p>
</div>
<div id="tabs-2">
<p>I'm going to have different data applying to only this day</p>
</div>
<div id="tabs-3">
<p>I'm going to have different data applying to only this day</p>
</div>
</div>
Open jQuery dialog box upon selecting a date from jQuery datepicker inline
That link was useful because a user has a jsfiddle posted: http://jsfiddle.net/qqabC/ which is a start to what I am trying to do, I am just not sure of how or if it is even possible to incorporate divs into the dialog boxes like so. I keep messing around with it but I have been getting nowhere. Each date that is selected will have different dialog box content in it.
If this is not possible, what would be the best way to achieve this? Thank you.
--Edit:
I still need to implement the divs that I have defined above with div id "tabs". Tabs = workout days. So tabs-1 to tabs-5 would be 5 total days. tabs-1 is going to be their first click which is day 1 form content, tabs-2 will be their second click which is day 2 form content, and so on. I believe I should use a for loop, because which each click the div is being incremented onto the next one. I was trying to do something like:
var divs = $('#tabs > div[id]');
var links = $('#tabs li');
divs.hide();
for (i=0;i<=max_workouts;i++) {
$('#tabs li').on('click', function(e){
var clickedID = $(this).attr('href').clone().appendTo(#workout-modal);
}
Something like that, to iterate through the div's with each click, but it's not working, I have been trying to find examples of placing existing div content in modals but there is nothing on iterating through divs in this way, do you have any suggestions?
Here is an example of how you could achieve this functionality using Bootstrap. Of course you'll need to change the functionality and design as needed but this should be a fair start
The workflow is as follows:
User clicks a date
Modal is displayed with various inputs
Inputs are cleared when modal opens
User enters info in the inputs
User clicks add workout
A span label is added to the display showing the workout number and the date selected
This span has data attributes set to store the date, title, and each of the values from the modal inputs
If user clicks the "X" on the right end of the span, it is removed
If user clicks the span label anywhere else it reopens the modal and populates the inputs with the data stored as attributes on the span
If the user clicks add workout after loading an existing one, the new span replaces the old one instead of adding to the end of the div
Here is a jsFiddle also
$(function(){
var max_workouts = 5;
$('#workout-datepicker').datepicker({
startDate: "today"
}).on('changeDate', function(e) {
var cur = $('.workout-label').length;
if (cur < max_workouts) {
var workoutDate = e.format('mm/dd/yyyy');
var title = 'Workout ' + (cur + 1) + ' - ' + workoutDate;
openModal(title, workoutDate);
}
else{
var $tooMany=$('#too-many');
$tooMany.show();
setTimeout(function(){ $tooMany.hide() }, 2000);
}
});
var $workoutLabelsContainer = $('#workout-labels-container');
$('#add-workout').click(function() {
var $workoutModal = $('#workout-modal');
var workoutDate = $workoutModal.data('workout-date');
var title = $workoutModal.data('workout-title');
var vaule1 = $('#modal-workout-value-1').val();
var vaule2 = $('#modal-workout-value-2').val();
var $workout = $('<span class="label label-primary workout-label col-sm-12">' + title + '<span class="glyphicon glyphicon-remove pull-right remove-workout" aria-hidden="true"></span></span>');
var clickedLabelIndex = $workoutModal.data('crurent-label-index');
$workout.data('workout-title', title).data('workout-date', workoutDate).data('value-1', vaule1).data('value-2', vaule2);
if (clickedLabelIndex == -1) $workoutLabelsContainer.append($workout);
else($('.workout-label').eq(clickedLabelIndex).replaceWith($workout))
$workoutModal.modal('hide');
});
$workoutLabelsContainer.on('click', '.remove-workout', function(e) {
e.stopPropagation();
$(this).closest('.workout-label').remove();
})
$workoutLabelsContainer.on('click', '.workout-label', function() {
var $workoutLabel = $(this);
var workoutDate = $workoutLabel.data('workout-date');
var title = $workoutLabel.data('workout-title');
var value1 = $workoutLabel.data('value-1');
var value2 = $workoutLabel.data('value-2');
var labelIndex = $('.workout-label').index($workoutLabel);
openModal(title, workoutDate, value1, value2, labelIndex);
});
function openModal(title, workoutDate, value1, value2, labelIndex) {
var $workoutModal = $('#workout-modal');
var $value1 = $('#modal-workout-value-1').val('');
var $value2 = $('#modal-workout-value-2').val('');
$workoutModal.data('workout-title', title).data('workout-date', workoutDate);
$('#workout-modal-title').html(title);
if (value1) $value1.val(value1);
if (value2) $value2.val(value2);
if (labelIndex !== 'undefined' && labelIndex > -1) $workoutModal.data('crurent-label-index', labelIndex);
else $workoutModal.data('crurent-label-index', -1);
$workoutModal.modal({
show: true
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
.workout-label {
padding: 6px;
font-size: 16px;
width: 100%;
display: block;
margin-bottom: 5px;
cursor: pointer;
}
.remove-workout {
cursor: pointer;
}
#too-many{
display:none;
}
</style>
<br>
<br>
<div class="container well" id="workout-container">
<div class="row">
<div class="col-xs-6">
<div id="workout-datepicker"></div>
</div>
<div class="col-xs-6" id="workout-labels-container">
</div>
</div>
<div class="alert alert-danger" id="too-many" role="alert">Maximun reached</div>
</div>
<div id="workout-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="workout-modal-title"></h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-4 control-label">Some short text:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="modal-workout-value-1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-4 control-label">Some longer text:</label>
<div class="col-sm-8">
<textarea class="form-control" id="modal-workout-value-2" name="textarea"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="button" class="btn btn-primary" id="add-workout">Add workout</button>
</div>
</form>
</div>
</div>
</div>