I've problem with my website. I'm getting webpage error on IE8/9:
Object doesn't support this property or method 'isotope' Line: 47 Char: 3 Code: 0
Here's code:
/*-----------------------------------------------------------------------------------
/*
/* Custom JS
/*
-----------------------------------------------------------------------------------*/
/* Start Document */
jQuery(document).ready(function($) {
/*----------------------------------------------------*/
/* Responsive Menu
/*----------------------------------------------------*/
// Create the dropdown bases
$("<select />").appendTo("#navigation");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Menu"
}).appendTo("#navigation select");
// Populate dropdowns with the first menu items
$("#navigation li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("#navigation select");
});
//make responsive dropdown menu actually work
$("#navigation select").change(function() {
window.location = $(this).find("option:selected").val();
});
/*----------------------------------------------------*/
/* Isotope Portfolio Filter
/*----------------------------------------------------*/
$(function() {
var $container = $('#portfolio-wrapper');
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 12 }
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 12 }
});
});
$container.isotope({
itemSelector : '.portfolio-item'
});
var $optionSets = $('#filters .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});
/*----------------------------------------------------*/
/* Back To Top Button
/*----------------------------------------------------*/
var pxShow = 300;//height on which the button will show
var fadeInTime = 400;//how slow/fast you want the button to show
var fadeOutTime = 400;//how slow/fast you want the button to hide
var scrollSpeed = 400;//how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() >= pxShow){
jQuery("#backtotop").fadeIn(fadeInTime);
}else{
jQuery("#backtotop").fadeOut(fadeOutTime);
}
});
jQuery('#backtotop a').click(function(){
jQuery('html, body').animate({scrollTop:0}, scrollSpeed);
return false;
});
/* End Document */
})();
What's wrong?
You need to define isotope function. Only then you can call it. I don't think isotope() is a built-in function.
In the below example, I am adding a function test() on h1 element and then calling it.
$('h1')
[<h1>Hello</h1>]
var a = $('h1')
a.test = function() {console.log(this);}
a.test()
[<h1>Hello</h1>]
Related
I'm using jquery isotope and the filter data work great by I also need to filter by href tags.
html
<a id="bmw" href="#bmw" data-filter=".bmw" class="btn btn-green">Bmw Car</a>
<a id="audi" href="#audi" data-filter=".audi" class="btn btn-green">Audi Car</a>
So when client enter in url : www.test.ro/#bmw It needs to filter only data for bmw car as is working when the button is clicked.
jquery
jQuery.noConflict()(function($)
{
var $container = $('#container-folio');
if ($container.length)
{
$container.waitForImages(function()
{
// initialize isotope
$container.isotope(
{
itemSelector: '.box',
layoutMode: 'fitRows'
});
// filter items when filter link is clicked
$('#filters a').click(function()
{
var selector = $(this).attr('data-filter');
$container.isotope(
{
filter: selector
});
$(this).removeClass('active').addClass('active').siblings().removeClass('active all');
return false;
});
}, null, true);
// hash code filter
$(window).load(function()
{
// Store # parameter and add "." before hash
var hashID = "." + window.location.hash.substring(1);
// console.log(hashID);
// the current version of isotope, the hack works in v2 also
if (hashID != '.form')
{
var $container = $('#container-folio');
$container.imagesLoaded(function()
{
$container.isotope(
{
itemSelector: ".box",
filter: hashID, // the variable filter hack
});
});
}
});
}
});
Tried the code above for filter hash but didn't worked, any ideas ?
I've multiple select box filters to filter data using jQuery isotope. I want to reset all the combinations on a button click.
I've tried the following code to reset this; but it only shows all the data and actually not resetting the filter options;
$('.reset').on('click', 'button', function () {
$('.grid').isotope({
filter: '*',
});
});
I am using following code for the select box filter working;
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'vertical'
});
var filters = {};
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
var $this = $(this);
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$('.grid').isotope({ filter: selector });
return false;
});
Please help me to reset all the combination filters on a button click.
Your grid is linked to the dropdowns in your script but not vice versa, hence when you reset the grid filter the dropdowns are not reset.
you can reset the dropdowns explicitly by setting them to *.
JS CODE:
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
$('.informativeSection').hide();
var isoFilters = [];
$('.option-set').each(function () {
var filter = $(this).val();
if (filter !== '*') {
isoFilters.push($(this).find(':selected').attr('data-filter'));
}
});
var selector = isoFilters.join('');
console.log('selector:' + selector);
$('.grid').isotope({
filter: selector
});
//show no documents message
if ($('.grid').data('isotope').filteredItems.length === 0) { $('.informativeSection').show(); }
return false;
});
$('.reset').on('click', 'button', function () {
$('.grid').isotope({
filter: '*',
});
//reset the dropdowns explicitly
$('.option-set').val('*');
});
Edits:
I have updated the filtered logic as well to accommodate reset functionality.
Added a informative message when no documents found for given filter.
Live Demo # JSFiddle:http://jsfiddle.net/dreamweiver/kfk4jzkL/8/
I have a website that displays various floor plans in different categories and the filter and sort from Isotope is perfect for displaying them. I have it working just fine but what I would like to do is add onhashchange so when they click on a floor plan and go to that page and then go back to the original page they don't lose the previous filters and sorts they have applied.
My problem is I have code that I can get the onhashchange to work with the filter but not the sort and I lose my onpageload filter. On initial page load I only want those plans which I have tagged with a class of all to show (this is really important).
I have a fiddle of for each, this is the fiddle with the onhashchange working on the filter but not the sort and I can not seem to get the element-items with the class of all to be the only ones that load on page load https://jsfiddle.net/h8gv9gh6/
$(document).ready( function(){
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol'
}
});
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
// 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');
});
});
});
// external js: isotope.pkgd.js
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
function getHashFilter() {
// get filter=filterName
var matches = location.hash.match( /filter=([^&]+)/i );
var hashFilter = matches && matches[1];
return hashFilter && decodeURIComponent( hashFilter );
}
$( function() {
var $grid = $('.grid');
// bind filter button click
var $filterButtonGroup = $('.filter-button-group');
$filterButtonGroup.on( 'click', 'button', function() {
var filterAttr = $( this ).attr('data-filter');
// set filter in hash
location.hash = 'filter=' + encodeURIComponent( filterAttr );
});
var isIsotopeInit = false;
function onHashchange() {
var hashFilter = getHashFilter();
if ( !hashFilter && isIsotopeInit ) {
return;
}
isIsotopeInit = true;
// filter isotope
$grid.isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
// use filterFns
filter: filterFns[ hashFilter ] || hashFilter
});
// set selected class on button
if ( hashFilter ) {
$filterButtonGroup.find('.is-checked').removeClass('is-checked');
$filterButtonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
}
}
$(window).on( 'hashchange', onHashchange );
// trigger event handler to init Isotope
onHashchange();
});
Here is my other fiddle where the sort and filter work as well as my onpageload filter of all but I have no onhashchange: https://jsfiddle.net/0kgavwud/
$( document ).ready( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol'
}
});
var PageLoadFilter = '.all';
$container.isotope({ filter: PageLoadFilter});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
// 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');
});
});
});
Is there a way to to get onhashchange working with sort and an initial page load filter?
Here is my JS fiddle that I am using to create expanding boxes for products:
http://jsfiddle.net/wpneily/vsnag7ja/
using this code:
var $container = $('#iso-container'),
$items = $('.item');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 60
},
getSortData : {
selected : function( $item ){
// sort by selected first, then by original order
return ($item.hasClass('selected') ? -500 : 0 ) + $item.index();
}
},
sortBy : 'selected'
})
$items.click(function(){
console.log('ee')
var $this = $(this);
// don't proceed if already selected
var $previousSelected = $('.selected');
if ( !$this.hasClass('selected') ) {
$this.addClass('selected');
}
$previousSelected.removeClass('selected');
// update sortData for new items size
$container
.isotope( 'updateSortData', $this )
.isotope( 'updateSortData', $previousSelected )
.isotope();
});
$('.noclick').click(function(e){
console.log('dd')
e.stopPropagation();
});
This works great except, if a user scrolls down and picks one of the boxes below the current "open" selection, the new selection open out of view up above. In other words the new selected product box in not in focus. I want a selected box to not only open but also scroll the page to the top of the container, in this case, id="iso-container". Can anyone please help.
Try adding following code at end of your $item.click handler:
$('html,body').animate({scrollTop: $("#iso-container").offset().top}, 'slow');
Updated your fiddle
I am wondering what is the issue with this fiddle: http://jsfiddle.net/GwBa8/150/
I want to change which category loads by default using different links without having to add extra pages to my site. The last working state is this fiddle http://jsfiddle.net/GwBa8/128/. The only difference is the following code added to the start of the jQuery.
//e.g. website.com/index/filter/games
var $criteria = '*';
var str = window.location.pathname;
//games
if (str.substring(str.lastIndexOf('#'))) {
var $criteria='.'+str.substring(str.lastIndexOf('#'));
} else {
var $criteria = '*';
}
Why does this code stop it working?
I would like to have something like www.website/index#games to load games by default.
Thanks!
You could do something like (untested!)
$(window).load(function(){
//e.g. website.com/index/filter/games
var str = window.location.pathname;
//games
var criteria=str.substring(str.lastIndexOf('/'));
var $container = $('.creations-container');
$container.isotope({
filter: '.' + 'criteria',
}
});
Based on #nchaud comment...
$(window).load(function(){
//e.g. website.com/index/filter#games
var str = document.URL;
//games
if ((str.lastIndexOf('#'))!== -1) {
var $criteria=str.substring(str.lastIndexOf('#'));
} else {
var $criteria = '#all';
}
This sets the variable $criteria to the matching id of the link for the category in the navigation.
var $container = $('.creations-container');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.creations-filter a').click(function(){
$('.creations-filter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
$($criteria).trigger("click");
this clicks on the element with the id in the url