How to get exact width of flexbox by getComputedStyle? - javascript

I have a problem to get exact width of flexbox after rendering contents.
I am working on a Windows 8 application (mean ie10 specific).
Here is the code:
[HTML]
<html>
<head>
<title>flexbox test</title>
</head>
<body>
<div class='container'>
<div class='viewport'>
<div class='canvas'>
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="item"> J </div>
</div>
</div>
</div>
<hr style="width: 600px; text-align: left;">
<div class="outbox"></div>
<script>tester();</script>
</body>
</html>​
[CSS]
.container {
width: 400px;
height: 200px;
border: 1px solid black;
}
.container .viewport {
width: inherit;
height: inherit;
position: absolute;
overflow: auto;
}
.container .viewport .canvas{
display: -ms-flexbox;
-ms-flex: 0 0 auto;
-ms-flex-pack: start;
-ms-flex-flow: row none;
-ms-flex-align: start;
-ms-flex-item-align: start;
-ms-flex-line-pack: start;
position: relative;
}
.container .viewport .canvas .item {
width: 100px; height: 100px;color: #fff;
background-color: black;
margin: 10px;
}
[JAVASCRIPT]
(function tester(){
var canvas = document.querySelector('.canvas');
var style = document.defaultView.getComputedStyle(canvas, null);
function addToOutbox(str){
var outbox = document.querySelector('.outbox');
outbox.innerText = 'Width: ' + str;
}
addToOutbox(style.width);
})();
I was expecting width to be something else as there is a scroll bar.
Outer container width is 400px, middle one is inheriting width and height with overflow: auto and inner most is expandable.
There are eight items in flexbox with width and height 100px each. So I was expecting the flexbox width abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) but still getting 400px only which is parent dimensions. Am I missing something?
Here is the link to JS Fiddle: http://jsfiddle.net/pdMSR/ [Open with ie10 only]

The element really is 400px. The flex items that are positioned past 400px are actually overflowing.
It sounds like what you are really trying to get is the scrollWidth. If you pass in canvas.scrollWidth to your addToOutbox function you'll get what you are looking for.

Related

Slider loop with backgroud image

I have a container and within it 5 (or more) items (divs) with another 2 child divs, the second (child) div has a background image (declared as inline-style "background" property). Now, I want an infinite cycle/loop of all this images (items with backgroud images) to work, after one iteration the first one become second, second third... fifth become first etc, with some interval.
I was trying some javascript and jquery with no success, is there a way how to do that? Thank you so much for help.
The code is:
<style type="text/css">
.container {
position: relative;
width: 100%;
display: -webkit-box;
display: flex;
}
.container .img {
position: relative;
width: 240px;
height: 240px;
}
.container .img div {
position: relative;
background-size: cover;
background-position: center;
width: 240px;
height: 240px;
opacity: 0.9;
cursor: pointer;
}
.container .img div:hover {
opacity: 1;
}
</style>
<div id="s" class="container">
<div class="img">
<div style="background: url(https://picsum.photos/id/271/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/221/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/101/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/22/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/11/240)"></div>
</div>
</div>
setInterval(function(){
$i=$(document).find('.container .img:nth-child(1)');
$i.clone().appendTo( ".container" );
$i.remove()}, 5000);

Sticky footer when Page is larger than screen height

