Develop Reference

css triangle based on page height

Currently I have the situation as shown below in the snippet.
But now I want a triangle that is the same on every page. No matter how long the page is. So for example if the page is really long, then the triangle will at one point go out of the screen and there will be no more green background. (as shown here)
But the most important thing is that on every page the triangle/angle will be the same. How to do this?
$(document).ready(function() {
function waitForElement(elementPath, callBack) {
window.setTimeout(function() {
if ($(elementPath).length) {
callBack(elementPath, $(elementPath));
} else {
waitForElement(elementPath, callBack);
}
}, 300)
}
waitForElement("#leftdiv", function() {
// Initial background height set to be equal to leftdiv
$('#rightdiv').height($('#leftdiv').height());
// Initial triangle height set to be equal to leftdiv
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
// When window resizes
$(window).resize(function() {
// Change height of background
$('#rightdiv').height($('#leftdiv').height());
// Change height of white triangle
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
});
.container-general {
float: left;
position: relative;
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
float: right;
position: relative;
/*height is set in javascript*/
width: 30%;
background-color: green;
}
#triangle {
position: absolute;
height: 0;
width: 0;
bottom: 0;
left: -1px;
border-left: 10vw solid white;
border-right: 0px solid transparent;
/*border-top is set in javascript*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div id="triangle"></div>
</div>

You don't need JavaScript and jQuery at all for this, as long as you are willing to make minor changes to your markup:
Step 1: Update your markup
Wrap both your .container-general and .background-general with a common parent element
Use display: flex; overflow: hidden; on the parent. This has the effect of stretching the shorter background element to full height of .container-general
Step 2: Determine the fixed angle you want and set aspect ratio
Important note: If you want to keep the angle constant, you will need to know what angle you want. That will require one important trick: you want to keep .background-general the same aspect ratio in all cases, so the angle stays constant. Let's say you want it to be 60° (i.e. Math.Pi / 3): with some math, that means that the height of the .background-general should be this ratio relative to the width:
containerHeightRatioToWidth = Math.tan(Math.PI / 3) = 1.732052602783882...
There is a trick to preserve the aspect ratio: you simply set the padding-bottom of the background element. In this case, you want it to be padding-bottom: 173%); (we don't need absolute precision so we can drop the decimal points).
Here's a handy table on the height (in CSS percentages) you can use:
30deg: padding-bottom: 57%:
45deg: padding-bottom: 100%:
60deg: padding-bottom: 173%:
You can also precalculate the percentage in your browser console by pasting this:
var desiredAngleInDegrees = 60;
Math.tan(Math.PI * desiredAngleInDegrees / 180) * 100
The markup is structured as follows:
└─┬.wrapper
├──.container-general
└─┬.background-general
└─┬.background-general__background
├─::before (triangle)
└─::after (remaining fill)
To achieve the triangle effect, you have two approaches:
Step 3A: Use clip-path to trim the background element to look like a triangle
clip-path is very widely supported by modern browsers, with a notable exception for IE11 and Edge :/ This should do the trick: clip-path: polygon(100% 0, 0 0, 100% 100%);
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
flex-grow: 0;
content: '';
display: block;
width: 100%;
padding-bottom: 173%;
background-color: white;
clip-path: polygon(0 100%, 0 0, 100% 100%);
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
Step 3B: Use an inline SVG as background image
For the greater browser compatibility, use an inline encoded SVG and stretch it to 100% width and 100% height of the parent.
We can create a simple 10×10px SVG of the following markup:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10">
<path fill="green" d="M0,0 L10,0 L10,10 z"></path>
</svg>
Note: The preserveAspectRatio="none" is required so that we can freely stretch the SVG beyond its usual aspect ratio. For more information of how the <path>'s d attribute works, see this article: The SVG path Syntax: An Illustrated Guide
Then, all you need is to stuff this short SVG markup as data:image/svg+xml for the background image of the background container, i.e.:
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="green" d="M0,0 L10,0 L10,10 z"></path></svg>');
See example below:
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
content: '';
display: block;
flex-grow: 0;
width: 100%;
padding-bottom: 173%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="white" d="M0,0 L0,10 L10,10 z"></path></svg>');
background-size: 100% 100%;
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>

A simple "border triangle" bind to vw units might do:
body {
min-height: 2000px;
}
#triangle {
position: absolute;
top: 0px;
right: 0px;
border-top: 100vw solid #ff0000; /* The height of the triangle */
border-left: 30vw solid transparent; /* The width of the triangle */
}
<div id="triangle"></div>
A fiddle to play with.

How to make the parent div adjust in size to contain the CSS-Rotated child div?

The Title says it all: "How to make the parent div adjust in size to contain the CSS-Rotated child div?"
This is what I get currently:
HTML:
<div id="container">
<div id="rotator">
<h1>TEXT</h1>
</div>
</div>
CSS:
#container {
display: inline-block;
border: 1px solid gray;
padding: 10px;
overflow: hidden;
}
#rotator {
display: inline-block;
width: 200px;
height: 500px;
background-color: rgb(130, 310, 130);
border: 1px solid blue;
text-align: center;
line-height: 500px;
-moz-transform:rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Live Example
So, is there anyway to make the parent resize with child?
A CSS only solution would be best. If that's impossible, what's the best javascript way to do that?
Should support IE9
Based on #misterManSam's suggestion I update the live example to show the solution.
found here

Change the width of the div.container when rotated. Add negative margin and left margin to #rotator.deg90in CSS.
Look at this example :)
Javascript
function to90() {
var elm = document.getElementById("rotator");
console.log(elm);
elm.className = "deg90";
//add these lines
document.getElementById('container').style.width = "500px";
document.getElementById('container').style.height = "200px";
}
CSS
#rotator.deg90 {
/*add this*/
margin-top: -150px;
margin-left: 200px;
-moz-transform:rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}

