I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<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">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<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">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
Related
When my web page loads it plays this bottom border animation, then afterwords it will display a static bottom border. The issue is, you can see from this snippet that the animated border is shorter than the static border.. How can I center this so both borders are identical at the end result? I would ideally like both borders to look like the second, longer one shown in the snippet.
I have played around with the width but can't seem to figure out what parameter needs a change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
you can add a position:relative to the container, and set its after pseudo-element’s pasition to absolute and left to 0, so that it’ll start right from the beginning of its container.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.container{
position:relative;
}
.border-bottom-animate:after {
content: "";
position:absolute;
left:0;
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
The :after pseudo-element is only as wide as the content inside the padding. You need to add the size of the padding to your :after's width. Then adjust the margin to account for the greater width. Bootstrap uses calc(var(--bs-gutter-x) * .5) to define the padding-left and padding-right of a .container.
See my comments in the snippet CSS below. I minimalized the snippet but, there are only 2 lines with a change plus 2 comment lines from your code.
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
/* add the bootstrap gutter width */
width: calc(var(--bs-gutter-x) + 100%);
animation-duration: 3s;
animation-name: border-animation;
/* give a negative x margin half the gutter width */
margin: 0 calc(var(--bs-gutter-x) * -.5);
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: calc(var(--bs-gutter-x) + 100%);
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I am trying to display the dropdown menu using position absolute, but the div becomes non-clickable.
I have tried using overflow auto, white-space: nowrap, z-index: 999, pointer-events none of these worked
I want this dropdown to come as a normal logout menu overlapping on all columns and text.current state of my dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>pagedemo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>
.dropdown{
border-radius: 4px;
background-color: white;
width: 8.25rem;
left: 3rem;
min-height: 4rem;
color: gray;
bottom: 0rem;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.11);
overflow-x: scroll;
background-color: yellowgreen;
padding:10px;
margin-top: 10rem;
}
.dropdownOption{
width: 8.25rem;
}
.dropdownOption:hover{
cursor: pointer;
background-color: honeydew;
}
.leftNav{
background-color: white;
height: 100vh;
}
</style>
<body style="background-color: bisque;">
<div class="container">
<div class="row">
<div class="col-1, leftNav" >
<div class="dropdown">
<div class="dropdownOption">
logout
</div>
<div class="dropdownOption">
account settings
</div>
</div>
</div>
<div class="col-10" style="background-color: tomato;">
data
</div>
</div>
</div>
</body>
</html>
You should add a z-index on your .leftNav component to ensure it's in front of your main col.
Fiddle : https://jsfiddle.net/azkq2480/
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I made a responsive website with bootstrap 3. It's a portfolio website with an image gallery. The website does work responsive but when I view it as from a mobile or other device it doesn't scale perfectly. When I reload the page it looks right at first but when it is finished loading it changes. Does anyone have an idea where I went wrong?
body {
padding: 0;
border: 0;
vertical-align: baseline
}
.main {
margin-top: 170px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
.navbar {
min-height: 130px;
margin-bottom: 20px;
}
.navbar-toggle {
margin-top: 25px;
}
#media (min-width: 768px) {
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
.box {
padding: 5px;
margin: 0;
}
.img {
display: block;
position: relative;
margin: 0px;
z-index: 1;
}
.imgoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img:hover .imgoverlay {
opacity: 0.75;
}
.text {
position: absolute;
bottom: 0;
padding-bottom: 6px;
margin: auto auto auto 10px;
}
/*///////////POP UP////////*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 150px auto;
position: relative;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section class="main">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box">
<a href="#" class="img">
<img src="" alt="" class="img-responsive">
<div class="imgoverlay">
<div class="text"></div>
</div>
</a>
</div>
<!--///////////// POP UP /////////////////////-->
<div id="popup1" class="overlay">
<div class="col-md-12 popup">
<div class="col-md-6 col-md-offset-1 iframe">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-4 content">
<h2></h2>
<p class="info"></p>
</div>
<a class="col-md-1 close" href="#">×</a>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
use media queries
#media (min-width: 576px) { ... }
inside the braces define styles
media queries are used to define the rule that is used to define different style for different media types/devices.
if the width of the device's screen is minimum 567px then it will be rendered to defined style.
i am not able to fix my footer at the bottom of the page.when the data is large in,the footer is showing on the data which i need to put on bottom of the page.below is my code please tell me what i am doing wrong.
<!doctype html>
<html class = "no-js" ng-app = "PreSales-Huddle" lang = "en">
<head>
<meta charset = "utf-8">
<title ng-bind = "title"> </title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width = device-width">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel = "stylesheet" href = "styles/main.css">
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head profile = "http://www.w3.org/2005/10/profile">
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class = "container" >
<header class = "header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class = "main" id = "main">
<div ng-view = ""></div>
</main>
<footer class = "footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
Write position: fixed, bottom: 0 for class footer inside css.
.footer {
position: fixed;
bottom: 0;
}
<!doctype html>
<html class="no-js" ng-app="PreSales-Huddle" lang="en">
<head>
<meta charset="utf-8">
<title ng-bind="title"> </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class="main" id ="main">
<div ng-view=""></div>
</main>
<footer class="footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
I cleaned up your HTML and added this to your CSS:
position: fixed;
bottom: 0;
width: 100%;
footer {
position: absolute;
bottom: 0;
}