I have a piece of code that when user hover the slider bar, a box will appear. Everything works as expected but when the user move the mouse to the beginning or to the end of the slider, the box overflow the content.
I'm looking for a way that keep the box inside the blue area
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
background-color: red;
height: auto;
}
.range {
width: 90%;
margin: 0 auto;
}
.range:hover + .thumbnail {
display: block;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
<div class="container">
<div id="core" class="core">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
[ If you want jsfiddle => https://jsfiddle.net/ram9wc65/ ]
Here is a image that show +- the expected output =>
image (I cannot embed images yet)
How can I fix this? How can I keep the box inside of blue area? I spent many hours working on it but no success.
Thank you.
In your onMouseMove function, you need to get the width of the thumbnail and divide that by 2, to get the minimum left position and calculate the maximum right position (width - minimum).
Then make sure you set the left property of the thumbnail no smaller than the minimum and no larger than the calculated maximum.
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 2 years ago.
I want to make DIV always in center, no matter when scroll to any place, div always in center of screen. I copy the source code from google search, but it seems like it is only on the top of the screen, however, when I scroll down the center and click the button again, it is on top, not in the screen anymore
function buttonTrigger() {
document.getElementById("centerDIV").style.display = "block";
}
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div {
width: 200px;
height: 200px;
background-color: #1E90FF;
}
body {
height: 2000px;
}
.center-in-center {
border: 1px red solid;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
display: none;
transform: translate(-50%, -50%);
z-index: 100;
}
<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>
Try position: fixed
function buttonTrigger() {
document.getElementById("centerDIV").style.display = "block";
}
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div {
width: 200px;
height: 200px;
background-color: #1E90FF;
}
body {
height: 2000px;
}
.center-in-center {
border: 1px red solid;
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
display: none;
transform: translate(-50%, -50%);
z-index: 100;
}
<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>
I am trying to add a circular reveal animation to show the search toolbar in my webapp using CSS & JavaScript. I am trying to achieve the same animation as Whatsapp on Android.
I managed to make a circle grow animation. If you check the demo, you'll notice that I specified the circle's final width and height and made the transform: scale(0.0033) to scale(1) in order for the circle to not be blurry.
Unfortunately, I am facing some problems:
Cannot make the circle grow from the search icon.
The back icon and the search input are not showing when the circle expands. I am trying to do this by having a div covering the content and moving to the left at the same time as the circle showing the content.
On mobile, the search doesn't grow from the same point as on PC.
The circle does not cover the whole toolbar.
I tried a lot of methods and searched all over the internet with no luck. I think that here, professional developers and coders will certainly find better solutions to my problem. This is the
DEMO
website for you to check out.
it's not so difficult to simulate the whats app search.
Take a look this:
https://jsfiddle.net/pablodarde/9ndp7z3L/
It's possible with a little more code, to reach a better result.
HTML
<div class="navbar">
<div class="container">
<h1>Whats App</h1>
<button id='search'>
<i class="fa fa-search" aria-hidden="true"></i>
</button>
<div class="input-mask">
<input type="text" placeholder="Search">
</div>
</div>
</div>
CSS
html, body {
width: 100%;
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
height: 60px;
box-sizing: border-box;
background: #009688;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 0;
}
h1 {
position: absolute;
width: 300px;
height: 60px;
margin: 0;
top: 15px;
left: 15px;
font: normal 24px Arial, Verdana;
color: #fff;
}
button {
position: absolute;
top: 10px;
right: 15px;
border: 0;
background: 0;
color: #fff;
font-size: 28px;
cursor: pointer;
outline: 0;
}
.input-mask {
position: absolute;
top: 30px;
right: -30px;
display: flex;
align-items: center;
width: 0;
height: 0;
border-radius: 50%;
background: #fff;
overflow: hidden;
transition: all ease .6s;
}
input {
position: absolute;
right: 0;
height: 60px;
border: 0;
font-size: 20px;
padding: 0 0 0 10px;
box-sizing: border-box;
}
JavaScript
const search = document.querySelector('#search');
const input = document.querySelector('.container input');
const inputMask = document.querySelector('.input-mask');
const screenW = document.documentElement.clientWidth;
input.style.width = screenW +'px';
search.addEventListener('click', (e) => {
inputMask.setAttribute('style', 'width: '+ Number(screenW+30) +'px; height: '+ screenW +'px; top: -'+ screenW/2 +'px; padding-top: 30px; right: -3px;');
input.focus();
});
input.addEventListener('blur', (e) => {
inputMask.setAttribute('style', 'width: 0; height: 0; top: 30px;');
input.value = '';
});
Found the solution. Using it at https://mdcwp.ml. I just used clip-path.
The scroll-bar handles aren't visible in my page. I've tried setting overflow-x to auto and scroll for both the #cust1 and #cust2 div's.
I also need five div's to have their horizontal scrolling controlled from just one scroll-bar at the bottom of the page. (Div's #one, #two, #three, #four and #custTimeline)I don't want scroll-bars for each customer div.
Please help. https://jsfiddle.net/c71ytuxz/1/
var c = document.getElementById("custTimeline");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.save();
ctx.rotate(-90*Math.PI/180);
var baseLoc = 130;
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"];
for(i = 0; i < hours.length; i++) {
if (i == 0) {
ctx.fillText(hours[i], -120, baseLoc);
}
else {
baseLoc += 90;
ctx.fillText(hours[i], -120, baseLoc);
}
}
ctx.restore();
#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background: lightgrey;
}
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#one {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#two {
margin-left: 25%;
width: 35px;
height: 150px;
background: green;
}
#cust2 {
position: fixed;
top: 320px;
left: 0px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
}
#three {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#four {
margin-left: 15%;
width: 35px;
height: 150px;
background: green;
}
<canvas id="custTimeline"
width = "1900"
height = "130"
style = "border:3px solid #aaaaaa;">
</canvas>
<div id="cust1">
<div id="one"><p>
Customer 1
</p></div>
<div id="two"></div>
</div>
<div id="cust2">
<div id="three"><p>
Customer 2
</p></div>
<div id="four"></div>
</div>
Since the #cust1 has a width of 1500px, the scroll will only appear when its content gets wider than that, and at the moment it is only 8% (#one) + 25% + 35px (#two) in total.
If you want it to scroll, change this
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 100vw; /* changed property */
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#two {
margin-left: 25%;
width: 1000px; /* changed property */
height: 150px;
background: green;
}
Updated fiddle
Updated based on a comment
To have one scroll update another, here is one way, using jQuery.
$(document).ready(function(){
$( window ).scroll(function(){
var position = $( this ).scrollLeft();
$("#first").scrollLeft(position);
$("#second").scrollLeft(position);
});
});
I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.
HTML:
<div class="con">
<img src="warming1.jpg" class="imageOne">
<div class="coverImage"></div>
<div class="handle"></div>
<script type="text/javascript">
$(".handle").draggable({
axis: "x",
containment: "parent",
drag: function () {
var position = $(this).position();
var positionExtra = position.left + 6;
$(".coverImage").width(positionExtra + "px");
}
});
</script>
</div>
CSS:
.con {
top:2140px;
left:10px;
width: 280px;
height: 230px;
border: 2px solid;
position: absolute;
z-index:1
}
.con img {
height: 100%;
position: absolute;
}
.coverImage {
position: absolute;
background: url("warming2.jpg");
background-size: auto 100%;
width: 100%;
height: 100%;
}
.handle {
width: 0px;
height: 100%;
border-left: 12px solid #fff;
position: absolute;
left: 50%;
}
.handle:after {
content: "DRAG";
display: block;
width: 60px;
height: 60px;
border: 2px solid #eee;
border-radius: 50%;
color: #999;
line-height: 60px;
font-weight: 300;
text-align: center;
background: #fff;
position: absolute;
left: -36px; top: 0; bottom: 0;
margin: auto;
}
Positioning Picture 1 within the Element containing the border:
Obtain width of element with the border
Obtain width of 2nd picture
Set pic1.width = borderElement.width - pic2.width
Position pic1 at borderElement.right - pic1.width
I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }