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");
});
Related
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>
I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>
So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.
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