Position elements of same class, and variable top with JQuery - javascript

I want the top position of ".bottom-container" elements be equal to ".top-content" top position, plus ".top" height. The issue is that top and hight values change every time, the div ".container" that contains these elements repeats with the same classes, I had a good answer before to solve the element .each() for height but need to add the top.
I put a class of "level-1", "level-2", etc, to change top position of red box container.
How can I do: .bottom-container top (green box) = .top-content top (red box container with level class) + .top height (red box).
This is the code example:
$(document).ready(function() {
var topContainer = $(".container .top-content .top");
var botContainer = $(".container .column .bottom-container");
tl = topContainer.length;
bl = botContainer.length;
topContainer.each(function(topIndex) {
var _self = $(this);
var topHeight = _self.height();
botContainer.each(function(botIndex) {
if (botIndex >= (bl) * (topIndex / (tl)) && botIndex < (bl) * (topIndex + 1 / (tl))) {
var bc = $(this);
bc.css({
"top": topHeight + "px",
});
}
});
});
});
.container {
position: relative;
display: inline-block;
vertical-align: top;
}
.top-content {
position: absolute;
width: 100%;
z-index: 100;
}
.level-1 {
top: 10px;
}
.level-2 {
top: 20px;
}
.level-3 {
top: 30px;
}
.top {
position: absolute;
background-color: red;
}
.column {
display: inline-block;
height: 200px;
width: 60px;
background-color: gray;
}
.bottom-container {
position : relative;
background-color: green;
}
.bottom-content {
width: 50px;
height: 50px;
background-color: black;
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="top-content level-1">
<div>other thing</div>
<div class="top">
Height change with dynamically content.
</div>
</div>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 1
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 3
</div>
<div>other thing</div>
</div>
</section>
</div>
<div class="container">
<div class="top-content level-2">
<div>other thing</div>
<div class="top">
Height change with dynamically content, is always different size.
</div>
</div>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 1
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
</div>
<div class="container">
<div class="top-content level-3">
<div>other thing</div>
<div class="top">
Height change with dynamically content, is always different size.is always different size.is always different size.
</div>
</div>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 1
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
</div>

Related

Open modal on mouse position

let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
right: 0;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
In the above code snippet, If you click on any item, then it will show a modal on the right side. As you can see, item 3 is larger in width. So if you click on item 3 then you have to scroll-right to view the modal.
So I want to show modal on mouse click position.
How can I do this?
There are at least two options
The first one will spawn the modal directly at the mouse position using JS
And the second one will spawn the modal on the left side. This can be achieved using CSS
First option
So basically you can get the mouse position and set the modal position to it.
In detail remove the top/left/right/bottom properties from the modal class in CSS (they aren't needed) and add some lines of JS.
Please write me in the comments if you want to align the modal a bit around the mouse cursor... It's just about a few numbers.
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
var mousePos = {};
function fe(item, index){
item.addEventListener("click", function(e){
var rect = e.target.getBoundingClientRect(); // get some poition, scale,... properties of the item
mousePos.x = e.clientX - rect.left; // get the mouse position relative to the element
mousePos.y = e.clientY - rect.top;
item.querySelector('.modal').classList.toggle('show');
item.querySelector('.modal').style.left = mousePos.x + "px"; // set the modal position to the last stored position
item.querySelector('.modal').style.top = mousePos.y + "px";
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position: relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
Second option
The second option uses basic CSS to align the modals on the left side - it is much easier to implement and you just have to remove thee left/right/top/bottom property from the modal class and add left:0:
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
var mousePos = {};
function fe(item, index){
item.addEventListener("click", function(e){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position: relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
background: #4977d0;
left: 0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>
Hope I could help :D
You can change the style dynamically and get the position X of your controller, then add the style using JS code.
Also, remove the right 0 from your modal class
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(e){
item.querySelector('.modal').style.left = e.clientX + "px";
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>I am modal.</p>
</div>
</div>
</div>

Scroll column-wise horizontally on clicking Prev/Next in bootstrap 5

I created 2 buttons that scroll the DIV left and right. However, it scrolls a fixed width. I want it to scroll each column of Bootstrap 5 on clicking Prev/Next.
or in simpler terms, I want it to scroll one column each to the left or right as per the click and not 100px each as it currently does. Please help.
DEMO JSFiddle: https://jsfiddle.net/hsmx2f5z/
HTML
<div class="nav-scroller">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row nav" id="boxSlider">
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 1</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 2</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 3</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 4</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 5</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 6</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input id="btnLeft" type="Button" value="Prev"/>
<input id="btnRight" type="Button" value="Next" />
CSS:
.nav-scroller {
position: relative;
z-index: 2;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: 50px;
padding-bottom: 50px;
font-size: 14px;
color: #6c757d;
min-width: 100px;
}
.nav-underline .nav-link:hover {
color: #007bff;
}
.card-body p {
color: #393939;
white-space: pre-wrap;
}
.nav-underline .active {
font-weight: 500;
color: #343a40;
}
.nav-scroller__eighty {
width: 80%;
max-width: 80%;
}
JS:
const boxSlider = document.getElementById('boxSlider');
document.getElementById("btnLeft").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft + 200,
behavior: 'smooth'
});
}
document.getElementById("btnRight").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft - 200,
behavior: 'smooth'
});
}
Your best bet is probably to scroll based on the width of the column elements, like this:
boxSlider.scroll({
left: boxSlider.scrollLeft + widthOfColumn,
behavior: 'smooth'
});
You can get the width of a column like this:
// Assuming all columns are the same width, get the width of the first column
boxSlider.querySelector(".nav-scroller__eighty").offsetWidth
Your code should look something like this
const boxSlider = document.getElementById('boxSlider');
document.getElementById("btnLeft").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft + boxSlider.querySelector(".nav-scroller__eighty").offsetWidth,
behavior: 'smooth'
});
}
document.getElementById("btnRight").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft - boxSlider.querySelector(".nav-scroller__eighty").offsetWidth,
behavior: 'smooth'
});
}

