jQuery、Modernizr、およびいくつかのプラグイン (jQuery.dotdotdot、MixItUp) を使用してサイトを設計しています。ベースとして、codyhouse からこの作品を選びました。そのため、MixItUp 機能 (フィルタリング) はうまく機能し、問題はありません。
<img>問題は、元を aに置き換えて<div>コンテンツを追加したいときに発生します。テキストがオーバーフローする可能性があるため、jQuery.dotdotdot プラグインを追加して、このテキストを適切にトリミングしました。したがって、カスタム JavaScript コードを追加しました。
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
これは非常に簡単だと思います。メニューをトリガーすると、すべてのボックスが適切に整列されてきれいになりますが、折りたたむと、jQuery.dotdotdot によってトリミングされたテキストがすべてのグリッドを台無しにします。それらを取り除く方法は？
以下に、いくつかのサンプル データを含むスニペットを作成しました :-)
window.onload = function() {
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
}/* solution to the blank gaps problem */
.grid-square {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive farm</title>
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/style.css">
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/modernizr.js"></script>
</head>
<body>
<header class="cd-header">
<h1>Farm data</h1>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="filter"><a href="/session/logout/">LOGOUT</a>
</li>
</ul>
<!-- cd-filters -->
</div>
<!-- cd-tab-filter -->
</div>
<!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul id="MixItUp">
<li style="display: inline-block" class="mix topic-C work_phase-B type-D NORA10_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NORA10_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NORA10_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of wind and surface-wave parameters at the location of the FINO3 met mast. Values comprise three-hourly sampled wind speed and direction at 10, 100 and 150 m; significant wave height; and dominant wave period and
direction. Supplied by Metno from their NORA10 reanalysis - horizontal resolution 10 km.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-P Pres_May15_RWF.pdf">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: Pres_May15_RWF.pdf</p>
<p>
<label class="att-name">Information type</label>: Reports, presentations & working papers</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/Pres_May15_RWF.pdf">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Presentation on Uni Research's work on baseline specification of the RWF.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.jpg">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.jpg</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.jpg">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_10_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 10 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_15_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 15 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_tseries_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_tseries_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_tseries_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of the estimated wind forcing of an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Values comprise hourly-sampled magnitude and direction of the volume flux
through the rotor. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section>
<!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4 class="is-open">Search</h4>
<div class="cd-filter-content">
<input placeholder="Try file name..." type="search">
</div>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Information type</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="typeRadioButton" id="type-ALL" checked="" type="radio">
<label class="radio-label" for="type-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".type-D" name="typeRadioButton" id="type-D" type="radio">
<label class="radio-label" for="type-D">Data files</label>
</li>
<li>
<input class="filter" data-filter=".type-P" name="typeRadioButton" id="type-P" type="radio">
<label class="radio-label" for="type-P">Reports, presentations & working papers</label>
</li>
<li>
<input class="filter" data-filter=".type-S" name="typeRadioButton" id="type-S" type="radio">
<label class="radio-label" for="type-S">Software</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Work phase</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="phaseRadioButton" id="work_phase-ALL" checked="" type="radio">
<label class="radio-label" for="work_phase-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-B" name="phaseRadioButton" id="work_phase-B" type="radio">
<label class="radio-label" for="work_phase-B">Baseline</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-P" name="phaseRadioButton" id="work_phase-P" type="radio">
<label class="radio-label" for="work_phase-P">Post baseline</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Wind-farm topic</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="topicRadioButton" id="topic-ALL" checked="" type="radio">
<label class="radio-label" for="topic-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".topic-C" name="topicRadioButton" id="topic-C" type="radio">
<label class="radio-label" for="topic-C">Site characterisation</label>
</li>
<li>
<input class="filter" data-filter=".topic-L" name="topicRadioButton" id="topic-L" type="radio">
<label class="radio-label" for="topic-L">Layouts, wakes & loads</label>
</li>
<li>
<input class="filter" data-filter=".topic-M" name="topicRadioButton" id="topic-M" type="radio">
<label class="radio-label" for="topic-M">Management, operations & costs</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close">Close</a>
</div>
<!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Menu</a>
</main>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery-2.1.1.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery.mixitup.min.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/main.js"></script>
</body>
</html>