I am having trouble getting multiple Masonry type portfolios to work correctly on a webpage. For reference a Masonry type portfolio should look like this.
Here is an example from the templates site
(http://ottavio.kleis.agency/portfolio.html), if you can't view that page then essentially what it is, is a 4*3 image display where the 3 images on either side are of base size 1*1, and there are to images in the middle that are of sizes 2*2 and 2*1.
However when I try to add a second portfolio the second image down from the top left moves to the bottom of the portfolio and leaves white-space where it should be.
Which if the explanation wasn't clear looks like this
The code for the portfolio is this
<section id="portfolio-gallery" data-folder="/portfolio" class="sep-top-md">
<div class="container">
<div id="filters" class="sep-bottom-lg">
<button data-filter="*" class="btn btn-sm btn-primary upper">show all</button>
<button data-filter=".branding" class="btn btn-sm upper">branding</button>
<button data-filter=".design" class="btn btn-sm upper">design</button>
<button data-filter=".photography" class="btn btn-sm upper">photography</button>
<button data-filter=".videography" class="btn btn-sm upper">videography</button>
</div>
</div>
<!-- Start Ajax Section-->
<div style="position:relative;" class="ajax-section section-gray">
<div class="closeProject"><i class="fa fa-times"></i></div>
<div class="loader"><i class="fa fa-circle-o-notch fa-spin fa-2x"></i></div>
<div class="container">
<div class="status-message"></div>
<div class="ajax-content-outer">
<div class="ajax-content-inner"></div>
<div class="project-navigation nav-arrows"><span class="nav-arrow-next"></span><span class="nav-arrow-prev"></span></div>
</div>
</div>
</div>
<!-- End Ajax Section-->
<ul id="isotope" class="portfolio isotope">
<li class="item videography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/05.jpg" alt="Extreme Freestyle" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Extreme Freestyle</h4><span>Mood is a crucial component of well-being. It is an emotional state that can be influenced by personality or a variety of specific circumstances. This sub-category identifies worry, anxiety, happiness, mood fluctuations, and fatigue. Monitoring and managing mood can be vital for a student with regard to their life in general and school success.</span>
</div>
</div>
</div>
</li>
<li class="item photography width2x height2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/11asw5.jpg" alt="Looking at The Horizon" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Looking at The Horizon</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item photography design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/wr4c5.jpg" alt="Design Studio" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Design Studio</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/mac.jpg" alt="Minimalist Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Minimalist Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding width2x">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/2048asxsax.jpg" alt="Business Card" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Business Card</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item branding">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20aaaaa48.jpg" alt="Horst brand identity" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Horst brand identity</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design photography">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/20sshsh48.jpg" alt="Infinity Mirror" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Infinity Mirror</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
<li class="item design">
<!-- images should be in 1:1 format or multiples (2:1. 1:2, ...)--><img src="img/portfolio/247610222_460fa350b6_o.jpg" alt="Simple Desk Design" class="img-responsive">
<div class="mask">
<div class="mask-content">
<div class="mask-wrapper text-center"><i class="fa fa-link fa-border"></i><i class="fa fa-expand fa-border"></i>
<h4 class="upper">Simple Desk Design</h4><span>Lorem Ipsum is simply dummy text of the printing</span>
</div>
</div>
</div>
</li>
</ul>
</section>
And all I have done to create the second portfolio is copy and paste that code. I am stuck and have tried to resolve the issue in a number of ways, but I have still not been able to fix it. Any help would be much appreciated
There is a plugin that can do as you like. Try this one https://github.com/sapegin/jquery.mosaicflow
Related
i want use custom js variable to get card-title a shop-item-title-link's text for the event label = "product x".
Clicking the click class fa-cart-plus to get the label product x;
Click the image to get the label product x
I've tried this js below, but it gets [object] [object] as the result.
function() {
var el = {{Click Element}};
return $(el).closest('card-title').text('a.shop-item-title-link');
}
HTML
<div class="card card-product">
<div class="card-image">
<a href="#" title="product x">
<img width="230" height="230" src="#" class="attachment-_thumbnail" alt="product x">
</a>
<div class="ripple-container"></div>
</div>
<div class="content">
<h6 class="category">Items</h6>
<h4 class="card-title">
<a class="shop-item-title-link" href="#" title="product x">product x</a>
</h4>
<div class="card-description">
<p><span>product descirption</span></p>
</div>
<div class="footer">
<div class="price">
<h4><span class="Price"><span class="Price-currencySymbol">£</span>45.00</span></h4>
</div>
<div class="stats">
<a rel="nofollow" href="#" title="Add to cart">
<i rel="tooltip" data-original-title="Add to cart" class="fa fa-cart-plus"></i>
</a>
</div>
</div>
</div>
</div>
That is a very specific target, what you want to do is use parent and sibling together.
Try something like this:
return $(el).parents().siblings('.card-title').text();
Hi all I am using Boostrap 4 beta-2 and am trying to get the carousel to use the slide animation. I had class="item" to the "carousel-item" class to get it to switch between slides (which also removed the 'offsetWidth undefined' console error. However, the animation is still not working and just jumps between slides.
Can anyone point me in the right direction? I'm not sure where the issue lies. (CSS/JS). There are no errors in the console.
<!-- ********* HEADER 3 ********* -->
<div class="header-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item carousel-item active">
<div class="page-header header-filter">
<div class="page-header-image" style=""></div>
<div class="content-center">
<div class="container text-left">
<div class="content-center">
<div class="row">
<div class="col-md-5">
<div class="iframe-container">
<iframe height="250" src="https://www.youtube.com/embed/rmfmdKOLzVI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-6 ml-auto mr-auto text-right">
<h1 class="title">On the run tour.</h1>
<h4 class="description ">On the Run Tour: Beyoncé and Jay Z is a 2014 concert special which documents the September 12 and 13, 2014, shows of American singers' Beyoncé and Jay-Z joint co-headlining venture On the Run Tour.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="page-header header-filter">
<div class="page-header-image" style=""></div>
<div class="content-center">
<div class="container">
<div class="content-center">
<div class="row">
<div class="col-md-8 ml-auto mr-auto text-center">
<h1 class="title">Island of legends.</h1>
<h4 class="description ">The islands of Malta and Gozo are brilliant for a family holiday, packed with fun places to visit whatever your children’s ages. The islands’ small size means everywhere is within easy reach.</h4>
<br />
<h5>Connect with us on:</h5>
<div class="buttons">
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-twitter"></i>
</a>
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-facebook-square"></i>
</a>
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-google-plus"></i>
</a>
<a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="page-header header-filter">
<div class="page-header-image" style=""></div>
<div class="content-center">
<div class="container">
<div class="content-center">
<div class="row">
<div class="col-md-6 text-left">
<h1 class="title">Arctic Sea ice.</h1>
<h4 class="description ">According to the National Oceanic and Atmospheric Administration, Ted Scambos, NSIDC lead scientist, puts the potentially record low maximum sea ice extent this year down to low ice extent in the Pacific and a late drop in ice extent in the Barents Sea.</h4>
<br />
<div class="buttons">
<a href="#pablo" class="btn btn-neutral btn-primary btn-lg mr-1">
<i class="now-ui-icons files_single-copy-04"></i> Read More..
</a>
<a href="#pablo" class="btn btn-primary btn-lg">
<i class="now-ui-icons arrows-1_share-66"></i> Subscribe
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="now-ui-icons arrows-1_minimal-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="now-ui-icons arrows-1_minimal-right"></i>
</a>
</div>
</div>
<!-- ********* END HEADER 3 ********* -->
Change this
<div id="carouselExampleIndicators" class="container" data-ride="carousel">
to this
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
Carousel w/ Indicators documentation
Check if you have more then one .css file in your project. If you downloaded some themes from internet It could be that those styles rewrite original bootstrap classes and effected on your carousel.
I'm working on a project, it was working normally. But then I had to add Iron-Router to add some features and one of my templates do not work anymore.
I have this home.html file, that import two templates, "nova" and "piadas". But only the "nova" is displayed. How do I fix it?
home.html:
<template name="home">
<br>
{{> nova}}
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large green accent-4"> <i class="large material-icons">person</i> </a>
<ul>
<li><a class="btn-floating green accent-4"><i class="material-icons">add</i></a></li>
<li><a class="btn-floating green accent-4"><i class="material-icons">account_circle</i></a></li>
</ul>
</div>
<br>
{{> piadas}}
</template>
piadas.html:
<template name="piadas">
<div class="row"> {{#each piadas}}
<div class="col s12 m6">
<div class="card grey lighten-4">
<div class="card-content black-text"> <span class="card-title">{{titulo}}</span>
<p class="truncate">{{piada}}</p>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">{{titulo}}<i class="material-icons right">close</i></span>
<p>Essa piada foi enviada por <strong>{{autor}}</strong> no dia <strong>{{formataData}}</strong>.</p>
<button id="btn-like" class="btn" style="float: left;"><i class="material-icons ">thumb_up</i></button>
<button id="btn-denunciar" class="btn btn-danger" style="float: right;"><i class="material-icons ">flag</i></button>
</div>
<div class="card-action"> <i class="material-icons right">more_vert</i> </div>
</div>
</div> {{/each}} </div>
</template>
I've discovered that: how the "piadas" template was returning a helper function with some MongoDB querys, I had to pass the querys for the router.
I want to convert my div part of my angularjs application into image so that I can download it as per clients requirements.
<div class="wrap-dashboard">
<div class="dashboard">
<div gridster="vm.gridsterOptions">
<ul>
<li gridster-item="widget" ng-repeat="widget in vm.widgets">
<div class="box" >
<div class="box-header">
<h3>{{ widget.name }}</h3>
<div class="box-header-btns pull-right">
<a title="Download widget" ng-click="" id="download"><i class="glyphicon glyphicon-download"></i></a>
<a title="settings" ng-click="vm.openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="vm.remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<nvd3 options="widget.options" data="widget.options.dataList" api="widget.options.api" config="vm.config" events="vm.events"></nvd3>
</div>
</div>
</li>
</ul>
</div>
</div>
The output of this code is a chart
Now I want to download this chart, but don't know how...
Any kind of help will be appreciated. Thanks in advance!!
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.