Dynamically creating div height in 2 rows - javascript

So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.


This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!

Related

How to hide product item if the price is 0

Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.
So,
How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show
Look code below:
<div id="ProductPageProductList" class="ProductList sort_4">
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.950,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have also tried but not worked:
var amount = parseFloat($('.productPrice span').html().replace(",", "."));
if(amount === 0){
$('.productItem').css("display", "none");
}else{
$('.productItem').css("display", "block");
}

I stripped out the additional HTML for my answer since it doesn't affect my answer.
But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.
$(document).ready(function(){
$(".productItem").each(function(){
let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
if(price == 0){
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0
</span>
</div>
</div>
</div>

Jquery check if each element's child exist, change specific element's css

It's the first time to ask a question through stackoverflow.
I hope someone can help to solve this problem.
my purpose is hide X picture when Y picture is exist in each review area.
kind of widget code I only possible to input custom CSS and js.
I tried like below with jquery, but i think it's wrong.
Please, help to solve this problem.
/*$('#pd-review-list .widget_w .widget_item').each(function(index) {
// index has the count of the current iteration
var foo = this;
console.log( foo );
var zoo = $(foo).find('.widget_item_tab_2_photo > img');
console.log(zoo);
if(zoo.length === 1) {
$('.widget_item > .widget_item_product').css('display', 'none');
}
});*/
if($('.widget_w .widget_item > .widget_item_tab_2_photo > img').next('img').length > 0) {
$('.widget_item > .widget_item_product').css('display', 'none');
} else {
$('.widget_item > .widget_item_product').css('display', 'block');
};
// if each .widget_w .widget_item > widget_item_tab_2_photo > img tag exist = in that element's .widget_item > .widget_item_product css change display: none
.widget_item_product {
height: 300px;
width: 300px;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="widget_w">
<div class="widget_item" id="review_normal_8875193" value="8875193">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;"></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">네이버 페이 ***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p></div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875193)"></div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 28일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875193"></div>
</div>
</div>
</div>
</div>
<div class="widget_item" id="review_normal_8875194" value="8875194">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;">
<i class="la la-camera" style="margin-right:10px; margin-left:10px; font-size:18px"></i></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">winsh***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text widget_item_collapse" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p></div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875194)">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" data-loaded="true">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
</div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 18일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875194"></div>
</div>
</div>
</div>
</div>
<div class="widget_item" id="review_normal_8875195" value="8875195">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;">
<i class="la la-camera" style="margin-right:10px; margin-left:10px; font-size:18px"></i></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">winsh***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text widget_item_collapse" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p>/div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875195)">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" data-loaded="true">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
</div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 18일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875195"></div>
</div>
</div>
</div>
</div>
</div>
</div>

jQuery sort multiple DIVs if contains <span> text

I have multiple sections in which I want to sort the DIVs if contains <span> text in it otherwise. I tried different stackoverflow threads but nothing helps for me so far, I am little near to my target but my code doesn't work I am not sure what I am doing wrong in it, these inner divs needs to be sorted inside each section. but I am not good at JS.
If div contains the span text it bring it to first in each section.
sortUsingNestedText($('#toSort'), "div.customCardData", "span.recenUpdate");
function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
console.log("done");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
Here is my jsFiddle

Firstly note that you have created multiple elements with the same id of toSort. This is invalid as id must be unique within the DOM. If you want to group elements by common behaviour use classes instead.
I want to bring the span ones one first in each section
In this case you don't need sort. Just append() the relevant div to the start of their group:
$('.toSort').each(function() {
var $h2 = $(this).find('h2');
$(this).find('.customCardData:has(span.recenUpdate)').insertAfter($h2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>

Using Multiple Masonry Grids On Collapsible

JSFiddle
Hey! I've decided to use Masonry, which I find completely awesome.
Although I've ran into the issue where when I use it in a collapsible, it only works on the first collapsible when it's open. I can't seem figure out a way to get it to work when the collapsible is closed and then opened.
I would think it's because when the page loads the images aren't shown/don't exist. I've tried using Juery on click methods for when the collapsible is clicked to load Masonry. That didn't seem to work so I scratched that. I've tried using another on click method to reload Masonry when it's open. That also didn't seem to work correctly.
I am fairly new to JavaScript so I wouldn't be surprised if I had done something wrong. But any help would greatly appreciated. Especially considering I've been banging my head for the last few days on this.
I hope this is enough! Thanks in advance!
HTML :
<ul class="collapsible popout">
<li class="active">
<div class="collapsible-header">
<h1 class="bodyFont noMargin">
Landscapes
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes1" name="Landscapes1">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link to album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes2" name="Landscapes2">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
<li>
<div id="secondCategory" class="collapsible-header">
<h1 class="bodyFont noMargin">
Potraits
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="card deep-purple lighten-4" id="Butterflies" name="Butterflies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Bees" name="Bees">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="RollyPolies" name="RollyPolies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Ants" name="Ants">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
</ul>
CSS:
.grid {
margin: 0%;
}
.card,
.grid-sizer {
width: 31.3%;
margin-top: 5px;
margin-bottom: 5px;
}
.gutter-sizer {
width: 2%;
}
JS:
$(".collapsible").collapsible();
var $grid = $(".grid");
$grid.masonry({
itemSelector: ".card",
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
percentposition: true,
horizontalOrder: true
});
$grid.imagesLoaded().progress(function() {
$grid.masonry("layout");
});

ContentFlow - div max-width not working

I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php

Categories

Resources