I am trying to create and audio scrubber bar using a handle I can drag back and forth to a different part of the music.
The item that has to be draggable is the .handle, and .played will follow it.
I made the structure as below: JSFiddle
.scrubber {
width: 300px;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.8);
}
.scrubber>.bar {
background: transparent;
height: 10px;
}
.scrubber>.buffer {
position: absolute;
height: 10px;
background: rgba(255, 0, 0, 0.2);
top: 0;
}
.scrubber>.played {
position: absolute;
width:100px;
height: 10px;
background: red;
top: 0;
}
.scrubber>.played>.handle {
float: right;
width: 10px;
height: 10px;
margin-top: 0px;
margin-right: -5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
}
<div class="scrubber">
<div class="bar"></div>
<div class="buffer"></div>
<div class="played">
<div class="handle"></div>
</div>
</div>
Any idea how to make it work?
you need to use
<input type="range" />
and stylize it as you need
codepen link: https://codepen.io/anon/pen/MLZpzg
Related
I want to make a lock screen, when I click on a button, an input require password show up. I set a password, when type a valid password and press enter, the lockscreen disappear. Thank you guys!
Here is my demo : https://jsbin.com/rugoqupora/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>Lockscreen</button>
<div class="lock-screen">
<input type="text" placeholder="Password">
</div>
</body>
</html>
.lock-screen {
display: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .7);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
btn = document.querySelector('button');
lockscreen = document.querySelector('.lock-screen');
btn.addEventListener('click', function(){
lockscreen.style.display = 'flex';
})
You can easily create the form input etc. But you'll have to host your server to store all the credentials, and send the credentials (hashed) to the sever.
When you want to check if it's valid, just hash the password you typed in, and send it to the server, then if the server says it matches the one stored, then let them through.
I've created an example login dialog here.
function showLogin() {
// .show() doesn't work with transitions
$("#u, #p").val("");
$("#login").show().css("opacity", "1");
$("#loginBackground").show().css("opacity", "0.5");
}
function hideLogin() {
// .hide() doesn't work with transitions,
// but you need it for user interaction
// with objects behind it.
$("#login, #loginBackground").css("opacity", "0").hide();
}
function login() {
var username = $("#u").val();
var password = $("#p").val();
// Do something here!
}
input {
border-radius: 5px;
background: white;
border: solid 1px black;
height: 20px;
margin-top: 3px;
margin-bottom: 2px;
width: 200px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.big-button {
height: 50px;
padding: 0px;
}
.login {
padding-left: 5px;
padding-right: 5px;
width: 188px;
}
input[type="button"],
input[type="submit"],
button {
cursor: pointer;
}
#login {
transition: 0.2s;
border-radius: 5px;
position: fixed;
background: white;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
top: 8px;
left: 50%;
width: 300px;
margin-left: -150px;
height: 150px;
z-index: 10000;
}
#loginBackground {
transition: 0.2s;
background-color: black;
opacity: 0.5;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
margin: 0px;
z-index: 9999;
}
.small-button {
width: 40px;
height: 40px;
}
.no-border {
border: none;
}
.close {
color: red;
left: 30px;
bottom: 20px;
}
.accept {
color: lime;
right: 30px;
top: 25px;
}
.login-button {
position: relative;
font-size: 26px;
border-radius: 100%;
outline: none;
transition: 0.4s;
}
.login-button:hover,
.login-button:focus,
.login-button:active {
background: rgb(127, 127, 255);
color: white;
}
.shadow {
box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5), 0px 0px 4px rgba(0, 0, 0, 0.5);
}
* {
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
body {
text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.center {
text-align: center;
}
.login-title {
position: relative;
bottom: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
<h1>Foo Bar</h1>
<input class="shadow no-border big-button" type="button" value="Login" onclick="showLogin();">
</div>
<div id="loginBackground" style="opacity: 0; display: none;"></div>
<div id="login" style="opacity: 0; display: none;" class="shadow" action="https://example.com">
<h3 class="login-title">Login to Foo Bar</h3>
<input placeholder="Username or Email" id="u" class="login shadow no-border" type="textbox"><br/>
<input placeholder="Password" id="p" class="login shadow no-border" type="password"><br/>
<input class="shadow no-border small-button accept login-button" type="button" onclick="hideLogin(); login(); " value="✓"><br/>
<input class="shadow no-border small-button close login-button" type="button" onclick="hideLogin(); " value="✗">
</div>
There is currently no possible way to make a lock screen using pure JavaScript! You can make an artificial one that stores the credentials within itself, but hackers could easily just look in the code and get the username/password, therefor making it unsafe.
The only way to truly achieve this is using a server-side language (Like PHP, Node.js) alongside a web language (Like JavaScript). Although, to do this you would need to set up a server (or multiple) that store the credentials, and then send the user's input to the server and have the server check to make sure they are correct. That way the client never stores the password, making it impossible for others to find. (As long as you protect your server well enough and code it right.)
I stack two circles over an image, using the position and overflow properties.
It works fine but I have the circle running over the image on left and right (not top and left.
Here is the image : Circle overflowing
Here is the CSS.
.mainContainer {
background-color: #A6A4AA
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
}
.ajustement {
opacity: 0.5;
}
The code source (ejs+bootstrap) : the row is a child of mainContainer
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
How can I draw my circles into the images only, without running out the border ?
Here is what I would like :
Do you looking something like this:
body{
margin: 0;
background-color: #A6A4AA
}
.mainContainer {
background-color: #A6A4AA;
margin: 15px auto;
width: 98%;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border-radius: 0 0 8px 8px;
background: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
border: 3px solid #2C3756;
line-height: 0;
border-radius: 12px;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: 3px solid #2C3756;
left: -45%;
top: -78px;
height: calc(100% + 78px);
}
.impact{
width: 20px;
height: 20px;
border-color: #000;
left: 10%;
top: 10%;
}
.ajustement {
opacity: 0.5;
}
<div class="mainContainer">
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/800px-Papageitaucher_Fratercula_arctica.jpg">
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
</div>
I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>
I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy
I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.