Here you go: http://jsbin.com/viyacaji/11/edit
Just rotate the container in the jS functions, don't move the rotator div. Because basically, what you're trying to achieve is the same as when you rotate the parent div.
Any query?

Conflicting hover/mouseover functions

Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).
The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?
These are the relevant bits in my stylesheet, mostly covering the text part:
.rightbox {
background: rgb(140, 183, 98);
width: 290px;
height: 160px;
margin-bottom: 18px;
padding: 2px;}
.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;
}
.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}
.rightboxtext:hover span {
height: 80px;
}
This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)
<div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>
Otherwise I achieved this mangled bit of code, where one seems to block the other:
<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>
With this extra bit in the stylesheet:
.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}
Thanks in advance!

As a commenter pointed out above, you can do this entirely with CSS:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
height: 250px;
overflow: hidden;
}
.box img {
width: 250px;
height: 250px;
}
.box .message {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
width: 250px;
height: 250px;
position: relative;
top: -256px;
color: #fff;
font-size: 32px;
line-height: 250px;
text-align: center;
font-weight: bold;
font-family: arial;
}
.box .message:hover {
opacity: 1;
}
</style>
<div class="box">
<img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
<div class="message">Antarctica</div>
</div>
.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.
http://jsfiddle.net/dgGG3/4/

Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.
The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.
.rightbox:hover {
opacity:0.5;
}
You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.
so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/
I would say that's the way to go

Adding foreground image to a Image

for a button if i need a background image i would use background like below
#statusButton span {
color: #445058;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px #fff;
padding: 7px 29px 9px 10px;
background: url('../images/Arrow.png') no-repeat 53px 7px;
display: block;
}
similar to here http://www.soundendeavors.com/clients/index.html
now How do i add this type of image as a foreground for a image. when i use same background attr for image th regular image will overlap is what i need is something of foreground type of css.
an image over a image.

So you want to put another image on top of one, right? You can do it this way:
div{ /*You can use whatever element you prefer*/
width: 400px;
height: 400px;
background-image: url('link1.jpg'), url('link2.png'); /*URLs*/
background-position: left top, right bottom; /*position*/
background-repeat: no-repeat; /*repeat or not*/
}
Fast and easy. The first image in the list will show up on the very top.
Demo: http://jsfiddle.net/DerekL/Pdxpe/
The good thing about this method is that you still has one solid element, instead of wrappers floating around.

if i understand You right, You want to overlay another image over an image?
to overlay another image over an existing image You can work with position in CSS:
CSS:
#wrapper {
position: relative;
}
#img1 {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
#img2 {
position: absolute;
top: 0;
left: 0;
z-index:100;
}
HTML:
<div id="wrapper">
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>
now the image with the id #img1 is under the image #img2, because of the lower z-index value...

How do you click through transparent PNGs in IE9?

So I would like to have a clickable area beneath a transparent PNG.
I have a 200x200px PNG image laying on top of a 200x300px div. The div is salmon colored. Only the 100px to the right of the div are clickable.
jsFiddle here: http://jsfiddle.net/xhAVU/1/
In modern browsers: By uncommenting pointer-events: none; you can see how the PNG gets ignored and the salmon div can be clicked on anywhere.
In IE9: No way to click through the image.
Is there a way to force IE9 to click through transparent PNGs?

Dup of https://stackoverflow.com/a/10968016:
Replace
<img width="200" height="200" style="pointer-events: none" src="...">
with
<svg width="200" height="200" pointer-events="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="200" height="200"
xlink:href="..." />
</svg>
as IE supports the SVG pointer-events property.

Did you tried sending png image back using a low z-index value lets say 10 and bringing the click able area up using high z-index value lets say 20.
This might work. look below code.
.container {
width: 500px;
height: 500px;
background-color: #eeeeee;
}
.container img {
width: 200px;
height: 200px;
position: absolute;
z-index:10;
/* pointer-events:none; */
}
.clickable {
width: 300px;
height: 200px;
background-color: salmon;
cursor: pointer;
z-index:20;
}

If the PNG file could be moved into CSS, then I find that you could implement it this way in all browsers:
http://jsfiddle.net/CkmH6/
With CSS:
.container {
width: 500px;
height: 500px;
background: #eeeeee;
}
.overlay {
background: url(http://ima.gs/transparent/none/36f/transparent-png-200x200.png) no-repeat;
width: 200px;
height: 200px;
position: absolute;
}
.clickable {
width: 300px;
height: 200px;
background-color: salmon;
cursor: pointer;
}
​