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
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.
After adding a position: fixed; to my header everything was in front of my header because they were using a position: absolute or position: relative I deleted them, and problem solved but now I want to change the position of price since I can not use a relative or absolute position because of this:
in this image price uses a relative position and header uses a fixed position but price is infront of the header so i decided to delete the position from price:
How can I change the position of price in the following code? For example I want to put it in bottom right without setting a position: absolute or position: relative.
Or if there is a better solution that can help me to put my content behind the fixed header without deleting the position property of contents what is it?
.header {
width: 100%;
height: 200px;
position: fixed;
background-color: darkcyan;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
}
body {
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer {
background: darkslateblue;
margin-top: 100px;
height: 100px;
margin-right: 0px;
width: 100%;
}
.card {
max-width: 400px;
margin: auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size: 22px;
border-radius: 3px;
width: 131px;
padding: 5px;
}
.card button {
border: none;
color: white;
background-color: #000;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size: 20px;
}
.card img {
height: 300px;
width: 300px;
}
}
#media (max-width: 1319px) {
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
<head>
<!-- <link rel="stylesheet" href="{% static 'main.css' %}"> -->
<div class="header">
<h1>header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
<!-- {% for i in p%} -->
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
<!-- {%endfor%} -->
</div>
<div class="footer">
<h1>hello</h1>
</div>
</body>
Add a z-index property in the header class.
.header{
width: 100%;
height: 200px;
position: fixed;
background-color: darkcyan;
top: 0;
left: 0;
right: 0;
z-index: 100;
margin-top: 0;
margin-right: 0;
}
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>
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
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%)