Isotope - combination buttons and UI slider not working - javascript

I am trying to get Isotope plugin to filter with both cobination buttons and a UI slider but not sure how to go about doing it.
Can any one help me to acheve this.
Here is a link to my problem code pen test case
<h1>Isotope - combination filters</h1>
<div class="filters">
<div class="ui-group">
<h3>Color</h3>
<div class="button-group js-radio-button-group" data-filter-group="color">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".red">red</button>
<button class="button" data-filter=".blue">blue</button>
<button class="button" data-filter=".yellow">yellow</button>
</div>
</div>
<div class="ui-group">
<h3>Size</h3>
<div class="button-group js-radio-button-group" data-filter-group="size">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".small">small</button>
<button class="button" data-filter=".wide">wide</button>
<button class="button" data-filter=".big">big</button>
<button class="button" data-filter=".tall">tall</button>
</div>
</div>
<div class="ui-group">
<h3>Shape</h3>
<div class="button-group js-radio-button-group" data-filter-group="shape">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".round">round</button>
<button class="button" data-filter=".square">square</button>
</div>
</div>
<div class="sliders" data-filter-group="features">
<div class="noUi-target noUi-ltr noUi-horizontal noUi-background" id="slider-range"></div>
<span class="val" id="slider-range-value"></span>
</div>
</div>
<div class="grid">
<div class="color-shape small round red">180.00</div>
<div class="color-shape small round blue">195.00</div>
<div class="color-shape small round yellow">202.00</div>
<div class="color-shape small square red">235.00</div>
<div class="color-shape small square blue">240.00</div>
<div class="color-shape small square yellow">250.00</div>
<div class="color-shape wide round red">255.00</div>
<div class="color-shape wide round blue">275.00</div>
<div class="color-shape wide round yellow">285.00</div>
<div class="color-shape wide square red">290.00</div>
<div class="color-shape wide square blue">295.00</div>
<div class="color-shape wide square yellow">300.00</div>
<div class="color-shape big round red">300.00</div>
<div class="color-shape big round blue">300.00</div>
<div class="color-shape big round yellow">300.00</div>
<div class="color-shape big square red">300.00</div>
<div class="color-shape big square blue">180.00</div>
<div class="color-shape big square yellow">180.00</div>
<div class="color-shape tall round red">180.00</div>
<div class="color-shape tall round blue">180.00</div>
<div class="color-shape tall round yellow">255.00</div>
<div class="color-shape tall square red">255.00</div>
<div class="color-shape tall square blue">255.00</div>
<div class="color-shape tall square yellow">255.00</div>
</div>
$( function() {
// filter functions
var filterFns = {
greaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50.00;
},
even: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) % 2 === 0;
}
};
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.color-shape',
filter: function() {
var isMatched = true;
var $this = $(this);
for ( var prop in filters ) {
var filter = filters[ prop ];
// use function if it matches
filter = filterFns[ filter ] || filter;
// test each filter
if ( filter ) {
isMatched = isMatched && $(this).is( filter );
}
// break if not matched
if ( !isMatched ) {
break;
}
}
return isMatched;
}
});
// store filter for each group
var filters = {};
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// arrange, and use filter fn
$container.isotope('arrange');
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- button ---- */
.button {
display: inline-block;
padding: 0.5em 1.0em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.grid {
background: #EEE;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 32px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* color-shape */
.color-shape {
width: 70px;
height: 70px;
margin: 5px;
float: left;
}
.color-shape.round {
border-radius: 35px;
}
.color-shape.big.round {
border-radius: 75px;
}
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }
/* Functional styling for range slider;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
width: 62%;
margin-left: 20px;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* Fix 401 */
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 35px;
height: 26px;
left: -17px;
top: -5px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 35px;
height: 26px;
left: -6px;
top: -5px;
}
/* Styling;
*/
.noUi-background {
background: #EEE linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%;
box-shadow: inset 0 1px 1px #f0f0f0;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
.noUi-origin {
border-radius: 2px;
}
.noUi-target {
border-radius: 8px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-target.noUi-connect {
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: w-resize;
}
.noUi-vertical .noUi-draggable {
cursor: n-resize;
}
.noUi-handle {
border-radius: 8px;
background: #7D64B1;
cursor: grab;
}
.noUi-active {
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.8) inset;
cursor: grabbing;
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 19px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-origin,
[disabled] .noUi-handle {
cursor: not-allowed;
}
.val{
margin: 9px 0px 0px;
width: 8%;
display: block;
}
.color-shape{
text-indent:-9999px;
}
If any one can help it would be much appreciated.

Let’s give it a try. See my demo on CodePen
The trick is to use a filter function for Isotope. Rather than changing the filter, we can change the values used in the filter logic. For this demo, we have two values: the buttonFilter and the sliderValue. I’ve set the filter function to check if the item matches the buttonFilter AND has a text value that is greater than or equal to the sliderValue.
// external js: isotope.pkgd.js
$(document).ready( function() {
var sliderValue = 180;
// create the slider;
var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
start: [ 180 ],
range: {
'min': [ 180 ],
'max': [ 300 ]
}
});
// create the slider range value;
var rangeSliderValueElement = document.getElementById('slider-range-value');
rangeSlider.noUiSlider.on('update', function( values, handle ) {
rangeSliderValueElement.innerHTML = values[handle] + " cm";
});
// store filter for each group
var buttonFilters = {};
var buttonFilter = '*';
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.color-shape',
// use filter function
filter: function() {
var $this = $(this);
var isMinSize = parseFloat( $this.text() ) >= sliderValue;
return $this.is( buttonFilter ) && isMinSize;
}
});
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = $this.attr('data-filter');
// combine filters
buttonFilter = concatValues( buttonFilters ) || '*';
console.log( buttonFilter )
// set filter for Isotope
$grid.isotope();
});
// filter isotope on slider set
rangeSlider.noUiSlider.on( 'set', function( textValues, handle, values ) {
sliderValue = values[ handle ];
$grid.isotope();
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}

Related

Is there a way to make this Javascript list ouput result to show images instead of numbers?

I am struggling on how to make the result output into images like: image 1, image 2 so on... Is there way to store all those images in the javascript and then show them on the result?
Here's the script of what i am talking about, please bear with me, i am learning and i am not an expert.
function proRangeSlider(sliderid, outputid, colorclass) {
var x = document.getElementById(sliderid).value;
document.getElementById(outputid).innerHTML = x;
document.getElementById(sliderid).setAttribute('class', colorclass);
updateTotal();
}
var total = 0;
function updateTotal() {
var list= document.getElementsByClassName("range");
[].forEach.call(list, function(el) {
console.log(el.value);
total += parseInt(el.value);
});
document.getElementById("n_total").innerHTML = total;
}
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form').submit('click', function() {
$(this).hide();
$('html, body').animate({
scrollTop: $("#anchor").offset().top
}, 500);
$("#result").empty().append(
"<ul>" + Object.entries($('form').serializeObject()).map(e => `<li>${e[0]}: ${e[1]}`).join("") + "</ul>");
$(".hidden-block").show();
return false;
});
});
$(document).ready(function(){
$("#reset").click(function(){
location.reload(true);
});
});
Here's my project in case you would like to view the source: https://jsfiddle.net/archer201977/h9f6r21u/6/
I'm not sure what you mean by 'image' here, but maybe you want to display the slider within div#result?
Your code has some issues. To educate and entertain 😊 I've created a minimal reproducable example, presuming that by 'image' you mean the actual sliders. It
does not use jQuery
does not use inline event handling
does use event delegation
uses data attributes to be able to pass some state values etc.
document.addEventListener(`change`, handle);
updateTotal();
function handle(evt) {
if (evt.target.dataset.inputstate) {
return displayResult(evt.target);
}
}
function displayResult(origin) {
proRangeSlider(origin, ...origin.dataset.inputstate.split(`,`));
let totalValues = [];
document.querySelectorAll(`[data-inputstate]`).forEach(range => {
const rangeClone = createClone(range);
totalValues.push(`<li><div>${rangeClone}</div><div>${
range.dataset.name}: ${range.value}</div></li>`);
});
totalValues.push(`<li><div><b>Total: ${
document.querySelector(`#n_total`).textContent}</b></div></li>`);
document.querySelector(`#result`).innerHTML = `<ul>${totalValues.join(``)}</ul>`;
}
function createClone(fromRange) {
const clone = fromRange.cloneNode();
clone.setAttribute(`value`, fromRange.value);
clone.id = ``;
clone.removeAttribute(`data-inputstate`);
return clone.outerHTML;
}
function proRangeSlider(origin, outputId, colorclass) {
origin.closest(`div`).querySelector(`#${outputId}`).textContent = origin.value;
origin.setAttribute('class', colorclass);
updateTotal();
}
function updateTotal() {
let total = 0;
[...document.querySelectorAll(`[data-inputstate]`)]
.forEach(elem => total += +elem.value);
document.getElementById("n_total").textContent = total;
}
body,
html {
margin: 10px;
}
#proRangeSlider {
border: 1px solid #CCC;
padding: 0;
}
div {
background: #f1f1f1;
border-bottom: 1px dotted #666;
padding: 2px 0px;
}
div:last-child {
border: none;
}
input {
-webkit-appearance: none;
width: 160px;
height: 15px;
background: linear-gradient(to right, #16a085 0%, #16a085 100%);
background-size: 150px 10px;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
vertical-align: middle;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #27ae60;
position: relative;
z-index: 3;
}
#total {
padding-left: 7px;
}
.blue::-webkit-slider-thumb {
background: #2980b9;
}
.orange::-webkit-slider-thumb {
background: #d35400;
}
#result {
margin-bottom: 0;
border: none;
padding: 5px;
background-color: transparent;
}
#result ul {
margin-left: -1.5rem;
}
#result ul li div {
display: inline-block;
vertical-align: middle;
background-color: transparent;
border: none;
padding: 0 3px;
}
#result ul li div input[type=range] {
height: auto;
margin-left: -0.4rem;
}
#result ul li {
text-align: left;
}
<div id="proRangeSlider">
<div id="total">TOTAL: <span id="n_total"></span></div>
<div>
<input type="range" data-name="Cost per day" class="range orange" value="20" data-inputstate="output1,orange">
<output id="output1">20</output>
</div>
<div>
<input type="range" data-name="Number of days" value="50" class="blue range" data-inputstate="output2,blue">
<output id="output2">50</output>
</div>
</div>
<div id="result"></div>
But ... you meant to create an image from some number, ok. This snippet may help. It uses an image sprite for the numbers.
const createNumber = nr => {
const numbers = `zero,one,two,three,four,five,six,seven,eight,nine`
.split(`,`);
return [...`${nr}`]
.map(n => `<div class="number ${numbers[n]}"></div>`)
.join(``);
}
const example = nr => document.body.insertAdjacentHTML(
`beforeend`,
`<div class="example">${nr} => ${createNumber(nr)}</p>`);
example(1234567890);
example(233);
example(732);
example(1854);
example(42);
.example {
height: 32px;
}
.example .number {
vertical-align: middle;
}
.number {
background-image: url('//sdn.nicon.nl/tests/numbers.png');
background-repeat: no-repeat;
width: 14px;
height: 16px;
display: inline-block;
border: 1px solid #aaa;
padding: 1px;
margin: 0 1px
}
.number.zero {
background-position: 3px 1px;
}
.number.one {
background-position: -25px 1px;
}
.number.two {
background-position: -51px 1px
}
.number.three {
background-position: -77px 1px
}
.number.four {
background-position: -103px 1px
}
.number.five {
background-position: -129px 1px
}
.number.six {
background-position: -155px 1px
}
.number.seven {
background-position: -183px 1px
}
.number.eight {
background-position: -209px 1px
}
.number.nine {
background-position: -235px 1px
}