Fit boxes dynamically in a container with flexbox

I want to arrange boxes dynamically in a container using flexbox. The arrangement looks like this:
For three or four boxes, the boxes should arrange like in first pic.
For six boxes, the boxes should fit in two rows with three columns. However for seven boxes, the arrangement should look like that displayed in second picture, and so on.
The width and height of the container are fixed.
Is this possible purely with Flexbox?
HTML:
<div class="container">
<div class="box">AB</div>
<div class="box">CD</div>
<div class="box">EF</div>
<div class="box">GH</div>
<div class="box">IJ</div>
<div class="box">KL</div>
<div class="box">MN</div>
<div class="box">OP</div>
<div class="box">QR</div>
<div class="box">ST</div>
<div class="box">UV</div>
<div class="box">XY</div>
</div>
CSS:
.container {
width: 160px;
height: 160px;
border: 1px solid blue;
display: flex;
}
.box {
border: 1px solid red;
text-align: center;
}
JavaScript:
function align(nodes) {
var nodeLength = nodes.length;
if(nodeLength == 1) {
// nodes occupies entire box
}
else if (nodeLength == 2) {
// nodes displayed in two columns
}
else if(nodeLength > 2 && nodeLength < 5) {
// nodes displayed in two rows, two columns
}
else if(nodeLength > 4 && nodeLength <= 6) {
// display in two columns and three rows
}
/*
.
.
.
and so on
*/
}
var boxes = document.getElementsByClassName('box');
align(boxes);
Here is a fiddle for the same.
Flexbox solution (without JavaScript)
Calculate width and height of each item in the square as follows
.square-item {
width: calc(100% / n);
height: calc(100% / n);
}
n is number of columns (or rows).
Example
.square-wrapper {
display: inline-block;
vertical-align: top;
}
.square {
--size: 160px;
}
.square {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: var(--size);
height: var(--size);
}
.square>div {
box-shadow: 1px 3px 3px #abc;
position: relative;
}
.square p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square.s-2_2>div {
width: calc(100% / 2);
height: calc(100% / 2);
}
.square.s-3_3>div {
width: calc(100% / 3);
height: calc(100% / 3);
}
.square.s-4_4>div {
width: calc(100% / 4);
height: calc(100% / 4);
}
/* Add more custom square classes */
/* ... */
<div class="square-wrapper">
<div class="square s-2_2">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square s-3_3">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square s-4_4">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
<div>
<p>10</p>
</div>
<div>
<p>11</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>13</p>
</div>
<div>
<p>14</p>
</div>
<div>
<p>15</p>
</div>
<div>
<p>16</p>
</div>
</div>
</div>
JavaScript solution with flexbox
Get all .square. Loop through them and loop through their children and add a style to each of them.
child.setAttribute("style", "width: ...; height: ...")
The size is calc(100% / Math.sqrt(number of square items))
Example
var squares = document.querySelectorAll(".square");
for (var i = 0; i < squares.length; i += 1) {
for (var j = 0; j < squares[i].children.length; j += 1) {
var child = squares[i].children[j],
size = "calc(100% /" + Math.ceil(Math.sqrt(squares[i].children.length)) + ")";
child.setAttribute("style", "width: " + size + "; height: " + size);
}
}
.square-wrapper {
display: inline-block;
vertical-align: top;
}
.square {
--size: 160px;
}
.square {
display: flex;
flex-wrap: wrap;
align-content: start;
width: var(--size);
height: var(--size);
}
.square>div {
box-shadow: 1px 3px 3px #abc;
position: relative;
}
.square p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
<div>
<p>10</p>
</div>
<div>
<p>11</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>13</p>
</div>
<div>
<p>14</p>
</div>
<div>
<p>15</p>
</div>
<div>
<p>16</p>
</div>
</div>
</div>

CSS display a hidden drop-up menu on mobile

