This is PSD(what i wanna do):
This is HTML:
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-5 bg">
</div>
</div>
Bg class is the logo section. Help
You need to adjust your structure. You have to use container-fluid (to go full width) and use row inside container like this:
.bg {
background: red;
height: 60px;
border-radius:0 50px 50px 0;
}
.content {
border:1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5 bg">
</div>
<div class="col-6 content">
the remaining content goes here
</div>
</div>
</div>
You can try :before pseudo selector like below
.bg {
background: red;
height: 60px;
border-radius: 0 30px 30px 0;
}
.container {
max-width: 360px;
}
.bg:before {
content: "";
position: absolute;
background: red;
top: 0;
bottom: 0;
left: -1000px;
right: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-5 bg">
</div>
</div>
Remove container class to get end to end result and better you use row class
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-5 bg">
</div>
</div>
Related
I'm trying to shuffle (on button click) multiple cards that are in the same container, using only javascript. They basically need to change position every time I click the button.
My idea was to make a function that would on click set their position to absolute, with top and left 0,so they would all overlap. I've managed to do that, but I'm not sure how to proceed and what to do next.
Maybe this isn't even a good way to do it. So if there is simpler solution, feel free to share it with me.
I started learning javascript couple of months ago, so my knowledge is still pretty basic.
Any help is welcome
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>
<body>
<div class="card-container">
<div class="first-card card" data-value="1">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card card" data-value="2">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="third-card card" data-value="3">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="fourth-card card" data-value="4">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="first-card card" data-value="1">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card card" data-value="2">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="third-card card" data-value="3">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="fourth-card card" data-value="4">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
</div>
<div class="button-container">
<div>
<button class="flip-all-cards">FLIP ALL</button>
</div>
<div>
<button class="position-button">SHUFFLE CARDS</button>
</div>
</div>
<script src="memory.js"></script>
</body>
</html>
javascript
document.querySelectorAll(".first-card").forEach(container => {
container.addEventListener('click',flipCard)
})
document.querySelectorAll(".second-card").forEach(container => {
container.addEventListener('click',flipCard)
})
document.querySelectorAll(".third-card").forEach(container => {
container.addEventListener('click',flipCard)
})
function flipCard(card){
card.currentTarget.classList.toggle("flip")
}
/*-------------------------------------------------------------------------------*/
document.querySelector(".flip-all-cards").addEventListener("click",function(){
document.querySelectorAll(".card").forEach(container => {
container.classList.toggle("flip")
})
})
document.querySelector(".position-button").addEventListener("click",function(){
document.querySelectorAll('.card').forEach(card => {
card.style.position = "absolute"
card.style.top = "0"
card.style.left = "0"
})
})
css
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
padding: 100px;
}
.card-container{
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
position: relative;
height: 700px;
}
.first-card, .second-card, .third-card, .fourth-card{
width: 100px;
height: 150px;
border: 3px solid black;
border-radius: 10px;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: 10px;
}
.flip{
transform: rotateY(180deg);
}
/*
.test-div:hover {
transform: rotateY(180deg);
}*/
.front, .back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
.first-card .front{
background: lightblue;
width: 100%;
height: 100%;
}
.second-card .front{
background: red;
width: 100%;
height: 100%;
}
.third-card .front{
background:lime;
width: 100%;
height: 100%;
}
.fourth-card .front{
background:yellow;
width: 100%;
height: 100%;
}
.first-card .back,.second-card .back, .third-card .back, .fourth-card .back{
background: black;
width: 100%;
height: 100%;
}
This is the code I have so far
Instead of trying to rearrange the cards in the DOM, you may consider writing an array in your JS with all the possible colors, then changing the front color of each div with a color from that array.
You can then use a shuffle function like the one here to rearrange the order of the colors in the array.
In col-2, I am trying to center the "WHAT" text over the image.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
As we resize the browser, the row height will change so that everything in col-10 fits. I am using object-fit:contain to keep the image proportions correct. I need the "stack-Txt" div to resize with the image so that the text will stay centered over the image
Or maybe you know of a better way to achieve this?
Current Idea:
Put WHAT in another child div, make flex, center text with justify-content/align-items
&
JS addEventListener to window resize, get the img div and set nextSibling size equal to this.
These were the css classes at some point... but the only important thing is that the img doesn't overflow the col-2 or the height (which is variable based on the length of col-10)
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Note: I also have media queries to resize text, but this shouldn't make a difference.
If you are using Bootstrap 5 you can just use the built-in classes to achieve so.
Apply .position-relative to the main div parent
Apply .img-fluid to <img /> to make image responsive
Apply .position-absolute, .top-50, .start-50, translate-middle to stack-Txt to center it vertically and horizontally over the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent position-relative">
<img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
<div class="stack-Txt position-absolute top-50 start-50 translate-middle">
<div class="fourWsText stack-Txt-child text-white">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
If you don't, just edit your CSS as follow:
.stackParent {
position: relative
}
/* make image responsive */
.stack-Img {
max-width: 100%;
height: auto;
}
.stack-Txt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="https://source.unsplash.com/random">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
The text "what" is in center over the image in any screen resolution.
.stackParent{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.stack-Img{
position: absolute;
margin: 0;
min-height: 15vh;
max-height: 15vh;
}
.stack-Txt{
z-index: 99;
}
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
<div class="row">
<div class="col-lg-8">
//Content
</div>
<div class="col-lg-4">
//Content
</div>
</div>
My design is the first column is longer than the second one.
I want while scrolling if the second column data is over, I want the second column to be fixed at that time.
Look like position: sticky is what you need:
#first {
background-color: red;
height: 500px;
}
#second {
background-color: green;
height: 50px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-8" id="first">
First col
</div>
<div class="col-4" id="second">
Second col
</div>
</div>
I'm trying to create a timepicker, with the following elements:
Up buttons for the hour and time;
Two displays for next time, one for the next hour and the other for next minutes;
Two displays for current time, one for the current hour and the other for current minutes;
Two displays for the previous time, one for the previous hour and one for the previous minutes;
Down buttons for the hour and time.
I'm trying to create the idea of movement when you press any of the buttons.
This is the visual aspect I've achieved so far:
What I could not do:
To present the upper part of the numbers, on the previous time displays.
What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?
To create the visual look of my timepicker, I used the following code:
$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );
.modal-pop-up-time{
background-color: WhiteSmoke ;
cursor:pointer;
display:block;
width: 200px;
height: 150px;
position: absolute;
left: 52%;
z-index:10001;
}
.flex-container{
position: relative;
/* Other styling stuff */
width: 50px;
height: 25px;
background-color: #3498db;
}
.flex-container1{
position: relative;
display: inline-block;
/* Other styling stuff */
width: 50px;
height: 10px;
background-color: red;
}
.spinner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spinner-input-wrapper {
display: flex;
}
.spinner-input {
margin: 0 3px;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
width: 80%;
height: 100%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
width: 0;
height: 0;
border: 4px solid transparent;
}
.triangle-up {
border-bottom-width: 8px;
border-bottom-color: #555;
}
.triangle-down {
border-top-width: 8px;
border-top-color: #555;
}
.div-overflow-hide{
overflow: hidden;
}
.input-line-height{
line-height: 10% !important;
}
.input-text-center{
text-align: center !important;
}
.input-background-color{
background-color: DeepSkyBlue ;
}
.input-background-color-white{
background-color: white ;
}
.input-text-color{
color: White;
}
.div-center-element{
margin:auto;
}
.div-ml-40{
margin-left: 40% !important;
}
.div-mlr-5{
margin-right: 5% !important;
margin-left: 5% !important;
}
.div-ml-10{
margin-left: 10% !important;
}
.div-ml-5{
margin-left: 20% !important;
}
.div-tiangles-background-color{
background-color: yellow;
}
<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
<div class="spinner-input-wrapper div-ml-10">
<div class="spinner div-mt-5">
<label class="div-ml-5">HH</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up4"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
</div>
<div class= "flex-container " tabindex="2" >
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down4"></div>
</div>
</div>
<div class= "spinner div-mt-5">
<label class="div-mlr-5" >:</label>
</div>
<div class="spinner divmarginhor div-mt-5" >
<label class="div-ml-5" >MM</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up5"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
</div>
<div class= "flex-container" tabindex="2">
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
</div >
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down5"></div>
</div>
</div>
</div>
</div>
You can achieve what you want using some absolute positioning and line-height:
.timebox {
display: inline-block;
line-height: 2em;
height: 4em; /* only wants to be double the line-height */
overflow: hidden;
position: relative;
width: 2em; /* can be what you want */
}
.inner {
height: 6em; /* timebox line-height multiplied by 3 (number of numbers */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.number {
width: 2em;
text-align: center;
}
<div class="timebox">
<div class="inner">
<div class="number">
1
</div>
<div class="number">
2
</div>
<div class="number">
3
</div>
</div>
</div>
<div class="timebox">
<div class="inner">
<div class="number">
21
</div>
<div class="number">
22
</div>
<div class="number">
23
</div>
</div>
</div>
I'm in bit of a pickle here.. So I have rows of divs, think of them as mini boxes. I'm able to scroll through them within a specified width/height area. using : http://manos.malihu.gr/jquery-custom-content-scroller
Now, within one of those Div, I have more content that I'd like to scroll within that Div. And that is where the problem arises. No matter what I do, I just can't achieve it.
Here is an example skeleton:
<style type="text/css">
.rows{
margin:50px auto; width:400px; height:405px; overflow:auto;
}
.row{
background: lightblue; height: 370px; width: 320px; margin: auto;
padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
}
.column{
float:left;
}
.columns{
margin:50px auto; width:800px; height:405px;
}
</style>
<DIV id="container">
<DIV class="columns">
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
</DIV>
</DIV>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(".rows").mCustomScrollbar({
scrollButtons:{ enable:false }
});
});
</script>
====================
To clarify further, within the div class "row", I'll have lets say a long paragraph that needs to be scrolled within that box.
Thanks
======================
JS/CSS links:
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mousewheel.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.css