Multiple calculation is not working properly

Multiple calculation is not working properly - javascript

After type a number in input control, below will display multiplication it is working for when i'm using single row but when i work for multiple row this is not working.
How can i do it?
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.total').text($('.static-number').text() * $('.input-number').text());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

You need to loop through classes and perform the calculations.
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.static-number').each(function(){
var currentElement = $(this);
var static_num = currentElement.parent().find('div.static-number').text();
var input_num = currentElement.parent().find('div.input-number').text();
currentElement.parent().find('div.total').text(static_num*input_num)
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

Issue is that when you have multiple elements, your selector will return a list of elements and .text() will concat all their values.
So if you add 3 in textbox, you will get "33" for .input-number and "22" for .static-number. You will have to fetch only first element for this calculation.
Following is the sample:
$(function() {
$('.form-control').keyup(function() {
const value = $(this).val();
$('.input-number').text(value);
console.log(`Your equation is processed as: ${$('.static-number').text()} * ${ $('.input-number').text() }`, )
$('.total').text($('.static-number:first').text() * value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

You have to iterate through each element for calculating sum of the respective rows.
Try the below code:
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.row').each((i, obj) => {
$(obj).children('.total').text($(obj).children('.static-number').text() * $(this).val());
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>3</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

$(...)
returns a list of elements matching. The functions, e.g. text know how to behave when that list contains a single element but not when it contains multiple elements. you need to act on them individually.
You'll want to do something like:
$('row').each(elem => {
const sn = $(elem).find('.static-number').text()
const input = $(elem).find('.input-number').text()
$(elem).find('.total').text(sn * input)
});

Add class in row which you want to calculate value row_body and loop through this class.
$(function() {
$('.form-control').keyup(function() {
let inputVal = $(this).val();
$('.input-number').text(inputVal);
$('.row_body').each(function(){
$(this).children('.total').text(parseFloat($(this).children('.static-number').text()) * parseFloat(inputVal));
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row row_body">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row row_body">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

This is not working because class names conflicting while accessing the values.
Try like this.
js:
$(function() {
$('.form-control').keyup(function() {
for(var i=0;i<$('.row_count').length;i++)
{
$('.input-number_row'+i).text($(this).val());
$('.total_row'+i).text($('.static-number_row'+i).text() *$(this).val())
}
});
});
Html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row row_count" >
<div class="col-3 static-number_row0"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number_row0"><span></span></div>
<div class="col-3 total_row0"><span></span></div>
</div>
<div class="row row_count">
<div class="col-3 static-number_row1"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number_row1"><span></span></div>
<div class="col-3 total_row1"><span></span></div>
</div>
</div>
</div>

Here is simple solution just edit your javascript
`
<script type="text/javascript">
$('.form-control').keyup(function() {
var static = $(".static-number span").html();
var number = $(this).val();
var total = static * number;
$(".input-number span").text(number);
$(".total span").text(total);
});
</script>
`

Related

How to set a unique ID for very button in Jquery

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#userdata").keyup(function () {
var btnSubmit = $("#btnSubmit");
//var btnSubmit = $('btnSubmit').each((btn, index) => {btn.attr('id', `btnSubmit${index}`});
if ($(this).val().trim() != "") {
btnSubmit.removeAttr("disabled");
} else {
btnSubmit.attr("disabled", "disabled");
}
});
});
</script>
</body>
</html>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
actually I'm facing issue with buttons id's basically i am getting dynamic id's (like btnSubmit0, btnSubmit1)for buttons here I just to to when i enter a text in textarea button should enable otherwise it should be in disabled. but in my script i have a static id like butSubmit how to resolve this issue , Is there any possible pls help me on it.
note:actually i am using bootstrap card in that card I have button and other hand this card have a loop also , I' mean every button inside the loop due to i have append a unique id to buttons.

You have to update ID in html like,
id="btnSubmit"+ i
<button id="btnSubmit"+ i class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button>
script on load/ready
var i=0;
$('.btn').each(function(){
i++;
var newID='btnSubmit'+i;
$(this).attr('id',newID);
});

How to manage bootstrap 4 grids?

Actually i have two side like col-md-6 & col-md-6 & i have six images inside left side and right side i need only one images like given below code.
This is working fine but i need expand left six column in full width when right side image will not be available. how cann i manage this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col-6 p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
I Want like as given below code if right col-md-6 will be not available:-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2" style="background-color:yellow;">img</div>
<div class="col-2" style="background-color:orange;">img</div>
<div class="col-2" style="background-color:blue;">img</div>
<div class="col-2" style="background-color:red;">img</div>
<div class="col-2" style="background-color:lime;">img</div>
<div class="col-2" style="background-color:indianred;">img</div>
</div>
</div>
</div>
</div>
Answer will be appreciated!

Replace col-6 with col
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>

Search for text inside div and all his childs

I would like to hide an entire div when there isn't the text i'm writing inside a input form.
For now i'm able to search inside all childs div and hide every child div if there isn't the text.
But i have a problem right now, example:
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome">
<b>Nome: </b> Davide
</div>
<div class="col-4 regione">
<b>Regione: </b> Reggio
</div>
<div class="col-4 citta">
<b>Città: </b>Citta "
</div>
</div>
<div class="row">
<div class="col-4 dataNascita">
<b>Data di nascita: </b>02-02-1992
</div>
<div class="col-4 coaching">
<b>Coaching online: </b>Sì
</div>
<div class="col-4 sesso">
<b>Sesso: </b>Maschio
</div>
</div>
<div class="row border-bottom">
<div class="col-6 blurry-text cellulare">
<b>Cellulare: </b> 1231231231
</div>
<div class="col-6 blurry-text email">
<b>Email: </b>asdaklsnd#gmail.com
</div>
</div>
<div class="row descriptionText">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'>
<button type='button'>Profilo</button>
</div>
</div>
</div>
if i search Davide all the others childs of the .infos div will be hidden since they doesn't contain the text, but i would like to keep them visible if there is another child that actually contain the text.
I've created an example here for testing : https://jsfiddle.net/hj9r2L4u/6/
I would like to have the possibility to input more words for the search bar, image having 2 users with name Davide, but with different city, i would like to input something like
Da City2
With "Da" i actually show both div, then with City2 i hide the div that doesn't have the text in it.
The code i'm actually using is:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery(".information").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

You could wrap the rows and target this as the containing element, see the snippet below:-
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery('.row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container w-100 h-100">
<input id="searchPt">
<div id="goToProfile">
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="rowWrap">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Davide </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Citta "</div>
</div>
<div class="row">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-02-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>Sì</div>
<div class="col-4 sesso\"><b>Sesso: </b>Maschio</div>
</div>
<div>
<div class="rowWrap">
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdaklsnd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Simone </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Emilia</div>
</div>
<div class="row\">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-04-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>No</div>
<div class="col-4 sesso\"><b>Sesso: </b>Femmina</div>
</div>
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdakl12412snd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjb15251212612612612dkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
</div>
</div>

For multiple criteria, do a split and test each value with some short-circuit logic:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase().split();
jQuery(".information").filter(function() {
for(var i=0; i<value.length; i++){
if($(this).text().toLowerCase().indexOf(value[i]) === -1) {
$(this).toggle(false)
return false;
}
}
$(this).toggle(true);
return true
});
});

Website on mobile is defaulting to search box

When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>

How to create the following responsive layout with bootstrap?

I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?

You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>

Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>

Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/

You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Multiple calculation is not working properly - javascript

Related

How to set a unique ID for very button in Jquery

How to manage bootstrap 4 grids?

Search for text inside div and all his childs

Website on mobile is defaulting to search box

How to create the following responsive layout with bootstrap?

Categories

Resources