I have a drop-up footer that is working great :
$('#drop-up-open').click(function() {
$('#drop-up #drop-upDashboard').slideToggle({
direction: "up"
}, 300);
$(this).toggleClass('drop-upClose');
}); // end click
#drop-up {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 4%;
z-index: 100;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#drop-up-open {
cursor: pointer;
text-decoration: none;
}
#drop-up .drop-upClose {}
#drop-up #drop-upDashboard {
display: none;
}
#media screen and (max-width: 1000px) {
#drop-up #drop-upDashboard{
display:block; }
}
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron panel-heading">
<p class="text-center">
Text getting covered by drop-up menu on mobile
</p>
<section>
<button> Main button </button>
</section>
</header>
<div id="drop-up">
Open
<div id="drop-upDashboard">
<p>It's now open!</p>
<div class="row">
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 1</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 2</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 3</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 4</p>
</button></a> </section>
</div>
</div>
<!-- row -->
</div>
<!-- dashboard -->
</div>
<!-- drop-up -->
</div>
<!-- container -->
When I click the id="drop-up" div, the menu opens from bottom to top and occupies a small portion of the bottom of the window on desktop view.
Now, what I want is that this menu which is at first hidden on desktop view, gets displayed on smaller devices (mobile+tablet) without having to click the id="drop-up" div. It would occupy the same portion of the bottom of the page on mobile+tablet (and the user would then need to scroll down to see the drop-up menu on smaller devices, which is not the case on desktop view).
Any suggestions/tips about the best method to achieve this ?
You could wrap the whole thing in a flex box, then have the body flex to fill up the rest of the space, thus putting your footer at the footer level. Also 'appears' to work when you go responsive.
HOWEVER, this feels quite hacky at the moment, as if you draw a border around the flex box container, it'll only fit at its original 100% level.
$('#drop-up-open').click(function() {
$('#drop-up #drop-upDashboard').slideToggle({
direction: "up"
}, 300);
$(this).toggleClass('drop-upClose');
}); // end click
html, body {
height: 100%;
}
#drop-up-open {
cursor: pointer;
text-decoration: none;
}
#drop-up .drop-upClose {}
#drop-up #drop-upDashboard {
display: none;
}
#media screen and (max-width: 200px) {
#drop-up #drop-upDashboard{
display:block; }
html, body {
height: auto !important;
}
}
.container {
display: flex;
flex-direction: column;
border: 1px solid black;
min-height: 100%;
}
.body {
flex: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron panel-heading" style="background-color: yellow; opacity: 0.7">
<p class="text-center">
Text getting covered by drop-up menu on mobile
</p>
<section>
<button> Main button </button>
</section>
</header>
<div class="body" style="background-color: orange; opacity: 0.3">
a body
</div>
<div id="drop-up" style="background-color: lightblue; opacity: 0.7">
Open
<div id="drop-upDashboard">
<p>It's now open!</p>
<div class="row">
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 1</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 2</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 3</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 4</p>
</button></a> </section>
</div>
</div>
<!-- row -->
</div>
<!-- dashboard -->
</div>
<!-- drop-up -->
</div>
<!-- container -->

Jquery (Window).Resize() calling function incorrectly

basically I have a function that resizes elements accordingly with jquery triggering the function on end of the resizing of the window.
it works perfectly apart from when I resize the window back to original size, I do not see the same thing as if I refresh the page. Which is weird considering the exact same function is being called.
The problem can be seen live here
The Js:
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
waitForFinalEvent(function(){
loadcontext();
//...
}, 10, "some unique string");
});
function loadcontext() {
var winwidth = window.innerWidth;
var winheight = window.innerHeight;
<!-- Fixes layout on screens -->
if (winwidth < 1200)
{
$('#blockscontainer').css("left", (winwidth / 2)*-1 );
$('.block').css("width", (winwidth - 30)/ 5 );
$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);
}
else
{
$('#blockscontainer').css("left", (1200 / 2)*-1 );
$('.block').css("width", 1173 / 5 );
}
};
The CSS:
body { margin: 0px; padding: 0px; }
#contentcontain {clear: both; left: 50%; }
#blockscontainer {clear: both; height: 100%; max-width: 1180px; width: 100%; background- color: #EEE; padding: 10px; border-radius: 15px;}
#blockcontext {overflow: auto;width: 100% clear: both; position: relative; height: 100%; background-color: #DDD;border-radius: 7px; padding-bottom: 20px;}
#footer { width: 100%; margin-top: 30px; text-align: center; background-color: #666; }
#content { background-color: #333; padding-top: 50px;}
.block {display: inline-block; height: 150px; width: 200px; background-color: #FFF; float: left; margin-top: 20px; border: 1px solid #CCC;}
The HTML:
<body onload="loadcontext()">
<div id="content">
<div id="contentcontain" align="center">
<div id="blockscontainer">
<div id="blockcontext">
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
</div>
</div>
</div>
<center>
<div id="footer">
content
</div>
</center>
</div>
</body>
</html>
When you resize the window below a width of 1200 px, you call these lines:
$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);
These are causing the issue you see, as they aren't reset to any kind of default when you increase the window size back about 1200px wide. This causes the page to look different because the width of #blockscontainer and the height of every .block element has changed.

Categories