Develop Reference

How to display a windows alert near my link

hello For the moment my code displays an alert when I click on "envoyer une alerte"
But the alert is displayed far from the "envoyer une alerte" link
I would like the alert to be displayed near the link display an alert
I have to modify what in my code so that the alert is glued to my link
https://codepen.io/Wilou/pen/eNNEme
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
send an alert
<br>
send an alert
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
margin-left: 24%;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
window.alert = function(titre, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closealert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}

Pass the clicked element as argument in the onclick handler.
Then, use the element to determine its position using getBoundingClientRect and apply it to your alertPanel.
window.alert = function(link, titre, message) {
// Store this in a variable instead of querying the document multiple times
let alertPanel = document.getElementById("alertPanel")
alertPanel.innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
alertPanel.style.display = 'block';
// Get the position of the clicked link
let position = link.getBoundingClientRect()
// Apply the position to the alertPanel
alertPanel.style.top = position.top + 20 + "px";
alertPanel.style.left = position.left + "px";
document.getElementById('overlay').style.display = 'block';
}
function closealert() {
document.getElementById('alertPanel').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
body{
font-family:'Open Sans',sans-serif;
background-color: #DEDEDE;
}
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
/*margin-left: 24%;*/
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
/*margin-bottom: 20px;*/
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('data:image/png;base64,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') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
<alert>
<div id="overlay"></div>
<div id="alertPanel"></div>
</alert>
send an alert
<br>
send an alert

Set your alert element to position: relative, and align position of alertPanel accordingly.

You can modified the position in this class: alert #alertPanel
In the example below i change the top and margin-left property.
top: 10px;
margin-left: 300px;
window.alert = function(titre, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closealert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}
body{
font-family:'Open Sans',sans-serif;
background-color: #DEDEDE;
}
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top: 10px;
min-height: 170px;
width: 450px;
margin-left: 250px;;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('data:image/png;base64,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') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
Envoyer une alerte
<br>
En envoyer une autre

Looking for a way to make this triangle at top of div rounded like this picture? [duplicate]

Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
<div class="triangle-up"></div>

Use pseudo element where you apply a radial-gradient:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background:green;
border-radius:50px;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:50%;
width:60px;
height:25px;
transform:translateX(-50%);
background:
radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box">more and more text here</div>
<div class="box">2 lines <br>of text</div>
Another idea in case you want any kind of coloration:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background-image:linear-gradient(60deg,yellow,purple,green,blue);
background-size:100% calc(100% + 25px);
background-position:bottom;
border-radius:50px;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:calc(100% + 25px);
background-image:inherit;
-webkit-mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
-webkit-mask-size:30px 25px;
mask-size:30px 25px;
-webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box" style="
background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>
<div class="box" style="
background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>

you can use the shadow on both rounded pseudos
.bubble {
position: relative;
background: #00aabb;
border-radius: 0.4em;
width: 200px;
height: 100px;
}
.bubble:after,
.bubble:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
border-radius: 50%;
top: 100%;
margin: -1px;
}
:after {
left: 50%;
box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}
:before {
right: 50%;
box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}
<div class='bubble'></div>
to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.

One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid red;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>

Styling element like chrome tab without CSS3 transform?

I'm looking for a way to create a tab bar that looks like the one in google chrome without using CSS3 or image resources. I want it to work in IE8.
...
This is a CSS3 example that I found on the Internet, but as you can see, it uses "transform", which is not available in IE8.
.tab-box {
height:50px;
background: #fff;
border-radius: 4px;
border:1px solid #ccc;
margin:0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}

