I want to edit the default audio tag. Or at-least
.sqs-audio-player-content{
background-color: #b3b3b3 !important;
background-image: linear-gradient(#eaeaea, #eaeaea) !important;
background: -webkit-linear-gradient(#b3b3b3, #eaeaea) !important;
border: 0px solid #b3b3b3 !important;
border-radius: 0px 0px 0px 0px;
color: #6B6B6B;
}
.audio-author {
color: red !important;
}
.audio-title {
color: #ffffff !important;
}
.volume .bar.active {
border-right-color: #36b3a8 !important;
}
.volume .bar {
border-right-color: pink !important;
}
.progress {
background: none repeat scroll 0 0 #707070 !important;
}
.controls {
color: #707070 !important;
}
remove the pause and mute mute. Have tried adding this to css, but doesn't work
A customized audio player with controls . If you are looking for something like this, this might help you solve your problem.
function $(id) { return document.getElementById(id); };
const media = document.getElementById('audio');
let ui = {
play: 'playAudio',
audio: 'audio',
percentage: 'percentage',
seekObj: 'seekObj',
currentTime: 'currentTime'
};
function togglePlay() {
if (media.paused === false) {
media.pause();
$(ui.play).classList.remove('pause');
} else {
media.play();
$(ui.play).classList.add('pause');
}
}
function calculatePercentPlayed() {
let percentage = (media.currentTime / media.duration).toFixed(2) * 100;
$(ui.percentage).style.width = `${percentage}%`;
}
function calculateCurrentValue(currentTime) {
const currentMinute = parseInt(currentTime / 60) % 60;
const currentSecondsLong = currentTime % 60;
const currentSeconds = currentSecondsLong.toFixed();
const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
}`;
return currentTimeFormatted;
}
function initProgressBar() {
const currentTime = calculateCurrentValue(media.currentTime);
$(ui.currentTime).innerHTML = currentTime;
$(ui.seekObj).addEventListener('click', seek);
media.onended = () => {
$(ui.play).classList.remove('pause');
$(ui.percentage).style.width = 0;
$(ui.currentTime).innerHTML = '00:00';
};
function seek(e) {
const percent = e.offsetX / this.offsetWidth;
media.currentTime = percent * media.duration;
}
calculatePercentPlayed();
}
$(ui.play).addEventListener('click', togglePlay)
$(ui.audio).addEventListener('timeupdate', initProgressBar);
* {
box-sizing: border-box;
}
body {
background-size: 6px 6px !important;
background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 46%, coral 49%, coral 51%, rgba(0, 0, 0, 0) 55%);
background-color: white;
padding-top: 60px;
}
.audio-player {
width: 470px;
padding: 35px 20px;
margin: auto;
background-color: white;
border: 1px solid black;
}
.audio-player .player-controls {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.audio-player #radioIcon {
width: 30px;
height: 30px;
background: url("https://image.flaticon.com/icons/svg/149/149429.svg") no-repeat center;
}
.audio-player #playAudio {
-webkit-appearance: none;
outline: none;
cursor: pointer;
border: none;
width: 30px;
height: 30px;
background: url("https://image.flaticon.com/icons/svg/149/149125.svg") no-repeat center;
background-size: contain;
}
.audio-player #playAudio.pause {
background-size: contain;
}
.audio-player p {
margin: 0 0 0 5px;
line-height: 1;
display: inline-flex;
}
.audio-player p small {
font-size: 10px;
}
.audio-player #seekObjContainer {
position: relative;
width: 300px;
margin: 0 5px;
height: 5px;
}
.audio-player #seekObjContainer #seekObj {
position: relative;
width: 100%;
height: 100%;
background-color: #e3e3e3;
border: 1px solid black;
}
.audio-player #seekObjContainer #seekObj #percentage {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: coral;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="audio-player">
<audio id="audio">
<source src="https://thenewcode.com/assets/audio/24-ghosts-III.mp3" type="audio/mp3">
</audio>
<div class="player-controls">
<div id="radioIcon"></div>
<button id="playAudio"></button>
<div id="seekObjContainer">
<div id="seekObj">
<div id="percentage"></div>
</div>
</div>
<p><small id="currentTime">00:00</small></p>
</div>
</div>
</body>
</html>
The source code taken from : Thanks /AliKlein
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I have an animated circle (class="circle-ani") that grows and shrinks. However, it also causes the button (class="start-timer") to grow and shrink and the box (class="button-timer") that they're in to grow taller to accommodate the size change. How can I make it so just the circle changes size and not the rest?
Working example:
//---TIMER---//
var remainingTime = 30;
var isStopped = true;
const countContainer = document.getElementById('sec');
const renderTime = () => {
remainingTime -= 1;
countContainer.innerHTML = remainingTime;
if (remainingTime === 0) {
isStopped = true;
clearInterval(timer);
remainingTime = 30;
}
}
const startTimer = () => {
if (isStopped) {
isStopped = false;
countContainer.innerHTML = remainingTime;
timer = setInterval(renderTime, 1000);
}
}
document.getElementById('start').addEventListener('click', function() {
document.getElementById('circle').classList.add('animate');
});
const startButton = document.getElementById('start');
startButton.onclick = startTimer;
// const stopTimer = () => {
// isStopped = true;
// if (timer) {
// clearInterval(timer);
// }
// }
// const resetTimer = () => {
// isStopped = true;
// clearInterval(timer);
// clearInterval(animate);
// remainingTime = 30;
// countContainer.innerHTML = remainingTime;
// }
//---CARD OBJECTS---//
// const neck = ['Chin tuck', 'Neck extension', 'Neck towel', 'Side-to-side']
// let neckStretch1 = 'Chin tuck'
// let neckStretch2 = 'Neck extension'
// let neckStretch3 = 'Neck towel'
// let neckStretch4 = 'Side-to-side'
// const shoulder = ['Desk pec stretch', 'Doorway pec stretch', 'Overhead reach', 'W to Y', 'Cross body']
// let shoulderStretch1 = 'Desk pec stretch'
// let shoulderStretch2 = 'Doorway pec stretch'
// let shoulderStretch3 = 'Overhead reach'
// let shoulderStretch4 = 'W to Y'
// let shoulderStretch5 = 'Cross body'
// const hand = ['One-by-one', 'Wrist extensor', 'Wrist flexor']
// let handStretch1 = 'One-by-one'
// let handStretch2 = 'Wrist extensor'
// let handStretch3 = 'Wrist flexor'
// const lowBack = ['Low back rotation', 'Bending over', 'Seated knee to chest', 'Seated pelvic tilt']
// let lowBack1 = 'Low back rotation'
// let lowBack2 = 'Bending over'
// let lowBack3 = 'Seated knee to chest'
// let lowBack4 = 'Seated pelvic tilt'
// const hip = ['Kneeling psoas stretch', 'Standing psoas stretch', 'Seated glute stretch', 'Seated cross-body glute']
// let hipStretch1 = 'Kneeling psoas stretch'
// let hipStretch2 = 'Standing psoas stretch'
// let hipStretch3 = 'Seated glute stretch'
// let hipStretch4 = 'Seated cross-body glute'
// const leg = ['Seated hamstring stretch', 'Butterfly stretch', 'Standing quad stretch', 'Chair quad stretch', 'Seated abductor stretch']
// let legStretch1 = 'Seated hamgsting stretch'
// let legStretch2 = 'Butterfly stretch'
// let legStretch3 = 'Standing quad stretch'
// let legStretch4 = 'Chair quad stretch'
// let legStretch5 = 'Seated abductor stretch'
//---CARD DECK---//
mobiscroll.settings = {
theme: 'ios',
themeVariant: 'light'
};
mobiscroll.listview('.cardDeck', {
stages: [{
percent: -20,
action: function(event, inst) {
inst.move(event.target, 0);
return false;
}
}, {
percent: 20,
action: function(event, inst) {
inst.move(event.target, 0);
return false;
}
}],
actionable: false
});
// function dropdownFunction() {
// document.getElementById("myDropdown").classList.toggle('show')
// }
// function dropdownFunction() {
// var x = document.getElementById('dropdownClick')
// if (x.style.display === 'none') {
// x.style.display = 'block'
// }else {
// x.style.display = 'none'
// }
// }
// document.getElementById("menu").addEventListener("click", dropdownFunction());
// function dropdownFunction() {
// // var x = document.getElementById("dropdownClick").style
// const toggle = document.getElementById("myDropdown")
// const toggleList = document.getElementsByTagName("li");
// console.log(toggle.style.display)
// if (toggle.style.display !== null) {
// console.log("one")
// toggle.style.display = 'inline-block'
// toggleList.style.display = 'inline-block'
// }else {
// // x.display = 'none'
// console.log("two")
// }
// }
// ---BODY ICON ---//
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.body-image')) {
var dropdowns = document.getElementsByClassName("dropdown-list");
showEvent = 'show';
for (var i = 0; i < dropdowns.length; i++) {
var currentElement = dropdowns[i],
currentElementAsString = dropdowns[i].toString();
if (currentElementAsString.localeCompare(showEvent)) {
currentElement.classList.remove('show');
}
}
}
}
body {
font-family: 'Gentium Book Plus', serif;
font-family: 'Noto Serif', serif;
}
/* Stylings */
html {
font-size: 62.5%;
}
.body-image {
display: none;
}
h3,
button,
a {
font-size: 1rem;
}
h2 {
/* display: flex;
flex-direction: column;
justify-content: center; */
font-size: 400%;
margin-top: -25%;
z-index: 5;
}
body {
color: rgb(247, 240, 240);
background: #8ad3b8;
/* margin: 100px 250px; */
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-content: center;
}
.main {
text-align: center;
/* align-content: center; */
margin: 4% auto;
width: 57%;
height: 65%;
background: rgba(12, 134, 85, 1);
border-radius: 20px;
border: 10px solid rgba(12, 134, 85, .4);
box-shadow: 0 0 50px rgba(12, 134, 85, 1);
min-height: 450px;
}
h1 {
margin: 0;
padding: 20px 0 0 0;
font-size: 500%;
}
h3,
section,
.start-timer {
margin: 0;
padding: 10px;
display: inline-block;
border-radius: 20px;
}
h6 {
margin: 0;
padding: 0 0 20px 0;
font-size: 10px;
}
header,
section {
margin: 0px;
}
section+section {
padding: 10px;
}
button {
background: #fe483b;
/* border-radius: 10px; */
border: 2px solid #fe483b;
}
.start-timer-section {
/* margin: 140px 0 0 0; */
outline: none;
display: flex;
flex-direction: column;
margin-top: 15%;
position: relative;
}
/* List */
.dropdown-list,
li,
a {
display: inline-block;
margin: 10px 15px 10px 10px;
color: black;
text-decoration: none;
background: #8ad3b8;
border-radius: 5px;
outline: none;
}
.dropdown-list,
li {
border-radius: 40px;
}
a {
/* display: block; height: 100%; width:100%; */
text-decoration: none;
border-radius: 5px;
color: black;
font-size: 12px;
}
.dropdown-list a:hover {
background: #fe483b;
}
/* .legs{
margin: 10px 30px 0 15px;
padding: 0 20px 0 0;
} */
/* ---THE CARD--- */
.cardDeck {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: none;
box-shadow: 0 0 20px rgba(250, 241, 241, 0.6);
margin: 0 0 15px 0;
}
.card-directions {
border: 2px solid purple;
display: flex;
flex-direction: column;
min-height: 150px;
min-width: 35%;
}
.card-picture {
border: 2px solid yellow;
visibility: none;
min-width: 35%;
}
.button-timer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
border: 2px solid pink;
/* min-height: 150px; */
min-width: 15%;
flex-wrap: wrap;
}
h3 {
font-size: 15px;
}
/* ---TIMER ANIMATION--- */
body {
padding: 20px;
}
/* div.circle-ani {
transition: 4s ease;
position: relative;
width: 0px;
height: 0px;
text-align: center;
background: hsl(4, 99%, 61%, .7);
color: white;
border-radius: 100%;
padding: 40px;
overflow: hidden;
margin-bottom: -35%;
}
.animate {
transform: scale(1.9);
-webkit-transform: scale(1.9);
-ms-transform: scale(1.9);
} */
.circle-ani {
position: relative;
width: 0px;
height: 0px;
text-align: center;
background: hsl(4, 99%, 61%, .7);
color: white;
border-radius: 100%;
padding: 40px;
overflow: hidden;
margin-bottom: -35%;
}
div.animate {
/* animation properties */
animation-name: my-animation;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: 10;
animation-timing-function: ease-in-out;
/* other properties */
/* position: relative;
width: 0px;
height: 0px;
text-align: center;
background: hsl(4, 99%, 61%, .7);
color: white;
border-radius: 100%;
padding: 40px;
overflow: hidden;
margin-bottom: -35%; */
}
#keyframes my-animation {
from {
background-color: hsl(4, 99%, 61%, .7);
padding: 40px;
}
to {
padding: 80px;
}
}
/* ---Accessibility--- */
#media screen and (max-width: 1111px) {
body {
/* background: red; */
}
main {
width: 100%;
}
h1 {
padding: none;
margin: -7% 0 0 0;
}
h6 {
display: none;
}
.body-image {
padding: -10px;
}
.cardDeck {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
padding: none;
margin: 0 0 15px 0;
}
.card-directions {
min-height: auto;
display: flex;
flex-direction: row;
width: 100%;
}
.card-picture {
display: flex;
flex-direction: row;
width: 43%;
visibility: none;
/* min-height: 150px;
min-width: 150px; */
}
.button-timer {
display: flex;
flex-direction: row;
width: 43%;
min-height: 50px;
min-width: 150px;
}
.start-timer {
margin: auto;
outline: none;
}
/* .dropdown-list, li, a{
display: none;
} */
/* // --- DROPDOWN MENU--- // */
.body-image {
display: flex;
max-height: 30%;
max-width: 30%;
margin: 0;
padding: 0;
z-index: 5;
background: rgba(12, 134, 85, 1);
}
a {
cursor: pointer;
}
.dropdown {
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
.dropdown li {
letter-spacing: .5px;
display: flex;
justify-content: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-list {
display: none;
position: absolute;
min-width: 150px;
box-shadow: 0px 10px 16px 10px rgba(0, 0, 0, 0.5);
z-index: 1;
margin: 0;
margin-top: -35%;
padding: 0;
}
/* Links inside the dropdown */
.dropdown-list li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
margin: 0;
}
/* Change color of dropdown links on hover */
.dropdown-list a:hover {
background-color: #fe483b
}
.show {
display: block;
}
}
#media screen and (max-width: 911px) {
body {
/* background: purple; */
}
.card-picture,
.button-timer {
width: 40%;
}
}
#media screen and (max-width: 679px) {
body {
/* background: orange; */
}
.card-picture,
.button-timer {
width: 39%;
}
h1 {
font-size: 300%;
padding: 0;
}
}
#media screen and (max-width: 649px) {
body {
/* background: yellow; */
}
.card-picture,
.button-timer {
width: 36%;
}
body {
margin: 0;
}
}
#media screen and (max-width: 619px) {
body {
/* background: pink; */
}
html {
height: 60%;
margin: 0;
}
.card-picture,
.button-timer {
width: 20%;
height: 200px;
flex-direction: column;
}
.main {
width: 100%;
height: 150%;
min-height: none;
margin-left: 5px;
}
.dropdown-list {
margin: -40% 0 20% 0;
}
}
#media screen and (max-width: 430px) {
.main {
height: 155%;
}
.dropdown-list {
margin-top: -100%;
margin-bottom: 50%;
width: 40%;
}
}
<!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">
<title>Fetch a Stretch</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link href="https://fonts.googleapis.com/css2?family=Gentium+Book+Plus&family=Noto+Serif&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<main class="main">
<header>
<!-- <img id = "menu" onclick = "dropdownFunction()" class="body-image" src="body.ico" alt ="body" > -->
<a onclick="myFunction()" title="Body Parts" class="body-image body-ico"><img id="menu" class="body-image" src="body.ico"> </a>
<h1>Fetch a Stretch</h1>
</header>
<section>
<h6>Welcome to moving better!</h6>
<section class="cardDeck">
<section class="card-directions">
<h3>Stretch: Lorem ipsum dolor sit.</h3>
<h3>Explanation: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, autem? Iusto itaque quae perspiciatis illo nostrum aspernatur voluptatum, libero sit provident accusantium explicabo est harum omnis quod? Amet, maiores inventore.</h3>
</section>
<section class="card-picture">
<h3>Picture:</h3>
</section>
<section class="button-timer">
<div id="circle" class="circle-ani"></div>
<h2 id="sec">30</h2>
<div class="start-timer-section">
<button onclick="start()" id='start' class="start-timer">Start Timer</button>
</div>
</section>
</section>
<span id="dropdownClick" class="dropdown">
<ul id = "myDropdown" class="dropdown-list">
<li class="neck">Neck</li>
<li class="shoulders">Shoulders</li>
<li class="hands">Hands</li>
<li class="back">Low Back</li>
<li class="hips">Hips</li>
<li class="legs">Legs</li>
</ul>
</span>
</section>
</main>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Provided that doesn't work as intended, here is the codepen for it (I hope that's okay, I'm still new to most of this) https://codepen.io/lgmunyon/pen/dymNbjQ
You have to accommodate for the circle's size - the parent div has to grow to contain the child div (the circle) the way you have them currently positioned. If you position the parent div - the card the circle is in - to be position: relative and the circle to be position: absolute you can then define exactly where the circle will sit within the card, and it will not stretch the card out.
In regards to the timer button, it has the flex property and is matching the width changes of the circle. You can remove the flex property to fix that alone, but if you use the positional changes that problem resolves itself.
section.button-timer {
position: relative;
}
div.circle-ani {
position: absolute;
top: 50px; /* An example of where to position the circle */
The animation itself is problematic. You are specifying:
#keyframes my-animation {
from {
background-color: hsl(4, 99%, 61%, .7);
padding: 40px;
}
to {
padding: 80px;
}
}
When the padding jumps the style you have set of padding: 40px; to padding: 80px; it will change the padding of the element, hence, adding more height. Remove this padding to solve your issue.
Side note: Using margin: -%; is not an efficient way to position elements. It will be very unresponsive if you do this. I added display: flex; to .circle-ani to fix the positioning of h2#sec.
//---TIMER---//
var remainingTime = 30;
var isStopped = true;
const countContainer = document.getElementById('sec');
const renderTime = () => {
remainingTime -= 1;
countContainer.innerHTML = remainingTime;
if (remainingTime === 0) {
isStopped = true;
clearInterval(timer);
remainingTime = 30;
}
}
const startTimer = () => {
if (isStopped) {
isStopped = false;
countContainer.innerHTML = remainingTime;
timer = setInterval(renderTime, 1000);
}
}
document.getElementById('start').addEventListener('click', function() {
document.getElementById('circle').classList.add('animate');
});
const startButton = document.getElementById('start');
startButton.onclick = startTimer;
// const stopTimer = () => {
// isStopped = true;
// if (timer) {
// clearInterval(timer);
// }
// }
// const resetTimer = () => {
// isStopped = true;
// clearInterval(timer);
// clearInterval(animate);
// remainingTime = 30;
// countContainer.innerHTML = remainingTime;
// }
//---CARD DECK---//
mobiscroll.settings = {
theme: 'ios',
themeVariant: 'light'
};
mobiscroll.listview('.cardDeck', {
stages: [{
percent: -20,
action: function(event, inst) {
inst.move(event.target, 0);
return false;
}
}, {
percent: 20,
action: function(event, inst) {
inst.move(event.target, 0);
return false;
}
}],
actionable: false
});
// ---BODY ICON ---//
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.body-image')) {
var dropdowns = document.getElementsByClassName("dropdown-list");
showEvent = 'show';
for (var i = 0; i < dropdowns.length; i++) {
var currentElement = dropdowns[i],
currentElementAsString = dropdowns[i].toString();
if (currentElementAsString.localeCompare(showEvent)) {
currentElement.classList.remove('show');
}
}
}
}
body {
font-family: 'Gentium Book Plus', serif;
font-family: 'Noto Serif', serif;
}
/* Stylings */
html {
font-size: 62.5%;
}
.body-image {
display: none;
}
h3,
button,
a {
font-size: 1rem;
}
h2 {
/* display: flex;
flex-direction: column;
justify-content: center; */
font-size: 400%;
line-height: 1;
margin: 0;
z-index: 5;
}
body {
color: rgb(247, 240, 240);
background: #8ad3b8;
/* margin: 100px 250px; */
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-content: center;
}
.main {
text-align: center;
/* align-content: center; */
margin: 4% auto;
width: 57%;
height: 65%;
background: rgba(12, 134, 85, 1);
border-radius: 20px;
border: 10px solid rgba(12, 134, 85, .4);
box-shadow: 0 0 50px rgba(12, 134, 85, 1);
min-height: 450px;
}
h1 {
margin: 0;
padding: 20px 0 0 0;
font-size: 500%;
}
h3,
section,
.start-timer {
margin: 0;
padding: 10px;
display: inline-block;
border-radius: 20px;
}
h6 {
margin: 0;
padding: 0 0 20px 0;
font-size: 10px;
}
header,
section {
margin: 0px;
}
section+section {
padding: 10px;
}
button {
background: #fe483b;
/* border-radius: 10px; */
border: 2px solid #fe483b;
}
.start-timer-section {
/* margin: 140px 0 0 0; */
outline: none;
display: flex;
flex-direction: column;
margin-top: 15%;
position: relative;
}
/* List */
.dropdown-list,
li,
a {
display: inline-block;
margin: 10px 15px 10px 10px;
color: black;
text-decoration: none;
background: #8ad3b8;
border-radius: 5px;
outline: none;
}
.dropdown-list,
li {
border-radius: 40px;
}
a {
/* display: block; height: 100%; width:100%; */
text-decoration: none;
border-radius: 5px;
color: black;
font-size: 12px;
}
.dropdown-list a:hover {
background: #fe483b;
}
/* .legs{
margin: 10px 30px 0 15px;
padding: 0 20px 0 0;
} */
/* ---THE CARD--- */
.cardDeck {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: none;
box-shadow: 0 0 20px rgba(250, 241, 241, 0.6);
margin: 0 0 15px 0;
}
.card-directions {
border: 2px solid purple;
display: flex;
flex-direction: column;
min-height: 150px;
min-width: 35%;
}
.card-picture {
border: 2px solid yellow;
visibility: none;
min-width: 35%;
}
.button-timer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
border: 2px solid pink;
/* min-height: 150px; */
min-width: 15%;
flex-wrap: wrap;
}
h3 {
font-size: 15px;
}
/* ---TIMER ANIMATION--- */
body {
padding: 20px;
}
/* div.circle-ani {
transition: 4s ease;
position: relative;
width: 0px;
height: 0px;
text-align: center;
background: hsl(4, 99%, 61%, .7);
color: white;
border-radius: 100%;
padding: 40px;
overflow: hidden;
margin-bottom: -35%;
}
.animate {
transform: scale(1.9);
-webkit-transform: scale(1.9);
-ms-transform: scale(1.9);
} */
.circle-ani {
position: relative;
width: 0px;
height: 0px;
text-align: center;
background: hsl(4, 99%, 61%, .7);
color: white;
border-radius: 100%;
padding: 40px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
div.animate {
/* animation properties */
animation-name: my-animation;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: 10;
animation-timing-function: ease-in-out;
/* other properties */
/* position: relative;
width: 0px;
height: 0px;
text-align: center;
background: hsl(4, 99%, 61%, .7);
color: white;
border-radius: 100%;
padding: 40px;
overflow: hidden;
margin-bottom: -35%; */
}
#keyframes my-animation {
from {
background-color: hsl(4, 99%, 61%, .7);
}
to {
padding;
0;
}
}
/* ---Accessibility--- */
#media screen and (max-width: 1111px) {
body {
/* background: red; */
}
main {
width: 100%;
}
h1 {
padding: none;
margin: -7% 0 0 0;
}
h6 {
display: none;
}
.body-image {
padding: -10px;
}
.cardDeck {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
padding: none;
margin: 0 0 15px 0;
}
.card-directions {
min-height: auto;
display: flex;
flex-direction: row;
width: 100%;
}
.card-picture {
display: flex;
flex-direction: row;
width: 43%;
visibility: none;
/* min-height: 150px;
min-width: 150px; */
}
.button-timer {
display: flex;
flex-direction: row;
width: 43%;
min-height: 50px;
min-width: 150px;
}
.start-timer {
margin: auto;
outline: none;
}
/* .dropdown-list, li, a{
display: none;
} */
/* // --- DROPDOWN MENU--- // */
.body-image {
display: flex;
max-height: 30%;
max-width: 30%;
margin: 0;
padding: 0;
z-index: 5;
background: rgba(12, 134, 85, 1);
}
a {
cursor: pointer;
}
.dropdown {
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
.dropdown li {
letter-spacing: .5px;
display: flex;
justify-content: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-list {
display: none;
position: absolute;
min-width: 150px;
box-shadow: 0px 10px 16px 10px rgba(0, 0, 0, 0.5);
z-index: 1;
margin: 0;
margin-top: -35%;
padding: 0;
}
/* Links inside the dropdown */
.dropdown-list li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
margin: 0;
}
/* Change color of dropdown links on hover */
.dropdown-list a:hover {
background-color: #fe483b
}
.show {
display: block;
}
}
#media screen and (max-width: 911px) {
body {
/* background: purple; */
}
.card-picture,
.button-timer {
width: 40%;
}
}
#media screen and (max-width: 679px) {
body {
/* background: orange; */
}
.card-picture,
.button-timer {
width: 39%;
}
h1 {
font-size: 300%;
padding: 0;
}
}
#media screen and (max-width: 649px) {
body {
/* background: yellow; */
}
.card-picture,
.button-timer {
width: 36%;
}
body {
margin: 0;
}
}
#media screen and (max-width: 619px) {
body {
/* background: pink; */
}
html {
height: 60%;
margin: 0;
}
.card-picture,
.button-timer {
width: 20%;
height: 200px;
flex-direction: column;
}
.main {
width: 100%;
height: 150%;
min-height: none;
margin-left: 5px;
}
.dropdown-list {
margin: -40% 0 20% 0;
}
}
#media screen and (max-width: 430px) {
.main {
height: 155%;
}
.dropdown-list {
margin-top: -100%;
margin-bottom: 50%;
width: 40%;
}
}
<!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">
<title>Fetch a Stretch</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link href="https://fonts.googleapis.com/css2?family=Gentium+Book+Plus&family=Noto+Serif&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<main class="main">
<header>
<!-- <img id = "menu" onclick = "dropdownFunction()" class="body-image" src="body.ico" alt ="body" > -->
<a onclick="myFunction()" title="Body Parts" class="body-image body-ico"><img id="menu" class="body-image" src="body.ico"> </a>
<h1>Fetch a Stretch</h1>
</header>
<section>
<h6>Welcome to moving better!</h6>
<section class="cardDeck">
<section class="card-directions">
<h3>Stretch: Lorem ipsum dolor sit.</h3>
<h3>Explanation: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, autem? Iusto itaque quae perspiciatis illo nostrum aspernatur voluptatum, libero sit provident accusantium explicabo est harum omnis quod? Amet, maiores inventore.</h3>
</section>
<section class="card-picture">
<h3>Picture:</h3>
</section>
<section class="button-timer">
<div id="circle" class="circle-ani">
<h2 id="sec">30</h2>
</div>
<div class="start-timer-section">
<button onclick="start()" id='start' class="start-timer">Start Timer</button>
</div>
</section>
</section>
<span id="dropdownClick" class="dropdown">
<ul id = "myDropdown" class="dropdown-list">
<li class="neck">Neck</li>
<li class="shoulders">Shoulders</li>
<li class="hands">Hands</li>
<li class="back">Low Back</li>
<li class="hips">Hips</li>
<li class="legs">Legs</li>
</ul>
</span>
</section>
</main>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
range slider design
Hello,
I need help creating this range slider. I need the value to be displayed on or inside the slider, not on a tooltip or bubble over it. And the left side with a different color than the right side.
I have found a way to make the value on the slider but can't apply any style on it!
Any help is very appreciated.
Thank you!
$("document").ready(function() {
$(".slider").rangeslider();
});
$.fn.rangeslider = function(options) {
this.each(function(i, elem) {
var obj = $(elem); // input element
var defautValue = obj.attr("value");
var slider_max = (obj.attr("max"));
var slider_min = (obj.attr("min"));
var slider_step = (obj.attr("step"));
var slider_stop = (slider_max - slider_min) / slider_step;
var step_percentage = 100 / slider_stop;
console.log(step_percentage);
var color = "";
var classlist = obj.attr("class").split(/\s+/);
$.each(classlist, function(index, item) {
if (item.startsWith('slider-')) {
color = item;
}
});
if (color == "") {
color = "slider-blue";
}
if (slider_stop <= 30) {
var i;
var dots = "";
for (i = 1; i < slider_stop; i++) {
dots += "<div class='dot' id='" + i + "' style='left:" + step_percentage * i + "%;'></div>";
}
} else {
var dots = "";
}
obj.wrap("<span class='slider " + color + "'></span>");
obj.after("<span class='slider-container " + color + "'><span class='bar'><span></span>" + dots + "</span><span class='bar-btn'><span>0</span></span></span>");
obj.attr("oninput", "updateSlider(this)");
updateSlider(this);
return obj;
});
};
function updateSlider(passObj) {
var obj = $(passObj);
var value = obj.val();
var min = obj.attr("min");
var max = obj.attr("max");
var range = Math.round(max - min);
var percentage = Math.round((value - min) * 100 / range);
var nextObj = obj.next();
var btn = nextObj.find("span.bar-btn");
if (value == min) {
nextObj.find("span.bar-btn").css("left", percentage + "%");
} else if (value == max) {
nextObj.find("span.bar-btn").css("left", "calc(" + percentage + "% - " + btn.width() + "px");
} else {
nextObj.find("span.bar-btn").css("left", "calc(" + percentage + "% - " + btn.width() / 2 + "px");
}
nextObj.find("span.bar > span").css("width", percentage + "%");
nextObj.find("span.bar-btn > span").text(value);
};
body {
font-family: Calibri;
background-image: linear-gradient(90deg, #691337, #613374, #133742);
}
.heading {
text-align: center;
color: #fff;
}
.wrap {
margin: 25px;
background: #133742;
border-radius: 7.5px;
padding: 5px 0px 20px 53px;
}
/* SLIDER-STYLES */
.slider-orange>.bar>span {
transition: 0.3s;
background: #ff821e!important;
}
.slider-orange>.bar-btn {
background: #ff821e!important;
border: 2px solid #ffbf8c !important;
transition: 0.3s;
}
.slider-orange:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #ff821e;
color: #ff821e;
background: #fff !important;
border: 2px solid #ff821e !important;
}
.slider-red>.bar>span {
transition: 0.3s;
background: #eb0041!important;
}
.slider-red>.bar-btn {
background: #eb0041!important;
border: 2px solid #f9b2c6 !important;
transition: 0.3s;
}
.slider-red:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #eb0041;
color: #eb0041;
background: #fff !important;
border: 2px solid #eb0041 !important;
}
.slider-green>.bar>span {
transition: 0.3s;
background: #00965a!important;
}
.slider-green>.bar-btn {
background: #00965a!important;
border: 2px solid #b2dfcd !important;
transition: 0.3s;
}
.slider-green:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #00965a;
color: #00965a;
background: #fff !important;
border: 2px solid #00965a !important;
}
.slider-yellow>.bar>span {
transition: 0.3s;
background: #ffd200!important;
}
.slider-yellow>.bar-btn {
background: #ffd200!important;
border: 2px solid #fff1b2 !important;
transition: 0.3s;
}
.slider-yellow:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #ffd200;
color: #1d1d1b;
background: #fff !important;
border: 2px solid #ffd200 !important;
}
.slider-cyan>.bar>span {
transition: 0.3s;
background: #00b4e6!important;
}
.slider-cyan>.bar-btn {
background: #00b4e6!important;
border: 2px solid #b2e8f7 !important;
transition: 0.3s;
}
.slider-cyan:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #00b4e6;
color: #00b4e6;
background: #fff !important;
border: 2px solid #00b4e6 !important;
}
.slider-blue>.bar>span {
transition: 0.3s;
background: #0014a0!important;
}
.slider-blue>.bar-btn {
background: #0014a0!important;
border: 2px solid #0014a0 !important;
transition: 0.3s;
}
.slider-blue:hover>input+.slider-container>.bar-btn {
box-shadow: inset 0 0 2px #0014a0;
color: #0014a0;
background: #fff !important;
border: 2px solid #0014a0 !important;
}
.dot {
width: 7px !important;
height: 7px;
background: #fff;
display: block;
position: absolute;
border-radius: 125%;
top: 2px;
}
.slider {
display: inline-block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.slider>input {
opacity: 0;
width: 100%;
height: 40px;
position: relative;
z-index: 5;
-webkit-appearance: none;
}
.slider>input::-webkit-slider-thumb {
-webkit-appearance: none;
z-index: 100;
position: relative;
width: 50px;
height: 30px;
-webkit-border-radius: 10px;
}
.slider>span.slider-container {
min-height: 40px;
display: inline-block;
position: absolute;
top: 0;
left: -8px;
right: 46px;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider>span.slider-container>span.bar {
background-color: #dadada;
display: inline-block;
position: absolute;
z-index: 1;
left: 0;
right: 0;
height: 11px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
top: 50%;
transform: translateY(-50%);
}
.slider>span.slider-container>span.bar>span {
background: #00965b;
display: inline-block;
float: left;
height: 11px;
width: 0%;
}
.slider>span.slider-container>span.bar-btn {
display: inline-block;
position: absolute;
min-width: 55px;
max-width: 100px;
height: 32px;
font-weight: bold;
text-align: center;
background: #00965b;
left: 0;
top: 50%;
border-radius: 100px;
border: 2px solid #dadada;
z-index: 5;
color: #fff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform: translateY(-50%);
}
.slider>span.slider-container>span.bar-btn>span {
position: relative;
position: absolute;
tlef: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="wrap">
<h1 class="heading">Simple Rangeslider</h1>
<input class="slider" value="0" min="3" max="5" step="1" name="001" type="range" />
<input class="slider slider-orange" value="0" min="0" max="25" step="1" name="002" type="range" />
<input class="slider slider-red" value="3556" min="0" max="3556" step="34" name="003" type="range" />
<input class="slider slider-green" value="0" min="0" max="34" step="4" name="004" type="range" />
<input class="slider slider-yellow" value="0" min="0" max="5" step="1" name="005" type="range" />
<input class="slider slider-cyan" value="5" min="0" max="100" step="2" name="006" type="range" />
<input class="slider slider-blue" value="0" min="0" max="5" step="1" name="007" type="range" />
</div>
HI go through this if need any kind of customization in range slider.
Source Codepen
I must be misunderstaning something in CSS as my dropdown box using a library (dat-gui) is doing this:
I have tried switching to position: absolute for the divs beneath the dat-gui container, which breaks the divs beneath it.
Funnily enough, when I use the SO embedded snippet, it actually works. So check out an actual deploy of the site at: https://stack-test.netlify.com/
function UI (parentDiv) {
// parentDiv.querySelector('#dataset_div').style.display = 'none'
// parentDiv.querySelector('#channel_div').style.display = 'none'
// parentDiv.querySelector('#OpenCORLinkButton').style.display = 'none'
// parentDiv.querySelector('#instructions_div').style.display = 'none'
var _this = this
_this.dataType = 'scatter'
const gui = new dat.GUI({autoPlace: false})
gui.domElement.id = 'gui'
gui.close()
document.getElementsByClassName('dat-gui-container')[0].appendChild(gui.domElement)
var folder = gui.addFolder('Channels')
var settings = {}
var checkboxes = []
var checkboxElements = []
this.createDatGuiDropdown = function (channels, onchangeFunc) {
_this.channels = [...channels]
if (channels[0].toLowerCase().includes('time')){
channels.shift()
}
checkboxes = []
for (let i in _this.channels) {
let name = _this.channels[i]
let checkbox = {}
checkbox[name] = false
checkboxes.push(checkbox)
var el = folder.add(checkboxes[i], name)
checkboxElements.push(el)
el.__checkbox.onclick = onchangeFunc
}
folder.open()
}
}
var ui = new UI('unused')
ui.createDatGuiDropdown(['one', 'two'], function(){console.log('clicked')})
/*//////////////////////////////////////////////////////////////////
[ dat-gui ]*/
.dat-gui-container{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 95%;
z-index: 5;
}
/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
width: 100%;
margin: 0 auto;
}
.container-login100 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 10px;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;;
}
.wrap-login100 {
width: 390px;;
background: #fff;
border-radius: 10px;
position: relative;
}
.wrap-data100 {
width: 90%;
background: #fff;
border-radius: 10px;
position: relative;
}
/*==================================================================
[ Form ]*/
.login100-form {
width: 100%;
}
.login100-form-title {
font-family: Ubuntu-Bold;
font-size: 30px;
color: #403866;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
width: 100%;
display: block;
}
/*==================================================================
[ Restyle Select2 ]*/
.select2-container {
display: block;
max-width: 100% !important;
width: auto !important;
}
.select2-container .select2-selection--single {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
background-color: rgba(171, 171, 189, 0.233);
border: none;
height: 40px;
outline: none;
position: relative;
left: -40px;
}
/*------------------------------------------------------------------
[ in select ]*/
.select2-container .select2-selection--single .select2-selection__rendered {
font-family: Ubuntu-Bold;
font-size: 18px;
color: #555555;
line-height: 1.2;
padding-left: 0px ;
background-color: transparent;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
top: 50%;
transform: translateY(-50%);
right: 0px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: flex-end;
}
.select2-selection__arrow b {
display: none;
font-family: Material-Design-Iconic-Font !important;
font-size: 18px;
color: #555555;
}
.select2-selection__arrow {
content: '\f312';
font-family: Material-Design-Iconic-Font !important;
font-size: 18px;
color: #555555;
}
/*------------------------------------------------------------------
[ Dropdown option ]*/
.select2-container--open .select2-dropdown {
z-index: 1251;
width: calc(100% + 2px);
border: 0px solid transparent;
border-radius: 10px;
overflow: hidden;
background-color: rgba(171, 171, 189, 1);
left: -40px;
box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
}
#media (max-width: 576px) {
.select2-container--open .select2-dropdown {
left: -12px;
}
}
.select2-dropdown--above {top: -38px;}
.select2-dropdown--below {top: 10px;}
.select2-container .select2-results__option[aria-selected] {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 24px;
}
#media (max-width: 576px) {
.select2-container .select2-results__option[aria-selected] {
padding-left: 12px;
}
}
.select2-container .select2-results__option[aria-selected="true"] {
background: #403866;
color: white;
}
.select2-container .select2-results__option--highlighted[aria-selected] {
background: #827ffe;
color: white;
}
.select2-results__options {
font-family: Ubuntu-Bold;
font-size: 14px;
color: #555555;
line-height: 1.2;
}
.select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: none;
font-family: Ubuntu-Bold;
font-size: 15px;
color: #333333;
line-height: 1.2;
}
.wrap-input100 .dropDownSelect2 .select2-container--open {
width: 100% !important;
}
.wrap-input100 .dropDownSelect2 .select2-dropdown {
width: calc(100% + 2px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackfynn Exporter</title>
<meta charset="UTF-8">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='blackfynn-panel' style="position: relative;">
<div class="dat-gui-container"></div>
<div class="container-login100 datasetUI" id="dataset_div">
<div class="wrap-data100 p-t-5 p-b-5 datasetUI">
<form class="contact100-form validate-form">
<span class="login100-form-title">
Data Viewer
</span>
<div class=" input100 wrap-input100 input100-select bg1 datasetUI">
<span class="label-input100"></span>
<div id="channel_div">
<select class="js-select2" name="service" id="select_channel">
<option>Channel Selection</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
</form>
<br>
<div id="exportURL">
</div>
</div>
</div>
<div class="datasetUI" id="chart_div"></div>
</div>
</body>
</html>
If you have a look at the snippet you see that .dat-gui-container has position: absolute set. In your case you have to set position absolute to the element that gets animated, thus preventing the rest of the elements from moving around.
I have a feed-reader that displays text on hover. Before hovering, some text shadow is present, making the word shadow visible.
http://codepen.io/Teeke/pen/JWqpoP
a{
color: inherit;
text-decoration: none;
}
I've tried changing line 109 in the CSS from
'color: inherit'
to transparent, or rgba(0,0,0,0), but that will make all the text disappear.
How can I fix this CSS conflict?
So, basically what you need to do is originally set the text shadow's color to transparent. Then, when it is hovered over, you can change the text shadow's color to whatever you want. Here's an example of what this effect looks like on text that's already visible:
h1 {
color: red;
text-shadow: 1px 1px 3px transparent;
}
h1:hover {
text-shadow: 1px 1px 3px #333;
}
<h1>Hello world</h1>
Hope that helps!
It looks like making this change to the SCSS code:
&:hover{
.bar, .overlay{
transform: translateY(0);
color: inherit;
text-shadow: 2px 2px 2px #222;
}
and removing the text-shadow from the .item selector also works.
You don't want to change your font to transparent to fade an element like that. Besides just being a bad practice and pain in the butt to work with, it isn't performant. Just fade the entire .bar and .overlay from opacity: 0 to opacity: 1 on hover
var Settings = {
subreddit : 'PositiveTechnology',
after: 'o',
limit: 25
}
let d = new Date; document.getElementById("date").innerHTML = d.toUTCString();;
let $grid = $('#positive-technology')
.attr('data-loading-text','')
.packery({ itemSelector: '.item' })
.on('click','.overlay', function(){
$(this).parent().toggleClass('active').parent().packery('layout');
});
function RedditJSON(){
this.loadLink = function(){
Settings.isLoading = true;
return 'https://www.reddit.com/r/' + Settings.subreddit + '/.json?after=' + Settings.after + '&limit=' + Settings.limit;
}
this.next = function(feed){
if (Settings.theLast) return;
if (feed.data.after == null) Settings.theLast = true;
let posts = feed.data.children;
for(let i = 0; i < posts.length; i++){
if(true){ // posts[i].data.post_hint == 'image' || posts[i].data.url.search('imgur')
if(!posts[i].data.hasOwnProperty('preview')) continue;
let image = posts[i].data.preview.images[0];
let permalink = 'https://reddit.com' + posts[i].data.permalink;
let elem = $('<div>').addClass('item').css('background-image', 'url(' + image.source.url + ')');
let overlay = $('<a>').addClass('overlay').appendTo(elem);
let bar = $('<div>').addClass('bar').appendTo(elem);
let link = $('<a>').addClass('post').attr({target: '_blank', href: permalink}).appendTo(bar).text(posts[i].data.title);
let zoom = $('<a>').addClass('zoom').attr({target: '_blank', href: image.source.url}).appendTo(bar).html('<i class="fa fa-camera-retro"></i>');
if (posts[i].data.stickied){
elem.addClass('stickied');
}
// if (image.source.width > image.source.height){
// elem.addClass('wide');
// }
// if(posts[i].data.created % 6 == 0){
// elem.addClass('active');
// }
$grid.append(elem).packery('appended', elem).packery('layout');
}
}
Settings.after = feed.data.after;
Settings.isLoading = false;
}
}
var bob = new RedditJSON();
function loadNext(){
if (Settings.isLoading){
setTimeout(loadNext,100);
return;
} else {
$.getJSON(bob.loadLink(), bob.next);
}
}
$(function() {
// return;
loadNext();
$(window).scroll(function () {
console.log($(window).scrollTop() + ' ' + ($('body').height() - $(window).height() - 10));
if ($(window).scrollTop() >= $('body').height() - $(window).height() - 10 && !Settings.isLoading) {
loadNext();
}
});
});
/* https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/ */
#import url("http://fonts.googleapis.com/css?family=Raleway:200,300, 800");
* {
box-sizing: border-box;
}
body {
margin-top: 100px;
padding: 0;
background: #181818;
font-family: 'Raleway', sans-serif;
color: rgba(250, 250, 250, 0.8);
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/577362/pexels-photo%20(4).jpg");
background-size: 100% 90%;
background-repeat: no-repeat;
text-shadow: 2px 2px 2px rgba(100, 100, 120, 0.8);
}
.base-title {
font-weight: 200;
font-size: 85px;
/* ORIG 70px */
}
h1 {
text-align: center;
font-weight: lighter;
}
h4 {
text-align: center;
font-weight: 300;
margin-top: -10%;
font-size: 20px;
}
#date {
text-align: center;
margin-bottom: 10%;
}
.ticker {
margin-top: 7%;
}
.grid {
width: 100%;
max-width: 1200px;
margin: auto;
position: relative;
}
.grid::after {
display: block;
content: attr(data-loading-text);
text-align: center;
width: 100%;
padding: 20px 0;
position: absolute;
top: 100%;
}
.grid .item {
position: relative;
display: block;
width: 200px;
height: 200px;
background-size: cover;
background-position: center center;
cursor: pointer;
overflow: hidden;
color: white;
text-align: center;
padding: 5px;
border-radius: 2px;
margin-left: 30px;
margin-bottom: 30px;
box-shadow: inset 0 0 10px #000000;
-webkit-filter: saturate(1.5) contrast(107%);
text-shadow: 2px 2px 2px #222;
}
.grid .item.wide {
width: 25%;
}
.grid .item.active {
width: 25%;
height: 600px;
}
.grid .item.wide.active {
width: 100%;
height: 650px;
}
.grid .item .bar {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 4px;
z-index: 4;
color: white;
}
.grid .item .bar a {
text-decoration: none;
font-size: 22px;
font-weight: bold;
}
.grid .item .bar a.zoom {
float: right;
}
.grid .item .overlay {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, #001, transparent 100px);
z-index: 3;
}
.grid .item .bar, .grid .item .overlay {
transition: transform 250ms, opacity 250ms;
transform: translateY(80px);
opacity: 0;
}
.grid .item:hover .bar, .grid .item:hover .overlay {
transform: translateY(0);
opacity: 1;
}
.grid .item.stickied .overlay {
background: linear-gradient(to top, #0f0, transparent 80px);
}
#media (max-width: 520px) {
.grid .item {
width: 100% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/packery#2/dist/packery.pkgd.js"></script>
<h1 class="base-title">Positive Technology</h1>
<!-- <h4>Useful News</h4> -->
<h1 class="ticker"> · Hydroponics · Aeroponics · Micro-solar · Micro-wind · 3D-Printing · Eco-Houses · Water Filtration ·</h1>
<div class="grid" id="positive-technology"></div>
<h2 id="date"></h2>
I got some interesting tips from everybody's answers here, but I went the easiest route. I had some code in the body section of the CSS:
text-shadow: 2px 2px 2px rgba(100,100,120,0.8);
affecting all the text throughout the page. I removed it from body and inserted it into each individual selector as needed.
I have some problems with html and css. I want 100% DIV's under each other but everythin i do is not working. It works almost but not on every mobile divece. It is working on my desktop but when i open it on my phone it is not working. Can some one please help me?
window.onload = onLoad;
function onLoad()
{
var teller = 0;
//ONLOAD
$('span').fadeIn(4000);
$('html,body').animate({
scrollTop: $('html').offset().top
}, 1700);
//MENU
$('#menu').on('click', function (e)
{
$("#menuBar").animate({width:'toggle'},350);
$("#menu").toggleClass('rotated');
});
//BUTTON_ONClICK
//BUTTON_1
$('#screen-1-go').on('click', function (e)
{
e.preventDefault();
$('html,body').animate({
scrollTop: $('#screen-2').offset().top
}, 1700);
});
//TO_SCREEN_3
$('.more').on('click', function (e)
{
teller=0;
e.preventDefault();
$('html,body').animate({
scrollTop: $('#screen-3').offset().top
}, 1700);
});
//TO_THE_TOP
$('.top').on('click', function (e)
{
teller=0;
e.preventDefault();
$('html,body').animate({
scrollTop: $('html').offset().top
}, 1700);
});
//VARS_SCROLL_EVENT
var screens = ["html", "#screen-2", "#screen-3"];
$('html').on('wheel', function(event)
{
if (event.originalEvent.deltaY > 0)
{
teller++;
animateToDiv(screens[teller]);
}
else
{
teller--;
animateToDiv(screens[teller]);
}
});
}
function animateToDiv(div)
{
$('html,body').animate({
scrollTop: $(div).offset().top
}, 1700);
}
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
margin: 0;
background: #000;
overflow-x: hidden;
overflow-y: hidden;
}
/* Menu */
#menu
{
position: fixed;
right: 10px;
z-index: 9999;
cursor: pointery
}
#menu > img
{
width: 60px;
height: 60px;
}
#menuBar
{
position: fixed;
right: 0px;
float: right;
height: 100%;
width: 100%;
background-color: black;
box-shadow: -1px 0px 1px 1px black;
display: none;
z-index: 9998;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
.rotated
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Screen_1 */
#screen-1
{
position: fixed;
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
background: url(../Uploads/Video/screen1-video.gif) repeat;
background-size: cover;
color: white;
font-size: 1.2rem;
width: 100%;
height: 100%;
}
#screen-1-tekst
{
margin-left: auto;
margin-right: auto;
margin-top: 16em;
width: 30em;
}
#screen-1-tekst > span
{
font-family: 'Brush Script MT', cursive;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
color: #DBBC90;
font-size: 6em;
display: none;
}
#screen-1-go
{
margin-top: 16%;
}
.button
{
display: block;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
border: 1px solid rgba(255,255,255,0.75);
color: rgba(255,255,255,0.75);
height: 45px;
line-height: 48px;
cursor: pointer;
-webkit-transition: color 0.5s ease,border-color 0.5s ease;
transition: color 0.5s ease,border-color 0.5s ease;
margin-left: auto;
margin-right: auto;
width: 13em;
margin: auto;
position: absolute;
left: 0; bottom: 10%; right: 0;
}
/* Screen2 */
#screen-2
{
position: absolute;
margin-top: 100%;
width: 100%;
height: 100%;
background-color: #d55a49;
}
#screen-2-tekst > h1
{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
color: rgba(99, 35, 35, 0.8);
text-shadow: 1px 4px 6px #D55A49, 0 0 0 #000, 2px 4px 6px #D55A49;
font-size: 5em;
text-align: center;
}
#screen-2-tekst
{
margin-left: auto;
margin-right: auto;
margin-top: 4em;
width: 27em;
}
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
/* Screen2 */
#screen-3
{
position: absolute;
margin-top: 150.5%;
width: 100%;
height: 100%;
background-color: #80a5ba;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Files/CSS/home.css">
<script src="Files/JS/background.js"></script>
<script src="Files/JS/JQBA.js"></script>
<script src="Files/JS/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="menu">
<img src="Files/Uploads/Image/hamburger.png">
</div>
<div id="menuBar">
</div>
<div id="screen-1">
<div id="screen-1-tekst">
<span>Joost de Niet</span>
</div>
<div id="screen-1-go">
<h1 class="button">More about me</h1>
</div>
</div>
<div id="screen-2">
<div id="screen-2-tekst">
<h1>Portfolio</h1>
</div>
<div id="screen-button">
<h1 class="button more">More..</h1>
</div>
</div>
<div id="screen-3">
<div id="screen-button">
<h1 class="button top">To the top</h1>
</div>
</div>
</body>
</html>
You should try using height:100vh for mobile devices
You can use vh for this. Read more here.
So it will be something like
div {
height: 100vh /*100% of device height*/
}
Hope this helps :)
height: 100vh
is the one of solution for responsive designs
or u should use mediaquery