Packery - Adding element by jquery click

I am intending to create a set of textboxes that can be rearranged. The user is to be allowed to create text boxes and then fill them with text.
As he keeps rearranging them the text gets automatically updated in the textarea.
I am using packery library
// external js: packery.pkgd.js, draggabilly.pkgd.js
$("#add_item").click(function(){
$("#grid").append("<input type='text' class='grid-item'></input>");
});
var $grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100
});
// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem );
// bind drag events to Packery
$grid.packery( 'bindDraggabillyEvents', draggie );
});
// show item order after layout
function orderItems() {
var itemElems = $grid.packery('getItemElements');
var res_text = '';
$( itemElems ).each( function( i, itemElem ) {
res_text = ' '+$(itemElem).text();
});
$('#result_text').text(res_text);
}
$grid.on( 'layoutComplete', orderItems );
$grid.on( 'dragItemPositioned', orderItems );
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #C09;
border: 2px solid hsla(0, 0%, 0%, 0.5);
color: white;
font-size: 20px;
padding: 10px;
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
.grid-item:hover {
border-color: hsla(0, 0%, 100%, 0.5);
cursor: move;
}
.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
background: #C90;
z-index: 2;
}
.packery-drop-placeholder {
outline: 3px dashed hsla(0, 0%, 0%, 0.5);
outline-offset: -6px;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/packery#2.1.1/dist/packery.pkgd.js"></script>
<script src="https://unpkg.com/draggabilly#2.1.1/dist/draggabilly.pkgd.js"></script>
<h1>Packery - get item elements in order after drag</h1>
<button id="add_item" class="ui-button ui-widget ui-corner-all">A button element</button>
<div class="grid">
<input type="text" class="grid-item"></input>
<input type="text" class="grid-item"></input>
<input type="text" class="grid-item"></input>
</div>
<textarea id="result_text" readonly></textarea>
However, I can not add boxes at will using the Button
You should use class grid instead :
$(".grid").append("<input type='text' class='grid-item'/>");
Instead of :
$("#grid").append("<input type='text' class='grid-item'></input>");
Then you should destroy and reinit the packery after adding new grid-item.
NOTE : input tag is a sel-closing tag so it should be :
<input type='text' class='grid-item'/>
Hope this helps.
// external js: packery.pkgd.js, draggabilly.pkgd.js
$("#add_item").click(function() {
$(".grid").append("<input type='text' class='grid-item'/>");
grid.packery('destroy');
grid = initParckery();
});
function initParckery() {
var grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100
});
// make all grid-items draggable
grid.find('.grid-item').each(function(i, gridItem) {
var draggie = new Draggabilly(gridItem);
// bind drag events to Packery
grid.packery('bindDraggabillyEvents', draggie);
});
return grid;
}
// show item order after layout
function orderItems() {
setTimeout(function() {
var res_text = '';
var items = grid.packery('getItemElements');
items.forEach(function(itemElem) {
res_text += ' ' + $(itemElem).val();
});
$('#result_text').val(res_text);
}, 100)
}
var grid = initParckery();
grid.on('layoutComplete', orderItems);
grid.on('dragItemPositioned', orderItems);
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #C09;
border: 2px solid hsla(0, 0%, 0%, 0.5);
color: white;
font-size: 20px;
padding: 10px;
}
.grid-item--width2 {
width: 200px;
}
.grid-item--height2 {
height: 200px;
}
.grid-item:hover {
border-color: hsla(0, 0%, 100%, 0.5);
cursor: move;
}
.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
background: #C90;
z-index: 2;
}
.packery-drop-placeholder {
outline: 3px dashed hsla(0, 0%, 0%, 0.5);
outline-offset: -6px;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/packery#2.1.1/dist/packery.pkgd.js"></script>
<script src="https://unpkg.com/draggabilly#2.1.1/dist/draggabilly.pkgd.js"></script>
<h1>Packery - get item elements in order after drag</h1>
<button id="add_item" class="ui-button ui-widget ui-corner-all">A button element</button>
<div class="grid">
<input type="text" class="grid-item a"></input>
<input type="text" class="grid-item b"></input>
<input type="text" class="grid-item c"></input>
</div>
<textarea id="result_text" readonly></textarea>
It looks like you have an element with class grid, but in your JS, you are grabbing an element with id of grid.
For the fix, change your JS from grabbing the id to grabbing the class:
$("#add_item").click(function(){
$(".grid").append("<input type='text' class='grid-item' />");
});

Flip Effect without Transform or Rotate

I stumbple upon this Javascript flip effect page.
When I inspect its obfuscated source code, I can not find css property transform or rotate .
I want to know how the flip effect is achieved. What CSS properties are involved?
$(document).ready(function() {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').click(function() {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
} else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function() {
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
body {
/* Setting default text color, background and a font stack */
font-size: 0.825em;
color: #666;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.sponsorListHolder {
margin-bottom: 30px;
}
.sponsor {
width: 180px;
height: 180px;
float: left;
margin: 4px;
/* Giving the sponsor div a relative positioning: */
position: relative;
cursor: pointer;
}
.sponsorFlip {
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
background: url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover {
border: 1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow: 0 0 30px #999 inset;
-webkit-box-shadow: 0 0 30px #999 inset;
box-shadow: 0 0 30px #999 inset;
}
.sponsorFlip img {
/* Centering the logo image in the middle of the .sponsorFlip div */
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -70px;
}
.sponsorData {
/* Hiding the .sponsorData div */
display: none;
}
.sponsorDescription {
font-size: 11px;
padding: 50px 10px 20px 20px;
font-style: italic;
}
.sponsorURL {
font-size: 10px;
font-weight: bold;
padding-left: 20px;
}
.clear {
/* This class clears the floats */
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/jquery.flip.min.js"></script>
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="data:image/png;base64,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">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
http://www.google.com/
</div>
</div>
</div>
It's a jQuery plugin they use to achieve this result. It's called jquery.flip.min.js 😉
• Here is a more legible version of their JavaScript code:
eval(function(p, a, c, k, e, r) {
e = function(c) {
return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
};
if (!''.replace(/^/, String)) {
while (c--) r[e(c)] = k[c] || e(c);
k = [
function(e) {
return r[e]
}
];
e = function() {
return '\\w+'
};
c = 1
};
while (c--)
if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
return p
}('(5($){5 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*#1O!#*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))

Empty array in form with button click and dynamic input positioning

I have a form that I am using to calculate the sum and average of an array of numbers. I am using a button to trigger the form to appear and then users can add extra input fields to enter as many values as they wish. When they click the 'Calc' button, they receive an alert of the sum and average. This much is working fine. The problem is when I click the trigger again to close and then to reopen the form, the same number of input fields as the user selected appear and, despite having been able to clear their values, I have not been able to empty the associated array. Thus, when the user inputs values the second time and attempts to perform the calculation, the previous values are being added to these new ones.
On top of this, I would like for the the dynamically added inputs to appear one on top of the other and for the '.remove-field' div (or at least the icon it contains) to appear to the right of each input field. I have tried various display values, positioning, etc. but nothing seems to produce a consistent look.
Here is my HTML markup:
<button class="form-launch" data-icon="&#xe17f">AVG</button>
<div class="form-space">
<form role="form" action="/wohoo" method="POST" class="form-add-remove">
<label class="label">Average Calculation</label>
<div id="horizontal_bar"></div>
<div class="multi-field-wrapper">
<div class="add-field"><i class="fa fa-plus-circle"></i></div>
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]" class="input-field"/>
<div class="remove-field"><i class="fa fa-minus-circle"></i></div>
</div>
</div>
</div>
<button type="button" class="check">Calc</button>
</form>
</div>
My CSS:
.form-launch {
position: absolute;
top: 20px;
left: 20px;
}
.form-space {
opacity: 0;
}
.form-add-remove {
font-family: "DJB Chalk It Up";
color: #FFF;
font-size: 30px;
width: 600px;
height: 300px;
padding: 20px;
border: 2px solid #FFF;
border-radius: 25px;
box-shadow: 0px 0px 10px 5px #000;
background: transparent url("http://mrlambertsmathpage.weebly.com/files/theme/blackboard.jpeg") repeat-y scroll left center;
text-align: center;
vertical-align: middle;
display: inline-flex;
-moz-box-pack: center;
justify-content: center;
align-items: center;
-moz-box-orient: vertical;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -125px;
display: inline-block;
}
.label {
position: absolute;
top: 20px;
left: 20px;
}
#horizontal_bar {
position: absolute;
top: 60px;
left: 0px;
width: 95%;
height: 4px;
border-radius: 2px;
background: #00A2E8 none repeat scroll 0% 0%;
margin: 2.5%;
box-shadow: 0px 0px 6px 3px #000, 0px 0px 1px #000 inset;
}
.multi-field-wrapper {
height: 130px;
width: 90%;
padding: 20px;
margin-left: 0px;
margin-top: 80px;
border: 2px dashed rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 1.5s ease-in-out 0.5S;
overflow-y: scroll;
}
.multi-field-wrapper:hover {
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 1.5s ease-in-out 0s;
}
.multi-field {
display: inline-block;
}
.add-field {
position: absolute;
right: 20px;
bottom: 20px;
}
i {
color: #00a2e8;
}
.calc {
position: absolute;
left: 20px;
bottom: 20px;
}
input {
font-family: "Borders Divide, But Hearts Shall Conquer";
border-radius: 5px;
border: 2px inset rgba(0, 0, 0, 0.4);
width: 100px;
text-align: right;
padding-right: 10px;
}
And my jQuery:
var launchCount = 0;
var arr = [],
sum = 0;
$('.form-launch').click(function() {
launchCount++;
if ((launchCount % 2) == 1) {
$('.form-space').css('opacity', '1');
// Initialize Average Form
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
$(".calc").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
});
// End Average Form
} else if ((launchCount % 2) == 0) {
$('.form-space').css('opacity', '0');
$('.form-add-remove').find("input[type=text]").val('');
if ($('.multi-field', $wrapper).length > 1) {
$(this).parent('.multi-field').remove(); // does not seem to work!
}
arr = []; // also does not seem to work
}
});
I have commented a few lines at the bottom of my jQuery to illustrate what I have tried. I also looked at setting the array length to 0, but I was not able to get that to work either.
Obviously, this is a work in progress. My jsfiddle is here: http://jsfiddle.net/e3b9bopz/77/
Can you try this?
$(".calc").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
arr = []; # How about putting your reset here?
sum = 0; # reinitialized the sum
});
I think you need to reset the arr after you make a calculation.
Not exactly what you need, but move $(".check").click out of $('.form-launch').click, and wrap the whole thing in a jquery ready.
$(function() {
$(".check").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
arr = [];
});
})
JSFiddle

