My sandbox on JSFIDDLE
When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.
In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.
[]
I'm testing this function before I deploy it on my website.
jQuery -
$(".openit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
HTML -
<div class="wrapper">
<div class="back">BG
<div class="expandBG">
<div class="openit">OPEN</div>
<div class="flex-col">
<div class="closeit">CLOSE</div>
<div class="content text" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
</div>
</div>
</div>
CSS -
body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}
It's because of the div with a class name back. increase the width of that div to 100% when opneit is clicked and then back to its original size when closeit is clicked.
// add this to your CSS file
.w-full {
width: 100%
}
then include these two lines in your javaScript file
$(".openit").on("click", function() {
$(".back").addClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".back").removeClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
Related
I am using the jquery-resize plugin with two DIV panels.
I have forked the codepen to demonstrate the problem.
The table contained in the left panel is not resized with the parent, even though the size is set to 100%.
/*THE TABLE WIDTH SHOULD BE 100% OF THE PARENT.*/
table {
width: 80%
}
.page-container {
margin: 20px;
}
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
/* avoid browser level touch actions */
xtouch-action: none;
}
.panel-left {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
<div class="panel-container">
<div class="panel-left">
<table>
<tr>
<td>...</td>
</tr>
</table>
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
</div>
I've got a header on my webpage that changes height based on the viewport (eg. 15vh) and has a min-height of 50px.
I'd like to make a colored square within this header that is always exactly 50% of the height of the header regardless of the user's viewport. There will be no content in the colored box. It is for style purposes only. I know that I can't use height: 15%; as there is no content in the container and, as a result, nothing will be displayed. I can't define the box in terms of viewport units because the header isn't always 15% of the height of the viewport (due to the min-height assignment).
Is there any way to accomplish this with CSS?
Here's my setup:
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
float: left;
height: 50%;
background-color: black;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* #end */
<div class="header clearfix">
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
<div class="box">
<img src="http://www.bluebean.ca/grey.jpg">
</div>
</div>
You can do this with absolute positioning. Like this :
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
position: relative;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
z-index:10;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
position:absolute;
top:0;
left:0;
height: 50%;
background-color: black;
width: 100%;
}
<div class="header clearfix">
<div class="box"></div>
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
</div>
You will also need to set z-index value greater than that of box to keep box below elements in header.
It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.
Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
}
.miniBioSegment {
display: inline;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>
You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
display:inline-block;
}
.miniBioSegment{
display: inline-block;
width: calc(33% - 2px);
vertical-align:middle;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>
CSS should target the ID's and use float:left. See example
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
float:left;
max-width: 33%;
height: 100px;
}
#miniBio {
float:left;
margin-right: 5px;
width: 33%;
}
#miniQuote {
float:left;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
I'm asking myself, why do you have position:absolute;?
To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.
Remove the position, and try adding the last two lines.
See example here: http://sandbox.clickadelic.de/demos/lineup.html
With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.
And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.
Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.
In your example, there are 3 divs, if you want them to be equal width, you can do:
.profile {
font-size: 0; /*remove whitespace*/
background: silver;
}
.miniBioSegment {
font-size: 16px; /*reset font-size*/
display: inline-block;
vertical-align: top; /*vertical alignment*/
width: 33.3333%;
}
However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:
1. Inline block
jsFiddle
.profile {
font-size: 0;
background: silver;
}
.miniBioSegment {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
2. Float
jsFiddle
.profile {
background: silver;
}
.profile:after {
content: "";
display: table;
clear: both;
}
.miniBioSegment {
float: left;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
3. CSS table
jsFiddle
.profile {
background: silver;
display: table;
border-collapse: collapse;
width: 100%;
}
.miniBioSegment {
display: table-cell;
vertical-align: top;
border: 1px dotted red;
}
#miniBio, #miniQuote {
width: 50%;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
4. Flexbox
jsFiddle
.profile {
background: silver;
display: flex;
}
.miniBioSegment {
border: 1px dotted red;
}
#miniBio, #miniQuote {
flex: 1;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
I am trying to center these boxes in the middle of the screen both horizontally and vertically. Another question is how can I make it where it re-sizes automatically when I scale my page?
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
}
.home-link{
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link{
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link{
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link{
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link{
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Neiko Anglin | Front-End Develper </title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome Stylesheet -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
</body>
</html>
You can use absolute positioning on the container to center vertically and horizontally:
/*-------------------------
Simple reset
--------------------------*/
* {
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: absolute;
background: white;
height: 84px;
width: 60%;
margin: auto;
padding: 20px;
overflow: auto;
top:0;
right:0;
bottom:0;
left:0;
}
.home-link {
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
To align vertically you need a wrapper class with position absolute in CSS. Search for vertical center which will fetch you lots of results.
To resize boxes along with screen resize - is responsive template. I could suggest you to use Twitter Bootstrap which takes care of your dimensions.
Change your .nav-color class to
.nav-colors{
position: fixed;
background: white;
height: 80px;
width:60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top:50%;
left:20%;
}
/*-------------------------
Simple reset
--------------------------*/
* {
margin: 0;
padding: 0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: fixed;
background: white;
height: 80px;
width: 60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top: 50%;
left: 20%;
}
.home-link {
background-color: #00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color: #ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color: #53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color: #f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color: #df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
You just have to add some properties to your .nav-colors:
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
line-height: 200px;
text-align: center;
}
And add vertical-align: middle; to elements you want to center vertically.
First the explanation, then some code.
Vertical centering is a classic css issue. The vh unit has come in very handy for this recently. Coupled with margin (and maybe calc) its now a solvable thing.
Centering it horizontally is simple enough, and you have that figured out. Just have a width and set margin: 0 auto and you are good to go.
With Vertical Centering the key thing to remember is you are centering your element, so half is over the middle, half is under the middle. With that we can make margin: calc(50vh-40px) auto 0 for your 80px high element and presto, it's in the middle vertically.
One step further:
Like horizontal centering, you seem to already have the dynamic width down by using %.
For a dynamic vertical size we can again turn to vh. The nice thing is this saves us the css calc function. Just subtract half the height from the 50vh margin and you'll get your margin. So for height: 20vh the margin is margin: 40vh auto 0
Here is a JsFiddle
and here is some code:
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
width: 100vw;
height: 100vh;
}
.nav-colors{
width: 80%;
height: 20vh;
margin: calc(40vh) auto 0;
}
.nav-colors div{
width: 18%;
margin: 0 0 0 1%;
height: 100%;
display: inline-block;
}
.home-link{background-color:#00c08b;}
.portfolio-link{background-color:#ea5080;}
.social-link{background-color:#53bfe2;}
.contact-link{background-color:#f8c54d;}
.blog-link{background-color:#df6dc2;}
HTML:
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
enjoy.
I am trying to implement something like this http://www.jamieoliver.com (slider -> arrow on hover)
I have done this much http://jsfiddle.net/PXLJG/5/ In the jsfiddle script? The arrow must be stand. The div.class=content 'Text next article' must be slide to left next to the arrow.
$('.holdingbox').hover(function () {
$('.rightbox').stop().animate({
width : '120px'
}, 400)
}, function () {
$('.rightbox').stop().animate({
width : '-0'
}, 400)
});
HTML:
<div class="holdingbox">
<a href="#">
<div class="margined">
<div class="rightbox">
<div class="content"><p>Következő cikk</p></div>
</div>
<div class="leftbox"> > </div>
</div>
</a>
</div>
CSS:
div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: absolute;
display: inline-block;
height: 36px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.holdingbox a {
text-decoration: none;
color: #FFF;
display: block;
}
.leftbox img {
margin: 0 auto;
margin-top: 10px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 50px;
vertical-align: top;
margin-right: 0;
}
.rightbox a {
text-decoration: none;
color: #FFF;
}
.content {
width: 120px;
position: absolute;
background-color: #ac193d;
height: 38px;
text-align: center;
left: 0;
top: 0;
right: 0;
color: #FFF;
}
.content p {
margin-top: 8px;
}
just add position: absolute; right: 0; in .rightbox class.
.rightbox {
display: inline-block;
height: 50px;
margin-right: 0;
overflow: hidden;
position: absolute;
right: 0;
vertical-align: top;
width: 0;
}
Working here - http://jsfiddle.net/PXLJG/7/
I tried to fix up the code you've already got but it needed some major rehauling so I've just re-done it all.
JSFiddle: http://jsfiddle.net/t2z9Q/
CSS
.container {
width: 120px;
position: relative;
overflow: hidden;
color: white;
}
.container .content {
width: 100px;
overflow: hidden;
position: absolute;
left: 120px;
float:left;
z-index: 99;
background: #ac193d;
}
.container .arrow {
float: right;
width: 20px;
position: relative;
color: black;
z-index: 100;
background: #ac193d;
}
JS
$('.arrow').hover(function() {
$('.container .content').stop().animate({left: '0'}, 400)
}, function() {
$('.container .content').stop().animate({left: '120px'}, 400)
});
HTML
<div class="container">
<div class="content">Next Article</div>
<div class="arrow">></div>
</div>
This way you lose a lot of the jargon html & css that isn't really required but still get the same effect.
You are applying inline-block style on all divs. Please revert to normal display of block.
div{
display: block;
}
or just remove it as the default display is block
http://jsfiddle.net/PXLJG/8/
That should solve your core issue.
Now if you want to show the arrow to the left of the text div, remove absolute position on the arrow.
Now you will be having a whitespace between the inline-block elements, that is the arrow and the text. To remove it easily remove the whitespace between those two div in HTML
http://jsfiddle.net/PXLJG/18/
For something exactly like as in the website, you can try positioning both arrow and text using absolute positioning and anchoring them with their right property.
This way, as the width increases it will expand from right to left.
http://jsfiddle.net/PXLJG/20/