Css background arrow percentage width - javascript

I have a box with a "cool" looking triangle background (covers 50% of the box). I solved for any fixed width but forgot that on mobile the width is not fixed anymore, making my solutions to fail on mobile devices.
To create the background, I use border technique setting each side of the border to half of the height/width, but, borders cant be in percentage (%).
How can I possibly achieve that?
Below is my code:
.outer {
width: 100%;
height: 300px
}
.background-triangle {
bottom: 0;
right: 0;
height: 0;
width: 0;
border-right: 250px solid rgba(0,0,0,.1); /* half width */
border-bottom: 150px solid rgba(0,0,0,.1);/*half height*/
border-left: 250px solid transparent;/*half width*/
border-top: 150px solid transparent; /* half height*/
}
.box-color {
position: relative;
background-color: #6699cc;
}
and a very straightforward html
<div class="outer">
<a href="/#">
<div class="box-color" style="">
<div class="background-triangle"></div>
</div>
</a>
</div>
I would prefer a non-javascript option if possbile. I guess I could set the width when the window size changes.
Edit: What I want to achieve is to make the black background triangle stretch the full width of its containing element. Try resizing the jsfiddle window and see how the triangle has a fixed width. It does not follow the containing "blueish" box width change. I hope this clears the question up.
And a jsfiddle link

Use linear background instead of traditional triangle generation technique. Check this solution at this updated jsFiddle:
https://jsfiddle.net/ashekthegreat/kmmg9L01/6/
.background-triangle {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: linear-gradient(to right bottom, transparent 50%, rgba(0, 0, 0, .1) 50%)
}

Related

How was this css effect achieved?

I ran into two different website few days back, which was a responsive site but images had different css rules. I'm not sure if only css was used or some javascript. For example in responsive sites, when a window is made small, the images also turns small, so does the text and with different break points size of text can be manipulated.
1) What I saw was on the first website, the height of the image remained the same but the image within it shrunk when the screen was made small. I can compare this to a camera's zoom in and zoom out effect. When the window was made small, the image zoomed out. when the window size was made big, the image zoomed in (all the while height remained the same).
2) On the second website, I noticed that when the screen was made small, the image(100% width) slid to the left of the screen, but the height remained the same.
Two different websites:
Wondering how this was done?
What you are describing is simply images with fluid-height and fixed-height.
In the first example image is set to max-width: 100% and height: auto which resizes according to screen size.
In the second example there is a container div with max-width: 100% and overflow: auto which simple does not allow the image surpass window size and you have an image with fixed height.
Fluid height:
.fluid-height{
max-width: 100%:
height: auto;
width: 100%;
}
<p>Fluid width and height</p>
<img class="fluid-height" src="https://images.unsplash.com/photo-1491308056676-205b7c9a7dc1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a4dc6385e23451fd8aa3458688757100&auto=format&fit=crop&w=4506&q=80">
Fixed height:
div{
max-width: 100%;
overflow: hidden;
}
img{
height: 500px;
}
<p>Fixed height</p>
<div>
<img class="fixed-height" src="https://images.unsplash.com/photo-1522206052224-9c5ad951dd74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6276d94baf7d9a4b6962be8d9e8aeb4b&auto=format&fit=crop&w=8100&q=80">
</div>
Responsive scaling on websites
Right side image scales with the div that surrounds it.
|container
--|image
|end container
Setting width:50%; on the image makes it take up 50% of the container.
The container scales with the viewPort or window.
The container has display: inline-block; so that other elements can fit next to it.
Example:
red element is the container,
blue represents the window.
Javascript is only there to scale the blue window on button press.
document.addEventListener("DOMContentLoaded", function() {
let counter = 1;
let button = document.getElementById("scale");
let tmpWindow = document.getElementById("pretend");
button.addEventListener("click", function(e) {
counter++;
var nextWidth = parseInt(tmpWindow.style.width) - (10 * counter);
tmpWindow.style.width = nextWidth + "px";
});
});
.test-window {
/*width: 700px;*/
border: 5px solid blue;
}
.container-right {
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 50%;
height: 100%;
line-height: 0;
}
.container-right img {
width: 100%;
}
.container-left {
display: inline-block;
width: 200px;
border: 5px solid black;
}
<div>
<button id="scale">Shrink window size</button>
</div>
<div id="pretend" class="test-window" style="width:700px;">
<div class="container-right">
<img id="img-right" src="https://lorempixel.com/200/200/" />
</div>
<div class="container-left">
<p>Dante, astray in a wood, reaches the foot of a hill which he begins to ascend; he is hindered by three beasts; he turns back and is met by Virgil, who proposes to guide him into the eternal world. Midway upon the road of our life I found myself within
a dark wood, for the right way had been missed. </p>
</div>
</div>
figured this out:
.somediv {
background-image: url("baloon.jpeg");
background-size: cover;
background-position: center;
}

Make an image with a percentage width a perfect square using css

