I'm trying to create a spinner like loader but in my own style, this is like a carousel like it spins horizontally infinitely and add 'active' class to the item that caught inside the search icon but it seems my code does not produce the right result. I just want to loop it like a carousel infinitely and add class to the item that is inside the search icon, any help, ideas please?
$(function() {
setInterval(function() {
animateSpinner();
}, 2000);
});
function animateSpinner() {
$('.anim-wrapper').animate({
left: -(parseInt($('.anim-wrapper').attr('data-start-offset')) + 60)
}, 500, function() {
$('.anim-wrapper .active').removeClass('active').next().addClass('active');
$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
});
}
body {
padding: 64px;
margin: 0px;
color: #242424;
}
.anim-wrapper {
overflow: auto;
left: -14px;
position: relative;
width: 720px;
padding: 0px;
margin: 0px;
top: 10px;
height: 61px;
overflow: hidden;
}
.anim-circle {
width: 50px;
height: 50px;
background: #ededed;
display: flex;
align-items: center;
justify-content: center;
float: left;
list-style: none;
margin: 5px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.position-relative {
position: relative;
}
.magnifying-wrapper {
position: absolute;
width: 80px;
height: 80px;
z-index: 999;
margin: 0px auto;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
top: 11px;
}
.cn-spinner {
width: 295px;
position: relative;
height: 150px;
overflow: hidden;
}
.anim-circle.active {
/* transform: scale(1.21); */
background: #ef7100;
color: #FFF;
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
<div class="magnifying-wrapper">
<i class="ti-search"></i>
</div>
<ul class="anim-wrapper overflow-auto" data-start-offset="14">
<li class="anim-circle">Jobs</li>
<li class="anim-circle">Real<br>estate</li>
<li class="anim-circle active">Busi-<br>ness</li>
<li class="anim-circle">Cars</li>
<li class="anim-circle">Deals</li>
<li class="anim-circle">Events</li>
</ul>
</div>
Here is the working demo with your code.i adjusted the left value to handle it as per your requirement.
$(function(){
setInterval(function(){
animateSpinner();
}, 2000);
});
function animateSpinner(){
$('.anim-wrapper').animate({
left: - ( parseInt( $('.anim-wrapper').attr('data-start-offset') ) )
},
500, function() {
$('.anim-wrapper .active').removeClass('active').next().addClass('active');
$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
});
}
body{
padding: 64px;
margin: 0px;
color: #242424;
}
.anim-wrapper{
overflow: auto;
left: -14px;
position: relative;
width: 720px;
padding: 0px;
margin: 0px;
top: 10px;
height: 61px;
overflow:hidden;
}
.anim-circle{
width: 50px;
height: 50px;
background:#ededed;
display: flex;
align-items: center;
justify-content: center;
float: left;
list-style: none;
margin: 5px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.position-relative{
position: relative;
}
.magnifying-wrapper{
position: absolute;
width: 80px;
height: 80px;
z-index: 999;
margin: 0px auto;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
top: 11px;
}
.cn-spinner{
width: 295px;
position: relative;
height: 150px;
overflow: hidden;
}
.anim-circle.active{
/* transform: scale(1.21); */
background: #ef7100;
color: #FFF;
animation-name: spin;
animation-duration: 1000ms;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
<div class="magnifying-wrapper">
<i class="ti-search"></i>
</div>
<ul class="anim-wrapper overflow-auto" data-start-offset="14">
<li class="anim-circle">Jobs</li>
<li class="anim-circle">Real<br>estate</li>
<li class="anim-circle active">Busi-<br>ness</li>
<li class="anim-circle">Cars</li>
<li class="anim-circle">Deals</li>
<li class="anim-circle">Events</li>
</ul>
</div>
In your approach it looks like the animation is only run once, even though it does run as expected.
The reason is that on your first animation you set it to -74 (60 +14 offset), but you never change this value which is why it remains at -74.
The jumpy "animation" is what it looks like when you remove and append elements.
I've put together a quick'n dirty solution which might need a bit of tweeking.
This manipulates the first child within .anim-wrapper, rather than the element itself.
$(function() {
setInterval(function() {
$('.anim-circle:nth-child(1)').animate({
marginLeft: -74
}, 500, function() {
$('.anim-circle:nth-child(1)').css('margin-left', 5);
$('.anim-wrapper .active').removeClass('active').next().addClass('active');
$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
});
}, 2000);
});
body {
padding: 64px;
margin: 0px;
color: #242424;
}
.anim-wrapper {
overflow: auto;
left: -14px;
position: relative;
width: 720px;
padding: 0px;
margin: 0px;
top: 10px;
height: 61px;
overflow: hidden;
}
.anim-circle {
width: 50px;
height: 50px;
background: #ededed;
display: flex;
align-items: center;
justify-content: center;
float: left;
list-style: none;
margin: 5px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.position-relative {
position: relative;
}
.magnifying-wrapper {
position: absolute;
width: 80px;
height: 80px;
z-index: 999;
margin: 0px auto;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
top: 11px;
}
.cn-spinner {
width: 295px;
position: relative;
height: 150px;
overflow: hidden;
}
.anim-circle.active {
background: #ef7100;
color: #FFF;
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
<div class="magnifying-wrapper">
<i class="ti-search"></i>
</div>
<ul class="anim-wrapper data-start-offset="14">
<li class="anim-circle">Jobs</li>
<li class="anim-circle">Real<br>estate</li>
<li class="anim-circle active">Busi-<br>ness</li>
<li class="anim-circle">Cars</li>
<li class="anim-circle">Deals</li>
<li class="anim-circle">Events</li>
</ul>
</div>
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 have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...
The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
I've been working on this for weeks and can't even seem to reproduce the problem in a consistent way.
I need to make sure the text in my buttons is as large as possible without extending outside of the parent div. I've tried 5-10 fitty/fitText type plug-ins and none of them are working properly, and the text either shrinks or expands way too big.
I've created this codepen to show the problem with it being too big:
https://codepen.io/TheNomadicAspie/pen/WNjRpOQ
I had to use an online link to jQuery and fitText. The weird thing is, if I copy the exact same code to JSfiddle, everything works perfectly:
https://jsfiddle.net/TheNomadicAspie/3yjw8kbt/7/
This is exactly how I want it to look, it's perfect. But when I run it in VS Code with a live server (Only difference being a local file instead of a link), it looks like the codepen and expands outside of the div:
I uploaded the fitText and jQuery links myself so I know they're the same version, and with the exact same code it doesn't work on Codepen or on my VS Code, but it does work on JS Fiddle. How can that be, and how can I make my code work the same way as it does on JS Fiddle?
Here's my code in case the Codepen or JS Fiddle changes.
<div id="screen" , class="screen">
<div id="menu_bar" , class="menu-bar">
<div id="logo" , class="logo">
<img src="logo.png" />
</div>
<div id="title" , class="title">Title</div>
<div id="menu_button" , class="menu-button">
<img src="menu.png" />
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="logo_animation" , class="logo-animation"><img src="https://media2.giphy.com/media/E0SE1bDv0sTbCH4p6V/giphy.gif?cid=790b761143fe1cebe2466c26bfb82fc6b178eb7ecad3874e&rid=giphy.gif"/></div>
<div id="question" class="question resize">
<div id="question_text" class="question-text">
<span>This is some test text</span>
</div>
</div>
<div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
<input type="text" id="input-text" class="input-text" />
</div>
<div id="speech_bubble_bottom_bar" class="speech-bubble-bottom-bar">
<div id="left" class="left-button-container">
<button id="left_button" class="button resize">Wow!</button>
</div>
<div id="right_button_container" class="right-button-container">
<button id="right_button" class="button resize">Next</button>
</div>
</div>
</div>
<div id="bottom_bar" , class="bottom-bar">
<div id="character" , class="character">
</div>
<div id="bottom_display" , class="bottom-display">
<div id="answers_display" , class="answers-display">
<div id="answer_container_1" , class="answer-button-1">
<div id="answer_checkbox_1" , class="checkbox">
</div>
<div id="answer_button_container_1" , class="answer-button-container">
<button id="answer_button_1" , class="button pushable resize">
<span class="front">Super long button times four five six seven</span>
</button>
</div>
</div>
<div id="answer_container_2" , class="answer-button-2">
<div id="answer_checkbox_2" , class="checkbox">
</div>
<div id="answer_container_2" , class="answer-button-container">
<button id="answer_button_2" , class="button pushable resize">
<span class="front">Button 2</span>
</button>
</div>
</div>
<div id="answer_container_3" , class="answer-button-3">
<div id="answer_checkbox_3" , class="checkbox">
</div>
<div id="answer_container_3" , class="answer-button-container">
<button id="answer_button_3" , class="button pushable resize">
<span class="front">Button 3</span>
</button>
</div>
</div>
<div id="answer_container_4" , class="answer-button-4">
<div id="answer_checkbox_4" , class="checkbox">
</div>
<div id="answer_container_4" , class="answer-button-container">
<button id="answer_button_4" , class="button pushable resize">
<span class="front">Button 4</span>
</button>
</div>
</div>
</div>
<div id="menu_display" , class="menu-display">
<div id="menu_container_1" , class="menu-button-1">
<div id="menu_button_container_1" , class="menu-button-container">
<button id="menu_button_1" , class="button resize">Restart</button>
</div>
</div>
<div id="menu_container_2" , class="menu-button-2">
<div id="menu_button_container_2" , class="menu-button-container">
<button id="menu_button_2" , class="button resize">Options</button>
</div>
</div>
<div id="menu_container_3" , class="menu-button-3">
<div id="menu_button_container_3" , class="menu-button-container">
<button id="menu_button_3" , class="button resize">More Info</button>
</div>
</div>
<div id="menu_container_4" , class="menu-button-4">
<div id="menu_button_container_4" , class="menu-button-container">
<button id="menu_button_4" , class="button resize">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://filebin.net/ykl05vxy49xx5vxp/jquery.min.js"></script>
<script src="https://filebin.net/ykl05vxy49xx5vxp/jquery.fittext.js"></script
* {
-webkit-box-sizing: border-box;
-mo-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
position: fixed;
height: 100%;
background-color: #311049;
font-size: 2vh;
margin: 0 auto;
}
.screen {
position: absolute;
height: 100%;
}
.menu-bar {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
position: relative;
height: 13.714%;
width: 100vw;
top: 0%;
text-align: center;
}
.logo {
grid-column: 1/2;
position: relative;
height: 100%;
}
.logo img {
position: absolute;
height: auto;
max-height: 95%;
max-width: 95%;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.title {
grid-column: 2/3;
position: relative;
color: #f5f5f5;
height: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-items: center;
font-family: hack;
font-size: clamp(2vw, 8vw, 10vh);
display: flex;
top: 0%;
}
.menu-button {
grid-column: 3/4;
position: relative;
height: 100%;
}
.menu-button img {
position: absolute;
height: auto;
max-height: 75%;
max-width: 75%;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.display {
position: relative;
height: 86.286%;
width: 100vw;
}
.speech-bubble {
display: grid;
grid-template-rows: 60% 20% 20%;
position: relative;
background-color: #f5f5f5;
height: 61.8%;
width: 90vw;
margin: auto;
border-radius: 2em;
z-index: 10;
padding-bottom: 1em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 15vw;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: #f5f5f5;
border-bottom: 0;
margin-left: -2em;
margin-bottom: -2em;
z-index: -1;
}
.logo-animation {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10%;
padding-top: 10%;
padding-left: 10%;
padding-right: 10%;
display: none;
}
.logo-animation img {
height: 100%;
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
.question {
grid-rows: 1/2;
position: relative;
font-size: 3vh;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.question-text {
height: 100%;
width: 100%;
overflow: auto;
}
.speech-bubble-middle-bar {
grid-rows: 2/3;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
.input-text {
visibility: hidden;
width: 100%;
height: 100%;
border-radius: 2.5em;
border: 0.25em solid black;
padding: 1%;
font-size: 2em;
text-align: center;
}
.speech-bubble-bottom-bar {
grid-rows: 3/4;
display: grid;
grid-template-columns: 50% 50%;
position: relative;
width: 100%;
}
.left-button-container {
position: absolute;
height: 100%;
width: 38.2%;
left: 0%;
margin-left: 1em;
}
.left-button-container button {
width: 100%;
font-size: 2em;
}
.right-button-container {
position: absolute;
height: 100%;
width: 38.2%;
right: 0%;
margin-right: 1em;
}
.right-button-container button {
width: 100%;
font-size: 2em;
}
.bottom-bar {
display: grid;
grid-template-columns: 38.2% 61.8%;
position: relative;
height: 38.2%;
width: 100vw;
bottom: 0%;
}
.character {
grid-columns: 1/2;
position: relative;
background-image: url('character.png');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: center;
margin-left: 4%;
margin-right: 4%;
margin-top: 3em;
}
.character img {
position: absolute;
max-height: 80%;
max-width: 90%;
bottom: 0%;
margin-left: 4%;
margin-right: 4%;
}
.bottom-display {
grid-columns: 2/3;
position: relative;
height: 100%;
padding-right: 5vw;
padding-top: 1%;
padding-bottom: 3%;
}
.answers-display {
display: grid;
gap: 1%;
height: 99%;
max-height: 99%;
grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
grid-auto-rows:1fr;
height:100%;
}
.menu-display {
display: grid;
grid-auto-rows:1fr;
grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
height: 100%;
gap: 1%;
display: none;
}
.answer-button-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-button-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-button-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-button-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: none;
}
.answer-button-container {
grid-columns: 2/3;
padding-left: 5%;
height: 100%;
}
.answer-button-container button {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.menu-button-container button {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.menu-button-container {
padding-left: 5%;
height: 100%;
}
.menu-button-1 {
grid-rows: 1/2;
height: 98%;
}
.menu-button-2 {
grid-rows: 2/3;
height: 98%;
}
.menu-button-3 {
grid-rows: 3/4;
height: 99%;
}
.menu-button-4 {
grid-rows: 4/5;
height: 99%;
}
.button {
position: relative;
display: inline-block;
height: 100%;
width: 100%;
background-color: #311049; /*Button Color*/
color: #f5f5f5;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
border-radius: 20px;
text-decoration: none;
padding: 0.2em;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.button:hover:active {
transition: 0.1s;
box-shadow: 0.01em 0.02em black;
transform: translate(0.05em, 0.1em);
}
.button:hover {
box-shadow: 0.06em 0.12em black;
transform: translate(-0.01em, -0.02em);
}
.left-btn::after {
display: block;
color: #f5f5f5;
line-height: 0.5em;
content: "\2190";
}
.right-btn::after {
display: block;
color: #f5f5f5;
line-height: 0.5em;
content: "\2192";
}
const left_button = document.getElementById('left_button')
const right_button = document.getElementById('right_button')
const answer_button_1 = document.getElementById('answer_button_1')
const answer_button_2 = document.getElementById('answer_button_2')
const answer_button_3 = document.getElementById('answer_button_3')
const answer_button_4 = document.getElementById('answer_button_4')
var answer_button_dict = {
'1': answer_button_1,
'2': answer_button_2,
'3': answer_button_3,
'4': answer_button_4,
'left': left_button,
'right': right_button
}
Object.values(answer_button_dict).forEach(button => {
jQuery(button).fitText()
})
Remove your fitting script (it's not working in your JS fiddle anyway, works just on codepen), remove font-size from .left-button-container button and .right-button-container button, set .button from font-size: clamp(1rem, 3vw, 2rem); to font-size: clamp(1rem, 6vh, 3rem);
You are trying to rely on page width for button width and to rely on page height for button and its text height - just test more screen sizes and play with font-size: clamp part
I've created a full page video background homescreen for a website and am wanting to add the next section "About" below the homepage however, the about-section is stuck to the top of the site and I can't figure out why. I'd like the video background to remain fixed so it covers the entire site, I also have a sidebar that pops in with menu options so I believe I'm going wrong somewhere with the positioning of it all.
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;500;700&family=Oxygen:wght#300;400;700&family=Space+Grotesk:wght#300;400;500;700');
#import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght#300;400;500;700');
:root {
--overlay-color: rgb(105, 104, 104);
--font-secondary: 'Oxygen', sans-serif;
--font-primary: 'Space Grotesk', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active {
right: 300px;
}
.showcase header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-container {
cursor: pointer;
position: relative;
left: -40px;
}
.logo {
width: 100px;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('images/menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
right: -40px;
}
.toggle.active {
background: url('images/close.png');
filter: invert(1);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-color);
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
margin: 0 auto;
}
.text h2 {
font-size: 5.5em;
font-weight: 700;
line-height: 1.1em;
text-transform: uppercase;
text-align: center;
z-index: 10;
}
.text p {
font-size: 1.2em;
margin-top: 30px;
font-weight: 300;
max-width: 700px;
font-family: var(--font-primary);
text-align: center;
line-height: 1.5em;
width: 490px;
}
.contact-container {
position: fixed;
bottom: 30px;
text-transform: uppercase;
color: #fff;
z-index: 10;
left: 75px;
font-size: 1.03em;
letter-spacing: 2px;
}
.contact-container a {
font-family: var(--font-primary);
text-decoration: none;
color: #fff;
}
.cool-link::after {
content: '';
display: block;
width: 0;
margin-top: 2px;
height: 2px;
background: #fff;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
transition: width .3s;
}
/* SOCIAL ICONS */
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
.social-icon:hover {
transform: scale(0.5) translateY(-15px)
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
/* background-color: white;
z-index: 100; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul {
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a {
text-decoration: none;
font-size: 25px;
line-height: 2em;
color: #111;
}
.menu ul li a:hover {
color: var(--overlay-color);
}
/* HOME IMAGES */
.images {
position: absolute;
display: flex;
flex-direction: column;
}
.image1 {
position: relative;
top: 210px;
left: 220px;
}
.image1 img {
width: 170px;
opacity: .9;
}
.image2 {
position: relative;
left: 30px;
top: 235px;
}
.image2 img {
width: 300px;
opacity: .9;
}
.image3 {
position: relative;
left: 778px;
top: -255px;
}
.image3 img {
width: 300px;
height: 170px;
opacity: .9;
}
.image4 {
position: relative;
left: 995px;
top: -278px;
}
.image4 img {
width: 170px;
opacity: .9;
height: 230px;
}
/* ABOUT SECTION */
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
/* MEDIA QUERIES */
#media(max-width: 798px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 3em;
}
}
<script src="https://kit.fontawesome.com/914efae9b6.js" crossorigin="anonymous"></script>
<section class="showcase">
<header>
<div class="logo-container">
<img class="logo" src="/images/logo.png" alt="">
</div>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<video src="/images/black.mp4" muted loop autoplay></video>
<div class="text">
<h2>Back Your</h2>
<h2>creators</h2>
</div>
<div class="images">
<div class="image1">
<img src="/images/cardmapr-E4s8t8EfDu4-unsplash.jpg" alt="">
</div>
<div class="image2">
<img src="/images/aronpw-0caikkln3Ag-unsplash.jpg" alt="">
</div>
<div class="image3">
<img src="/images/image.png" alt="">
</div>
<div class="image4">
<img src="/images/joshua-rawson-harris-oEEdL2vZKJg-unsplash.jpg" alt="">
</div>
</div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
<div class="contact-container">
<a class="cool-link" href="#">Contact</a>
</div>
<!-- Scroll arrow -->
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon=""></a>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
<section id="about">
<h1>About</h1>
<p>
This is a landing page with a full screen video background. This section will be for the about page
</p>
<h2>Follow Me On Social Media</h2>
<div class="social">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-github fa-3x"></i>
<i class="fab fa-linkedin fa-3x"></i>
</div>
</section>
Thanks in advance if anyone can point out where I'm going wrong!
you can do .showcase{ position: relative} so it will look like this:
.showcase {
position: relative
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
it will fix it, if you must have show case as absolute, so you can do
#about {
position:absolute;
top:100vh;
width:100vw;
}
This is what I am trying to achieve:
This is what my code produces:
.line {
position: relative;
background-color: #f1f1f1;
width: 34%;
height: 2px;
bottom: 36px;
left: 33%;
}
How can I adjust my code to make this line responsive?
Demo: https://jsfiddle.net/kc1tbu8x/2/
Html:
<div class="wrapper">
<div class="step1">
<hr/>
</div>
<div class="step2">
<div class="step2_circles">1</div>
<div class="step2_circles">2</div>
<div class="step2_circles">3</div>
</div>
</div>
Css:
.wrapper{
width:30%;
height:40px;
display:block;
position:relative;
}
.step1{
width:98%;
z-index:-9999;
position:absolute;
top:25%;
display:block;
margin:auto;
}
.step2{
width:100%;
display:flex;
display:-webkit-flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.step2_circles{
width:40px;
height:40px;
border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
background:#ff0000;
text-align:center;
line-height:40px;
}
Demo: https://jsfiddle.net/kc1tbu8x/2/
There is another way, but the flexbox solution above I think is good.
Demo: http://codepen.io/anon/pen/XppLjW
HTML:
<div class="steps">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
CSS:
.steps {
width: 100%;
height: 80px;
max-width: 80%;
margin: 3em auto;
text-align: center;
position: relative;
}
.steps::before {
left: 0;
top: 50%;
content: '';
width: 100%;
height: 1px;
display: block;
position: absolute;
background-color: #e5e5e5;
}
.steps span {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
text-align: center;
position: absolute;
display: inline-block;
background-color: #d4d4d4;
}
.steps span:first-child {
left: 0;
}
.steps span:nth-child(2) {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.steps span:last-child {
right: 0;
}
Try, it's good example
<div class="container">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
</div>
.container {
display: flex;
justify-content: space-between;
position: relative;
}
.container:before {
content: '';
display: block;
height: 2px;
width: 100%;
position: absolute;
top: 50%;
margin-top: -1px;
background:red;
}
.container .number {
width: 20px;
height: 20px;
border-radius: 50%;
background: blue;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 10;
}
JSfiddle example https://jsfiddle.net/4j07gbrd/
.line
{
z-index:5;
position: relative;
background-color: #f1f1f1;
width: 34%;
height: 2px;
bottom: 36px;
left: 33%;
}
.yourcircle class
{
z-index:4;
}
you can add mediaqueries to mobile , because stripe can not be 33% center on mobile (whole line 90%)