For old IE<9 add the class ie,
for non-IE<9 browsers do your amazing stuff with gradient etc....
html, body{height:100%; margin:0;font:16px/24px sans-serif;}
body{background:#abc;}
div{background:#fff;overflow:auto;}
/*TABS DEFAULT STYLES*/
/* here goes your awesomeness*/
.tabs{margin-bottom:0;padding:0;list-style:none;}
.tabs:after{content:"";display:table;clear:both;}
/*TABS IE*/
.tabs.ie li{
position:relative;
overflow:hidden;
float:left;
margin-right: -6px; /* (3) than adjust this value for the overlap */
}
.tabs.ie li a{
background: #ddd;
position:relative;
display:block;
padding: 4px 12px;
margin: 0 12px; /* (2) adjust the value till the borders corner touch */
}
.tabs.ie li a:before,
.tabs.ie li a:after{
content: "";
position:absolute;
top: 1px; width: 1px; /*(fictive 1px "roundness")*/
border-bottom: 60px solid #ddd; /* (1) Edit px till border is not cut */
}
.tabs.ie li a:before{
left: -21px; /* 20border + 1width */
border-left: 20px solid transparent;
}
.tabs.ie li a:after{
right: -21px; /* 20border + 1width */
border-right: 20px solid transparent;
z-index:2;
}
/* ACTIVE TAB */
.tabs.ie li a.active{
background:#fff;
}
.tabs.ie li a.active:after,
.tabs.ie li a.active:before{
border-bottom-color:#fff;
z-index:2;
}
.tabs.ie li:after{
content: "";
position:absolute;
top: 1px; width: 2px;
border-bottom: 60px solid #999;
right: -10px;
border-right: 20px solid transparent;
z-index:1;
}
<ul class="tabs ie">
<li><a>HOME</a></li>
<li><a class="active">ABOUT</a></li>
<li><a>PROJECTS</a></li>
<li><a>CONTACT</a></li>
</ul>
<div><h1>ABOUT</h1></div>

vertical to horizontal navigation

I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan

Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?

Tile divs equal height on last row of div

Hello guys is there a way around to achieved the following design?
i make a design of my div but i don't know how to get it like this.divs are in the center of the page and the width of the wrapper of all this divs can be adjust.
Normal content
When the wrapper becomes smaller then it will be a two column div and the last are still equal.
* wrapper div adjust its width when zoom in and zoom out..
CODE
<html>
<head>
<title></title>
<link rel="stylesheet" href="view/css/ui-layout.css" type="text/css"/>
<link rel="stylesheet" href="view/css/layout.css" type="text/css"/>
<script type="text/javascript" src="view/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="view/js/equalheight.js"></script>
<style>
html,body{
padding: 0;
margin:0;
min-width: 820px;
color: #333333;
background-color: #F1F1f1;
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 13px;
}
a{
text-decoration:none;
color:#3EA7bb;
cursor: pointer;
}
ul{
display: inline-block;
position: relative;
}
hr{
border:1px solid #f1f1f1;
}
.cleared
{
display:block;
clear: both;
float: none;
margin: 0;
padding: 0;
border: none;
font-size: 0;
height:0;
overflow:hidden;
}
.reset-box
{
overflow:hidden;
display:table;
}
#main-container{
width: 80%;
min-height: 100%;
min-width: 820px;
max-width: 1000px;
z-index: 0;
left: 0;
top: 0;
cursor:default;
overflow:hidden;
background-color:#FFFFFF;
position: relative;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
-moz-box-shadow: 0 0 0 5px #333333;
-webkit-box-shadow: 0 0 0 5px #333333;
box-shadow: 0 0 5px #333333;
}
#header{
height: 100px;
padding-top: 5px;
margin:0 auto;
}
#header-logo{
width: 308px;
height: 100px;
background-image: url(../images/skerp.png);
background-position: center;
background-repeat: no-repeat;
margin-left: 20px;
}
#menu-bar{
margin:0 auto;
min-height: 25px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
border-radius:0px;
/*-moz-box-shadow: 0 0 0 3px #333333;
-webkit-box-shadow: 0 0 0 3px #333333;
box-shadow: 0 0 3px #333333;*/
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
margin:0 auto;
}
#menu-wraper{
display: inline-block;
float: right;
margin-right: 10px;
}
.menu-element{
min-width: 75px;
height: 25px;
display:inline-block;
cursor: pointer;
text-align:center;
}
#body-container{
margin:0 auto;
padding-bottom: 90px;
}
.left-container,.right-container,.center-container{
display: block;
float:left;
}
.featured{
margin:20px auto;
padding:5px;
-moz-box-shadow: 0 0 0 5px #333333;
-webkit-box-shadow: 0 0 0 5px #333333;
box-shadow: 0 0 5px #333333;
border-radius: 5px;
min-height: 300px;
width: 780px;
}
.left
{
text-align: left;
}
.left span{
float:left;
left:0;
}
.right
{
text-align: right;
}
.right span{
right:0;
float:right;
}
.main-under-color{
width: 300px;
height:5px;
display: block;
}
.sub-under-color{
width: 100px;
height:5px;
display: block;
}
.content-wrapper{
margin:10px auto;
min-width: 810px;
/*padding:10px;*/
}
.content-wrapper h1{
text-align: left;
}
.image-wrapper{
margin: 0 auto;
}
.page-title{
padding: 20px 10px 10px 10px;
display: block;
}
.page-title h1{
font-weight: bold;
font-size: 40px;
text-indent: 20px;
}
.content-title h1{
font-weight: bold;
font-size: 20px;
}
.content{
padding:0px;/* 15px 15px 15px;*/
display: block;
font-size: 15px;
}
.content p{
text-align: justify;
line-height: 25px;
word-spacing: 1px;
word-wrap:break-word;
}
.border{
-moz-box-shadow: 0 0 0 5px #999999;
-webkit-box-shadow: 0 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
border-radius: 5px;
border:1px solid #999999;
}
.border-top{
border-top:1px solid #999999;
}
.border-left{
border-left:1px solid #999999;
}
.border-right{
border-right: 1px solid #999999;
}
.border-bottom{
border-bottom: 1px solid #999999;
}
.column-wrapper{
padding-top: 20px;
text-align: center;
vertical-align:middle;
width:100%;
}
.column-wrapper div{
display: inline-table;
margin:2px;
}
.column-small{
padding:10px;
padding-bottom:30px;
width:30%;
min-width: 250px;
position: relative;
}
.fixedbottomReadMore{
position: absolute;
bottom: 10px;
right: 20px;
}
.fluedbottomReadMore{
position: absolute;
float:right;
right:20px;
}
.column-small ul{
margin-top: -10px;
width: 100%;
max-width: 240px;
}
.column-small ul li{
text-align: left;
}
.column-small li{
list-style: none;
padding: 5px;
text-indent: -30px;
word-wrap: break-word;
}
.column-medium{
padding:10px;
width: 61%;
min-width: 505px;
}
.column-large{
padding:10px;
width: 100%;
min-width: 760px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="body-container" >
<div class="content-wrapper ">
<div class="cleared"></div>
<div class="content ">
<div class="cleared"></div>
<div class="column-wrapper ">
<div class="column-large ">
</div>
</div>
<div class="cleared"></div>
<div class="column-wrapper">
<div class="column-small border border-top">
<h3>Features</h3>
<ul>
<li>Code blocking</li>
<li>Code Wrapping</li>
<li>Code Killing</li>
<li>Code Sleeping</li>
</ul>
<span class="fixedbottomReadMore">Read more</span>
</div>
<div class="column-small border border-top">
<h3>Modules</h3>
<ul>
<li>Barking Around The house</li>
<li>Loving the Cats</li>
<li>Floating The points</li>
<li>Coding The Sleepers</li>
<li>Coding The Sleepers</li>
</ul>
<span class="fixedbottomReadMore">Read more</span>
</div>
<div class="column-small border border-top">
<h3>Idont knows</h3>
<span class="fixedbottomReadMore">Read more</span>
</div>
<div class="column-small border border-top">
<h3>Modules</h3>
<ul>
<li>Barking Around The house</li>
<li>Loving the Cats</li>
<li>Floating The points</li>
<li>Coding The Sleepers</li>
<li>Coding The Sleepers</li>
</ul>
<span class="fixedbottomReadMore">Read more</span>
</div>
<div class="column-small border border-top">
<h3>Idont knows</h3>
<span class="fixedbottomReadMore">Read more</span>
</div>
</div>
</div>
</div>
<script>
$('.column-wrapper .column-small').equalHeightColumns();
</script>
</div>
<div class="cleared reset-box"></div>
</div>
</body>
</html>

I don't know whether this fits your scenario, however, the fiddle below sligns the bottoms of the DIV.
The thing I am unsure about is, when you convert it to two column model, what all blocks will be visible, if you end up showing two blocks in the last row, then the bottoms will get aligned to bottom.
See if this helps - http://jsfiddle.net/AUV7J/
Making the span as display: table-cell, we can vertically align the block inside it to the bottom
Update:
As you said, you don't want spaces in between. You will have to programatically adjust the size of the last DIV for each column
See the updated Fiddle
Update:
For dynamic columns, see this

I would bind a function to the window resize event like so...
var $win = $(window),
maxHeight,
mode,
calcMaxHeight = function() {
var h = $(this).height();
if (h > maxHeight) {
maxHeight = h;
}
},
adjustDivHeights = function() {
var $col = $(this);
if ($col.height() < maxHeight) {
var $lastChild = $col.children().last();
$lastChild.height(maxHeight - ($col.height() - $lastChild.height()));
}
};
$win.resize(function() {
if ($win.width() > 500) {
if (mode === 'large') return;
mode = 'large';
maxHeight = 0;
$('#container').children().each(calcMaxHeight).each(adjustDivHeights);
} else {
if (mode === 'small') return;
mode = 'small';
maxHeight = 0;
// other size logic
}
});
The event only fires the calculations if/when you switch modes, for efficiency sake, of course.

You can set the height of every last content base on the browser's window since you have a fixed number of contents horizontally, you can make a calculations and make it handy for the last contents. That's my best idea i get so far.