Hello I have an image in a container that is set to width: 100%.
I was wondering if there's any way to can have a height generated to make it a perfect square.
So say the original image is 450px wide and 300px tall.
The css gives it a width of 100% so it stretches and fills the container, but the image remains rectangular.
Is it possible to do some css or jquery trick to generate a height to make this image a perfect suqare?
I don't care if the image gets cropped or stretched out and looks funky, I just need it to be a perfect square.
Thanks!
So you are free to stretching out the image - this can be a CSS solution:
Make a square container based on the width by using padding-top: 100%
Position the image absolutely by stretching it out to the square container as desired.
See demo below:
.wrapper {
border: 1px solid red;
height: 0;
overflow: hidden;
padding-top: 100%;
box-sizing: border-box;
position: relative;
}
.wrapper img {
width: 100%;
vertical-align: top;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/400x300" />
</div>
Using straight CSS you can set width and height to 100vw.
You could do so with the following jQuery
var img_width = $('#image').width();
$('#image').css({'height':img_width+'px'});
Hope that helps.
Since you don't care if the image is cropped or distorted, the layout is simple.
Just add overflow: hidden to the container. The image can be any size.
div {
height: 100px;
width: 100px;
border: 2px solid red;
overflow: hidden;
}
<div>
<img src="http://www.placekitten.com/450/300">
</div>

Scale div to background-image height

I've got a page using a background-image.
background-size is set to cover.
The content is just a heading and two buttons.
I want the div to be always the proportional height fitting to the background.
What's the best way to do this (if possible with pure CSS)?
You can use one same image file for both background and inline, and set the inline image to visibility: hidden; (keep space), so the div can automatically resize based on the image size.
There is no way to detect the background image size with CSS.
.container {
background: url("https://picsum.photos/600/150?image=0") 0 0 no-repeat;
background-size: cover;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.image {
visibility: hidden;
}
.title {
position: absolute;
width: 100%;
background: rgba(255, 255, 255, .5)
}
<div class="container">
<div class="title">Hello</div>
<img class="image" src="https://picsum.photos/600/150?image=0">
</div>
know this is old thread but stumbled upon it.
the following works for me if i know the dimensions of the image,
eg. 1220x404 => 1220/404 = 3.01980198 = 30.1980198
header { max-height: 404px; height: 30.1980198vw; }

Extra wide image slider on responsive site

I'm creating a responsive site and I'd like to use a really wide image slider (I'm sure you've seen the type of thing).
What I'd like to happen is for the main site to be, for example, maximum 1,200 pixels wide and use a fluid width. I'd then like the image slider to be, for example, 2,000 pixels wide. On a static site this is relatively straightforward as I could simply give the image slider a negative left margin of -400 pixels to center it. Sadly in the case of a responsive site this isn't possible as that offset needs to be fluid.
I did come across some script that made the offset fluid but this only worked when the screen was wider than the site width (i.e the max width of the main content area). When the window then becomes narrower than this max width the script fails to keep the image slider centered .
Any ideas how this could be written to keep the image slider centered horizontally in the window, whether the users window is wide or narrow?
<script type="text/javascript">
function setMargins() {
width = $(window).width();
containerWidth = $("#flexslider_width").width();
leftMargin = (containerWidth-width)/2;
$("#flexslider_width").css("marginLeft", -leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
</script>
Thanks for any thoughts in advance,
Tom
EDIT: I understand now. Try this: http://codepen.io/anon/pen/azoRwo
.outer{
position: relative;
width: 100%;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
.image {
position: absolute;
left: 50%; /* Move to the middle of the parent */
margin-right: -50%; /* Remove that extra width */
transform: translate(-50%, 0); /* Move left again; No IE8 support*/
width: 1000px;
height: 96px;
border: 2px solid cyan; /* Just useful for debugging */
background: url('http://i.imgur.com/rBkbXS3.jpg');
overflow: hidden;
}
Basically we move right, then left, using percentages of the parent's width. If you want the same functionality in IE8, you'll have to use JavaScript.
Reference: http://www.w3.org/Style/Examples/007/center.en.html
Alright, check this out: http://codepen.io/anon/pen/LEPgLp
html, body {
margin: 0;
}
.image-slider{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.main{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
#media only screen and (max-width: 800px) {
body {
overflow: hidden;
}
.image-slider {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0;
}
.main {
margin-top: 100px;
}
}
When your window is smaller than 800px (was easier to develop. just change the values), I'll position your slider absolute and in the middle. Because of the absolute position, your .main div will move to the top so I'll add a margin-top. Just change your margin-top to the hight of your slider. Good luck!

Jquery, know width and height of a div with scroll bar

I want have width and height of a full div with scroll using JQuery, but i can only have size of visible content and not size of visible + hidden content of scroll bar.
Anyone knows anyway to have this values (width and height)?
<div id="area" class="divLeftCem area">
<div id="panelArea" class="areaBackground"
style="width: 1004px; height: 613px; background: #FFFFFF url('Images/background.png') repeat;">
</div>
</div>
.area
{
margin-left: 10px;
width: 1004px;
height: 613px;
border: 1px solid #AFAFAF;
overflow: auto;
position: absolute;
top: 145px;
}
PS: Sorry about bad english.
Get the element's .scrollHeight:
$(".el").get(0).scrollHeight;
​
It goes without saying you could use .scrollWidth for the x-axis as well.
Fiddle: http://jsfiddle.net/spN6n/

Categories