I have six blocks, each block has a click function to trigger the contentBlock() snippet.
I'm trying to get the contentBlock() to create the element and display the created div after the closest third item (After the third within the row), currently, the below creates the div and displays after every third item on both rows.
How do I get the created element to sit after the closest third item? E.G The first three triggers would display content under the first row and the next three under the next row.
Any and all suggestions would be appreciated.
function contentBlock() {
const items = document.querySelectorAll('.js-item');
items.forEach(function (item, index) {
if((index + 1) % 3 === 0) {
/* Create Element */
const elem = document.createElement('div');
elem.classList.add('js-content-block', 'col-12');
elem.innerText = 'Content Block';
item.parentNode.insertBefore(elem, item.nextSibling);
}
})
}
<div class="row">
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="0" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="1" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="2" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="3" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="4" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="5" aria-label="#">+</button>
</div>
</div>
</div>
</div>
</div>
Related
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>
I'm really new to jQuery and only managed to do basic CSS edits so far. I don't have access to the source code, but I need to iterate through each div with class '.card', grab the href of the hyperlink and apply the link to the each respective image so the user can click on the image to in addition to the text.
I tried the following but it had unintended consequences:
Successfully added hyperlink to each image, but was applied multiple times each
Value of hyperlink was 'undefined'
$(function() {
$(".card-img").each(function() { // For each card
var a = $(this).next('a'); // Find its associated anchor
$(".card-img").wrap(''); // And wrap the card image
});
});
Can anyone show me how to do this?
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>
Loop over each .card div using .each() and then use $(this) to refer to the card div. Within the loop use .find() to both grab the href as well as .wrap() to wrap the image with the href:
$('.card').each(function() {
var href = $(this).find('a').attr('href');
$(this).find('img').wrap(``)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
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