I'm trying to fix a script so that I can toggle another div and show the content inside that div with an slideshow animation in jQuery. It dosen't work at all, so some help would be appericated.
<script type="text/javascript">
function toggleDivs(currentDiv)
{
if (currentDiv == 'music')
{
var $inner = $("#music-box");
}
else
{
var $inner = $("#inner");
}
if($inner.position().left == 0)
{
$inner.animate({
left: "400px"
});
}
else
{
$inner.animate({
left: "0px"
});
});
});
</script>
Heres the DIVS:
<div id="shadow"></div>
<div id="header">
<div class="navigation">
ARTIST
MUSIC
ABOUT
CONTACT
</div>
</div>
<div id="content">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F110558300"></iframe>
<iframe width="100%" height="166" scrollnig="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F108205158"></iframe>
<div id="target">
Dubstep
Electro House
</div>
<div class="contentbox">
<div id="inner">
<div id="music-box">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-widget">
<img src="http://dustla.com/images/soundcloud.png" alt="soundcloud"/>
<img src="http://dustla.com/images/twitter.png" alt="twitter"/>
<img src="http://dustla.com/images/facebook.png" alt="facebook"/>
<img src="http://dustla.com/images/youtube.png" alt="youtube"/>
</div>
</div>
Heres the CSS code:
/*************
STYLESHEET
*************************/
html, body {
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto !important;
overflow-x: hidden;
font-family: verdana;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body{
}
#header
{
width: 100%;
height: 145px;
background-color: #fff;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
position: relative;
z-index: 1;
}
#shadow
{
width: 100%;
height: 163px;
background-image: url('http://dustla.com/images/h_shadow.png');
background-repeat: repeat-x;
position: absolute;
z-index: 1;
margin-top: 30px;
}
.navigation a
{
border-bottom: 2px solid #000;
font-family: Comic Sans MS;
font-size: 24px;
color: #000;
margin-right: 50px;
text-decoration: none;
width: auto;
text-align: center;
}
.navigation
{
width: 600px;
margin: 0 auto;
padding-top: 50px;
}
.navigation a:hover
{
border-bottom: 5px solid #000;
}
#content
{
height: auto;
position: relative;
padding-top: 250px;
padding-bottom: 400px;
margin-bottom: -41px;
width: auto;
background-color: #ffF;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.contentbox
{
width: 100%;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
/*height: auto;
margin-top: -780px;
background-color: #fff;
position: relative;
padding-right: -200px;
max-height: 750px;*/
overflow: hidden;
}
#footer
{
width: 100%;
height: 72px;
position: relative;
bottom: 0;
background-image: url('img/bg.png');
margin: 0;
color: #fff;
opacity: 0.9;
margin-top: 25px;
}
#footer-widget
{
width: 260px;
height: 28px;
float: right;
margin-right: 5px;
margin-top: 15px;
}
#footer-widget a
{
margin-right: 20px;
}
/*********************
JQUERY SLIDESHOW
**********************/
#slideshow
{
background-color: #000;
width: 400px;
height: 200px;
margin: 0;
position: relative;
}
#inner
{
background-color: #F00;
width: 100%;
height: 200;
margin: 0;
position: absolute;
}
Related
Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}
If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.
I am making somekind of a sprintboard and I would like to change the background color of my box depending on which container is it in (toDo, inProgress, Done). I cannot think of a solution, I have tried some but failed, and the other resources I have found were not so helpful.
This is my code, the whole code (just for the purpose of easier understanding):
I need an javascript solution, the point is, when you run the code all the boxes should be gray. But upon dragging and dropping to a different container the background color of the box should change, depending on which container is it in, inProgress = orange, Done = green and toDo should remain gray.
let emptyCell = "cell4";
function boxOver(event) {
event.preventDefault();
}
function boxDrag(event, boxNumber) {
event.dataTransfer.setData("text", boxNumber.toString());
}
function boxDrop(event, cellNumber) {
event.preventDefault();
let boxNumber = event.dataTransfer.getData("text");
let draggedBox = document.getElementById("box" + boxNumber);
let targetCell = document.getElementById("cell" + cellNumber);
if (targetCell.innerHTML.trim() === "") {
emptyCell = draggedBox.parentNode.id;
targetCell.appendChild(draggedBox);
}
}
.container {
width: 1000px;
margin: 0 auto;
display: flex;
}
#div1 {
background-color: gray;
float: left;
height: 750px;
width: 300px;
text-align: center;
position: relative;
}
#div2 {
background-color: gray;
float: left;
margin-left: 20px;
height: 750px;
width: 300px;
text-align: center;
}
#div3 {
background-color: gray;
float: right;
margin-left: 20px;
height: 750px;
width: 300px;
text-align: center;
}
.text1 {
background-color: black;
color: white;
text-align: center;
font-size: 40px;
width: 250px;
height: 50px;
margin: 0 auto;
position: relative;
}
.text2 {
background-color: orange;
color: white;
text-align: center;
font-size: 40px;
width: 250px;
height: 50px;
margin: 0 auto;
position: relative;
}
.text3 {
background-color: green;
color: white;
text-align: center;
font-size: 40px;
width: 250px;
height: 50px;
margin: 0 auto;
position: relative;
}
#box1 {
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
border: 5px solid white;
border-style: dashed;
}
#box2 {
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
border: 5px solid white;
border-style: dashed;
}
#box3 {
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
border: 5px solid white;
border-style: dashed;
}
#box4 {
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
border: 5px solid white;
border-style: dashed;
}
#box5 {
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
border: 5px solid white;
border-style: dashed;
}
#cell1 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell2 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell3 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell4 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell5 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell6 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell7 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell8 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell9 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell10 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell11 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell12 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell13 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell14 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
#cell15 {
text-align: center;
font-size: 40px;
width: 200px;
height: 100px;
margin: 0 auto;
position: relative;
}
<div class="container">
<div id="div1">
<div class="text1">To Do</div><br>
<div id="cell1" ondragover="boxOver(event)" ondrop="boxDrop(event, 1)">
<div id="box1" draggable="true" ondragstart="boxDrag(event, 1)">#1</div>
</div>
<div id="cell2" ondragover="boxOver(event)" ondrop="boxDrop(event, 2)">
<div id="box2" draggable="true" ondragstart="boxDrag(event, 2)">#2</div>
</div>
<div id="cell3" ondragover="boxOver(event)" ondrop="boxDrop(event, 3)">
<div id="box3" draggable="true" ondragstart="boxDrag(event, 3)">#3</div>
</div>
<div id="cell4" ondragover="boxOver(event)" ondrop="boxDrop(event, 4)"></div>
<div id="cell5" ondragover="boxOver(event)" ondrop="boxDrop(event, 5)"></div>
</div>
<div id="div2">
<div class="text2">In Progress</div><br>
<div id="cell6" ondragover="boxOver(event)" ondrop="boxDrop(event, 6)">
<div id="box4" draggable="true" ondragstart="boxDrag(event, 4)">#4</div>
</div>
<div id="cell7" ondragover="boxOver(event)" ondrop="boxDrop(event, 7)">
<div id="box5" draggable="true" ondragstart="boxDrag(event, 5)">#5</div>
</div>
<div id="cell8" ondragover="boxOver(event)" ondrop="boxDrop(event, 8)"></div>
<div id="cell9" ondragover="boxOver(event)" ondrop="boxDrop(event, 9)"></div>
<div id="cell10" ondragover="boxOver(event)" ondrop="boxDrop(event, 10)"></div>
</div>
<div id="div3">
<div class="text3">Done</div><br>
<div id="cell11" ondragover="boxOver(event)" ondrop="boxDrop(event, 11)"></div>
<div id="cell12" ondragover="boxOver(event)" ondrop="boxDrop(event, 12)"></div>
<div id="cell13" ondragover="boxOver(event)" ondrop="boxDrop(event, 13)"></div>
<div id="cell14" ondragover="boxOver(event)" ondrop="boxDrop(event, 14)"></div>
<div id="cell15" ondragover="boxOver(event)" ondrop="boxDrop(event, 15)"></div>
</div>
</div>
CSS Solution
#div1 .box {
background: black;
}
#div2 .box {
background: orange;
}
#div3 .box {
background: green;
}
This will set the background colour of every instance of class "box" inside of #div1, #div2 and #div3 to the colour of choice
Just make sure to give each box the class="box" in your HTML
Javascript Solution
if(draggedBox.parentElement.parentElement.id == "div1") {
draggedBox.style.background = "black"
} else if(draggedBox.parentElement.parentElement.id == "div2") {
draggedBox.style.background = "orange"
} else if(draggedBox.parentElement.parentElement.id == "div3") {
draggedBox.style.background = "green"
}
Add this code to the end of your boxDrop function so the function looks like this:
function boxDrop(event, cellNumber) {
event.preventDefault();
let boxNumber = event.dataTransfer.getData("text");
let draggedBox = document.getElementById("box" + boxNumber);
let targetCell = document.getElementById("cell" + cellNumber);
if (targetCell.innerHTML.trim() === "") {
emptyCell = draggedBox.parentNode.id;
targetCell.appendChild(draggedBox);
}
if(draggedBox.parentElement.parentElement.id == "div1") {
draggedBox.style.background = "black"
} else if(draggedBox.parentElement.parentElement.id == "div2") {
draggedBox.style.background = "orange"
} else if(draggedBox.parentElement.parentElement.id == "div3") {
draggedBox.style.background = "green"
}
}
.parentElement.id will give you the id of the parent element, which is the column the box is in. So comparing the columns ID in the if statement, you know what colour to set the background.
You can do this by selecting the child's inside a specific div container. So in this case, to select all the boxes inside the first container, we will do this #div1 div > *. This selector selects the boxes inside a cell, which is apparently a div, and which is inside the first container.
Some more code as for reference:
#div1 {
background-color: gray;
float: left;
height: 750px;
width: 300px;
text-align: center;
position: relative;
}
#div1 div > * {
background-color: #000;
}
#div2 {
background-color: gray;
float: left;
margin-left: 20px;
height: 750px;
width: 300px;
text-align: center;
}
#div2 div > * {
background-color: red;
}
#div3 {
background-color: gray;
float: right;
margin-left: 20px;
height: 750px;
width: 300px;
text-align: center;
}
#div3 div > * {
background-color: #000;
}
Hope it helps ❤️
I have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.
How can i do this? Or maybe there are some libraries with such functionality.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
transform:scale(5);
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span> 1979 </span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span> 1980 </span>
</div>
<div class="slide time">
<i>1981</i><span> 1981 </span>
</div>
<div class="slide time">
<i>1983</i><span> 1983 </span>
</div>
<div class="slide time">
<i>1984</i><span> 1984 </span>
</div>
</div>
</div>
I transparent the color of the scroll on the horizontal if you want to change it according to your taste
.slides :: - webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 0px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide > a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide > a > i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
.slide a.deactive {
border: none;
width: 0px;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
.slide a.active>i {
transform:scale(5);
}
.slide a.active~span {
display: block;
opacity: 1;
}
.time {
display: table-cell;
text-align: center;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
<div class="slider">
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<i>1979</i>
</div>
<div class="slide time">
<i>1980</i>
</div>
<div class="slide time">
<i>1981</i>
</div>
<div class="slide time">
<i>1982</i>
</div>
<div class="slide time">
<i>1983</i>
</div>
<div class="slide time">
<i>1984</i>
</div>
</div>
</div>
<div class="slides">
<div id="slide-1">
<span> 1979 </span>
</div>
<div id="slide-2">
<span> 1980 </span>
</div>
<div id="slide-3">
<span> 1981 </span>
</div>
<div id="slide-4" >
<span> 1982 </span>
</div>
<div id="slide-5">
<span> 1983 </span>
</div>
<div id="slide-6">
<span> 1984 </span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I am creating a Simon Says game that uses the flashing of colors as a memory game.
I want to overlay 4 circles on each of the four corners of a background square (the square will be transparent in the final version).
I have attached an image LINK TO IMAGE of what I would like it to look like and I've included the HTML and CSS.
.html {
color: grey;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
/*position: relative;*/
/*float: left;*/
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
</head>
<body>
<div class="game">
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
</div>
</div>
</body>
</html>
As has been suggested, you can use absolute positioning in order to achieve what you want.
I have moved the circle divs into the #square div, as to my understanding we want to position the circles within that div.
Then you can use left, right, top and bottom to position them, as I have done in the example below.
.html {
color: grey;
}
.game {
position: relative;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
position: absolute;
left: 0;
top: 0;
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
position: absolute;
right: 0;
top: 0;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
position: absolute;
left: 0;
bottom: 0;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
position: absolute;
right: 0;
bottom: 0;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
<link rel="stylesheet" href="assignment-02.css">
</head>
<body>
<div class="game">
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
</div>
</div>
<script src="assignment-02.js"></script>
</body>
</html>
I have this code Codepen to modify a working mp3 player, it works fine everywhere, even in small windows in desktop. but the buttons wouldn't show up in mobile phones. I figured out it was because of the Mediaelementplayer that I'm using, but could not solve the problem. Thanks If you would fork that pen and show me a better way to do it.
var audio = {
init: function() {
var $that = this;
$(function() {
$that.components.media();
});
},
components: {
media: function(target) {
var media = $('audio.fc-media', (target !== undefined) ? target : 'body');
if (media.length) {
media.mediaelementplayer({
audioHeight: 40,
features : ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
alwaysShowControls : true,
timeAndDurationSeparator: '<span></span>',
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
}
},
},
};
audio.init();
*:focus{
outline: none;
}
html {
background: #f2f2f2;
height:100%;
}
body {
margin: 0;
font-family: "Raleway",sans-serif;
height:100%;
}
h1 {
margin: 0;
font-size: 33px;
color: #fff;
padding: 0 10%;
}
h3 {
margin: 0;
font-size: 17px;
font-weight: 500;
color: #ccc;
padding: 0 10%;
}
.container {
display: block;
width: 100%;
height: 750px;
margin: auto;
overflow: hidden;
background-repeat: repeat;
background-size: cover;
}
.music-player {
display: block;
position: relative;
width: 400px;
height: 570px;
margin: auto;
margin-top: auto;
border-radius: 0 0 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ font-family:"Times New Roman", Times, serif;
font-size:39px;
text-align:center;
width:100%;
margin: auto;
margin-top: auto;
color:#ccc;
width:400px;
background:#090b1f;
box-shadow: 1px 10px 20px 5px #222;
border-radius: 10px 10px 0 0;
`
}
.cover {
float: left;
width: 100%;
height: 66%;
}
.cover img {
display: block;
position: absolute;
top: 8%;
left: 14%;
width: 70%;
margin: auto;
text-align: center;
}
.titre {
float: left;
width: 100%;
}
.lecteur {
width: 100%;
display: block;
height: auto;
position: relative;
float: left;
}
.mejs__button>button:focus {
outline: 0px dotted #999;
}
.mejs__container {
position: relative;
background-color: transparent;
min-width: auto !important;
}
.mejs__controls {
padding: 0 10%;
background: transparent !important;
display: block;
position: relative;
}
.mejs__controls div {
display: block;
float: left;
position: relative;
}
.mejs__controls .mejs__playpause-button {
position: absolute !important;
right: 8%;
bottom: 95%;
width: 40px;
}
.mejs__controls .mejs__playpause-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 23px;
color: #5bbb95;
background: transparent;
padding: 0;
margin: 0;
}
.mejs__controls .mejs__play button:before{
content:"\f04b";
}
.mejs__controls .mejs__pause button:before{
content:"\f04c";
}
.mejs__controls .mejs__volume-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 20px;
color: #5bbb95;
background: transparent;
margin: 0;
padding: 0;
}
.mejs__controls .mejs__mute button:before {
content: "\f028";
}
.mejs__controls .mejs__unmute button:before {
content: "\f026";
}
.mejs__controls .mejs__time {
width: 100%;
margin-top: 7%;
margin-bottom: 3%;
color: #fff;
height: auto;
padding: 0;
overflow: visible;
min-width: 100%;
}
.mejs__controls .mejs__time span {
font-size: 15px;
}
.mejs__controls span.mejs__duration {
float: right;
text-align: right;
color: #ccc;
}
.mejs__controls span.mejs__currenttime {
font-weight: 700;
float: left;
}
.mejs__controls .mejs__time-rail {
width: 100%;
margin: 0;
}
.mejs__controls .mejs__time-rail span {
position: absolute;
top: 0;
width: 100%;
height: 4px;
border-radius: 50px;
cursor: pointer;
}
.mejs__controls .mejs__time-rail .mejs__time-loaded {
background: rgba(255,255,255,0.2);
}
.mejs__controls .mejs__time-rail .mejs__time-float {
display: none;
top: -40px;
width: 40px;
height: 25px;
margin-left: 0px;
text-align: center;
font-size: 10px;
background: #fff;
border: 0;
}
.mejs__controls .mejs__time-rail .mejs__time-float-current {
display: block;
position: relative;
top: 0;
margin: 0;
line-height: 26px;
color: #100d28;
}
.mejs__controls .mejs__time-rail .mejs__time-float-corner {
top: auto;
bottom: -9px;
left: 50%;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.mejs__controls .mejs__time-rail .mejs__time-current {
background: #5BBB95 none repeat scroll 0 0;
}
.mejs__controls .mejs__time-handle {
display: none;
}
.mejs__controls .mejs__volume-button {
position: relative;
position: absolute !important;
top: 70px;
right: 25%;
width: 40px;
height: 40px;
}
.mejs__controls .mejs__horizontal-volume-slider {
display: block;
position: absolute !important;
position: relative;
top: 70px;
right: 10%;
width: 60px;
height: 4px;
margin-top: 18px;
border-radius: 50px;
line-height: 11px;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-total,
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
background: #fff;
}
#media only screen and (max-width: 600px) {
.container {
height:400px;
}
.music-player {
display: block;
position: relative;
width: 100%;
height:100%;
margin: auto;
border-radius: 10px 10px 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ display:none;
}
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sermon</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://readamind.com/music1/music1/index.css" />
</head>
<body>
<div class="contain">
<div class="container">
<div class="series-name">Album</div>
<div class="music-player">
<div class="cover">
<img src="http://readamind.com/music1/music1/data/frame.png" alt="">
</div>
<div class="titre">
<h3>Artist Name</h3>
<h1>Song Title</h1>
</div>
<div class="lecteur">
<audio style="width: 100%;" class="fc-media">
<source src="http://readamind.com/music1/music1/data/acousticbreeze.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
</div>
</div>
<script src="http://readamind.com/music1/music1/index.js"></script>
</body>
</html>
<!--Test-->