I have been studying bootsrap, and from what I understand, I just need to wrap my code with <div> elements of various classes.
I have built a webpage and now want to optimize it for mobile devices using Bootstrap.
Here is a portion of my code :
<body onload="initializeCharts()">
<div class = "container-fluid">
<div class = "row">
<div class = "col-lg-12">
<div id = "header">
Sales Statistics for 2015 -16
</div>
</div>
</div>
<div id = "page">
<div class = "row">
<div class = "col-lg-6">
<div id = "quadrant1">
<input type = "button" name = "zoomButton1" id = "zoomButton1" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" />
<select name = "chartType" id = "chartType" onchange = "changeChartType()" class = "chartControllers">
<option value = "nothingSelected">Select chart type</option>
<option value = "column2d">2D Column Chart</option>
<option value = "bar2d">2D Bar Chart</option>
<option value = "line">2D Line Chart</option>
<option value = "area2d">2D Area Chart</option>
<option value = "pie2d">2D Pie Chart</option>
<option value = "pareto2d">2D Pareto Chart</option>
<option value = "doughnut2d">2D Doughnut Chart</option>
<option value = "column3d">3D Column Chart</option>
<option value = "bar3d">3D Bar Chart</option>
<option value = "pie3d">3D Pie Chart</option>
<option value = "pareto3d">3D Pareto Chart</option>
<option value = "doughnut3d">3D Doughnut Chart</option>
</select>
<input type = "button" name = "chooseValuesButton" id = "chooseValuesButton" value = "Choose values" onclick = "displayChooseAlert()"
class = "chartControllers" />
<input type = "button" name = "backButton1" id = "backButton1" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" />
<div id = "chartA">
</div>
</div>
</div>
<div class = "col-lg-6">
<div id = "quadrant2">
<input type = "button" name = "zoomButton2" id = "zoomButton2" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" />
<select name = "themeColor" id = "themeColor" onchange = "changeChartThemeColor()" class = "chartControllers">
<option value = "nothingSelected" selected>Select color theme</option>
<option value = "#FFFF00">Yellow and White</option>
<option value = "#D80000">Red and White</option>
<option value = "#0000CC">Blue and White</option>
<option value = "#006600">Green and White</option>
</select>
<input type = "button" name = "backButton2" id = "backButton2" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" />
<div id = "chartB">
</div>
</div>
</div>
</div>
When I run this on my browser, I see that the columns render at the ends of the page, not like the half columns that I want. When the browser is resized to mobile size, I want the quadrant divs to come one below the other, but on
desktops I want the quadrant divs to occupy half the width of the screen.
What is wrong with my code ?
The problem lays in the size of your columns you've set.
You are using the large column that breaks immediately when you leave the large viewport. .col-lg-6 should be changed to .col-md-6 or .col-sm-6 in order to keep those two columns together for a little longer.
Using .col-xs-6 creates the column "unbreakable" since it does not drop even on mobile device. Otherwise your code seems to be all right, and if I understood the question correctly, this is what you are asking. Correct me if I'm wrong and clearify your question a bit! :)
Bootstrap file add in html file to boot strep use in php.
<script src="filename.js"></script>
And add particular file add in folder.
Related
I'm trying to check if my select box is empty or not by using class. However, based on the code below, the alert returned not only the id but also another 2 'undefined'. Anyone who can tell me why is this happening?
<script>
$('.test-input').each(function () {
var el = [];
if ($(this).val() === "") {
var target = $(this).attr('id');
alert(target); *// return media_type | underfined | underfined*
el.push(target);
}
})
</script>
<div class="form-group col-sm-4">
<label class="">Type:</label>
<select class="form-control required-input test-input" id="media_type" placeholder="Choose a media">
<option value="">Select a state</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="lizard">Lizard</option>
<option value="snake">snake</option>
</select>
</div>
$('.test-input').each(function () will iterate through each element in your HTML that has the "test-input" class name, so when there you are cycling through those and getting an undefined from pulling its id via var target = $(this).attr('id');, what this means is that somewhere else in the file you must have two other classes named "test-input" without an ID.
I would console.log("Iteration"); in the loop and check your console to see how many times the loop is being run and go from there.
I have a select menu of a form which send data to sql DB and fetch back when it is called for editing the same value to be shown in select menu option as selected. Please have a look at my code.
<label>State</label>
<select class="form-control" [(ngModel)] = "selectedState" id="statelist" name="statelist" #statelist = "ngModel" [disabled]="selectedCountry == null || selectedCountry == 0" required ngmodel>
<option>Select a State</option>
<option *ngFor="let item of stateListSorted" [ngValue] = "item.name" [selected] = "stateOptions">{{item.name}}</option>
</select>
Component
onEditCustomer(customerEdit: Customer): void{
this.addFormStatus = true;
this.addBtnStatus = false;
this.customerEditCall = true;
this.selectedCustomerEdit = customerEdit;
this.companyName = this.selectedCustomerEdit.name;
const country = this.selectedCustomerEdit.country;
this.stateOptions = this.selectedCustomerEdit.state;
}
Not sure if it's what you need, but you can set the [(ngModel)]="selectedState" to your desired value in your component.
https://stackblitz.com/edit/angular-qmuxxj
Alternatively, to answer your question (but also less readable imo since it's in the HTML), you can put a condition on the "selected" attribute of the tag
<option *ngFor="let item of stateListSorted" [ngValue] = "item.name" [selected] ="item.id === 5">{{item.name}}</option>
I have a select input with an option called "custom". So when the user selects "custom" from the list the value needs to be that of a corresponding text input box.
<select id="choice" >
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
The "custom" text doesn't need to change, just the value for when the data from the form is collected.
Any ideas?
Thanks
Here you go,
HTML
<select id="choice" onChange="javaScript:getIt(this)">
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
JavaScript
getIt = function(obj) {
var val = document.getElementById("choice").value;
//If you want to get value then user above line.
var innerhtml = obj.options[obj.selectedIndex].text;
document.getElementById("custom_choice").value = innerhtml;
}
FIDDLE
JavaScript would work best for this, something like this:
Bear in mind these would be two separate files:
var choice = document.getElementById("choice");
var custom_choice = document.getElementById("custom_choice").innerHTML = choice;
I think this may work but you would have to check it.
I have a form in Bootstrap 3 that's inside a modal. There's a button called "submit" where when it's clicked the stuff that was entered in the form should be sent to the database. Although when I click "Submit" nothing happens.
Here is a live preview: http://rentmycar.pe.hu/index.html
<!--Checkout Modal Start -->
<div class = "modal fade" id = "checkoutModal" tabindex = "-1" role = "dialog" aria-labelledby = "checkoutModalLabel" aria-hidden = "true" data-backdrop = "static">
<div class = "modal-dialog">
<div class = "modal-content">
<form action = "index.html" method = "post" id = "checkout-form" name = "checkout-form">
<!--Modal header start -->
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">×
</button>
<h4 class = "modal-title" id = "myModalLabel">Complete reservation</h4>
</div>
<!--Modal header end -->
<!--Modal body start -->
<div class = "modal-body">
<!--Checkout Info start -->
<div class = "checkout-info-box">
<h3><i class = "fa fa-info-circle"></i> Upon completing this reservation enquiry, you will receive::</h3>
<p>Your rental voucher to produce on arrival at the rental desk and a toll-free customer support number.</p>
</div>
<!--Checkout Info end -->
<!--Checkout Rental Info start -->
<div class = "checkout-vehicle-info">
<div class = "location-date-info">
<h3>Location & Date</h3>
<div class = "info-box">
<span class = "glyphicon glyphicon-calendar"></span>
<h4 class = "info-box-title">Pick-Up Time</h4>
<p class = "info-box-description"><span id = "pick-up-date-ph"></span> at <span id = "pick-up-time-ph"></span></p>
<input type = "hidden" name = "pick-up" id = "pick-up" value = "">
</div>
<div class = "info-box">
<span class = "glyphicon glyphicon-calendar"></span>
<h4 class = "info-box-title">Drop-Off Time</h4>
<p class = "info-box-description"><span id = "drop-off-date-ph"></span> at <span id = "drop-off-time-ph"></span></p>
<input type = "hidden" name = "drop-off" id = "drop-off" value = "">
</div>
<div class = "info-box">
<span class = "glyphicon glyphicon-map-marker"></span>
<h4 class = "info-box-title">Pick-Up Location</h4>
<p class = "info-box-description" id = "pickup-location-ph"></p>
<input type = "hidden" name = "pickup-location" id = "pickup-location" value = "">
</div>
<div class = "info-box">
<span class = "glyphicon glyphicon-map-marker"></span>
<h4 class = "info-box-title">Drop-Off Location</h4>
<p class = "info-box-description" id = "dropoff-location-ph"></p>
<input type = "hidden" name = "dropoff-location" id = "dropoff-location" value = "">
</div>
</div>
<div class = "vehicle-info">
<h3>CAR: <span id = "selected-car-ph"></span></h3> [Vehicle Models]
<input type = "hidden" name = "selected-car" id = "selected-car" value = "">
<div class = "clearfix"></div>
<div class = "vehicle-image">
<img class = "img-responsive" id = "selected-vehicle-image" src = "#" alt = "Vehicle">
</div>
</div>
<div class = "clearfix"></div>
</div>
<!--Checkout Rental Info end -->
<hr>
<!--Checkout Personal Info start -->
<div class = "checkout-personal-info">
<div class = "alert hidden" id = "checkout-form-msg">
test
</div>
<h3>PERSONAL INFORMATION</h3>
<div class = "form-group left">
<label for = "first-name">First Name:</label>
<input type = "text" class = "form-control" name = "first-name" id = "first-name" placeholder = "Enter your first name">
</div>
<div class = "form-group right">
<label for = "last-name">Last Name:</label>
<input type = "text" class = "form-control" name = "last-name" id = "last-name" placeholder = "Enter your last name">
</div>
<div class = "form-group left">
<label for = "phone-number">Phone Number:</label>
<input type = "text" class = "form-control" name = "phone-number" id = "phone-number" placeholder = "Enter your phone number">
</div>
<div class = "form-group right age">
<label for = "age">Age:</label>
<div class = "styled-select-age">
<select name = "age" id = "age">
<option value = "18">18</option>
<option value = "19">19</option>
<option value = "20">20</option>
<option value = "21">21</option>
<option value = "22">22</option>
<option value = "23">23</option>
<option value = "24">24</option>
<option value = "25">25</option>
<option value = "26">26</option>
<option value = "27">27</option>
<option value = "28">28</option>
<option value = "29">29</option>
<option value = "30">30</option>
<option value = "31">31</option>
<option value = "32">32</option>
<option value = "33">33</option>
<option value = "34">34</option>
<option value = "35">35</option>
<option value = "36">36</option>
<option value = "37">37</option>
<option value = "38">38</option>
<option value = "39">39</option>
<option value = "40">40</option>
<option value = "41">41</option>
<option value = "42">42</option>
<option value = "43">43</option>
<option value = "44">44</option>
<option value = "45">45</option>
<option value = "46">46</option>
<option value = "47">47</option>
<option value = "48">48</option>
<option value = "49">49</option>
<option value = "50">50</option>
<option value = "51">51</option>
<option value = "52">52</option>
<option value = "53">53</option>
<option value = "54">54</option>
<option value = "55">55</option>
<option value = "56">56</option>
<option value = "57">57</option>
<option value = "58">58</option>
<option value = "59">59</option>
<option value = "50">50</option>
<option value = "61">61</option>
<option value = "62">62</option>
<option value = "63">63</option>
<option value = "64">64</option>
<option value = "65">65</option>
<option value = "66">66</option>
<option value = "67">67</option>
<option value = "68">68</option>
<option value = "69">69</option>
<option value = "70">70</option>
<option value = "71">71</option>
<option value = "72">72</option>
<option value = "73">73</option>
<option value = "74">74</option>
<option value = "75">75</option>
<option value = "76">76</option>
<option value = "77">77</option>
<option value = "78">78</option>
<option value = "79">79</option>
<option value = "80">80</option>
<option value = "81">81</option>
<option value = "82">82</option>
<option value = "83">83</option>
<option value = "84">84</option>
<option value = "85">85</option>
<option value = "86">86</option>
<option value = "87">87</option>
<option value = "88">88</option>
<option value = "89">89</option>
<option value = "90">90</option>
<option value = "91">91</option>
<option value = "92">92</option>
<option value = "93">93</option>
<option value = "94">94</option>
<option value = "95">95</option>
<option value = "96">96</option>
<option value = "97">97</option>
<option value = "98">98</option>
<option value = "99">99</option>
<option value = "100">100</option>
</select>
</div>
</div>
<div class = "form-group left">
<label for = "email-address">Email:</label>
<input type = "email" class = "form-control" name = "email-address" id = "email-address" placeholder = "Enter your email address">
</div>
<div class = "form-group right">
<label for = "email-address-confirm">Confirm Email Address:</label>
<input type = "email" class = "form-control" name = "email-address-confirm" id = "email-address-confirm" placeholder = "Confirm your email address">
</div>
<div class = "clearfix"></div>
</div>
<!--Checkout Personal Info end -->
<!--Checkout Address Info start -->
<div class = "checkout-address-info">
<div class = "form-group address">
<label for = "address">Address</label>
<input type = "text" class = "form-control" name = "address" id = "address" placeholder = "Enter your Street an No.">
</div>
<div class = "form-group city">
<label for = "city">City</label>
<input type = "text" class = "form-control" name = "city" id = "city" placeholder = "Enter your City">
</div>
<div class = "form-group zip-code">
<label for = "zip-code">Zip Code</label>
<input type = "text" class = "form-control" name = "zip-code" id = "zip-code" placeholder = "Enter your Zip Code">
</div>
<div class = "clearfix"></div>
</div>
<!--Checkout Address Info end -->
<div class = "newsletter">
<div class = "form-group">
<div class = "checkbox">
<input id = "check1" type = "checkbox" name = "newsletter" value = "yes">
<label for = "check1">Please send me latest news and updates</label>
</div>
</div>
</div>
</div>
<!--Modal body end -->
<!--Modal footer start -->
<div class = "modal-footer">
<span class = "btn-border btn-gray">
<button type = "button" class = "btn btn-default btn-gray" data-dismiss = "modal">Cancel</button>
</span>
<span class = "btn-border btn-yellow">
<button type="submit" class="btn btn-primary btn-yellow">Reserve now</button>
</span>
</div>
<!--Modal footer end -->
</form>
</div>
</div>
</div>
<!--Checkout Modal end -->
You can change this
<button type="submit" class="btn btn-primary btn-yellow">Reserve now</button>
to
<input type="submit" class="btn btn-primary btn-yellow" value="Reserve now">
Change the href from #teaser to something:
<span class="glyphicon glyphicon-calendar"></span> Reserve now
And your reservenow.php should look somathing like this:
<?php
if (isset($_GET['new_reserve'])) {
reservenow();
}
function reservenow() {
....some sql updates here...
}?>
I'm a newby and am using Webmatrix (CHTML) to try and set up a form that allows the user to select an employee using a dropdownbox.
I think I understand how to make a list:
#{
var db = Database.Open("DatabaseName") ;
var selectCommand="SELECT ID,Employee FROM Employees";
var selectedData = db.Query(selectCommand);
var columns = new[]{"ID", "Employee"};
var grid = new WebGrid(source: selectedData, defaultSort: "Employee" , rowsPerPage:10,columnNames: columns);
}
#grid.GetHtml( )
and I think I know how to get a combobox:
<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="01">Employee01
<OPTION VALUE="02">Employee02
<OPTION VALUE="03">Employee03
<OPTION VALUE="04">Employee04
<OPTION VALUE="05">Employee05 - and so on
</SELECT>
</FORM>
I just want to know how to get the table into the combobox. Would be very happy if someone could show how to do this.
This code creates a dropdown list from the content of your table:
#{
var db = Database.Open("DatabaseName");
var selectCommand = "SELECT ID, Employee FROM Employees";
var selectedData = db.Query(selectCommand);
}
<form name="myform" method="post">
<select name="mylist">
#foreach(var row in selectedData)
{
<option value="#row.ID">#row.Employee</option>
}
</select>
</form>