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
Related
<div class="row mg-b-25">
<div class="col-lg-4">
<div class="form-group">
<input class="form-control" type="text" name="category_name" id="category_name" placeholder="Enter Category *" maxlength="50" required>
</div>
</div>
</div>
I want to when i focus on input filed than placeholder change to floating label
You can use CSS :focus Selector and CSS ::placeholder Selector
Refer:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::placeholder {
color: red;
opacity: 1;
}
input:focus::placeholder {
color: blue;
float:right;
opacity: 1;
}
</style>
</head>
<body>
<input type="text" placeholder="A placeholder text..">
</body>
</html>
Try this one example for floating label:
https://stackblitz.com/edit/css-image-filter-efmtr9?file=index.html,styles.css
Here is a example by using Materialize
This example works Here but I do not know why it does not work on code snippet.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="Input-Field">
<Input id="Email_input" type="Email" class="Validate" />
<Label for="Email_input">Email</Label>
</div>
</body>
<html>
I am using jQuery for button click event and trying to show alert in ejs file but alert message is not showing below is my code:
register.ejs
<!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.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top:50px;
}
.form{
margin-top:50px;
margin-left:30%;
margin-right:30%;
}
input{
margin-top:10px;
}
button{
margin-top:20px;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
<input name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
<button class="btn btn-primary">SUBMIT</button>
</form>
</div>
<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.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.btn').click(function(){
alert('Hello');
});
</script>
</body>
</html>
Someone let me know what's wrong in above code.
You have not implemented the JQuery library into your code. Here is the code to implement:
<!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.0" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top: 50px;
}
.form {
margin-top: 50px;
margin-left: 30%;
margin-right: 30%;
}
input {
margin-top: 10px;
}
button {
margin-top: 20px;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input
name="nam"
class="form-control"
type="text"
placeholder="Name"
aria-label="default input example"
/>
<input
name="mail"
class="form-control"
type="text"
placeholder="Email"
aria-label="default input example"
/>
<button class="btn btn-primary">SUBMIT</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"
></script>
<script type="text/javascript">
$(".btn").click(function () {
alert("Hello");
});
</script>
</body>
</html>
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>
I don't know what's wrong. This code is correct but when I run it in my local machine I recognize that the input field is missing!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
You need to set protocol because by default browser will set file://
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
IMPORTANT - it is a bad practise to specify the protocol, use this only on local machine
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
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 . . .