I am working with this UI design, where I created an avatar image and also an upload button. My challenge is positioning the upload button on the image as shown below
expectation
but this is what I came up with
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs. Below is an example.
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
/*wrapper with position: relative */
.image-wrapper {
position: relative;
}
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
bottom: 5px; /* 5px up from the bottom */
right: 35px; /* 35px in from the right */
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-wrapper">
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="https://via.placeholder.com/150" alt="">
</span>
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
<input type="file" id="fileLoader" style="display: none;" />
</span>
Add css properties top: 134px; and left: 134px; to class .edit-img-btn
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
top: 134px;
left: 134px;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
Related
It's supposed to be a pop-up box on the bottom-right section of the page. There a minimize button on the pop-up. Once clicked, the pop-up would be hidden and the maximize button would turn visible.
I need to change the style property, which is visibility in JavaScript. Turning "visible" to "hidden" and vice versa.
let calculateMinimize = document.getElementById("calculate-minimize");
let calculateMaximize = document.getElementById("calculate-maximize");
let calculateContainer = document.getElementById("calculate-container");
calculateMinimize.addEventListener("click", function () {
calculateContainer.style.visibility = "hidden";
});
#calculate-container {
position: fixed;
background-color: #a8baa9;
width: 30%;
height: 30vh;
min-width: 300px;
min-height: 200px;
bottom: 10px;
right: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
visibility: visible;
}
#calculate-minimize {
background-color: #fff5cf;
width: 100%;
border: none;
border-radius: 10px 10px 0px 0px;
height: 30px;
color: #a8baa9;
font-size: 20px;
}
#calculate-maximize {
position: fixed;
bottom: 0px;
right: 10px;
width: 30%;
height: 30px;
min-width: 300px;
border-radius: 10px 10px 0px 0px;
border-bottom: none;
box-shadow: 5px -5px 5px rgb(50, 50, 50, 0.7);
background-color: #beaf87;
border: none;
font-size: 20px;
color: #fff;
visibility: hidden;
}
<body>
<div id="calculate-container">
<button id="calculate-minimize">^</button>
</div>
<button id="calculate-maximize">^</button>
</body>
using toggle a class hide with JS(No need to use visibility).
let calculateMinimize = document.getElementById("calculate-minimize");
let calculateMaximize = document.getElementById("calculate-maximize");
let calculateContainer = document.getElementById("calculate-container");
const buttons = [calculateMinimize, calculateMaximize];
buttons.forEach((btn) =>
btn.addEventListener("click", function() {
calculateContainer.classList.toggle("hide");
calculateMaximize.classList.toggle("hide");
})
);
// or
/*
[calculateMinimize, calculateMaximize].forEach((btn) =>
btn.addEventListener("click", () => {
[calculateContainer, calculateMaximize].forEach((c) =>
c.classList.toggle("hide")
);
})
);
*/
#calculate-container {
position: fixed;
background-color: #a8baa9;
width: 30%;
height: 30vh;
min-width: 300px;
min-height: 200px;
bottom: 10px;
right: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
}
#calculate-minimize {
background-color: #fff5cf;
width: 100%;
border: none;
border-radius: 10px 10px 0px 0px;
height: 30px;
color: #a8baa9;
font-size: 20px;
}
#calculate-maximize {
position: fixed;
bottom: 0px;
right: 10px;
width: 30%;
height: 30px;
min-width: 300px;
border-radius: 10px 10px 0px 0px;
border-bottom: none;
box-shadow: 5px -5px 5px rgb(50, 50, 50, 0.7);
background-color: #beaf87;
border: none;
font-size: 20px;
color: #fff;
}
.hide {
display: none;
}
<body>
<div id="calculate-container">
<button id="calculate-minimize">^</button>
</div>
<button id="calculate-maximize" class="hide">^</button>
</body>
I cannot see the problem with getElementById and addEventListener, but you should handle both elements each time the user interacts with the buttons.
let calculateMinimize = document.getElementById("calculate-minimize");
let calculateMaximize = document.getElementById("calculate-maximize");
let calculateContainer = document.getElementById("calculate-container");
calculateMinimize.addEventListener("click", function() {
calculateContainer.style.visibility = "hidden";
calculateMaximize.style.visibility = "visible";
});
calculateMaximize.addEventListener("click", function() {
calculateContainer.style.visibility = "visible";
calculateMaximize.style.visibility = "hidden";
});
#calculate-container {
position: fixed;
background-color: #a8baa9;
width: 30%;
height: 30vh;
min-width: 300px;
min-height: 200px;
bottom: 10px;
right: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
visibility: visible;
}
#calculate-minimize {
background-color: #fff5cf;
width: 100%;
border: none;
border-radius: 10px 10px 0px 0px;
height: 30px;
color: #a8baa9;
font-size: 20px;
}
#calculate-maximize {
position: fixed;
bottom: 0px;
right: 10px;
width: 30%;
height: 30px;
min-width: 300px;
border-radius: 10px 10px 0px 0px;
border-bottom: none;
box-shadow: 5px -5px 5px rgb(50, 50, 50, 0.7);
background-color: #beaf87;
border: none;
font-size: 20px;
color: #fff;
visibility: hidden;
}
<body>
<div id="calculate-container">
<button id="calculate-minimize">^</button>
</div>
<button id="calculate-maximize">^</button>
</body>
Alternative:
document.addEventListener('DOMContentLoaded', e => {
let calculateContainer = document.getElementById("calculate-container");
let calculateContainercontent = calculateContainer.querySelector('div');
calculateContainer.querySelector('a').addEventListener('click', e => {
e.preventDefault();
calculateContainercontent.classList.toggle('hidden');
});
});
#calculate-container {
position: fixed;
background-color: #a8baa9;
width: 30%;
bottom: 10px;
right: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px rgb(50, 50, 50, 0.7);
display: flex;
flex-direction: column;
}
#calculate-container>a {
display: block;
text-decoration: none;
text-align: center;
padding-top: 5px;
background-color: #fff5cf;
width: 100%;
border-radius: 10px 10px 0px 0px;
color: #a8baa9;
font-size: 20px;
}
#calculate-container>div {
min-height: 100px;
}
div.hidden {
display: none;
}
<body>
<div id="calculate-container">
^
<div>content</div>
</div>
</body>
Very new to coding and this website in particular.
I am trying to create a 'Countdown'-style numbers game which involves trying to reach a target number using 6 random numbers. There are two categories of numbers: small numbers (1-10) and large numbers (25,50,75,100). I have created a button for each category which randomly generates a number within that category.
I am able to randomly generate these numbers and populate the first card slot using .onclick method, but I am unable to populate the next 5 card slots; every time I click it randomly generates a number in the same 1st card slot.
The goal is to populate the next card slot every time I click, not all slots at once.
I am using JS. Please see attached code.
Apologies in advance for errors as this is my first post!
HTML:
//Click on small number button to generate a random small number
document.getElementById("small_number_card").onclick = function(){
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function(){
genLargeNumber();
}
//FUNCTIONS//
//Generate random small number from array
function genSmallNumber(){
var smallArray = Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10);
var smallNumber = smallArray[Math.floor(Math.random()*smallArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = smallNumber;
}
//Generate random large number from array
function genLargeNumber(){
var largeArray = Array(25,50,75,100);
var largeNumber = largeArray[Math.floor(Math.random()*largeArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = largeNumber;
}
```
*{
font-family: monospace, 'Courier New';
}
html{
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder{
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container{
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box{
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box{
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target{
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button{
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active{
top: 5px;
border-bottom: none;
}
#selection_box{
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box{
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6{
margin-right: 0;
}
#whiteboard{
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area{
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box{
float: left;
width: 275px;
height: 120px;
}
#large_number_box{
float: right;
width: 275px;
height: 120px;
}
.number_card{
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active{
bottom: 5px;
border-bottom: none;
}
#small_number_card{
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card{
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>
Thanks in advance! Please avoid JQuery type answers - I'm a noob!
you need to make variable cardSlot as global or put it outside the function
var cardSlot = 1; // ==> make it global
document.getElementById("small_number_card").onclick = function() {
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function() {
genLargeNumber();
}
//FUNCTIONS//
function checkResetCardSlot() {
if (cardSlot > 6) {
cardSlot = 1;
// comment or remove below if you want to keep previous value
document.querySelectorAll('#selection_box .box').forEach(function(box) {
box.textContent = "";
})
}
}
//Generate random small number from array
function genSmallNumber() {
var smallArray = Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10);
var smallNumber = smallArray[Math.floor(Math.random() * smallArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = smallNumber;
cardSlot++; // update the number here
}
//Generate random large number from array
function genLargeNumber() {
var largeArray = Array(25, 50, 75, 100);
var largeNumber = largeArray[Math.floor(Math.random() * largeArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = largeNumber;
cardSlot++; // and here
}
``` * {
font-family: monospace, 'Courier New';
}
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder {
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container {
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box {
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box {
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target {
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active {
top: 5px;
border-bottom: none;
}
#selection_box {
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box {
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6 {
margin-right: 0;
}
#whiteboard {
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area {
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box {
float: left;
width: 275px;
height: 120px;
}
#large_number_box {
float: right;
width: 275px;
height: 120px;
}
.number_card {
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active {
bottom: 5px;
border-bottom: none;
}
#small_number_card {
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card {
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>
I was successful in customizing the file input using jQuery and CSS3.
However, there is one thing I was not able to do. I want to show the text of the file selected after the user selected the image or file at the very bottom of the text like this:
So far here's my codes. Here's the HTML:
<div class="container-avatar">
<div class="avatar-upload">
<div class="avatar-edit">
<input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'> <label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
</div>
</div>
Here's the CSS:
.container-avatar {
max-width: 115px;
margin: 0px auto;
}
.avatar-upload {
position: relative;
max-width: 200px;
margin: 10px auto;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit input {
display: none;
}
.avatar-upload .avatar-edit input+label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input+label:hover {
background: #fff;
border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input+label:after {
content: "\f040";
font-family: 'FontAwesome';
color: #007BFF;
position: absolute;
top: 6px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.avatar-upload .avatar-preview {
width: 100px;
height: 100px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview>div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
And here's my jQuery:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
All of my codes are hosted on JSFIDDLE: https://jsfiddle.net/wtvrzj91/1/
Its pretty easy and actually you already are reading the file data here:
To get the name you need to access to the name property: input.files[0].name and to populate it just create a div, and with javascript insert the string to that div, example:
HTML:
<div class="imageFilename"></div>
Javascript(inside readURL function):
document.querySelector(".imageFilename").innerHTML = input.files[0].name;
From this below snippet to set file name text on bottom side of selected image area.
I have little bit changes into your css code because you can not set display:none (input[type="file"]) due to Safari browser instructions so we can use opacity:0 and I set edit icon middle+center in circle div and set input[type="file"] inside label element so now you can drag and drop image file on edit icon area.
Also tested drag-n-drop its working.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide().fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
$('.imageFilename').html(input.files[0].name).attr('title', input.files[0].name);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
.container-avatar {
max-width: 115px;
margin: 0px auto;
}
.avatar-upload {
position: relative;
max-width: 200px;
margin: 10px auto;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit label{
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input{
position: absolute;
opacity: 0;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.avatar-upload .avatar-edit label:hover {
background: #fff;
border-color: #d6d6d6;
}
.avatar-upload .avatar-edit label:after{
content: "\f040";
font-family: 'FontAwesome';
color: #007BFF;
}
.avatar-upload .avatar-preview {
width: 100px;
height: 100px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview>div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.imageFilename{
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br><br>
<div class="container-avatar">
<div class="avatar-upload">
<div class="avatar-edit">
<label title="Upload Image"><input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
</div>
</div>
<div class="imageFilename"></div>
</div>
I've created a tooltip using CSS but what I can't achieve is keeping the tooltip head into center. So if you notice it says £30.00 in the tooltip. If you write £300.00 or increase words in the tooltip the head of the tooltips doesn't stay in the center.
Can anyone help?
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 31%;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 32%;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text"><i class="fa fa-bolt search-bolt-icon-map"></i>£30.00</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
The problem is that 31% and 32% are specific, and rely on the current width of the element. Instead, center the triangle with left: 50; transform: translateX(-50%);:
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30000000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £3000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30.00
</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
I hate to clutter up Stack Overflow, but I can't seem to update my original question here - Issue with div floating on top of carousel. The JSFiddle was incorrect.
I'm having some trouble with this:
http://jsfiddle.net/myoozik/U6bV8/
If you take a look at above the carousel, there is a giant gap. This comes as a result of adding the black overlay div on top of the carousel.
Any idea on how to get rid of that gap aka how is it being generated?
HTML
<div class="carousel-wrapper">
<div id="overlay-div">
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="/_shared/img/img1.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img2.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img3.jpg" width="850" height="500" alt="">
</li>
</ul>
</div> ‹›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#overlay-div {
background-color: #000;
width: 200px;
height: 200px;
position: relative;
left: 100px;
top: 300px;
z-index: 999;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
overflow: hidden;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
/*border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;*/
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
The black color box is appearing due to #overlay-div Div that is present which has some height, width and background color. if you set display:none to it the space and black box will disappear.
below is the CSS
#overlay-div {
background-color: #000000;
display: none;
height: 200px;
left: 100px;
position: relative;
top: 300px;
width: 200px;
z-index: 999;
}
Fiddle here here.
Is this what you are looking at?