I want to show different divs based on the option I select on a Bootstrap dropdown menu. However, even if it seems easy, I can't find a proper example of this. How should I change the JS, if I have to change it?
This is my code so far:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Homepage</title>
</head>
<body>
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div>
<p id="1">Text1</p>
</div>
<div>
<p id="2">Text2</p>
</div>
<div>
<p id="3">Text3</p>
</div>
<div>
<p id="4">Text4</p>
</div>
</div>
</div>
</form>
</body>
</html>
Would this fix your problem ??
$('#inlineFormCustomSelect').change(function() {
$('.child-item').removeClass('show'); // hide all visible
$('#' + $( this ).val()).addClass('show'); // Show what is necessary
});
.child-item {
display: none
}
.show {
display: block
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://public.flourish.studio/resources/embed.js"></script>
<title>Homepage</title>
</head>
<body>
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<hr>
<div>
<div id="1" class="child-item ">
<div class="flourish-embed flourish-chart"
data-src="visualisation/2406500"
data-url="https://flo.uri.sh/visualisation/2406500/embed">
</div>
</div>
<div>
<p id="2" class="child-item">Text2</p>
</div>
<div>
<p id="3" class="child-item">Text3</p>
</div>
<div>
<p id="4" class="child-item">Text4</p>
</div>
</div>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
Related
I am new in the development of this map web application, and I want to implement a form with a map which can get the longitude and latitude through the search bar and put it in the database. I am using the Leaflet-Search plugin. I tried following the instructions, but I still can't understand how to implement it properly.
For reference, here is the form picture and code:
Picture: Form picture
Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HelpThePoor</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href={{url('css/main.css')}}>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
Kembali
<br>
<div class="container">
<form action="/createdonor" method = "post">
#csrf
<div class="form-row">
<div class="col">
<label>Nama:</label> <!--for getting the name-->
<input type="text" class="form-control" name="name" placeholder="Nama">
</div>
<div class="col"> <!--for getting the details of help-->
<label>Bantuan apa yang anda tawarkan?:</label>
<input type="text" class="form-control" name="help_offered" placeholder="Ceritakan secara lanjut bantuan anda">
</div>
<div class="col">
<label>Nombor Telefon:</label> <!--for getting the phone number-->
<input type="text" class="form-control" name="tel_number" placeholder="No. telefon anda">
</div>
<div class="col">
<div id="formmap"> <!--the supposedly searcheable map-->
</div>
</div>
<div class="col">
<label>Jenis bantuan:</label> <!--help type-->
<input type="text" class="form-control" name="help_type" placeholder="Sila pilih jenis bantuan anda">
</div>
<div class="col">
<label>Maklumat tambahan:</label> <!--additional details-->
<input type="text" class="form-control" name="add_info" placeholder="Maklumat tambahan">
</div>
</div>
<br>
<button type="submit" class="btn btn-success">Daftar Bantuan Saya!</button>
</form>
</div>
<script> <!--the JS for the searcheable map-->
const formmap = L.map('formmap').setView([1.465036, 830.428012], 13);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(formmap);
const search = new GeoSearch.GeoSearchControl({
//provider: new GeoSearch.OpenStreetMapProvider(),
});
formmap.addControl(search);
function searchEventHandler(result) {
console.log(result.location);
}
formmap.on('geosearch/showlocation', searchEventHandler);
</script>
</body>
</html>
And here's the database: Database picture
I am new in this type of web application, and I quite slow on getting the basics of JS currently.
I want to create input="range" slider vertically.
I have created horizontally slider but when I create it vertically it's not showing lables with their name?
basically, I want to display this horizontal slider when on Laptop and vertically slider align in center when it's comes in phone ! I use media query for this but when it turn into vertically it's not showing labes?
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<style>
datalist {
display: flex;
justify-content: space-between;
color: red;
width: 100%;
}
input {
width: 100%;
}
</style>
<body>
<div class="container mt-4">
<br><br><br>
<input type="range" min="1" max="5" list="tickmarks" >
<datalist id="tickmarks">
<option value="1" label="3-9 Months"></option>
<option value="2" label="9-15 Months"></option>
<option value="3" label="15-24 Months"></option>
<option value="4" label=" >24 Months"></option>
</datalist>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Somebody help me out with this?
Thank you
I have tried many angular directive in this code but none of them is
working. Is there any library file is missing or something wrong in
this code or is there any effect due to jQuery file.
The complete code is define below:
<!DOCTYPE html>
<html ng-app="myapp" ng-controller="ticketcontroller">
<head>
<title>Ticket</title>
<link href="css/style.css" rel="stylesheet"
type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css"
type="text/css" media="screen" property=""
/>
<link rel="stylesheet" href="css/flexslider.css"
type="text/css" media="screen" property=""
/>
<script src="js/jquery-2.2.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet">
</head>
<body>
<div class="main">
<h1>Ticket Details Forum</h1>
<div class="w3_agile_main_grids">
<section class="slider">
<div class="flexslider">
<div class="agileits_w3layouts_main_grid">
<h3>Service Details</h3>
<form>
<span>
<label>Category</label>
<select required="" ng-
model="service">
<option value="">Laptop
Repair</option>
<option value="">Refrigerator
repair</option>
<option value="">Microwave
repair</option>
</select>
</span>
<span>
<label>Priority</label>
<select required="" ng-
model="priority">
<option value="">Low</option>
<option
value="">Normal</option>
<option value="">High</option>
</select>
</span>
<span>
<label>Description</label>
<input name="description"
type="text" placeholder="Enter Description here" ng-model="description">
</span>
<div class="w3_agileits_submit">
<button class="btn btn-success" ng- click="submitdata()">submit</button>
</div>
</form>
</div>
</section>
</div>
</div>
<!-- flexSlider -->
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider')
.flexslider({
animation: "slide",
start: function(
slider
) {
$
(
'body'
)
.removeClass(
'loading'
);
}
});
});
</script>
</body>
</html>
<script>
var ap = angular.module("myapp", []);
ap.controller("ticketcontroller", [
'$scope', '$http',
'$window',
function($scope, $http,
$window) {
$scope.submitdata =
function() {
$window.alert(
"dhbhhfgh);
}
}]);
</script>
Corrected just with the angular directive, add flexslider later.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Ticket</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!--<script src="controllers.js"></script>-->
<!--this (under) should be into controllers.js-->
<script>
var apk = angular.module('myapp', []);
apk.controller("ticketcontroller",function($scope,$http,$window){
var service;
var priority;
var description;
$scope.submitdata=function(){
var vm = this;
service = vm.service;
priority = vm.priority;
description = vm.description;
alert("this is my desc: /"+service+"/ with priority: /"+priority+"/ and description: /"+description+"/");
}
});
</script>
<!-- I REMOVED ALL FLEXSLIDER FROM THIS CODE PUT IT BACK -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</script>
</head>
<body ng-controller="ticketcontroller" >
<div class="main">
<h1>Ticket Details Forum</h1>
<div class="w3_agile_main_grids">
<section class="slider">
<div class="flexslider">
<div class="agileits_w3layouts_main_grid">
<h3>Service Details</h3>
<form action="#">
<span>
<label>Category</label>
<select required="" ng-model="service">
<option>Laptop Repair</option>
<option>Refrigerator repair</option>
<option>Microwave repair</option>
</select>
</span>
<span>
<label>Priority</label>
<select required="" ng-model="priority">
<option>Low</option>
<option>Normal</option>
<option>High</option>
<!-- BE AWARE, I REMOVED VALUE FROM OPTION IN CONTROLLER -->
</select>
</span>
<span>
<label>Description</label>
<input name="description" type="text" placeholder="Enter Description here" ng-model="description"> </input>
</span>
<div class="w3_agileits_submit">
<button class="btn btn-success" ng-click="submitdata()">submit</button>
</div>
</form>
</div>
</section>
</div>
</div>
</body>
</html>
works like a charm. Copy paste and try, remember you had different script-links, update mine to your needs.
Try to name your controller in a CamelCase style.
I'm using eonasdan datetimepicker. I chose default date via using options. I opened the page using chrome, firefox 47.0, and microsoft edje 25.1.
Firefox Case: The date appears in the textfield. But, if I go to
the address bar and hit 'enter', the date shown in the textfield
disappears.
Chrome and edje Case: When the page opens, the date is not shown
in the textfield.
I created a fiddle for this question fiddle, what happens in the fiddle is the same as what happens in the google chrome and internet explorer case.
I tried using the 'viewDate: true' option for datetimepicker which fixed the problem. But it created another problem -- the calendar is not shown when I click the calendar icon.
I have no idea why this is happening. Any help is greatly appreciated.
The same code in the fiddle is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
Example
</title>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" value="2016-09-03" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03'
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
You don't need value attribute for datetimepicker input in your HTML. If you remove it, your code will work as showed in the following example:
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03';
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
If you want to use data attributes you can use data-date-* to set an option or data-date-options setting an option object. In your case you can use data-date-default-date instead of value.
You can find more about data-* initialization here and here.
CDN :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>
HTML :
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
JavaScript :
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
Use This Code..
This will useful for you..
I am new to BootStrap 3 and am having problems with my divs overlapping. I'm probably missing something simple, but can't seem to find the problem. Here is the html.
You can also find a working copy of what I am trying to do in Bootstrap at wibberding.info/SolarTime.
Thanks for any help you can give.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Solar Time</title>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<div class="jumbotron">
<div class="container clearfix">
<h1 id="clock">Solar Time</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>This web app allows you to find Solar Time in two ways:</p>
<p> 1. Find Solar Time by reading the location data from your device. You will have to have this turned on. </p>
<p> 2. By entering a longitude. You can find the longitude of your zipcode here.</p>
</div>
<div class="col-md-4">
<form id="form">
<input id="device" type="radio" name="locationData" value="device" checked onchange="solarTime.checkLocationMethod()">
<label for="device">Use my device location.</label><br>
<input id="latLong" type="radio" name="locationData" value="latLong" onchange="solarTime.checkLocationMethod()">
<label for="latLong">Enter Longitude</label>
<input type="text" size="10" maxlength="30" id="longitude" onFocus="solarTime.changeToLong()"></input> (Enter postive longitude for East and negative for West. All of the United States is negative.) <br>
<input type="button" onclick="solarTime.checkLocationMethod()" value="Find Solar Time" />
</form>
</div>
</div>
</div>
</body>
</html>
So it looks like I missed a closing DIV tag. It now works :-) Thank you everyone for your help . . .