Jquery (Window).Resize() calling function incorrectly - javascript

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.

Related

How do I toggle visibility of an entire dynamic row (flex wrap)?

Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>

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'
});
}

Make progress bars responsive

I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.

Aligning boxes(divs) of equal size in html symmetrically according to their number

I want to make an HTML page that contains a box at the top and a certain number of boxes being dynamically generated using jquery, the number of boxes at the bottom of top box can be 4 at max.
I want to align these boxes dynamically and symmetrically in the html page. I am using angularjs's ng-repeat to generate boxes. I want the sizes of the boxes to remain same but arrange them symmetrically on the html page.
currently i am using angular js to dynamically create boxes and align them using col-md class of bootstrap. but this makes the size of boxes to change when the number of boxes change.
html code
<div id="header-wrapper" class="container vscrolling_container">
<div id="header" class="container vscrolling_container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div ng-class="missioncount[missions.length]" ng-repeat="mission in missions" style="opacity: 0.9">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1 id="{{mission.id}}" style="color: #000">{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<ul>
<li id="{{missioncontent.id}}" ng-repeat="missioncontent in mission.missionContent">
<p style="text-align: left">{{missioncontent.info}}</p>
</li>
</ul>
</div>
</div>
</div>
java script code
'use strict';
var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);
mission_vision_mod.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/mission_vision', {
templateUrl: 'partials/mission_vision/mission_vision.html',
controller: 'mission_visionCtrl'
});
}]);
mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
$scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
$scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];
$http.get('m_id.json').success(function(data){
$scope.missions = data;
$scope.len = data.length;
});
}]);
I have created a quick jsfiddle
HTML Content:
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
<br/><br/><br/>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
Related CSS:
.container div {
height: 100px;
}
.header {
border: 1px solid black;
width: 75%;
margin: 5px auto;
}
.content {
text-align: center;
}
.contentBox {
border: 1px solid black;
width: 20%;
display: inline-block;
box-sizing: border-box;
}
Caution: I have used plain CSS for this demo.
Hope this helps you.
flexbox can do this
.wrap {
width: 80%;
margin: auto;
border: 1px solid black;
margin-bottom: 25px;
}
.top,
.item {
width: 100px;
height: 50px;
background: red;
}
.top {
display: inline-block;
}
.flex {
display: flex;
justify-content: space-around;
}
<div class="wrap">
<div class="flex">
<div class="top"></div>
</div>
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
JSfiddle Demo

Div doesnt have any height

I am constructing a div on the fly using Jquery, and appending it to the body or any element.
after appending, when i try to get get the height it gives 0. In Chrome i checked all its height property its 0. what could be the problem.
This is my code to append :
var template = '<div class="capMainSection">
<div class="CAP"> </div>
<div class="scrolldiv repeatSection" style="display:none;"">
<div class="header sectionheader"> </div>
<div class="content">
<div class="leftColumn">
<div class="show" id="capInfo">
<div class="label1">CA Contacts:</div>
<div class="label2"><p>CA Lead:<span class="LeadName"></span><span class="LeadEmail"></span></p></div>
<div class="lable3"><p>Lead:<span class="vLeadName"></span><span class="vLeadEmail"></span></p></div>
</div>
<div class="hidden" id="facInfo">
<div class="label1"><span class="facid"></span><span class="facName"></span></div>
<div class="label2"><span class="city"></span><span class="state"></span><span
class="country"></span></div>
</div> </div>
<div class="rightColumn">
<div class="rightGroup">
<div class="groupproto">
<p><span class="protocolname show"></span>
<span class="date_class show"></span></p>
</div>
<div class="statusClass hidden"></div>
<div class="approvedFinding show"></div>
<div class="closedFinding show"></div>
<div class="verifiedFinding show"></div>
<div class="lasActivity show"></div>
</div>
<div class="linkButton">
<input type="button" class="lplinkbutton" value=">">
</div>
</div>
</div>
</div>
</div>';
i am cloning the div first then appending
templateNode = $('.repeatSection').clone(true);
//change the display none to show
$(templateNode).find('.content').attr('id',capRow);
$('.capMainSection').append($(templateNode));
css
.content {
clear: both;
font-size: 13px;
}
.leftColumn {
float: left;
width: 40%;
padding: 10px 0 10px 10px;
}
.rightColumn {
float: right;
width: 50%;
padding: 0;
}
Try this:
.capMainSection {overflow: hidden;}
Or, you can do this:
.capMainSection:after {
content: " ";
display: block;
clear: both;
}

Categories