Isotope: Create warning if search and filter doesn't give back any result

I have written an extension for TYPO3. Now i have a problem. Can anyone tell me what i have to do if i want to display a custom warning text-message as soon as the searchstring or dropdown-filter doesn't give back any results? Something like:
"Sorry - we can't find any entries with this search filters!"
Currently my code is looking like this:
// Isotope Steinlexikon
$(function() {
var $container = $('#lexikon-masonry'),
$select = $('#lexikon-filter select'),
filters = {};
var qsRegex;
var SelectFilter = '*';
$container.isotope({
itemSelector: '.item',
// Filter mit Suchfeld
filter: function() {
var $this = $(this);
var SerRes = qsRegex ? $(this).text().match( qsRegex ) : true;
var SelRes = $(this).is(SelectFilter);
return SerRes && SelRes;
}
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
//fancybox
$('.fancybox2').on('click', function(e){
e.preventDefault(); // Default action ausschalten
$.fancybox({
//width: 500,
//height: 400,
autoSize: true,
href: $(this).attr('href'),
type: 'ajax'
});
});
// Filter mit Select Form
$select.change(function() {
var $this = $(this);
// store filter value in object
// i.e. filters.color = 'red'
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter-value');
// console.log( $this.find(':selected') )
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
console.log(filters);
SelectFilter = isoFilters.join('');
$container.isotope();
return false;
});
});
#lexikon-masonry .item {
margin: 5px;
padding: 5px;
background: #fff;
border: 1px #ccc solid;
float: left;
-moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
}
#lexikon-masonry .item img {
opacity: 1;
}
#lexikon-masonry .item:hover img {
opacity: 0.5;
}
#lexikon-masonry .image-hover #image-caption {
position: relative;
width: 100%;
text-align: center;
bottom: 0px;
background: #fff;
z-index: 1;
opacity: 1;
text-transform: uppercase;
}
#lexikon-masonry .image-hover:hover #image-caption {
opacity: 0.8;
}
#lexikon-masonry .image-hover #image-caption span {
text-transform: none;
}
#lexikon-masonry .image-hover .img-button-link {
position: absolute;
/*left: 50%;
top: 50%;*/
margin-left: 110px;
margin-top: -125px;
opacity: 0;
}
#lexikon-masonry .image-hover:hover .img-button-link {
opacity: 1;
}
div#lexikon-filter {
position:left;
}
div.lexStyled {
float: left;
margin-right: 20px;
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
background: white url(../images/select-down.png) no-repeat bottom right;
/* this is the new drop button, in image form */
width:12em;
border-radius:2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border: solid 1px #ccc;
}
div.lexStyled select {
width:115% /* this percentage effectively extends the drop down button out of view */;
background-color:transparent /* this hides the select's background making any styling visible from the div */;
background-image:none;
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div class="row">
<div id="lexikon-suche" class="col span_3">
<input class="form-control" type="text" data-filter-value="" id="quicksearch" placeholder="Durchsuchen" />
</div>
<div id="lexikon-filter" class="col span_9">
<div class="lexStyled">
<select data-filter-group="gestein">
<option data-filter-value="*" class="selected">Alle Gesteine</option>
<option data-filter-value=".lagersteine" class="selected">Lagersteine</option>
<option data-filter-value=".kunststeine" class="selected">Kunststeine</option>
</select>
</div>
<div class="lexStyled">
<select data-filter-group="farbe">
<option data-filter-value="*" class="selected">Alle Farben</option>
<option data-filter-value=".rot" class="selected">Rot</option>
<option data-filter-value=".gelb" class="selected">Gelb</option>
</select>
</div>
</div>
</div>
<br><hr><br>
<div class="row">
<div id="lexikon-masonry" class="col span_12">
<div class="item image-hover lagersteine rot gelb">
<div id="image-caption" class="name">Test1</div>
</div>
<div class="item image-hover kunststeine rot">
<div id="image-caption" class="name">Test2</div>
</div>
<div class="item image-hover lagersteine kunststeine gelb">
<div id="image-caption" class="name">Test3</div>
</div>
</div>
</div>
I did not come through the examples given in these answers (jQuery Isotope filter to no items?). It does not work for me.
Thx for your help
You can get Isotope instance like this
$container.data('isotope')
And this has property $filteredAtoms, which holds filtered items. So to get count, use this:
var visibleItemsCount = $container.data('isotope').$filteredAtoms.length;
For V2
var visibleItemsCount = $container.data('isotope').filteredItems.length;
And after filtering, check for visible items. If has some, hide message, show otherwise.
// Function to check if filters have some results
function checkResults(){
var visibleItemsCount = $container.data('isotope').$filteredAtoms.length;
if( visibleItemsCount > 0 ){
$('.no-results').hide();
}
else{
$('.no-results').show();
}
}
// Isotope Steinlexikon
$(function() {
var $container = $('#lexikon-masonry'),
$select = $('#lexikon-filter select'),
filters = {};
var qsRegex;
var SelectFilter = '*';
$container.isotope({
itemSelector: '.item',
// Filter mit Suchfeld
filter: function() {
var $this = $(this);
var SerRes = qsRegex ? $(this).text().match( qsRegex ) : true;
var SelRes = SelectFilter == '' || $(this).is(SelectFilter);
return SerRes && SelRes;
}
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
checkResults();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
// Function to check if filters have some results
function checkResults(){
var visibleItemsCount = $container.data('isotope').$filteredAtoms.length;
console.log(filters);
if( visibleItemsCount > 0 ){
$('.no-results').hide();
}
else{
$('.no-results').show();
}
}
//fancybox
$('.fancybox2').on('click', function(e){
e.preventDefault(); // Default action ausschalten
$.fancybox({
//width: 500,
//height: 400,
autoSize: true,
href: $(this).attr('href'),
type: 'ajax'
});
});
// Filter mit Select Form
$select.change(function() {
var $this = $(this);
// store filter value in object
// i.e. filters.color = 'red'
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter-value');
// console.log( $this.find(':selected') )
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
if( filters[ prop ] != '*' ){
isoFilters.push( filters[ prop ] )
}
}
SelectFilter = isoFilters.join('');
$container.isotope();
checkResults();
return false;
});
});
#lexikon-masonry .item {
margin: 5px;
padding: 5px;
background: #fff;
border: 1px #ccc solid;
float: left;
-moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
}
#lexikon-masonry .item img {
opacity: 1;
}
#lexikon-masonry .item:hover img {
opacity: 0.5;
}
#lexikon-masonry .image-hover #image-caption {
position: relative;
width: 100%;
text-align: center;
bottom: 0px;
background: #fff;
z-index: 1;
opacity: 1;
text-transform: uppercase;
}
#lexikon-masonry .image-hover:hover #image-caption {
opacity: 0.8;
}
#lexikon-masonry .image-hover #image-caption span {
text-transform: none;
}
#lexikon-masonry .image-hover .img-button-link {
position: absolute;
/*left: 50%;
top: 50%;*/
margin-left: 110px;
margin-top: -125px;
opacity: 0;
}
#lexikon-masonry .image-hover:hover .img-button-link {
opacity: 1;
}
.no-results{
display:none;
}
div#lexikon-filter {
position:left;
}
div.lexStyled {
float: left;
margin-right: 20px;
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
background: white url(../images/select-down.png) no-repeat bottom right;
/* this is the new drop button, in image form */
width:12em;
border-radius:2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border: solid 1px #ccc;
}
div.lexStyled select {
width:115% /* this percentage effectively extends the drop down button out of view */;
background-color:transparent /* this hides the select's background making any styling visible from the div */;
background-image:none;
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div class="row">
<div id="lexikon-suche" class="col span_3">
<input class="form-control" type="text" data-filter-value="" id="quicksearch" placeholder="Durchsuchen" />
</div>
<div id="lexikon-filter" class="col span_9">
<div class="lexStyled">
<select data-filter-group="gestein">
<option data-filter-value="*" class="selected">Alle Gesteine</option>
<option data-filter-value=".lagersteine" class="selected">Lagersteine</option>
<option data-filter-value=".kunststeine" class="selected">Kunststeine</option>
</select>
</div>
<div class="lexStyled">
<select data-filter-group="farbe">
<option data-filter-value="*" class="selected">Alle Farben</option>
<option data-filter-value=".rot" class="selected">Rot</option>
<option data-filter-value=".gelb" class="selected">Gelb</option>
</select>
</div>
</div>
</div>
<br><hr><br>
<div class="row">
<div id="lexikon-masonry" class="col span_12">
<div class="item image-hover lagersteine rot gelb">
<div id="image-caption" class="name">Test1</div>
</div>
<div class="item image-hover kunststeine rot">
<div id="image-caption" class="name">Test2</div>
</div>
<div class="item image-hover lagersteine kunststeine gelb">
<div id="image-caption" class="name">Test3</div>
</div>
</div>
<div class="no-results">Sorry - we can't find any entries with this search filters!</div>
</div>
If you are using Isotope v3, here is a solution that worked for me.
$grid = isotope container
var $grid = $('.grid').isotope({...});
#no-results container
<div id="no-results">No results found.</div>
Check if no results on 'arrangeComplete'
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
if (filteredItems.length === 0) {
$('#no-results').show();
} else {
$('#no-results').hide();
}
});
Refer to Isotope docs for vanilla Javascript example:
https://isotope.metafizzy.co/events.html

Categories