I'm working on a project with a sidebar and in that side bar there i's like to have a sticky foot. The problem is the side bar scales to the height to the main page content. So if the main page content is bigger than the screen height, you end up with a big space under the footer if you scroll down the page.
I'd like the footer to stay at the bottom of the screen.
Hopefully my description makes sense.
.sidebar {
height: 100%;
}
.card{
display: flex;
flex-direction: column;
min-height: 90vh;
}
.card-body{
flex: 1;
}
.footer{
}
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
I would recommend flexbox and the vh CSS measurement.
This example will have the footer stuck to the bottom of the viewport, but will also allow the .sidebar to grow larger than the window height if required. So the .footer will be stuck to the bottom with small content in the .card and will move downwards (requiring scrolling to see) if the content in .card gets bigger.
body {
margin: 0;
padding: 0;
}
.sidebar {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.card {
flex-grow: 1;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
If you really want the .footer stuck to the bottom, even with a lot of contents in the .card, then you could try position: fixed. I've added more content in the .card here so that you can more easily see what happens when it is larger than the body (the body & card content scroll, but .footer is always stuck to the bottom of the viewport).
.card {
/*
.footer is out of the document flow,
so make sure to leave enough space
for it at the bottom of .card
*/
margin-bottom: 1.6em;
}
.footer {
/*
here's the magic, fixed position
at the bottom of the screen
*/
position: fixed;
bottom: 0;
/*
without a bg-color, this will get
messed up with overflowing .card
content
*/
background-color: white;
height: 1.6em;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
check this example. it works css-tricks
html for this
<div class="content">
<div class="content-inside">
<h1>Sticky Footer with Negative Margin 2</h1>
<p><button id="add">Add Content</button></p>
</div>
</div>
<footer class="footer">
Footer
</footer>
css for this
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}

How to make sure Text always stays on top of Image (even when resizing)?

SITUATION:
I have the following result for my Website:
PROBLEM:
I would like to add content on top of the iPad image so that the content is always "inside" the iPad's screen (even when resizing the window).
QUESTION:
How can achieve that ? I googled for solutions, none helped me. Is there some property to make a div snap to an image ?
CODE:
HTML:
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
<img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
</div>
</div>
</section>
CSS:
section {
height: 100vh;
overflow: hidden;
padding: 0%;
}
.rightPage {
margin-top: 0%;
height: 100vh;
width: 50vh;
}
img {
max-width: 100%;
max-height: 95%;
display: block;
margin-top: 2.5%;
margin-bottom: 2.5%;
margin-left: 0;
}
From what I understood you whant the text inside the iPad image. If that is the case try to set you'r image as background-image :
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
Some Text ...
</div>
</div>
</section>
CSS.
.rightPage {
background-image: url("Vendors/Images/iPadContact.png");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
max-width: 517px;
}
Add the right image width to max-width

How to make two sides equal height? One big div and some small divs

I have news section and on the left side of it there is one big div (main-article) on the right side some (4) small divs (sub articles). I need to make them equal dynamically (both sides should be visually equal):
I tried to make by jQuery and I partially achieved it, but with a really big bug. If the left side is too small, the right side articles will be too small and their text will overflow the containers:
Here is the HTML:
<div class="row">
<div class="col-md-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<!-- this four times -->
<div class="col-lg-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
<!-- this four times end -->
</div>
</div>
</div>
My jQuery attempts
// news section fix height
// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);
// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)
// 25 is the margin (i know it, but ofcourse it can be set from DOM)
var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;
//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);
The result is ok BUT it's not responsive and it's a bug if the left side is too small.
try this, this may help to you.if this is not the case tell me.copy,paste , run and check is this what you want.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
div.main{
width: 98%;
margin: 1%;
margin-top: 5%;
border:1px solid red;
height: 600px;
}
div.main div{
float: left;
}
div.mainone{
width: 45%;
height: 90%;
border:1px solid orange;
margin: 2.5%;
}
div.maintwo{
height: 90%;
width: 45%;
border:1px solid green;
margin: 2%;
margin-top: 2.5%;
}
div.maintwo div{
width: 40%;
height: 40%;
border: 1px solid blue;
margin: 4.5%;
}
div.description{
width: 100%;
height: 59%;
background-color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="mainone">
<img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
<div class="description"></div>
</div>
<div class="maintwo">
<div class="subone"></div>
<div class="subtwo"></div>
<div class="subthree"></div>
<div class="subfour"></div>
</div>
</div>
</body>
</html>

Center images inside 2 columns of a section

Code is right now:
HTML:
<section class="sponsorSection">
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/logo4.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/logo5.jpg" class="sponsorpicture1"/>
</div>
</div>
</section>
CSS:
.sponsorSection{
width: 480px;
margin-top:30px;
border:2px solid rgba(0, 0, 0, .2);
border-radius: 5px;
}
.sponsorImageRow{
height: 50px;
}
.sponsorImageColumn{
width : 50% ;
display: inline;
}
.sponsorpicture1{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
.sponsorpicture2{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
Though it does not look correct:
I'm not sure, if I understood your requested positioning correctly, but if I look at your code, you want your image to be horizontal centered? Since image is an inline element per default the margin:0 auto will not be considered. Try something like this:
/* keep it as a block element, not inline */
.sponsorImageColumn {
width : 50% ;
float:left;
display: block;
}
/* and image also as a block element */
.sponsorSection img {
display:block;
}
I put together a small fiddle to demonstrate.
For more complex positioning you could have a look at the css-syntax display: table, table-row and so on, to emulate a classic table with other html elements.
Make the following change to your CSS -
.sponsorImageColumn{
width : 50% ;
float : left; /*remove display property and use float as you want to set the width*/
}
hope this solves your query

Categories