So,I don't know how to make divs overlap eachother in such a way and I'm curious to find out if it's even possible. If it is, is it also possible to make something like that responsive too, using bootstrap or some other library? If yes, wouldn't it be needed for the divs to completely change configuration so the content still makes sense? (like in the pic below)
If something like that can't happen (referring to the responsiveness) is there a way to make the entire thing disappear and show something else instead?
This might give you somewhere to start?
You'll need to use a combination of #media queries and flex.
Look into #media queries here: CSS #media Rule
Look into flex box here: A Complete Guide to Flexbox
This code might be of some help! (Resize the output window to see the results)
See here: JSFiddle
.panel-container {
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.panel {
}
.col {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#a1 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#a2 {
background-color: blue;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#a3 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b1 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b2 {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#b3 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column;
}
.col {
display: flex;
flex-direction: column;
}
}
<div class="container">
<div class="col">
<div id="a1">A1</div>
<div id="a2">A2</div>
<div id="a3">A3</div>
</div>
<div class="col">
<div id="b1">B1</div>
<div id="b2">B2</div>
<div id="b3">B3</div>
</div>
</div>
<div class="panel-container">
<div id="lhs" class="panel"></div>
<div id="rhs" class="panel"></div>
</div>
its possible. use CSS flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
youll want to switch the flex direction of the container element with a css media query and so on... this is a more html/css related problem than javascript
Related
I want to align two images and a DIV. The DIV thats a rounded box keeps ending up beneath the two images.
Here's my HTML/CSS:
.main {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 600px;
height: 110px;
}
.one {
float: right;
height: 100px;
}
.two {
height: 100px;
}
.box {
position: absolute;
height: 50px;
width: 50px;
}
.rounded {
border-radius: 10px;
border-color: #FFF;
border: 5px solid white;
}
<div id="main" class="main">
<div id="one" class="one">
</div>
<div id="two" class="two"><img src="[![apple][1]][1]" width="100" height="76" /> <img src="[![titleofpage][1]][1]" width="309" height="61" />
<div class="box rounded"></div>
</div>
</div>
How can I align them all in a straight line in this centered DIV in the middle of the page?
You can try out flexbox:
.flex-container-center {
display: flex;
align-items: center; /* this is what you need :) */
justify-content: center;
}
<div class="flex-container-center">
<img src="https://via.placeholder.com/200x200" />
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/200x50" />
</div>
Also, here's a working example and my favorite guide on flexbox :)
Add display: flex and justify-content: center to .two class;
.two {
display: flex;
justify-content: center;
height: 100px;
}
When using display: flex, there is a main-axis and cross-axis and you can set the main axis with flex-direction: row or flex-direction: column. The default is flex-direction: row without calling it. This means in the above example the main-axis = row and cross-axis = column.
When centering items using flex box you have two options:
align-items: center
justify-content: center
align-items controls the cross axis and justify-content controls the main axis.
In your example the main axis is row because the flex-direction wasn't called, so it used the default row. To center the items on the horizontal axis, you have to use justify-content, which uses the main axis (flex-direction) --> row
I tweaked the CSS to use grid view, removed the absolute positions and floats. Added borders so I could see things :)
.main{
position: block;
margin: 0 auto;
width: 600px;
height: 110px;
}
.one {
border: 5px solid blue;
height: 100px;
}
.two {
display: grid;
grid-template-columns: repeat(3, 30%);
height: 100px;
border: 5px solid yellow;
}
.box {
height:50px;
width:50px;
}
.rounded {
border-radius: 10px;
border-color:#FFF;
border: 5px solid red;
}
I need to display video and when user presses menu, I need to divide the screen to 2 halves vertically (adjacent to each other) and I need to display a text in middle (horizontally and vertically) of first half and need to display a list (which will be created dynamically using javascript) in the second half (all this should happen while video is being played in the background. Basically menu should be transparent). I created a parent div and 2 child divs with flex as below.
html code:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='js/index.js'>
</script>
<style>
html, body
{
height:100%
}
#vid
{
position: fixed;
top: 50%; left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
#mid {
display: flex;
height: 100vmin;
justify-content: stretch;
flex-flow: row nowrap;
background: blueviolet;
z-index: 2;
}
#mid1, #mid2 {
flex: 1;
}
#mid1 {
display: flex;
justify-content: center;
align-items: center;
background: red;
text-align: center;
}
#mid2 {
display: flex;
justify-content: center;
align-items: center;
background: blue;
text-align: center;
}
</style>
</head>
<body>
<!--<video id='vid' src='textMotion.mp4' autoplay loop></video>-->
<div id='mid' style="display:none">
<!--<div id='mid'>-->
<div id='mid1'>
<h2>text1</h2>
</div>
<div id='mid2'>
<h2>text2</h2>
</div>
</div>
</body>
</html>
Javascript Code:
function changeChannel(e) {
console.log('received keyEvent : ' + e.keyCode);
let keyCode = e.keyCode;
if(keyCode == 77) {
document.getElementById('mid').style.display = 'block';
}
}
document.addEventListener('keydown', changeChannel);
I am facing below problems.
1) If I press 'M', menu is not getting displayed. It should display transparent screen (with strings in 2 divs) while video running in background.
2) For testing purposes, I commented video element. Then if I press 'M', 2 divs are getting displayed horizontally at the top.
Only if I don't add the attribute "display=none" to mid, it is working as expected. Can any one please help me to fix this issue.
You're setting #mid back to display:block instead to the desired display: flex... Instead:
create a CSS class .hidden {display: none;} and assign it to your #mid element
in JS use Element.classList and it's .toggle() method to toggle that 'hidden' class
Set #vid to z-inedx: -1 since it should be in the background while your #mid has no position set.
var EL_mid = document.getElementById('mid')
function changeChannel(e) {
if (e.key === 'm') {
EL_mid.classList.toggle("hidden");
}
}
document.addEventListener('keydown', changeChannel);
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
#vid {
position: fixed;
top: 50%;
left: 50%;
z-index: -1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
#mid {
display: flex;
height: 100vmin;
justify-content: stretch;
flex-flow: row nowrap;
background: blueviolet;
z-index: 2;
}
#mid.hidden {
display: none;
}
#mid1,
#mid2 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: red;
text-align: center;
}
#mid1 {background: red;}
#mid2 {background: blue;}
<video id='vid' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' autoplay loop></video>
<div id='mid' class="hidden">
<div id='mid1'>
<h2>text1</h2>
</div>
<div id='mid2'>
<h2>text2</h2>
</div>
</div>
Ok here it is, if you're using jquery you can just toggle between display: hidden and display: block or you can add a class .hidden that just have this rule: display: hidden and toggle onclick if the element has it or not as #RokoCBuljan said.
html,body {
width: 100%;
height: 100%;
}
#vid {
display: block;
position: fixed;
bottom: 12%; left: 30%;
background: slateblue;
height: 300px;
width: 360px;
}
#mid {
display: flex;
z-index: 1;
height: 100vmin;
justify-content: stretch;
flex-flow: row nowrap;
background: blueviolet;
}
#mid1, #mid2 {
flex: 1;
}
#mid1 {
display: flex;
justify-content: center;
align-items: center;
background: red;
text-align: center;
}
#mid2 {
display: flex;
justify-content: center;
align-items: center;
background: blue;
text-align: center;
}
With the propertie position: fixed; I'm getting the div outside of the normal flow and the z-index is just to be sure that it will be placed on top of the other divs... If you want to add a nicer appearance add the property (with the toggle function you have to create) of opacity: 1; and opacity: 0; so it will fade in and fade out
working pen: https://codepen.io/manAbl/pen/WJqRKR?editors=0100 ;
Hope helps :)
So I can't figure this out.
I'm trying to get a red vertical box to display in middle of page. I've set the div's margin to auto.
And then there's another div that holds a centered text.
Setting margin auto on both.
They are both stacking on top of eachother fine in middle of page.
However I want it to be responsive to all heights. Right now it's just responsive to the x-axis and not the height.
HTML & CSS:
.parentDiv {
position: relative;
width: 250px;
height: 450px;
margin: auto;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
#CSText {
position: absolute;
top: 45%;
width: 250px;
color: black;
text-align: center;
}
<div class="parentDiv" style="margin-top: auto;">
<div id="CSText" class="TextAlignCenter">
</div>
<div id="RedBox">
</div>
</div>
flexbox would be a great solution to this:
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.red-box {
background-color: red;
padding: 100px;
color: white;
}
<div class="container">
<div class="red-box">text</div>
</div>
I did this for you.
https://jsfiddle.net/95ssv6q1/
HTML
<div class="parentDiv">
<div class="inner">
<div id="RedBox">
</div>
</div>
</div>
CSS
.parentDiv {
display:table;
width: 100%;
height: 100%;
position: absolute;
}
.inner{
display: table-cell;
vertical-align:middle;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
I wrote a code where side menu will be displayed after clicking the menu image. Its code is as given here. I'm using jQuery for this:
$(document).ready(function () {
$('#logoDiv, #pageTitle').click(function () {
if (!$("#searchMenu").is(':visible')) {
$('#searchMenu').show('slide', 'left', 300);
} else {
$('#searchMenu').hide('slide', 'left', 300);
}
});
}
But searchMenu which is a side menu isn't showing up when clicked on menu image. How can I fix it?
you missing ) in end of ready function
You need to insert jquery ui for easing effects
Just try this.,!
$('#logoDiv, #pageTitle').click(function () {
if (!$("#searchMenu").is(':visible')) {
$('#searchMenu').show('slide', 'left', 300);
} else {
$('#searchMenu').hide('slide', 'left', 300);
}
});
#logoDiv {
width: 52px;
float: left;
padding-top: 1.5%;
padding-left: 4%;
color: white;
background-color: #FFA500;
height: 50px;
display: flex;
flex-flow: column;
justify-content: center;
}
#pageLogo {
display: block;
flex-flow: column nowrap;
height: 67%;
justify-content: center;
width: 14%;
}
#pageTitle {
background-color: #FFA500;
height: 50px;
padding-top: 1%;
display: flex;
flex-flow: column;
justify-content: center;
padding-right: 22%;
}
#inheader {
font-size: 24px;
color: #fff;
}
.mainDiv {
width: 100%;
justify-content: center;
padding: 1%;
}
#user {
/*display: flex;
flex-flow: column;
justify-content: center;*/
color: #fff;
text-align: center;
font-size: 18px;
}
#searchMenu {
position: absolute;
top: 9%;
z-index: 10;
display: none;
height: 80%;
overflow-y: auto;
padding: 0px;
min-width: 250px;
background-color: transparent;
}
#searchMenu >.list-group >.list-group-item {
float: none;
min-width: 150px;
background-color: #201423;
;
border: 1px solid #CCC;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="headDiv" role="banner">
<div id="logoDiv"> <span id="pageLogo"><img src="images/index_menu_active_phone.png" id="logo"></span>
</div>
<div id="pageTitle" class="container-fluid">
<div class="center-block">
<img src="images/cart.png" class="img-rounded" alt="I" width="30" height="30" /> <span style="font-family: 'customfont';" id="inheader">Instore</span>
</div>
</div>
</div>
<div class="container mainDiv">
<div id="searchMenu" class="col-xs-4">Helloiudhfskjdzgfsiukydhfsiuejhgfsiudjh</div>
</div>
I hope this will help you :)
The end of your jQuery function is wrong.
See Working Jsfiddle
Code:
$(document).ready(function () {
$('#logoDiv, #pageTitle').click(function () {
if (!$("#searchMenu").is(':visible')) {
$('#searchMenu').show('slide', 'left', 300);
} else {
$('#searchMenu').hide('slide', 'left', 300);
}
});
});
Your code is right. Just include jQuery UI library. To show the sliding and other effects you need jQuery UI Library.
//code.jquery.com/ui/1.11.4/jquery-ui.js
here is working Fiddle with your code.(You have missed bracket in your fiddle)
Working Fiddle
This plugin extends jQuery's built-in .show() method. If jQuery UI library is not loaded, calling the .show() method may not fail directly, as the method still exists. However, the expected behavior will not occur. Same is the case for .hide() method.
How do many of these websites like facebook, twitter and even stack exchange get their navbar to automatically be the size of the desktop/laptop screen width, I know they are not using width: 100%, hence a navbar resizing would take place. What technology are they using? is it media queries? or some javascript function that gets the screen width then apply that as the navbar width.
Try this code it behaves exactly like stackoverflow nav-bar.
body {
text-align: center;
}
#navbar {
height: 30px;
width: 100%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 800px;
height: inherit;
position: relative;
text-align: center;
background-color: red;
}
#right {
width: 49%;
text-align: right;
display: inline-block;
height: 30px;
}
#left {
width: 49%;
text-align: left;
display: inline-block;
height: 30px;
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</center>
</div>