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>
Related
How I can use a toggle with closest at same time with jQuery for show/hide a item list?
I have been trying with this, but it is tiring to have to do it for each element
<div class="sidebar-suboptions-box3 main-head-trigger">
<a href="javascript:void(0)" class="sidebar-suboptions-content dsp-f bullet-point active">
<div>
<div class="sidebar-holder-portf">Portafolio 100000-1</div>
<div class="sidebar-suboptions-money">$ 1,022,158.81</div>
</div>
</a>
</div>
<div class="block-profile-portfolios-secondary main-body-trigger" style="display: none;">
<hr class="sidebar-inteligo-hr-2">
<div>
<div class="head-portfolio-active cash-head-trigger">
<div class="sidebar-suboptions-title horizontal-bar"> <em>Cash</em> y equivalentes
<br><div class="sidebar-suboptions-money">$ 726,134.93</div>
</div>
</div>
<div class="portfolio-active-subitems cash-body-trigger" style="display: none;">
<div class="portfolio-active-subitems-head">
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Cuenta trading
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Prod. estructurados
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Depósitos
<br>
<div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
</div>
</div>
<div class="head-portfolio-active activos-head-trigger">
<div class="sidebar-suboptions-title horizontal-bar">Activos
<br><div class="sidebar-suboptions-money-2">$ 726,134.93</div>
</div>
</div>
<div class="portfolio-active-subitems activos-body-trigger" style="display: none;">
<div class="portfolio-active-subitems-head">
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Cuenta trading
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Prod. estructurados
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Depósitos
<br>
<div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
</div>
</div>
</div>
</div>
$( ".main-head-trigger" ).click(function() {
$( ".main-body-trigger" ).toggle( "fast", function() {
// Animation complete.
});
});
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>
Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:
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!
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